/*
 * Éclore Aesthetics — About + Philosophy narrative sections (VISUAL-DESIGN §2, §3, §5 — D4)
 * ─────────────────────────────────────────────────────────────────────────────
 * Styling-only pass over the existing, fully-scaffolded markup of
 * templates/page-about.php and templates/page-philosophy.php. Grounds are set in
 * the markup via .section-bg--bone/--stone (colour only); each section owns its
 * vertical rhythm here with padding-block: var(--section-y), matching the
 * homepage/service cadence (home.css, service.css). The reading measure comes
 * from .container--narrow in the markup. Tokens only — no raw hex, no new tokens.
 *
 * Shared, already-styled pieces are reused as-is and NOT redefined here:
 *   .section-header / __heading / __subheading (home.css), .btn* (buttons.css),
 *   .consultation-cta + its stone dark-text override (home.css + archive.css),
 *   team-card internals (components/team-card.css), hero, header, footer, breadcrumbs.
 *
 * Entrance reveal is the shared global .reveal contract (global.css), armed by
 * the one IntersectionObserver in booking-cta.js — section blocks plus the
 * team-grid and values children, which stagger via --stagger-step. Nothing here
 * adds motion outside the prefers-reduced-motion guard.
 *
 * Breakpoints (literal): md 768px, lg 1024px.
 */

/* ─── Editorial reading column — About mission + Philosophy body ──────────────── */
/*
 * the_content() prose held to the ~66ch measure (.container--narrow in markup).
 * A calm, left-aligned reading column (printed-page feel): Inter Body, the opening paragraph lifted
 * to the §3 Body-large lede, in-content headings on the Familjen scale (global.css
 * already sets the faces/weights — here we only set rhythm and the lede).
 */
.about-mission,
.philosophy-body {
  padding-block: var(--section-y);
  text-align: left;
}

.about-mission p,
.philosophy-body p {
  color: var(--color-text);
}

/* Opening paragraph reads as the lede (§3 Body-large). */
.about-mission > .container > p:first-of-type,
.philosophy-body > .container > p:first-of-type {
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
  line-height: 1.5;
}

/* In-content headings (the_content H2/H3) — Familjen faces inherited; set rhythm. */
.about-mission :is(h2, h3),
.philosophy-body :is(h2, h3) {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

/* ─── About → Philosophy link strip (calm divider band on stone) ─────────────── */
/*
 * One dominant element with generous breathing room (§2). Centred, narrow,
 * muted-Ink body, then a btn--secondary (Terracotta outline — inherited from
 * buttons.css; never recoloured here).
 */
.about-philosophy-link {
  padding-block: var(--section-y);
}

.about-philosophy-link__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

.about-philosophy-link__body {
  margin: 0;
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem); /* Body-large */
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ─── Pull-quote (Philosophy — §3 Pull-quote + §5.7 structure) ───────────────── */
/*
 * Oversized decorative quotation mark in a hairline tone above the line; the
 * quote itself in Familjen 600 (display face, NOT italic); attribution in
 * Familjen caps, muted Ink. Held to the narrow measure (markup). One per page.
 */
.pullquote {
  position: relative;
  margin: 0;
  padding-top: var(--space-xl);
  text-align: center;
}

/* Decorative mark — structural hairline tone, non-text ornament (the real quote
   lives in __text). Sits above the quote, centred, behind the type. */
.pullquote::before {
  content: "\201C";
  position: absolute;
  top: calc(-1 * var(--space-md));
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5rem, 12vw, 9rem);
  line-height: 1;
  color: var(--color-hairline);
  pointer-events: none;
}

.pullquote__text {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.625rem, 3.4vw, 2.75rem); /* Pull-quote 26–44px */
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

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

.pullquote__attr cite {
  font-style: normal; /* reset UA italic */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ─── Team grid (About — §5.6 layout wrapper only) ───────────────────────────── */
/*
 * These rules style only the .team-grid layout wrapper, not the card internals —
 * the card is its own component (components/team-card.css). 2–4 up depending on
 * count; a short team centres rather than stretching. Fixed-ish track width +
 * centred justification keeps two or three members composed instead of strung
 * edge to edge. No card chrome here — squared, no shadows.
 */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  justify-content: center;
}

@media (min-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
  }
}

/* ─── Philosophy values — an editorial list of principles, NOT cards ─────────── */
/*
 * A printed list of values: 1px hairline dividers, generous rhythm, each item in
 * Familjen at the H3 scale, preceded by a single restrained Terracotta numeral at
 * large size (clears the large-text AA bar — never body-size Terracotta). Squared,
 * no boxes, no shadows. Held to the narrow measure (markup).
 */
.philosophy-values {
  padding-block: var(--section-y);
}

.philosophy-values__heading {
  margin-bottom: var(--space-xl);
}

.philosophy-values__list {
  counter-reset: value;
}

.philosophy-values__item {
  counter-increment: value;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-md);
  align-items: baseline;
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-hairline);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem); /* H3 scale */
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.philosophy-values__item:last-child {
  border-bottom: 1px solid var(--color-hairline);
}

/* The single restrained accent — a large terracotta numeral (large-text AA). */
.philosophy-values__item::before {
  content: counter(value, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-terracotta);
}