/*
 * Éclore Aesthetics — Single service template (VISUAL-DESIGN §5, §9 — D2)
 * ─────────────────────────────────────────────────────────────────────────────
 * Styles the service-specific blocks of single-eclore_service.php, the priority
 * SEO template. Inherited components (hero base, faq, buttons, breadcrumbs,
 * footer, service-card, consultation-cta) are already styled by D1 and reused
 * as-is; only the service-context variant of the hero is extended here.
 *
 * Grounds are set in the markup via .section-bg--* (colour only); each section
 * owns its vertical rhythm with padding-block here, matching the homepage
 * cadence (home.css). Tokens only — no hardcoded hex / spacing / duration.
 * Reveal motion is the shared global utility (.reveal in global.css), armed by
 * the one IntersectionObserver in booking-cta.js.
 *
 * Breakpoints (literal): md 768px, lg 1024px.
 */

/* ─── 1. Hero — service context (treatment name as the landmark) ──────────────── */
/*
 * The hero template renders context=service as .hero--service (heading is an
 * <h2> element by PHP decision; we size it to the Display/H1 scale visually so
 * the treatment name reads as the page landmark). The lede (short description)
 * and CTA row inherit the base .hero styles. No media slot is emitted for the
 * service context unless a featured image is present, in which case the base
 * .hero--has-image background treatment already reserves the frame — untouched.
 */
.hero--service .hero__content {
  max-width: var(--container-narrow);
}

.hero--service .hero__heading {
  font-weight: 700; /* Familjen Display weight */
  font-size: clamp(2.5rem, 6vw, 4.5rem); /* H1 → Display scale, 40–72px */
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}

/* Service hero rides the warm ground (like the page/archive heroes) so the
   floating quick-facts card below lifts and pops against it. */
.hero--service {
  background: var(--color-ground);
}

/* ─── 2. Quick-facts — floating "at a glance" card beneath the hero ───────────── */
/*
 * A Bone panel that lifts up into the ground hero above (the house "panel over
 * ground" move), replacing the old flat Stone band. Border + soft shadow give
 * it the floating-card feel shared with the homepage panels. Three facts
 * (duration / downtime / pricing) sit in an even row, wrapping on mobile.
 */
.quick-facts {
  padding-block: 0 var(--section-y-tight);
  background: transparent;
  position: relative;
  z-index: 2;
}

/* Narrow the card so it reads as a considered panel, not a full-width band. */
.quick-facts > .container {
  max-width: var(--container-narrow);
}

.quick-facts__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2-up on mobile */
  gap: var(--space-lg) var(--space-sm);
  margin-top: clamp(-96px, -7vw, -48px); /* overlap the hero above */
  padding: clamp(var(--space-lg), 4vw, var(--space-xl));
  background: var(--color-bone);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  box-shadow: 0 40px 90px -60px color-mix(in srgb, var(--color-ink) 40%, transparent);
}

@media (min-width: 768px) {
  .quick-facts__grid {
    grid-template-columns: repeat(3, 1fr); /* duration · downtime · pricing */
    gap: 0;
  }
}

.quick-facts__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  text-align: center;
  padding-inline: var(--space-md);
}

/* Hairline dividers between items — decorative hairline tone, low opacity (§4). */
@media (min-width: 768px) {
  .quick-facts__item + .quick-facts__item {
    border-left: 1px solid var(--color-hairline);
  }
}

.quick-facts__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem; /* small tracked eyebrow */
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted); /* Ink-muted — Terracotta fails AA at this size (§4) */
}

.quick-facts__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem); /* Familjen, larger than the label */
  line-height: var(--lh-snug);
  color: var(--color-heading);
}

/* ─── 3. Service description — the 40–60 word direct-answer (SEO centerpiece) ──── */
/*
 * container--narrow (~66ch) already holds the measure in markup; body copy is
 * Inter at body-large for a calm, readable answer block. the_content() output
 * (p / h2 / h3) is mapped to the type scale.
 */
.service-description {
  padding-block: var(--section-y);
  /* A calm, left-aligned answer column. container--narrow (markup) holds the
     ~66ch measure and centres the column on the page; the copy itself stays
     left-aligned — never centred. */
  text-align: left;
}

.service-description__category {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem; /* 13px eyebrow */
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted); /* Ink-muted — AA */
  margin-bottom: var(--space-md);
}

.service-description p {
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem); /* Body-large lede scale */
  line-height: 1.55;
  color: var(--color-text);
}

.service-description h2,
.service-description h3 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

/* ─── 4. What to expect — numbered editorial sequence (deliberate steps) ──────── */
/*
 * The <ol> renders as a real numbered sequence: large Familjen numerals via a
 * CSS counter, generous vertical rhythm, Inter body per step. Reads as measured
 * steps, not a plain list.
 */
.what-to-expect {
  padding-block: var(--section-y);
}

.what-to-expect__heading {
  margin-bottom: var(--space-xl);
}

.what-to-expect__list {
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.what-to-expect__list li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-md);
  align-items: baseline;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.6;
  color: var(--color-text);
}

.what-to-expect__list li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem); /* large Familjen numeral — clears AA as large text */
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--color-terracotta); /* the rare accent, carried by a single large numeral */
  min-width: 2.5ch;
}

/* ─── 5. Ideal candidate — refined checklist + CTA ────────────────────────────── */
/*
 * The <ul> uses a custom marker — the house Terracotta "dot" accent with a soft
 * halo (§5.1) — not default bullets. container--narrow already set in markup.
 */
.ideal-candidate {
  padding-block: var(--section-y);
}

.ideal-candidate__heading {
  margin-bottom: var(--space-lg);
}

.ideal-candidate__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.ideal-candidate__list li {
  position: relative;
  padding-left: var(--space-lg);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.6;
  color: var(--color-text);
}

.ideal-candidate__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  /* border-radius / background / box-shadow shared with .cta-dot (buttons.css) */
}

.ideal-candidate__cta-text {
  max-width: 60ch;
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem); /* lede */
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

/* .btn--primary is already styled (buttons.css); this just guarantees its
   spacing from the lede above when the section stacks. */
.ideal-candidate .btn {
  display: inline-flex;
}

/* ─── 6. Before / after — paired figures (does not render without consent) ────── */
.before-after {
  padding-block: var(--section-y);
}

.before-after__heading {
  margin-bottom: var(--space-sm);
}

.before-after__disclaimer {
  max-width: 60ch;
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 1vw, 0.875rem); /* caption */
  line-height: 1.5;
  color: var(--color-text-muted); /* muted Ink */
  margin-bottom: var(--space-xl);
}

.before-after__pair {
  display: grid;
  grid-template-columns: 1fr; /* stacked on mobile */
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .before-after__pair {
    grid-template-columns: 1fr 1fr; /* side by side */
  }
}

.before-after__figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.before-after__figure img {
  width: 100%;
  aspect-ratio: 4 / 5; /* reserve dimensions — CLS budget < 0.1 (§6) */
  object-fit: cover;
  background: var(--color-stone);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  filter: var(--img-filter); /* editorial grayscale — real B/A photos drop in later */
}

.before-after__figure figcaption {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ─── 7. Provider spotlight — framing for the reused team-card ─────────────────── */
/* team-card is styled in its own component file (components/team-card.css); this
   block sets only the provider-spotlight section framing and spacing. */
.provider-spotlight {
  padding-block: var(--section-y);
}

.provider-spotlight__heading {
  margin-bottom: var(--space-xl);
  text-align: center;
}