/*
 * Éclore Aesthetics — Homepage section layouts (VISUAL-DESIGN §2, §4, §5)
 * ─────────────────────────────────────────────────────────────────────────────
 * Layout + rhythm for the front-page sections. Grounds are set in markup via
 * .section-bg--* (colour only); every full-width section owns its vertical
 * rhythm with padding-block: var(--section-y) to produce the gallery cadence
 * (§4). The two scarce bands — Ink philosophy quote, Terracotta CTA — are
 * styled here for their inverse grounds. Editorial splits engage at lg.
 *
 * Eyebrows are Familjen caps: Ink on light grounds / Bone on dark.
 * Terracotta at 13px fails AA (~4.0:1, large-text only), so the accent is
 * reserved for headings, the dot, underline-reveal, and focus ring instead.
 */

/* ─── Shared section opener (§3 editorial spec) ──────────────────────────────── */
/*
 * The standard opener: a 1px hairline rule, a numbered Familjen-caps eyebrow
 * ("01 — LABEL"), then the H2 — left-aligned on the grid. Weight and scale
 * rank the hierarchy; the number and rule are the designed signal (§1: the
 * grid is visible and structural; asymmetry over template symmetry).
 */
.section-header {
  margin-bottom: var(--space-xl);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-hairline);
}

.section-header__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem; /* 13px — label caps; Ink (Terracotta fails AA here, §4) */
  line-height: 1.3;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.section-header__subheading {
  margin-top: var(--space-sm);
  max-width: 56ch; /* hold the lede to a readable measure off-centre (§2) */
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ─── 2. Philosophy strip (Ink — the one inverse band) ───────────────────────── */

.philosophy-strip {
  padding-block: var(--section-y);
}

.philosophy-strip__inner {
  text-align: center;
}

.philosophy-strip__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-inverse);
  margin-bottom: var(--space-md);
}

.philosophy-strip__quote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.75rem); /* Display pull-quote */
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text-inverse);
  /* Even the line lengths so a short word never orphans onto its own line.
     Degrades to normal wrapping in browsers without text-wrap support. */
  text-wrap: balance;
}

.philosophy-strip__link {
  position: relative;
  display: inline-block;
  margin-top: var(--space-lg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-text-inverse);
  text-decoration: none;
}

.philosophy-strip__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-short) var(--ease-reveal);
}

.philosophy-strip__link:hover::after,
.philosophy-strip__link:focus-visible::after {
  transform: scaleX(1);
}

/* ─── 3. Services preview ────────────────────────────────────────────────────── */

.services-preview {
  padding-block: var(--section-y);
}

.services-preview__footer {
  margin-top: var(--space-2xl);
  text-align: center;
}

/* ─── 3a. Treatments index (editorial list, not cards — §1/§5.5) ─────────────────
   A gallery-index of treatments: name · one-line descriptor · arrow, ruled by
   1px hairlines. Type ranks the hierarchy; structure is the grid, not
   boxes. One clean line per treatment; the descriptor drops on narrow widths so
   the name + arrow stay legible. */

.treatments-index {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--color-hairline);
}

.treatments-index__row {
  border-top: 1px solid var(--color-hairline);
}

.treatments-index__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: clamp(var(--space-md), 3vw, var(--space-lg));
  text-decoration: none;
  color: var(--color-text);
}

.treatments-index__name {
  flex: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-heading);
  transition: color var(--dur-micro) var(--ease-standard);
}

.treatments-index__desc {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.treatments-index__arrow {
  flex: none;
  margin-left: auto; /* pins right even when the descriptor is hidden */
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--color-text-muted);
  transition: transform var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard);
}

/* Quiet feedback: name warms to Terracotta (≥22px, clears AA), arrow nudges. */
.treatments-index__link:hover .treatments-index__name,
.treatments-index__link:focus-visible .treatments-index__name {
  color: var(--color-terracotta);
}

.treatments-index__link:hover .treatments-index__arrow,
.treatments-index__link:focus-visible .treatments-index__arrow {
  transform: translateX(4px);
  color: var(--color-terracotta);
}

/* Descriptor is supporting detail — drop it on small screens (name leads). */
@media (max-width: 639px) {
  .treatments-index__desc {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .treatments-index__link:hover .treatments-index__arrow,
  .treatments-index__link:focus-visible .treatments-index__arrow {
    transform: none;
  }
}

/* ─── 4. Partner brands (static wordmark strip, tighter rhythm) ──────────────────
   The professional lines/devices the practice uses, set as wordmarks in the
   site's caps type — no logos, no motion. A small muted label names the row's
   purpose; hairline separators carry the visible-grid signal (§1). */

.partner-bar {
  padding-block: var(--section-y-tight);
}

.partner-bar__label {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
}

/* Orphan-proof by construction: a centred column below lg (each mark on its own
   line — uniform, never one stranded among grouped siblings), and a single
   no-wrap row once there is room for all five (≥lg), so no wrap line can hold a
   lone item either. */
.partner-bar__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1200px) {
  .partner-bar__list {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--space-lg);
  }
  /* Vertical hairlines only in row mode — the visible-grid signal (§1). */
  .partner-bar__item + .partner-bar__item {
    border-left: 1px solid var(--color-hairline);
    padding-left: var(--space-lg);
  }
}

.partner-bar__item {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.4vw, 1.125rem); /* wordmark presence, above label caps */
  line-height: 1.2;
  letter-spacing: var(--tracking-cta);      /* lighter than labels — reads as a mark */
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
}

/* Linked marks — inherit the muted wordmark colour; warm to Terracotta on
   interaction (large-text, clears AA). */
.partner-bar__item a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-standard);
}

.partner-bar__item a:hover,
.partner-bar__item a:focus-visible {
  color: var(--color-terracotta);
}

/* ─── 5. About teaser (editorial split) ──────────────────────────────────────── */

.about-teaser {
  padding-block: var(--section-y);
}

.about-teaser__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 1024px) {
  .about-teaser__inner {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-2xl);
  }
}

.about-teaser__image-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--color-ink) 8%, var(--color-stone)),
      var(--color-stone));
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
}

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

.about-teaser__eyebrow {
  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);
}

.about-teaser__heading {
  margin: 0;
}

.about-teaser__body {
  margin: 0;
  color: var(--color-text);
}

.about-teaser__content .btn {
  align-self: flex-start;
  margin-top: var(--space-sm);
}

/* ─── 6. Testimonials preview ────────────────────────────────────────────────── */

.testimonials-preview {
  padding-block: var(--section-y);
}

/* ─── 7. Journal teaser ──────────────────────────────────────────────────────── */

.journal-teaser {
  padding-block: var(--section-y);
}

.journal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .journal-grid { grid-template-columns: repeat(2, 1fr); }
}

.journal-card {
  display: flex;
  flex-direction: column;
}

.journal-card__thumb-link {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-stone);
}

.journal-card__thumb-link img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
  .journal-card__thumb-link img {
    transition: transform var(--dur-medium) var(--ease-reveal);
  }
  .journal-card:hover .journal-card__thumb-link img {
    transform: scale(1.03);
  }
}

.journal-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-top: var(--space-md);
}

.journal-card__date {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.journal-card__title {
  margin: 0;
}

.journal-card__title a {
  color: var(--color-heading);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-standard);
}

.journal-card:hover .journal-card__title a,
.journal-card:focus-within .journal-card__title a {
  color: var(--color-terracotta); /* large H3 text — clears AA at this size */
}

.journal-card__excerpt {
  margin: 0;
  color: var(--color-text);
}

/* ─── 8. Consultation CTA (Terracotta — the one CTA band) ────────────────────── */

.consultation-cta {
  padding-block: var(--section-y);
}

.consultation-cta__inner {
  text-align: center;
}

.consultation-cta__heading {
  margin: 0;
  color: var(--color-text-inverse); /* Bone on Terracotta (§4) */
}

.consultation-cta__body {
  margin: var(--space-md) auto var(--space-lg);
  max-width: 52ch;
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
  line-height: 1.55;
  color: var(--color-text-inverse);
}

/* ─── 9. Location / map (editorial split) ────────────────────────────────────── */

.location-section {
  padding-block: var(--section-y);
}

.location-section__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 1024px) {
  .location-section__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}

.location-section__heading {
  margin: 0 0 var(--space-md);
}

.location-section__address {
  font-family: var(--font-body);
  font-style: normal; /* reset UA italic */
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text);
}

.location-section__address a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--dur-micro) var(--ease-standard);
}

.location-section__address a:hover {
  color: var(--color-text);
}

.location-section__cta {
  margin-top: var(--space-lg);
}

.location-section__map-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--color-ink) 8%, var(--color-stone)),
      var(--color-stone));
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   EDITORIAL LAYER (redesign) — dark-ground headers, split treatments, The Space
   gallery, the Éclore process sticky-stack. See EDITORIAL-REDESIGN-HANDOFF.md.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Section opener on dark grounds ─────────────────────────────────────────────
   The shared .section-header (hairline rule + Ink eyebrow) is authored for light
   grounds. On the Ink / Terracotta bands its rule and eyebrow would vanish — flip
   both to Bone so the numbered opener still reads. */
.section-bg--ink .section-header,
.section-bg--terracotta .section-header {
  border-top-color: color-mix(in srgb, var(--color-bone) 24%, transparent);
}
.section-bg--ink .section-header__eyebrow,
.section-bg--ink .section-header__subheading,
.section-bg--terracotta .section-header__eyebrow,
.section-bg--terracotta .section-header__subheading {
  color: var(--color-text-inverse);
}

/* ─── Philosophy strip — serif showcase (refined) ────────────────────────────────
   The one place the accent serif is given room. Centred, held to a tight measure
   so the emphasis word carries the line. */
.philosophy-strip__inner {
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.philosophy-strip__quote {
  max-width: 20ch;
  margin-inline: auto;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

/* ─── 3. Treatments — editorial split (index + portrait) ─────────────────────────
   The index keeps its links (nav + SEO); a grayscale portrait joins it as an
   asymmetric companion. Single column below lg; 7/5 split above, portrait pinned
   so it holds as the list scrolls past. */
.services-preview__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 1024px) {
  .services-preview__inner {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-2xl);
    align-items: start;
  }
  /* Portrait second in source (content leads for SR/reading order) but visually
     to the right; pin it while the index scrolls. */
  .services-preview__media { order: 2; position: sticky; top: var(--space-2xl); }
  .services-preview__content { order: 1; }
}
.services-preview__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-hairline);
  background:
    radial-gradient(120% 90% at 70% 20%,
      color-mix(in srgb, var(--color-ink) 14%, var(--color-stone)), transparent 60%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--color-ink) 10%, var(--color-stone)),
      var(--color-stone));
}

/* ─── 3b. The Space — full-bleed editorial gallery band ──────────────────────────
   A dark image band (grayscale placeholder now) with a scrim for legibility and a
   horizontal, drag/snap gallery of studio details. */
.space-section {
  position: relative;
  overflow: clip;
  padding-block: var(--section-y);
  background: var(--color-ink);
  color: var(--color-text-inverse);
}
.space-section__bg { position: absolute; inset: 0; z-index: 0; }
.space-section__bg-image {
  width: 100%;
  height: 100%;
  /* Placeholder texture until a real grayscale interior lands (swap this div for
     <img class="editorial-img">). */
  background:
    radial-gradient(80% 60% at 25% 20%,
      color-mix(in srgb, var(--color-bone) 12%, var(--color-ink)), transparent 70%),
    radial-gradient(70% 70% at 85% 90%,
      color-mix(in srgb, var(--color-bone) 8%, var(--color-ink)), transparent 65%),
    var(--color-ink);
}
.space-section__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--color-ink) 78%, transparent) 0%,
      color-mix(in srgb, var(--color-ink) 40%, transparent) 60%,
      color-mix(in srgb, var(--color-ink) 55%, transparent) 100%);
}
.space-section__inner { position: relative; z-index: 2; }
.space-section__header { max-width: 42ch; margin-bottom: var(--space-2xl); }
.space-section__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-inverse);
  margin-bottom: var(--space-md);
}
.space-section__heading { margin: 0 0 var(--space-md); color: var(--color-text-inverse); }
.space-section__lede {
  margin: 0;
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-bone) 82%, transparent);
}

/* ─── Horizontal gallery (generic, reusable) ─────────────────────────────────────
   Native scroll works with no JS. horizontal-gallery.js adds drag, arrow controls,
   and end-state disabling; it also adds .h-gallery--interactive so the arrows only
   appear when they do something. */
.h-gallery { position: relative; }
.h-gallery__track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-xs);
  scrollbar-width: none; /* Firefox — the arrows are the affordance */
}
.h-gallery__track::-webkit-scrollbar { display: none; }
@media (pointer: fine) {
  .h-gallery__track { cursor: grab; }
  .h-gallery__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
  /* Don't hard-swap scroll position mid-drag with smooth easing. */
  .h-gallery__track.is-dragging { scroll-behavior: auto; }
}
.h-gallery__item {
  flex: 0 0 auto;
  width: clamp(220px, 26vw, 320px);
  scroll-snap-align: start;
}
.h-gallery__controls { display: none; gap: var(--space-xs); margin-top: var(--space-lg); }
.h-gallery--interactive .h-gallery__controls { display: flex; }
.h-gallery__nav {
  inline-size: 3rem;
  block-size: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: inherit;
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-standard),
              border-color var(--dur-micro) var(--ease-standard),
              opacity var(--dur-micro) var(--ease-standard);
}
.h-gallery__nav:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.h-gallery__nav:disabled { opacity: 0.35; cursor: default; }
.space-gallery__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-bone) 16%, transparent);
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--color-bone) 22%, var(--color-ink)),
      color-mix(in srgb, var(--color-bone) 6%, var(--color-ink)));
}

/* ─── 5b. The Éclore process — sticky-stack ──────────────────────────────────────
   Cards pin near the top and stack; sticky-stack.js scales/dims the covered ones.
   Pure CSS handles the pinning, so it degrades to a pinned stack with JS off and to
   a plain list under reduced motion. */
.process-section { padding-block: var(--section-y); }
.process-stack {
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.process-card {
  position: sticky;
  top: calc(var(--space-xl) + var(--i, 0) * 0.75rem);
  margin-bottom: var(--space-2xl);
  padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
  background: color-mix(in srgb, var(--color-bone) 8%, var(--color-ink));
  border: 1px solid color-mix(in srgb, var(--color-bone) 16%, transparent);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 60px -32px color-mix(in srgb, #000 70%, transparent);
  transform-origin: top center;
  will-change: transform, opacity;
}
.process-card:last-child { margin-bottom: 0; }
.process-card__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: var(--tracking-label);
  color: color-mix(in srgb, var(--color-bone) 60%, transparent);
  margin-bottom: var(--space-md);
}
.process-card__title { margin: 0 0 var(--space-xs); color: var(--color-text-inverse); }
.process-card__body {
  margin: 0;
  max-width: 52ch;
  color: color-mix(in srgb, var(--color-bone) 82%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  /* No pinning/stacking for reduced-motion — a calm vertical list instead. */
  .process-card {
    position: static;
    margin-bottom: var(--space-lg);
    transform: none !important;
    opacity: 1 !important;
  }
}