/* ============================================================================
   THEME — premium-a · "Premium, editorial"
   P220 Phase 0 scaffold. Direction: restraint through TYPOGRAPHY AND SPACE.
   Large type, generous margins, very few elements per viewport.

   CONTRACT (enforced by scripts/check-theme-contract.mjs — run it):
     * Every rule in this file is scoped to html[data-theme="premium-a"].
       An unscoped rule leaks into all four designs and ruins the comparison.
     * A theme may OVERRIDE a token from src/styles/brand-tokens.css. It may
       not INVENT one — a typo'd custom property does not error in CSS, it
       silently falls back and the design half-applies.
     * The z-index ladder, the motion scale and the four --brand-* primitives
       are FROZEN. They are reasoned accessibility/architecture decisions and
       the brand book verbatim, not design surface.
     * brand-tokens.css derives every tone against Linen and records the
       measured ratio. Changing the field colour INVALIDATES those
       derivations — the checker re-measures against this theme's own fields.

   PHASE 0 STATUS: field/ink/rhythm set, which is what makes the switcher
   provable. The section layout variants (hero, stat band, kezeléseink,
   eredmények, vélemények) land in Phase 2 — see BRIEF-4-versions.md §5.
   ============================================================================ */

html[data-theme='premium-a'] {
  /* --- Field ---------------------------------------------------------------
     A paler, marginally cooler off-white than Linen. Editorial restraint reads
     as air, not as warmth: this field recedes further behind the type than
     Linen does, which is the entire point of the direction. Still inside the
     brand family — this is Linen with the saturation walked back, not a
     different colour story. (`white` is where the field genuinely departs.) */
  --color-bg: #fbf9f5;
  --color-surface: #f6f2ea; /* DERIVED bg L-2 S-8 — panels, quote cards */
  --color-surface-deep: #f1ebe0; /* DERIVED bg L-4.5 — footer field */
  --color-surface-deepest: #eae2d4; /* DERIVED bg L-7.5 — footer base bar */

  /* --- Ink -----------------------------------------------------------------
     Editorial type wants more separation from the field than Jet gives on
     Linen. Deeper and very slightly cooler, tracking the field. */
  --color-text: #1a1a18;
  --color-text-muted: #55534f; /* DERIVED text 72% on bg */
  --color-text-subtle: #615f5a; /* DERIVED text 66% on bg — captions */

  --color-border: #e6e0d6; /* hairlines — one step lighter than base */
  --color-border-strong: #d9d2c6;

  /* Channel triplets — MUST track their hex twins above, or the header wash,
     the slider handle and the stat-band rules keep painting the base theme's
     Linen on this field. The contract checker enforces the pairing. */
  --color-bg-rgb: 251 249 245; /* = --color-bg */
  --color-on-image-rgb: 251 249 245; /* = the field, used as the on-band tone */
  --color-text-rgb: 26 26 24; /* = --color-text */

  /* --- Type ----------------------------------------------------------------
     The direction lives here. Display type steps up hard; body text stays at
     the base size but gains leading. Tracking on the display face opens
     slightly — at this size Cormorant can carry the air. */
  --font-size-h1: clamp(2.75rem, 5.4vw, 4.75rem); /* 44 → 76px (base: 38 → 60) */
  --font-size-h2: clamp(2.125rem, 3.4vw, 3rem); /* 34 → 48px */
  --font-size-h3: clamp(1.5rem, 2vw, 1.875rem); /* 24 → 30px */
  --font-size-lead: 1.1875rem; /* 19px */
  --line-height-display: 1.04; /* tighter — larger type carries less leading */
  --line-height-body: 1.78; /* looser — the editorial breath */
  --line-height-lead: 1.55;
  --tracking-display: 0.005em; /* nearly none: size does the work, not spacing */

  /* --- Space ---------------------------------------------------------------
     Fewer elements per viewport means each one gets more room, and the
     measure narrows so long-form text stays readable at the larger size. */
  --section-pad: clamp(4.5rem, 8vw, 8rem); /* base: 48 → 72px */
  --gutter: clamp(1.5rem, 5vw, 4rem);
  --content-max: 72rem; /* 1152px — narrower than base 80rem, more margin */

  /* Sharper than base. Editorial pages do not round their corners. */
  --radius: 0px;
  --radius-lg: 0px;
}

/* ===========================================================================
   LAYOUT VARIANT — premium-a · editorial
   Phase 2. The direction is "restraint through typography and space", so the
   move is SUBTRACTION: the 55/45 split and the overlapping portrait both go.
   One column, one image, and type large enough to carry the viewport alone.

   Note the token overrides above do NOT reach .hero h1 — lab.css hardcodes it
   at clamp(2.25rem, 3.9vw, 3.4375rem) and wins. Seven font sizes in lab.css
   are hardcoded; see design/THEME-SYSTEM.md. A theme that changes the type
   scale must override the rule, not only the token.
   =========================================================================== */

/* Single column. The scene becomes a full-bleed band beneath the type rather
   than a second column beside it — fewer elements per viewport is the whole
   argument of this direction. */
html[data-theme='premium-a'] .hero {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  min-height: 0;
}

/* The overlapping portrait is removed entirely. It is the busiest element in
   the composition and this direction cannot afford it. */
html[data-theme='premium-a'] .hero__portrait {
  display: none;
}

html[data-theme='premium-a'] .hero__copy {
  align-items: center;
  padding: clamp(5rem, 11vh, 9rem) 0 clamp(3.5rem, 7vh, 6rem);
  overflow: visible;
}

/* Centred, narrow measure, and released from the portrait's 37% indent. */
html[data-theme='premium-a'] .hero__text {
  width: min(46rem, 100%);
  margin-inline: auto;
  margin-left: auto;
  padding-inline: var(--gutter);
  text-align: center;
}

/* The one place the direction is unmistakable: display type at roughly double
   the base theme, with the leading pulled in so it reads as a masthead. */
html[data-theme='premium-a'] .hero h1 {
  font-size: clamp(3.25rem, 7.4vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin-block: var(--space-2) 0;
}

html[data-theme='premium-a'] .hero .rule {
  margin-inline: auto;
}
html[data-theme='premium-a'] .hero__cta {
  justify-content: center;
}
html[data-theme='premium-a'] .hero .lead {
  margin-inline: auto;
  max-width: 34rem;
}

/* The scene runs the full width as a calm horizontal band. */
html[data-theme='premium-a'] .hero__scene {
  grid-column: 1;
  aspect-ratio: 21 / 8;
  min-height: 0;
}
html[data-theme='premium-a'] .hero__scene .ph-photo {
  object-position: center 42%;
}

/* Section rhythm opens up everywhere, not just the hero — otherwise the hero
   reads as a different page from the rest of the site. */
html[data-theme='premium-a'] .statband {
  padding-block: var(--section-pad);
}


/* === Phase 2b — Dave, 2026-08-22 ==========================================
   "move the whole hero text to the left, put g08 on the right of it, right on
   the hero, remove the scene photo completely, ribbon right under this."

   This supersedes the single-centred-column hero above: the copy goes back to
   its own left column and the right column carries the looping face instead of
   the clinic interior. The editorial argument survives — the portrait overlay
   stays gone and the type stays large — it is now asymmetric rather than
   centred. Rules below come last, so they win over the block above.
   ========================================================================= */
html[data-theme='premium-a'] .hero {
  grid-template-columns: 52fr 48fr;
  grid-template-rows: auto;
  min-height: clamp(32rem, 42vw, 42rem);
}
html[data-theme='premium-a'] .hero__copy {
  align-items: center;
  padding-block: var(--space-4);
}
html[data-theme='premium-a'] .hero__text {
  width: min(34rem, 100%);
  margin-inline: 0 0;
  margin-left: clamp(var(--gutter), 6vw, 5rem);
  padding-inline: 0 var(--space-3);
  text-align: left;
}
html[data-theme='premium-a'] .hero h1 { font-size: clamp(2.75rem, 5.2vw, 4.5rem); }
html[data-theme='premium-a'] .hero .rule { margin-inline: 0; }
html[data-theme='premium-a'] .hero__cta { justify-content: flex-start; }
html[data-theme='premium-a'] .hero .lead { margin-inline: 0; max-width: 30rem; }
html[data-theme='premium-a'] .hero__scene {
  grid-column: 2;
  aspect-ratio: auto;
  min-height: 100%;
}
html[data-theme='premium-a'] .hero__scene .ph-photo { object-position: center 22%; }