/* ============================================================================
   SECTION 11 — "4.3 Recovery"   slug 11-recovery-43   Figma 2784:431
   ----------------------------------------------------------------------------
   Every number cites figma-truth/11-recovery-43.spec.md by section. Values that
   already exist in css/tokens.css are referenced as tokens; the handful of
   literals below are section-local (they appear once on the page) and each one
   carries its citation, per CONVENTIONS.md §4.

   The three cards are Salient's `nectar-fancy-box[data-style="hover_desc"]`,
   lifted verbatim. Everything under §5 below is a RETARGET of that component,
   not a reimplementation of it: Salient's own stylesheet
   (vendor/.../elements/element-fancy-box.q-b2fac09bdb.css, linked at
   index.html:50) still owns the layer stack, the flex box, `.box-bg`'s cover
   sizing and the `.inner{align-self:flex-end}` bottom pin. Each override says
   which Salient rule it is answering.

   THE ONE THING NOT TO "FIX": spec §4 proves this section is NOT on a
   12-column grid. Exactly one edge (the 563 rail split) coincides with a
   12-column landmark and only at a 24px gutter. Build the split literally.
   ========================================================================== */

/* ==========================================================================
   1. BAND
   ========================================================================== */

.mk-recovery-43 {
  background-color: var(--mk-surface-mist);   /* §3.1 #f4f9fb, node 2784:431 */
}

/* §1.0 — HORIZONTAL auto-layout. `itemSpacing: 43` is INERT because
   primaryAxisAlignItems is SPACE_BETWEEN; the spec render-verifies the gap
   between the two rails as 0 (image rail starts at x=563 exactly). Do not
   emit a gap here. `counterAxisAlignItems: CENTER` is equally inert — both
   children are the full 1366 height — so `stretch` is the faithful mapping,
   and it is what gives the text rail a definite box to centre inside. */
.mk-recovery-43__split {
  display: flex;
  align-items: stretch;
}

/* ==========================================================================
   2. A — TEXT RAIL  (2784:432 / 2784:433)
   ========================================================================== */

/* §5.1 rule 2: the left rail is INELASTIC — 563 at 1280 AND at 1440, same
   insets, same line breaks. flex-basis, never a percentage. */
.mk-recovery-43__rail {
  flex: 0 0 563px;                    /* §1.0 table row A; §5.1 delta = 0 */
  box-sizing: border-box;
  padding: var(--mk-page-x);          /* §1.1 padding 120 on all four sides */
  display: flex;
}

/* §1.2 — the Text group fills the 323 x 1126 padding box and centres its
   three children on the primary (vertical) axis. This is why the EN block
   starts at y 383 and the ES block at y 443 with no other change. */
.mk-recovery-43__copy {
  width: 323px;                       /* §4 "text block 120 -> 443" = 563 - 240 */
  display: flex;
  flex-direction: column;
  justify-content: center;            /* §1.2 primaryAxisAlignItems CENTER */
  align-items: flex-start;            /* §1.2 counterAxisAlignItems MIN */
  gap: var(--mk-space-24);            /* §1.2 itemSpacing 24 */
}

/* --- eyebrow (2784:434) — .mk-eyebrow already sets Poppins Light 16/24,
       3px tracking and text-transform: uppercase (textCase is not serialised;
       §2.1 proves UPPER from the render). ------------------------------- */
.mk-recovery-43__eyebrow {
  margin: 0;
  padding: 0;                         /* Salient's style.css puts `padding-bottom:1.5em`
                                         on every <p>. Measured: it added 24px to the
                                         eyebrow box (16px x 1.5) and pushed the whole
                                         centred block 27px off the Figma y. */
  color: var(--mk-ink-strong);        /* §3.1 #000000 — NOT --mk-ink-body */
}

/* §2.1 — the eyebrow is a MIXED-RUN node: run 1 "Recovery plan " is Light 300,
   run 2 "#/#" is Medium 500. Derived from ink width 40.0 (Medium 40.0,
   Light 37.0, Regular 38.5); SemiBold/Bold are 41.0 and not fully excludable
   — see §8.3. ES does NOT do this: "3/5" is uniform Light there. */
.mk-recovery-43__eyebrow-count {
  font-weight: var(--mk-w-medium);
}

/* --- title (2784:435) — Merriweather Light 48/60. The h2 rule in tokens.css
       already pins opsz 18, which CSS would otherwise set to the font-size. */
/* The compound selector is deliberate: tokens.css styles this element through
   `.mk-page :is(h1,h2,h3,.mk-serif)`, which is (0,1,1). A single class is
   (0,1,0) and silently loses — that is how the optical-size fix below fails. */
.mk-recovery-43 .mk-recovery-43__title {
  margin: 0;

  /* ---- OPTICAL SIZE: this section contradicts the global rule. -------------
     tokens.css / CONVENTIONS.md §8.4 pin `opsz: 18` on every h1/h2/h3 because
     every named instance of the installed Merriweather-variable.ttf pins 18.
     At 48px that is measurably WRONG here, and the error is not cosmetic — it
     changes the line count. Measured off figma-truth/sections-en/11-recovery-43.png
     (ink threshold 30 over the #f4f9fb ground), the title ink is
        x 124.5 -> 433.0  =  308.5 wide,  lsb 4.5,  ink height 46.5
     Rasterising "[Clear & detox]" from fonts/Merriweather-variable.ttf at 48px,
     wght 300, wdth 100 (4x supersample, same threshold):
        opsz 18 -> ink 322.00, lsb 4.75, advance 331.48   <- 13.5px too wide
        opsz 36 -> ink 313.75, lsb 4.50, advance 323.18
        opsz 48 -> ink 308.75, lsb 4.50, advance 317.62   <- MATCHES (+0.25px)
     Figma is therefore rendering this node with opsz = font-size, i.e. the CSS
     `auto` behaviour, not the named instance's pinned 18. It matters: the text
     block is 323 wide, the opsz-18 advance is 331.48, so pinning 18 wraps the
     title onto a SECOND line and the spec (§1.2, §2.1) says 1 line, h 60.
     Fixed locally rather than in tokens.css — see NOTES / the handback: the
     96px hero headline is the other 48px+ Merriweather node on this page and
     should be re-measured the same way before the global pin is trusted. */
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;

  font-weight: var(--mk-w-light);     /* §2.1 fontStyle Light / 300 */
  font-size: var(--mk-size-display);  /* §2.1 48 */
  line-height: var(--mk-lh-display);  /* §2.1 AUTO -> a 60px box. §8.12: CSS
                                         `normal` does NOT reproduce this. */
  color: var(--mk-ink-strong);        /* §3.1 #000000 */
}

/* --- body (2784:436) — the only #1a2328 in the section. 13 lines x 36 = 468
       at 323px; the wrap pattern is listed line-by-line in §2.1. --------- */
.mk-recovery-43__body {
  margin: 0;
  padding: 0;                         /* see the eyebrow — Salient's <p> gets
                                         `padding-bottom:1.5em`, 30px at 20px */
  font-family: var(--mk-font-sans);
  font-weight: var(--mk-w-regular);   /* §2.1 Regular / 400 */
  font-size: var(--mk-size-body);     /* §2.1 20 */
  line-height: var(--mk-lh-body);     /* §2.1 179.99999523162842% -> 36.0 */
  letter-spacing: 0;
  color: var(--mk-ink-body);          /* §3.1 #1a2328 */
}

/* ==========================================================================
   3. B — IMAGES RAIL  (2784:437)
   ========================================================================== */

/* §5.1 rule 3: the image rail is the ONLY elastic element — it absorbs 100%
   of the 1280 -> 1440 delta (717 -> 877). `flex: 1` expresses
   `width: calc(100% - 563px)` without hard-coding either frame width.
   §4: it deliberately overshoots the 120 margin and bleeds to the right edge. */
.mk-recovery-43__images {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--mk-space-4);             /* §1.3 itemSpacing 4 — the only itemSpacing
                                         in this section that actually renders */
  padding: var(--mk-space-4) 0;       /* §1.3 padding top 4 / right 0 / bottom 4 / left 0 */
}

/* §1.3 / §10: the container's declared topRight/bottomRight radii of 4 DO NOT
   RENDER (pixel probes at (1279,4)-(1279,9) return image content). Only the
   per-card LEFT radii render. So: no radius and no clipping on this element. */

/* ==========================================================================
   4. THE CARD — Salient `nectar-fancy-box[data-style="hover_desc"]`, retargeted
   Selectors are deliberately (0,4,0)+ so they beat Salient's own
   `.nectar-fancy-box[data-style=hover_desc]…` rules regardless of link order.
   ========================================================================== */

/* Answers `.nectar-fancy-box[data-style=hover_desc]{padding:11%}`.
   §4: the caption inset is FIXED px, proven — 60/717 = 8.37% at 1280 but
   60/877 = 6.84% at 1440, and the rendered inset is 60 at both. §6.1 dev 3. */
.mk-recovery-43__card.nectar-fancy-box[data-style="hover_desc"] {
  flex: 0 0 auto;                     /* §1.3 three 450px bands, never squeezed */
  padding: var(--mk-space-60);        /* §1.5 padding 60 on all four sides */
}

/* Answers `.nectar-fancy-box[data-border-radius="5px"]…{border-radius:5px}`.
   §1.4: topLeft 4 / topRight 0 / bottomRight 0 / bottomLeft 4, render-verified
   at (563,4),(564,4),(563,5) and (563,1360),(563,1361). The `overflow:hidden`
   that ships with Salient's rule is kept — the hover zoom needs it. */
.mk-recovery-43__card.nectar-fancy-box[data-style="hover_desc"][data-border-radius="5px"] {
  border-radius: var(--mk-radius-card) 0 0 var(--mk-radius-card);
}

/* Answers `.nectar-fancy-box .box-bg{height:100.2%;width:100.2%}` — Salient's
   0.2% overscan, there to hide the sub-pixel edge during its scale transform.
   Figma's FILL paint covers exactly 717 x 450, and `cover` re-crops when the
   box grows: at 718.43 x 450.90 the visible crop is off by up to 0.7px. The
   card already has `overflow:hidden`, so the overscan buys nothing here. */
.mk-recovery-43__card.nectar-fancy-box[data-style="hover_desc"] .box-bg {
  width: 100%;
  height: 100%;
}

/* Answers `.nectar-fancy-box[data-style=hover_desc] .box-bg:before/:after`,
   which ship `height:85%` and `linear-gradient(to bottom, rgba(15,15,15,0),
   rgba(15,15,15,.75))`. §3.2 decodes Figma's gradientTransform row 0 = (0,1,0)
   -> t = y -> a straight top-to-bottom axis spanning the FULL 450px card, and
   the tail stop is #000000bf = 191/255 = 0.749. Both pseudo-elements get the
   same paint, so Salient's rest/hover crossfade between them is a no-op.
   rgba(0,0,0,0.749) appears once on the page — no token, cited literal. */
.mk-recovery-43__card.nectar-fancy-box[data-style="hover_desc"] .box-bg::before,
.mk-recovery-43__card.nectar-fancy-box[data-style="hover_desc"] .box-bg::after {
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.749) 100%);
}

/* ==========================================================================
   5. THE CAPTION  (2784:439/440, 2784:442/443, 2784:452/453)
   §1.5 — every number here is RENDER-verified, not read from the payload: both
   the Text frame and its TEXT child sit at rotation -180 (two flips = upright),
   so their stored x/y are not parent-space top-left values (§9 of LOSSINESS).
   Geometry is identical in all three cards and in both languages:
     caption box  left 60 · right 60 · bottom 60   (box bottom = 390 from card top)
     block height 97 = 43.2 (title) + 21.4 (gap) + 32.4 (body)
     title ink top 301 · body ink top 363.5 · baseline-to-baseline 57.0
   Salient already pins the block to the bottom via
   `.nectar-fancy-box[data-style=hover_desc] .inner{align-self:flex-end}`.
   ========================================================================== */

/* init.js `Zi()` binds mouseenter on every
   `.nectar-fancy-box[data-style="hover_desc"]` and sets an INLINE
   `transform: translateY(-<hover-content height>px)` on `.heading-wrap`,
   because in Salient the second line is hidden until hover. In this design
   BOTH lines are visible at rest (§6.1 dev 1), so that shift must not happen.
   Inline styles are why this needs !important — CONVENTIONS.md §8.6. */
.mk-recovery-43__card .heading-wrap {
  transform: none !important;
}

.mk-recovery-43__card .heading-wrap h3 {
  margin: 0;
  font-family: var(--mk-font-sans);   /* NOT Merriweather: tokens.css sets a
                                         serif face on every h3, and §2.2 reads
                                         Poppins here. */
  font-weight: var(--mk-w-light);     /* §2.2 Light [derived] — 6/6 title strings
                                         within 1.5px at Poppins Light 24 */
  font-size: var(--mk-size-title);    /* §2.2 24 [derived] */
  line-height: 43.2px;                /* §2.2 179.99999523162842% x 24 */
  letter-spacing: 0;
  color: var(--mk-ink-inverse);       /* §3.1 #ffffff */
  text-shadow: 0 4px 14px var(--mk-shadow-50);  /* §2.2 DROP_SHADOW #00000080,
                                         offset 0/4, radius 14, spread 0 */
  text-transform: none;
}

/* Answers `.nectar-fancy-box[data-style=hover_desc] .hover-content{opacity:0;
   position:absolute;bottom:0;left:0;margin-top:10px;transform:translateY(20px)}`
   — Salient's until-hover reveal. §6.1 dev 1: keep both lines visible. */
.mk-recovery-43__card.nectar-fancy-box[data-style="hover_desc"] .hover-content {
  position: static;
  opacity: 1;
  transform: none;
  transition: none;
  margin: 21.4px 0 0;                 /* §2.2 paragraph gap [derived 97 - 43.2 - 32.4];
                                         measured baseline-to-baseline 57.0 */
  max-width: 100%;
  font-family: var(--mk-font-sans);
  font-weight: var(--mk-w-light);     /* §2.2 Light [derived] — 5/6 body strings
                                         best at Light 18; the dissent is
                                         "[Why sauna is important]" (§8.2) */
  font-size: var(--mk-size-body-sm);  /* §2.2 18 [derived] */
  line-height: 32.4px;                /* §2.2 179.99999523162842% x 18 */
  letter-spacing: 0;
  color: var(--mk-ink-inverse);
  text-shadow: 0 4px 14px var(--mk-shadow-50);
}

/* ==========================================================================
   6. RESPONSIVE
   ----------------------------------------------------------------------------
   1280 and 1440 are the only two frames the FILE contains, and between them
   nothing here moves except the image rail (§5.1). EVERYTHING BELOW 1280 IS
   INFERRED — spec §5.2 and §8.14 state plainly that no tablet or mobile frame
   for this section exists in Figma. These rules follow §5.2's reasoning
   verbatim rather than inventing a different one; they are not Figma truth.
   The two constants §5.2 says to carry through every breakpoint are the 180%
   line-height ratio and the fixed-px insets.
   ========================================================================== */

/* §5.2: "Treat ~1100px as the floor for the two-rail layout" — at 1024 the
   image rail is only 461 wide against a 450 height. Below the floor: stack. */
@media (max-width: 1099px) {

  .mk-recovery-43__split { flex-direction: column; }

  .mk-recovery-43__rail {
    flex: 0 0 auto;
    padding-block: 80px;              /* §5.2: the group loses its fixed 1126 box
                                         and becomes content-height with 64-80
                                         block padding */
  }

  /* §5.2: "Text block first at full width". --mk-page-x is already 64 at
     <=1049 and 48 at <=1024 via grid.css §6, which is the reduction §5.2 asks
     for; the rail inherits it from the padding shorthand above. */
  .mk-recovery-43__copy { width: 100%; }

  /* §5.2: 3-card stack full-bleed edge to edge, 450 -> ~380, keep the 4px
     rhythm, drop the left radii (full-bleed corners should be square). */
  /* !important because the card's own `style="min-height:450px"` is INLINE —
     it is the donor's knob, lifted verbatim from the Salient markup, and an
     inline declaration outranks any stylesheet rule without it.
     CONVENTIONS.md §8.6 asks that the forcing rule be named; this is it. */
  .mk-recovery-43__card.nectar-fancy-box[data-style="hover_desc"] {
    min-height: 380px !important;
    padding: 40px;                    /* §5.2: caption inset 60 -> 40 */
  }
  .mk-recovery-43__card.nectar-fancy-box[data-style="hover_desc"][data-border-radius="5px"] {
    border-radius: 0;
  }
}

/* §5.2 mobile: a proportional reduction of every size, with the 180% ratio
   preserved exactly (36/20, 40/32 title, 30.6/17 body, 36/20 and 28.8/16 in
   the caption). Card height "~280-300" -> 290. */
@media (max-width: 767px) {

  .mk-recovery-43__rail { padding-block: 64px; }

  .mk-recovery-43__eyebrow  { font-size: 13px; letter-spacing: 2px; }  /* §5.2 */
  .mk-recovery-43__body     { font-size: 17px; line-height: 30.6px; }  /* §5.2 */

  /* Compound again: the desktop rule above is `.mk-recovery-43 .…__title`
     (0,2,0) and a media query adds no specificity, so a bare class here is
     silently ignored. Keeping the 180% ratio: 32 -> 40 is §5.2's own pair. */
  .mk-recovery-43 .mk-recovery-43__title { font-size: 32px; line-height: 40px; }

  .mk-recovery-43__card.nectar-fancy-box[data-style="hover_desc"] {
    min-height: 290px !important;     /* see the tablet rule — inline knob */
    padding: var(--mk-space-24);      /* §5.2: caption inset 24 */
  }
  .mk-recovery-43__card .heading-wrap h3 {
    font-size: 20px; line-height: 36px;                                /* §5.2 */
  }
  .mk-recovery-43__card.nectar-fancy-box[data-style="hover_desc"] .hover-content {
    font-size: 16px; line-height: 28.8px; margin-top: 16px;            /* §5.2 */
  }
}

/* ==========================================================================
   11 · MK-RPLAN BINDING — D23 / D24 / D26.  Component + trace: 09-recovery-42.css
   RETIRED: rail flex 0 0 563px; copy width 323; images flex-column with a 4px
   gap; card flex 0 0 auto at the inline `min-height:450px` (removed in markup).
   ========================================================================== */
#s11-recovery-43 { min-height: 100svh; height: auto; }
#s11-recovery-43 .mk-recovery-43__split  { display: grid; align-items: start; }
#s11-recovery-43 .mk-recovery-43__rail   { flex: none; padding: var(--mk-page-x); padding-right: var(--mk-space-60); }
#s11-recovery-43 .mk-recovery-43__copy   { width: 100%; }
#s11-recovery-43 .mk-recovery-43__images { flex: none; display: block; gap: 0; padding: 0; }
#s11-recovery-43 .mk-recovery-43__card.nectar-fancy-box[data-style="hover_desc"] {
  flex: none;
  height: 100svh;
  min-height: 0;
  padding: var(--mk-space-60);
  border-radius: 0;
}
/* `long_zoom` scales .box-bg to 1.2 on hover over NINE seconds. On a 450px card
   that was a slow drift; on a full-screen photo it is a 20% zoom of a source
   that is already being upscaled 1.17x to cover the panel (see the asset gap in
   09-recovery-42.css). Pinned off — D26 is about the photo being the right size,
   and a hover that makes it 20% wronger fights that. */
#s11-recovery-43 .mk-recovery-43__card.nectar-fancy-box[data-bg-animation="long_zoom"].hovered .box-bg { transform: none; }

/* ==========================================================================
   R3 · 11 · MK-RPLAN ROUND-3 BINDING — D04 · D05 · D06 · D07
   Component + rationale: sections/09-recovery-42.css block "R3 · MK-RPLAN".
   ========================================================================== */
/* +1 class over css/rhythm.css §B04's copy of this selector — 09's R3-5. */
.mk-page #s11-recovery-43 .mk-recovery-43__card.nectar-fancy-box[data-style="hover_desc"].mk-rplan__panel {
  height: var(--mk-rplan-panel-h);
  border-radius: var(--mk-rplan-radius) 0 0 var(--mk-rplan-radius);
}
/* the id rule above out-ranks the component's `.mk-rplan__panel` margin, and
   the card also answers the `[data-border-radius="5px"]` selector at §174. */
#s11-recovery-43 .mk-recovery-43__card.nectar-fancy-box[data-style="hover_desc"][data-border-radius="5px"] {
  border-radius: var(--mk-rplan-radius) 0 0 var(--mk-rplan-radius);
}
#s11-recovery-43 .mk-recovery-43__images { padding-top: var(--mk-rplan-gap); }
/* D04's left gutter is css/rhythm.css §D04's — see 09's block R3-2. */
/* D05 — placement, from the rendered crops (scratchpad/crop-sim2.png).
   supplements: the bottles and the glass run 0.48-0.70.
   medical-care: the doctor is at 0.72-0.92 — centre-cropping took her face to
                 the edge of the frame, the same failure as 09's remediation.
   infrared-sauna: the cabin is left-of-centre at 0.28-0.62. */
#s11-recovery-43 .mk-recovery-43__card--1 .box-bg { background-position: 68% center; }
#s11-recovery-43 .mk-recovery-43__card--2 .box-bg { background-position: 78% center; }
#s11-recovery-43 .mk-recovery-43__card--3 .box-bg { background-position: 45% center; }

/* D04 — the page gutter the row's `padding-inline` used to supply, moved onto
   the rail so the media column can bleed to the glass. Rationale, the
   measurement and the rhythm.css interaction: 09-recovery-42.css block R3-2.
   MUST be the last padding declaration for this rail in this file. */
#s11-recovery-43 .mk-recovery-43__rail { padding-left: var(--mk-rplan-gutter); }

/* THE PINNED RAIL, AT ID SPECIFICITY.  The component states the pin in
   09-recovery-42.css block R3-A at (0,3,0), and four of the five sections pin
   their rail width with an id rule of their own (12 uses 100%, 13 uses auto)
   that out-ranks it.  MEASURED with only the component rule: 12 and 13
   computed 1512px wide instead of 756 when fixed — a rail spread across the
   whole viewport, on top of its own photographs.  A width of 100% of a grid
   AREA and of the VIEWPORT are the same number until the element leaves flow,
   which is exactly why this only appears once something is pinned.  Restated
   here, per file, where it wins.
   grid-column is belt: a fixed rail is out of grid flow, so without an
   explicit track the stage would auto-place into column 1. */
#s11-recovery-43[data-rplan-rail] .mk-recovery-43__rail {
  position: fixed;
  top: 0;
  left: var(--mk-rplan-pin-x, 0px);
  width: var(--mk-rplan-pin-w, 50%);
  height: 100svh;
}
#s11-recovery-43 .mk-rplan__rail  { grid-column: 1; }
#s11-recovery-43 .mk-rplan__stage { grid-column: 2; }

/* ==========================================================================
   11 · MOBILE STRIP MATES (<=999px) — for 09-recovery-42.css block R4-M.
   Rationale at 09's twin block.
   ========================================================================== */
@media (max-width: 999px) {
  #s11-recovery-43 .mk-recovery-43__split { grid-template-columns: 100%; }
  #s11-recovery-43 .mk-rplan__rail,
  #s11-recovery-43 .mk-rplan__stage { grid-column: auto; }
  #s11-recovery-43 .mk-recovery-43__rail {
    padding: var(--mk-rplan-strip-top) var(--mk-page-x)
             var(--mk-rplan-strip-bot, var(--mk-space-24));  /* R5 item 2 */
  }
  /* Caption: NOT restated. Round 6 retires the top-band squeeze (R5-STACK,
     deleted in 09-recovery-42.css) that this id-rank mate used to restore
     against — each card's caption reverts to its own authored bottom
     anchor, unmodified.
     This file's §5.2 mobile rows still pin the cards' min-height (380/
     290px, !important against the donor's inline knob) — still released
     here, JS-armed only: with UNIFORM sticky offsets (round 6) every card
     in a step needs the SAME rendered height for a later one to cover an
     earlier one in full, and §5.2's per-card floors would otherwise leave
     them mismatched. The no-JS page keeps its §5.2 floors. */
  .mk-rplan-js #s11-recovery-43 .mk-recovery-43__card.nectar-fancy-box[data-style="hover_desc"] {
    min-height: 0 !important;
  }
}