/* ============================================================
   SECTION 4 — TRANSPARENCY
   Not a standalone screen — a continuation of the story the previous
   section started ("just normal products") into WHY. Minimal vertical
   rhythm (tight padding, no centring) so it reads as one continuous
   editorial page, Apple-style, not a slide deck. Desktop: copy left
   (headline, plain-sentence subtitle, checkmarked principles), the
   cropped back-label bottle right, sized and positioned as
   documentation/inspection — large, sticky, allowed to overflow the
   section's own box rather than being boxed in. The bottle image now
   cycles through all three products (js/product-cycle.js, same
   mechanism as Hero) instead of always showing the shampoo label, and
   is cropped to stop just above each bottle's own printed QR code
   (the external QR block that used to sit below the benefit list was
   removed — the label's own printed QR is the only one shown now).
   ============================================================ */
.panel-transparency {
  /* content-height, shared rhythm (nav-clear top + small shared bottom)
     so its gaps match every other section — see base.css .panel. */
  padding-bottom: var(--section-pad-bottom);
  padding-top: max(124px, clamp(24px, 4svh, 56px));
}
/* .flex-col-center (css/utilities.css) supplies display/flex-direction/align-items */
.transparency-grid {
  text-align: center;
  gap: clamp(32px, 6svh, 64px);
}
@media (min-width: 768px) {
  .transparency-grid {
    display: grid;
    /* copy left with a proportional cap, bottle right absorbing the
       remainder — same pattern as every other 2-column section */
    grid-template-columns: minmax(0, min(560px, 46%)) 1fr;
    align-items: start;
    gap: clamp(40px, 6vw, 96px);
    text-align: left;
  }
  /* query container for the shared --type-headline token's cqw term
     (css/tokens.css, consumed by .hero-headline in hero.css) — past
     ~1700px wide this column's flat 560px cap stops growing while an
     svh-only formula keeps growing, and the title ran past its column
     (confirmed: 19px overflow at 2560px wide, before the shared-token
     fix). No section-specific font-size override needed here any more —
     the shared rule + this container is sufficient. */
  .transparency-copy { container-type: inline-size; }
  /* the back label is enlarged and cropped near the printed divider line on
     the bottle (that line sits at ~82.5% of every product crop's height),
     then a further 5% tighter per request — so the clip window is 77.5% of
     the image height. The figure is a fixed-height clip window (overflow:
     hidden); the image inside is taller and top-anchored, so the overflow IS
     the crop. Sizing is decoupled from the copy column (js/transparency-
     figure-height.js's --transparency-copy-h no longer drives it), so the
     bottle can be much larger than the text. NB: keep this height at 0.775×
     the .pf-img height below — that ratio is what sets where the cut lands. */
  .transparency-figure {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-self: start;
    height: clamp(371px, 56.37svh, 542px);
    overflow: hidden;
    /* raised 10% per request (tried 20% first — the copy column and this
       figure share one flush top edge with zero gap between them, so any
       raise overlaps the headline; confirmed with the user that some
       overlap is fine, just not that much, hence 10% not 20%). Transform
       doesn't affect the crop math (the frame's own overflow:hidden box
       still does the clipping, this just moves the whole clipped block up
       on the page), so the 0.775 frame:image crop ratio documented above
       stays exactly intact. */
    transform: translateY(-10%);
  }
  /* no pin in this treatment — the big cropped bottle reads as a fixed
     documentation object, not a travelling one; static keeps its cap flush
     with the top of the clip window. */
  .transparency-figure .product-figure-sticky { position: static; }
  .product-figure-crop .pf-img { height: clamp(481px, 72.74svh, 698px); }
  /* the crop line itself is the "natural" bottom edge now — drop the soft
     white fade that stood in for it on the smaller, fully-visible bottle. */
  .product-figure-crop::after { display: none; }
}
/* short/landscape viewport (see hero.css's matching query) — both clamps
   above have a floor (371px / 481px) taller than the entire available
   height on an iPhone-Air-landscape-style screen, so they never actually
   shrink there and the bottle overflows. Lower floors, sized off vh
   instead of svh, at the same ~0.775 frame:image ratio the crop math
   depends on (visible-crop-height = pf-img-height * 0.775). */
@media (min-width: 768px) and (max-height: 600px) {
  /* was 50vh — landed well short of the panel's own bottom edge, unlike
     desktop where this figure reaches the section's full height. Bumped
     to actually fill the available column down to (near) the panel's
     bottom, same ~0.775 frame:image ratio the crop math depends on. */
  .transparency-figure { height: clamp(140px, 68vh, 371px); }
  .product-figure-crop .pf-img { height: clamp(180px, 87.7vh, 481px); }
  /* no font-size override needed here any more — now that the desktop
     rule is the shared --type-headline token (no section-specific
     override, see the container-type comment above), hero.css's bare
     `.hero-headline` landscape rule applies cleanly with nothing of
     equal-or-higher specificity left to fight it. (This is exactly the
     specificity collision documented in hero.css's own landscape block,
     fixed here by removing the competing rule instead of matching it.) */
  /* cancel the desktop-only "raise 20%" translate above — this breakpoint's
     height/crop values were independently tuned against this short
     viewport and shouldn't also shift by the desktop rule's percentage. */
  .transparency-figure { transform: none; }
}
/* eyebrow label sitting just above the body copy (below the sub) — same
   tracked-caps treatment as "Nothing unnecessary" (.editorial-intro-label,
   css/sections/simplicity.css), per explicit request: weight 500, ~16px,
   0.14em tracking, uppercase, dark. It's the first child of the flex
   .transparency-body, so the column's own `gap` spaces it from the first
   paragraph — no margin needed here. A little extra top space separates
   the label from the sub above it. Scoped as `.transparency-body
   .transparency-eyebrow` (0-2-0) so it beats the `.transparency-body p`
   rule below (0-1-1) — the eyebrow is a <p>, so without this the muted
   body-paragraph style would win on specificity and grey the label out. */
/* same style as the carousel's ".stage-name .type-label" (SHAMPOO):
   weight 500, --t-label (12px), 0.16em, uppercase, dark. */
.transparency-body .transparency-eyebrow {
  margin-top: clamp(4px, 0.8vw, 8px);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--text-primary);
}
/* body copy that replaced the old checkmark list — two short paragraphs
   at the Body tier (--t-body), muted. */
.transparency-body {
  margin-top: var(--space-fluid-standard);
  width: min(480px, 100%);
  display: flex;
  flex-direction: column;
  gap: 0.85em;
}
.transparency-body p {
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--text-muted);
}
@media (max-width: 767px) {
  /* mobile composition: headline+sub span the top, then a two-column row
     below it — the bottle's ingredient-label half on the LEFT, the
     supplier copy on the RIGHT. .transparency-copy un-boxes via
     display:contents so head / body become direct grid items alongside
     the figure and can be placed by area (same technique membership.css
     uses for its own head/figure/benefits split). */
  .transparency-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    grid-template-areas:
      "head  head"
      "figure benefits";
    align-items: start;
    column-gap: clamp(12px, 3vw, 20px);
    row-gap: clamp(24px, 5svh, 44px);
    text-align: left;
  }
  .transparency-copy { display: contents; }
  .transparency-head { grid-area: head; }
  .transparency-body { grid-area: benefits; margin: 0; width: 100%; align-self: start; }

  /* the figure shows only the RIGHT half of the label (the ingredients
     side — the left, branded MUTA/product-name half is cropped away, not
     just bled partway off) and is clipped vertically at the same point
     desktop's crop lands: right after the "N Ingredients · pH X.X" line,
     before the divider + "how to use" icon row the real printed label has
     below it. Both crops are done the same way: aspect-ratio locks the
     frame's shape to the image's own, so the cut can never drift at any
     width, instead of independently-tuned clamps. The horizontal crop
     shows the rightmost 62% of the label, not an even 50/50 split — a
     true half-crop lands mid-word into "Purified Water" (verified by
     drawing a 10%-gridline overlay on the raw source: the ingredients
     column's left edge sits at ~38-40% of the label's width, consistent
     across all three products' labels), so the image is rendered at
     100/0.62 ≈ 161% of the frame's width, right-aligned — the hidden
     ~38% spills past the frame's left edge into the overflow:hidden
     clip. Frame aspect-ratio scales the same way: 351×0.62 / (628×0.82)
     ≈ 218/515 (628×0.82 = the vertical-only crop height already used by
     the old full-width desktop treatment). */
  .transparency-figure {
    grid-area: figure;
    aspect-ratio: 218 / 515;
    overflow: hidden;
    position: relative;
  }
  .product-figure-crop { position: relative; width: 100%; height: 100%; }
  .product-figure-sticky .pf-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 161%;
    height: auto;
    max-width: none;
  }
  .product-figure-crop::after { display: none; }
}