/**
 * Services page styles.
 * Loaded only on /services/ — page-specific styles that do not belong in site.css.
 *
 * Relies on site.css for: custom properties, section system, buttons, skip-link,
 * nav, footer, service-card component, and all shared utilities.
 */

/* ==========================================================================
   Hero Section
   ========================================================================== */

/**
 * Hero layout strategy:
 *
 * Desktop (1025px+): half-bleed. Image is absolutely positioned on the right 65%
 * of the section, flush to all four section edges. Text column occupies the left
 * 35% and drives the section height. Section vertical padding is zeroed and moved
 * onto .hero__content so the image can reach the section's top and bottom edges.
 *
 * Laptop (≤1024px): text widens to 40%, image shrinks to 60% to protect line
 * length at narrower viewports.
 *
 * Mobile (≤768px): full bleed. Image fills the entire section. A gradient
 * overlay fades from the section background color (top, where text lives) to
 * semi-transparent (bottom), ensuring text contrast without a heavy uniform tint.
 *
 * The container's margin-left and padding-left are both reset to 0. Text column
 * uses a simple var(--space-md) left gutter — the column is already a fixed
 * percentage of the viewport so no container-edge simulation is needed.
 */
.services-hero {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  min-height: 85vh;
}

/* Image — absolutely positioned, right 65% at desktop */
.hero__image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 65%;
  z-index: 0;
}

.hero__image picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

/* Container — sits above the image, fills section height and centers text vertically */
.services-hero .section__container {
  position: relative;
  z-index: 1;
  max-width: none;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
  min-height: inherit;
  display: flex;
  align-items: center;
}

/* Text column — 35% width, vertical padding replaces the zeroed section padding */
.hero__content {
  width: 35%;
  padding-top: var(--section-padding-desktop);
  padding-bottom: var(--section-padding-desktop);
  padding-left: var(--space-md);
  padding-right: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Remove default bottom margins — flex gap handles spacing */
.hero__content .section__heading,
.hero__content .section__lead {
  margin-bottom: 0;
}

/* --- Hero responsive --- */

/* Laptop: widen text column back to 40% to protect line length at narrower viewport */
@media (max-width: 1024px) {
  .hero__image {
    width: 60%;
  }

  .hero__content {
    width: 40%;
    padding-top: var(--section-padding-laptop);
    padding-bottom: var(--section-padding-laptop);
  }
}

/**
 * Tablet and below: full bleed.
 * Image expands to fill the entire section. A gradient overlay (::after) fades
 * from the dark background color at the top to semi-transparent at the bottom,
 * keeping text readable without hiding the illustration.
 */
@media (max-width: 768px) {
  .hero__image {
    width: 100%;
  }

  /* Gradient overlay — dark at top (behind text), opens up toward bottom */
  .services-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to bottom,
      var(--color-bg-dark) 0%,
      color-mix(in srgb, var(--color-bg-dark) 82%, transparent) 45%,
      color-mix(in srgb, var(--color-bg-dark) 45%, transparent) 100%
    );
    pointer-events: none;
  }

  /* Container and content sit above the overlay */
  .services-hero .section__container {
    z-index: 2;
  }

  .hero__content {
    width: 100%;
    padding-top: var(--section-padding-tablet);
    padding-bottom: var(--section-padding-tablet);
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

/* Mobile */
@media (max-width: 480px) {
  .hero__content {
    padding-top: var(--section-padding-mobile);
    padding-bottom: var(--section-padding-mobile);
  }
}

/* ==========================================================================
   Service Ladder Summary Section
   ========================================================================== */

/* Context note — appears between heading and universal step */
.service-ladder__context {
  text-align: center;
  color: var(--color-text-muted-dark);
  font-size: var(--font-size-small);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto var(--space-xl);
}

/* Universal step — centered, full-width above both path columns */
.service-ladder__universal {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-xl);
}

/* Base card styles shared by all step variants */
.service-ladder__step {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.03);
}

/* Universal step card — centered column layout, max-width to keep it compact */
.service-ladder__step--universal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 520px;
  width: 100%;
  border-color: rgba(255, 106, 0, 0.25);
  background-color: rgba(255, 106, 0, 0.05);
}

/* Numbered steps within .service-ladder__steps — flex row: number + body */
.service-ladder__steps .service-ladder__step {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

/* Step number — orange circle (numbered) */
.service-ladder__step-number {
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  font-size: var(--font-size-small);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15em;
}

/* Marker variant — filled dot, no number, signals non-sequential steps */
.service-ladder__step-number--marker {
  border-color: rgba(255, 106, 0, 0.2);
  background-color: rgba(255, 106, 0, 0.15);
}

/* Step body — content area holding title, badge, description */
.service-ladder__step-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Step title — plain label, not a heading */
.service-ladder__step-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
  color: var(--color-text-light);
}

.service-ladder__step-title a {
  color: inherit;
  text-decoration: none;
}

.service-ladder__step-title a:hover,
.service-ladder__step-title a:focus {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Step description */
.service-ladder__step-description {
  font-size: var(--font-size-small);
  color: var(--color-text-muted-dark);
  margin: 0;
  line-height: 1.6;
}

/* Path grid — two equal columns at desktop/tablet */
.service-ladder__paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

/* Path column */
.service-ladder__path {
  display: flex;
  flex-direction: column;
}

/* Path label — visible column title */
.service-ladder__path-label {
  font-size: var(--font-size-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin: 0 0 var(--space-sm);
}

/* Steps list — reset <ol> styles */
.service-ladder__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/**
 * Badge — matches .process-step__badge visual treatment from
 * starter-website-packages.css (display, padding, colors, border, typography).
 */

/**
 * Extra vertical breathing room when the badge appears inside a step body.
 * The step body uses gap: var(--space-xs) between all children, which gives
 * the badge the same spacing as surrounding text. A small margin nudge adds
 * just enough separation to make the badge read as a distinct label rather
 * than inline content.
 */
.service-ladder__step-body .badge {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}

.badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  background-color: var(--tint-primary-soft);
  border: 1px solid var(--tint-primary-edge);
  border-radius: 4px;
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-primary);
  align-self: flex-start;
}

/* --- Service Ladder responsive --- */

/* Single column at tablet and below — Path 1 stacked above Path 2 */
@media (max-width: 768px) {
  .service-ladder__paths {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* ==========================================================================
   Service Groups — section separators
   ========================================================================== */

/**
 * Edge-faded hairline between the stacked dark groups.
 *
 * Every group now shares the ink canvas, so consecutive bands have no visible
 * boundary. A 1px line in the inter-section gap restores that separation. The
 * line is a gradient (not a border) so it can taper to nothing before the
 * viewport edges — a hard edge-to-edge rule reads boxy on a dark page.
 *
 * Colour anchors on --border-hairline-light (≈10% cream on ink); the gradient
 * holds that value across the centre 60% and fades over the outer 20% each side.
 * Placed at the TOP of each section so it sits on the seam with the section
 * above (the service-ladder for the first group; the previous group otherwise).
 * #contact carries the same rule so the final group→contact seam matches.
 */
.service-group,
#contact.section--dark {
  position: relative;
}

.service-group::before,
#contact.section--dark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--border-hairline-light) 20%,
    var(--border-hairline-light) 80%,
    transparent
  );
  pointer-events: none;
}

/* ==========================================================================
   Service Groups — 5.1: Group header and section spacing
   ========================================================================== */

/**
 * Group header — sits above the tab widget, outside the card.
 * Reuses section__heading, section__eyebrow, section__lead from site.css.
 * Eyebrow/tagline placed after the h2 (beneath heading, per PRD §4.5).
 */
.service-group__header {
  margin-bottom: var(--space-lg);
}

.service-group__header .section__heading {
  margin-bottom: var(--space-xs);
}

/* Tagline sits directly below the heading — reduce default eyebrow margin.
   color uses the --text-muted role token so it resolves to the dark-family muted
   on the .section--dark canvas (was hardcoded --color-text-muted, a light-family
   value that rendered near-invisible once the groups went dark). */
.service-group__header .section__eyebrow {
  margin-bottom: var(--space-sm);
  color: var(--text-muted);
}

.service-group__header .section__lead {
  max-width: 72ch;
  margin-bottom: 0;
}

/* ==========================================================================
   Service Groups — 5.2 & 5.3: Tab bar layout, active/inactive tab styling
   ========================================================================== */

/**
 * Widget wrapper — contains the tablist and the card flush below it.
 * position: relative is needed for the mobile fade gradient pseudo-element.
 */
.service-group__widget {
  position: relative;
}

/**
 * Wrapper injected by JS around each tablist + scroll buttons.
 * At desktop: transparent flex wrapper; tablist handles its own border-radius.
 * At ≤1024px: provides the outer border-radius and clips to rounded corners
 *             (tablist border-radius set to 0 in responsive block).
 */
.tablist-container {
  display: flex;
  align-items: stretch;
}

/**
 * Scroll buttons (prev/next chevrons) — injected by JS, hidden by default.
 * JS shows them via the hidden attribute at ≤1024px when the tablist overflows.
 * display: none at all sizes by default; responsive block enables via :not([hidden]).
 */
.tab-scroll-btn {
  display: none;
}

/**
 * Tab bar — raised dark surface, flush against card top.
 * Paints from --surface-raised (resolves to --color-surface-dark on the
 * .section--dark canvas) rather than --color-bg-dark: on the dark canvas the
 * canvas token is the same colour as the section, so a canvas-coloured tab bar
 * would dissolve into the page. The raised token keeps the widget reading as a
 * distinct, contained unit above the light card.
 * flex: 1 fills the .tablist-container (which replaced direct widget placement).
 * align-items: stretch ensures all tabs match the height of the tallest tab.
 */
.service-group__tablist {
  flex: 1; /* fill .tablist-container at all viewport sizes */
  display: flex;
  align-items: stretch;
  position: relative;
  background-color: var(--surface-raised);
  border-radius: 8px 8px 0 0;
  overflow: hidden; /* clips indicator to rounded corners at desktop */
}

/* Tab buttons — equal width, sit above the sliding indicator via z-index */
.service-group__tablist [role="tab"] {
  flex: 1;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text-muted-dark);
  line-height: 1.3;
  white-space: nowrap;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
}

/* Active tab — dark text, bold — readable on orange indicator */
.service-group__tablist [role="tab"][aria-selected="true"] {
  color: var(--color-bg-dark);
  font-weight: 700;
}


/* Focus ring — visible inside dark tab bar */
.service-group__tablist [role="tab"]:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: -3px;
}

/* ==========================================================================
   Service Groups — 5.4: Sliding orange indicator
   ========================================================================== */

/**
 * Orange indicator — full-height rectangle behind the tabs.
 * JS sets: transform: translateX(${offsetLeft}px) and width: ${offsetWidth}px.
 * Transition wraps transform and width in prefers-reduced-motion: no-preference
 * so it is disabled for users who prefer reduced motion.
 */
.tab-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--color-primary);
  z-index: 0;
  /* width and transform set by JS on init and on tab activation */
}

@media (prefers-reduced-motion: no-preference) {
  .tab-indicator {
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
                width 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* ==========================================================================
   Service Groups — Service card container overrides
   ========================================================================== */

/**
 * The service-card class provides base card styles (bg, border, shadow, padding).
 * Overrides specific to the tab-card layout on the services page:
 * - No top border-radius (tablist sits flush above)
 * - No hover lift (large content containers shouldn't jump on hover)
 */
.service-group__card {
  border-radius: 0 0 8px 8px;
  border-top: none;
}

.service-group__card:hover {
  transform: none;
  box-shadow: var(--shadow-1); /* reset to base shadow */
}

/* ==========================================================================
   Service Groups — 5.5: Pricing as visual anchor
   ========================================================================== */

/**
 * Price value — Cutive Mono, large, orange.
 * Used as `<span class="service-card__price">` inside a <dd> within the panel.
 * Overrides the site.css .service-card__price rules that target the home page
 * card layout (where it sits standalone, not inside a <dl>).
 */
.service-card__details .service-card__price {
  /* inline-block instead of block so a sibling .service-card__price-unit span
     (e.g. "/month" on the Google Ads card) sits on the same line as the price.
     Block-level siblings that follow (price-note <p>, credit-note <p>) are
     unaffected — they still start on their own line as normal block elements. */
  display: inline-block;
  font-family: var(--font-typewriter);
  font-size: var(--font-size-4xl);
  font-weight: 400; /* Cutive Mono is a monospace face — weight 400 */
  color: var(--color-primary);
  line-height: 1.2;
  margin-bottom: var(--space-xs);
}

/* Unit suffix (e.g. "/month") inline after price */
.service-card__price-unit {
  font-family: var(--font-typewriter);
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin-left: 0.25em;
}

/* Small note below price (e.g. "quote provided after Blueprint") */
.service-card__price-note {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ==========================================================================
   Service Groups — 5.6: Definition list (dt/dd) styles
   ========================================================================== */

.service-card__details {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-md);
  row-gap: var(--space-sm);
  align-items: start;
}

/* dt — label: semibold, muted, small, uppercase */
.service-card__details dt {
  font-size: var(--font-size-small);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 0.2em; /* align with dd baseline */
  white-space: nowrap;
}

/* dd — value: normal weight, standard text color */
.service-card__details dd {
  font-size: var(--font-size-base);
  color: var(--color-text-dark);
  margin: 0;
  line-height: 1.6;
}

/* Nested ul inside dd — remove default indent, use small gap */
.service-card__details dd > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Custom bullet using ::before */
.service-card__details dd > ul li {
  padding-left: 1.4em;
  position: relative;
}

.service-card__details dd > ul li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 600;
}

/* dt containing accordion button — full width, no column constraint */
.service-card__details dt:has(.service-card__accordion-btn) {
  grid-column: 1 / -1;
  white-space: normal;
}

/* dd paired with accordion button dt — also full width */
.service-card__details dt:has(.service-card__accordion-btn) + dd {
  grid-column: 1 / -1;
}

/* ==========================================================================
   Service Groups — 5.7: Credit note
   ========================================================================== */

/**
 * Credit note — visually subordinate callout inside the pricing <dd>.
 * Faint orange left border with lightly tinted background.
 */
.service-card__credit-note {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: var(--space-xs) 0 0;
  padding: 0.6rem var(--space-sm);
  border-left: 3px solid var(--tint-primary-edge);
  background-color: var(--tint-primary-faint);
  border-radius: 0 4px 4px 0;
}

/* ==========================================================================
   Service Groups — 5.8: "What affects the final price" accordion
   ========================================================================== */

/**
 * Accordion button — compact, inline, no chevron, no bordered header bar.
 * Visually subordinate to the card content.
 */
.service-card__accordion-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px dashed #1a1b1c4d;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-primary-dark);
  line-height: 1.3;
}

.service-card__accordion-btn:hover,
.service-card__accordion-btn:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  outline: none;
}

.service-card__accordion-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/**
 * Accordion content — max-height collapse/expand technique.
 * max-height: 0 when collapsed; large value when .is-open is set.
 * overflow: hidden clips collapsed content.
 * Transition wrapped in prefers-reduced-motion: no-preference.
 */
.service-card__accordion-content {
  max-height: 0;
  overflow: hidden;
}

.service-card__accordion-content.is-open {
  max-height: 600px; /* large enough for any realistic content */
}

@media (prefers-reduced-motion: no-preference) {
  .service-card__accordion-content {
    transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* Content styling inside accordion */
.service-card__accordion-content ul {
  list-style: none;
  margin: var(--space-xs) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.service-card__accordion-content li {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  padding-left: 1.4em;
  position: relative;
  line-height: 1.5;
}

.service-card__accordion-content li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 600;
}

/* Paragraph variant — used when accordion content is prose rather than a list.
   Matches the font-size, color, and line-height of the li treatment above. */
.service-card__accordion-content p {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: var(--space-xs) 0 0;
}

/* ==========================================================================
   Service Groups — 5.9: "Best for" tags
   ========================================================================== */

/**
 * Tags — small orange-outlined pills at the bottom of each card.
 * Inline-flex list, wrap on overflow.
 */
.service-card__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.service-card__tags li {
  font-size: var(--font-size-small);
  font-weight: 500;
  color: var(--color-primary-dark);
  line-height: 1.3;
}

/* ==========================================================================
   Service Groups — 5.10: Progressive enhancement (JS tab visibility)
   ========================================================================== */

/**
 * Tab panel visibility — gated behind .js class (set by inline sync script).
 * Without .js: all panels display (no-JS fallback, all content readable).
 * With .js: only the active panel is shown.
 */
.js .tab-panel {
  display: none;
}

.js .tab-panel.is-active {
  display: block;
}

/* ==========================================================================
   Service Groups — 5.11: Panel fade-in on tab switch
   ========================================================================== */

/**
 * Incoming panel fades from opacity 0 → 1 when .is-active is applied.
 * 200ms ease-in-out — imperceptibly fast but eliminates hard swap.
 * Outgoing panel disappears instantly via display: none (no outgoing fade).
 * Animation wrapped in prefers-reduced-motion: no-preference.
 */
@keyframes tab-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .tab-panel.is-active {
    animation: tab-fade-in 200ms ease-in-out both;
  }
}

/* ==========================================================================
   Service Groups — 5.13: Responsive styles
   ========================================================================== */

/**
 * At 1024px and below:
 * - .tablist-container provides rounded top corners (tablist border-radius: 0)
 * - Tab bar scrolls horizontally; prev/next buttons appear when overflow exists
 * - Service card remains full-width
 *
 * Breakpoint covers 1024px (not just 480px) because groups with 3+ long tab
 * names (e.g. "Advanced Performance Optimization") clip at intermediate widths.
 */
@media (max-width: 1024px) {
  /* Container takes over the rounded top corners from the tablist */
  .tablist-container {
    border-radius: 8px 8px 0 0;
    overflow: hidden; /* clips button/tablist contents to rounded corners */
  }

  .service-group__tablist {
    flex: 1;
    min-width: 0; /* allows tablist to shrink within the flex container */
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    border-radius: 0; /* .tablist-container handles this */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .service-group__tablist::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .service-group__tablist [role="tab"] {
    /* Grow to fill when tabs fit; don't shrink below content width when they don't */
    flex: 1 0 max-content;
    padding: var(--space-sm);
  }

  /* Scroll buttons — shown by JS (via hidden attribute) when tablist overflows */
  .tab-scroll-btn:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    padding: 0;
    background-color: var(--surface-raised); /* match the raised tab-bar surface */
    border: none;
    cursor: pointer;
    color: var(--color-text-light);
    transition: color 150ms ease;
  }

  /* CSS border chevron — consistent size and stroke weight regardless of font */
  .tab-scroll-btn:not([hidden])::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2.5px solid currentColor;
    border-right: 2.5px solid currentColor;
  }

  .tab-scroll-btn--prev:not([hidden])::before {
    transform: rotate(-135deg) translate(-1px, 1px);
  }

  .tab-scroll-btn--next:not([hidden])::before {
    transform: rotate(45deg) translate(-1px, 1px);
  }

  .tab-scroll-btn:hover {
    color: var(--color-primary);
  }

  .tab-scroll-btn:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: -3px;
  }
}

/* ==========================================================================
   Service Groups — 5.14: Tab panel h3 spacing
   ========================================================================== */

/**
 * Space between the panel heading and the first definition list row.
 * The h3 sits outside the .service-card__details grid so its margin must be
 * set explicitly — the grid row-gap does not apply to it.
 */
.tab-panel h3 {
  margin-bottom: var(--space-md);
}

/* ==========================================================================
   Service Groups — 5.15: Responsive overrides
   ========================================================================== */

/**
 * At 768px and below, the two-column dt/dd grid collapses to a single column
 * so labels and values stack instead of sitting side by side.
 */
@media (max-width: 768px) {
  .service-card__details {
    grid-template-columns: 1fr;
    row-gap: var(--space-xs);
  }

  /* white-space: nowrap keeps the auto column stable in the 2-column desktop
     grid, but has no purpose in a single-column layout and causes long labels
     like "Pricing — Monthly Management" to overflow the card at narrow widths. */
  .service-card__details dt {
    white-space: normal;
  }

  /* Full-width override no longer needed — everything is already full-width */
  .service-card__details dt:has(.service-card__accordion-btn),
  .service-card__details dt:has(.service-card__accordion-btn) + dd {
    grid-column: 1;
  }
}