/* ZS R3 stream XL (round 3b-2b): Salong Lumen's GROWTH effect layer, the identity part. ZS's own code, no dependencies.
   The behaviour comes from the shared module assets/zs/r3-fx.css + r3-fx.js (opt-in through data-fx tokens in the five pages); this file only gives it Lumen's face (mist, graphite, one dark green,
   the warm hair grade) and builds the layout of the one two-state chapter (behandlingar). Loaded AFTER r3x-lumen.css. Prefix lm-cs (chapter), no other class is defined here.
   Contract kept from the module: everything that hides or moves hangs on html.lib-on:not(.no-motion):not(.r3fx-off) or on .fx-live (which only exists while motion is on), so reduced motion, page toggle OFF and no-JS
   show exactly what r3x-lumen.css composes. No divider lines, no new text, compositor properties only. Growth reads richer than Starter here: masked headline rise, wipes on the photographs, one drifting honey light and
   one inner parallax on the hero photograph, hover depth on the gallery cards, one pinned two-state chapter. The ONE moving element stays the gallery belt (r3x-lumen.js). */

/* ---------- 1. Lumen's tokens for the module: graphite shadow, a dark-green hairline, warm honey light ---------- */
.lumen {
  --r3fx-shadow: rgba(21, 24, 25, .28);      /* graphite, never black: the planes are green-grey */
  --r3fx-edge: rgba(30, 74, 59, .46);        /* the one dark green as a hairline */
  --r3fx-glow: rgba(154, 202, 179, 0);
  --r3fx-tick-r: 0px;
}
.lumen [data-fx-amb="honey"] { --r3fx-amb-a: rgba(255, 218, 170, .62); --r3fx-amb-b: rgba(255, 244, 226, .52); }   /* light through a salon window on champagne hair */
.lumen [data-fx-amb="honey"] .fx-amb i { mix-blend-mode: overlay; }   /* the photograph is already bright: a plain cream pool disappears on it (measured: mean change 1 of 255), an overlay pool warms the strands it passes over */

/* ---------- 2. wiped photographs clip their own settle (the picture grows back from 1.14 inside its box) ---------- */
.lm-ed__fig, .lm-plate, .lm-k-hero__fig { overflow: hidden; border-radius: 2px; }
/* 3c fix (CRIT-TECH2 MAJOR, galleri overflowed 2 to 6 px at 360 to 430 px wide until each picture was revealed): an unrevealed [data-fx~=wipe] picture carries the module's settle scale (1.14) and a
   clip-path does not clip scrollable overflow, so the two lower figures (--c, --d) grew the document (scrollWidth 395 at 390) and the fixed phone dock with it. The figure now clips its own settle,
   like the three boxes above (overflow: clip, not hidden: no scroll container, nothing else changes; the caption is inside the box). */
.lm-gfig[data-fx~="wipe"] { border-radius: 2px; overflow: clip; }
/* LCP honesty (FX guide hard rule 1: the LCP element is visible from the first paint). Below 1024 px the first row of galleri sits INSIDE the first screen, so it is the largest picture there and never waits
   for a wipe; from 1024 px it lies below the fold and wipes in. (The wipe and its settle are switched off with !important, animation included, so nothing blinks when the module marks them revealed.)
   The om plate and the kontakt hero photograph have no wipe at any size (parallax-in only, see the pages). */
@media (max-width: 1023px) {
  html.lib-on .lumen .lm-gfig--a[data-fx~="wipe"], html.lib-on .lumen .lm-gfig--a[data-fx~="wipe"] img,
  html.lib-on .lumen .lm-gfig--b[data-fx~="wipe"], html.lib-on .lumen .lm-gfig--b[data-fx~="wipe"] img { clip-path: none !important; animation: none !important; scale: none !important; }
}

/* ---------- 3. hover / focus depth on the gallery cards: the lift, the hairline and the shadow belong to the picture, not to the caption under it ---------- */
html.lib-on:not(.no-motion):not(.r3fx-off) .lumen .lm-card[data-fx~="depth"] > .fx-edge { bottom: 34px; border-radius: 2px; }

/* ---------- 4. the two-state chapter on behandlingar: the note (state 1) and the closing editorial (state 2), one frame, two pictures ----------
   STATIC (reduced motion, no JS, phones, windows under 1024 px or too short for the pin): two ordinary blocks and ONE picture, exactly the page's earlier composition
   (the note, then picture + words: stacked on phones, 5 : 6 from 720, 4 : 7 and a square picture in the full-width no-motion layout). LIVE (.fx-live, >= 1024 px, the pin fits): ONE pinned screen,
   a wide plate over the words, the plate and the words swap in place (the module toggles .fx-on, scroll decides). */
.lm-cs { margin-bottom: var(--lm-sec); }
.lm-cs__pin { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "s1" "frame" "s2"; row-gap: 28px; align-items: center; }
.lm-cs:not(.fx-live) .lm-cs__states { display: contents; }
.lm-cs__s1 { grid-area: s1; }
.lm-cs__s2 { grid-area: s2; }
.lm-cs__frame { grid-area: frame; margin: 0; min-width: 0; }
.lm-cs__txt { display: grid; gap: 18px; align-content: center; }
.lm-cs__screen { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--lm-lift); }          /* the lift tone (not graphite): a layer that dissolves in rises out of mist, never out of a dark box */
.lm-cs__screen picture { display: block; width: 100%; height: 100%; }
.lm-cs__screen img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.lm-cs:not(.fx-live) .lm-cs__screen > [data-fx-in="1"] { display: none; }          /* the salon plate exists only while the chapter is pinned */
@media (max-width: 719px) { .lm-cs__frame { margin-top: calc(var(--lm-sec) - 28px); } }          /* the note-to-picture gap the page always had (the note's own 8 px + one section step) */
@media (min-width: 720px) {
  .lm-cs__pin { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "s1 s1" "frame s2"; column-gap: clamp(32px, 5vw, 72px); row-gap: var(--lm-sec); }
}
@media (min-width: 1024px) {
  html:not(.lib-on) .lm-cs__pin { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  html:not(.lib-on) .lm-cs__screen { aspect-ratio: 1 / 1; }
}

/* live: the frame is a wide plate above the words, both centred in the pinned screen */
.lm-cs.fx-live { --r3fx-tick-r: 0px; color: var(--fg-3); }
.lm-cs.fx-live .lm-cs__pin { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; column-gap: 0; row-gap: clamp(22px, 3.2vh, 34px); align-content: center; align-items: start; }
.lm-cs.fx-live .lm-cs__frame { order: -1; grid-area: auto; }
.lm-cs.fx-live .lm-cs__screen { aspect-ratio: auto; height: clamp(220px, calc(100vh - 480px), 470px); height: clamp(220px, calc(100svh - 480px), 470px); }
.lm-cs.fx-live .lm-cs__screen > [data-fx-in="1"], .lm-cs.fx-live .lm-cs__screen > [data-fx-in="2"] { position: absolute; inset: 0; width: 100%; height: 100%; }
.lm-cs.fx-live .lm-cs__s1, .lm-cs.fx-live .lm-cs__s2 { align-self: start; color: var(--fg); }
.lm-cs.fx-live .lm-note { padding: 0; }
.lm-cs.fx-live .lm-note p { max-width: 20em; }
@media (min-width: 1024px) { .lm-cs.fx-live .lm-cs__txt .lm-p { max-width: 34em; } }