/*
  STEWARD WEBSITE SUPPORT
  Page-specific visual treatments only. Shared containers, columns, gaps,
  alignment, section spacing, typography, colors, cards, testimonials,
  navigation, footer, and contact CTA live in the shared system files.
*/

.website-support-page {
  --website-support-featured-text: #a9ccd1;
  min-width: 20rem;
  overflow-x: hidden;
}

/* Hero artwork: intentionally oversized so it bleeds beyond the shared grid. */
.website-support-hero__art {
  min-height: clamp(20rem, 31vw, 31rem);
  place-items: stretch;
}

.website-support-hero__art img {
  width: 118%;
  max-width: none;
  height: 100%;
  max-height: none;
  justify-self: start;
  object-fit: cover;
  object-position: center;
}

/* Support-response cards */
.website-support-feature-card {
  min-height: 100%;
  align-content: start;
  border-color: transparent;
  background: var(--color-ink);
  color: var(--color-cream);
}

.website-support-feature-card :is(h3, h4) {
  color: var(--color-gold-light);
}

.website-support-feature-card p {
  color: var(--color-cream);
}

.website-support-feature-icon {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
}

/* Retainer plans */
.website-support-plan {
  min-height: 100%;
  border-color: transparent;
  background: var(--color-service-surface);
}

.website-support-plan__price {
  color: var(--color-ink);
}

.website-support-plan__list {
  margin: 0;
  padding-left: 1.25rem;
}

.website-support-plan__list li::marker {
  color: var(--color-gold);
}

.website-support-plan__action {
  margin-top: auto;
  padding-top: var(--gap-sm);
}

.website-support-plan--featured {
  margin-block: -1.5rem;
  padding-block: calc(clamp(1.5rem, 3vw, 2.5rem) + 1.5rem);
  background: var(--color-ink);
  color: var(--website-support-featured-text);
}

.website-support-plan--featured :is(.eyebrow, h3, li) {
  color: var(--website-support-featured-text);
}

.website-support-plan--featured .website-support-plan__price {
  color: var(--website-support-featured-text);
}

.website-support-plan--featured .website-support-plan__list li::marker {
  color: var(--website-support-featured-text);
}

.website-support-plan--featured .button {
  background: var(--color-gold);
  color: var(--color-ink);
}

.website-support-plan--featured .button:hover,
.website-support-plan--featured .button:focus-visible {
  background: var(--color-gold-light);
  color: var(--color-ink);
}

/* Package-inclusions artwork */
.website-support-solution-art {
  margin: 0;
}

.website-support-solution-art img {
  width: min(100%, 72rem);
  margin-inline: auto;
}

@media (max-width: 48rem) {
  .website-support-hero__art {
    min-height: clamp(16rem, 78vw, 24rem);
  }

  .website-support-hero__art img {
    width: 108%;
  }

  .website-support-plan--featured {
    margin-block: 0;
    padding-block: clamp(1.5rem, 3vw, 2.5rem);
  }
}