/* ============================================================
   SECTION 6 — THREE PRODUCTS
   Content-height (no forced --band) — uniform padding-based gap to the
   neighbouring sections (see base.css .panel).
   ============================================================ */
.products-head {
  text-align: center;
  margin-bottom: clamp(36px, 6svh, 80px);
  /* query container for the shared --type-headline token's cqw term
     (css/tokens.css) — centered, full-wrap-width heading, so this is a
     generous no-op ceiling rather than a binding constraint (same role
     as story.css's matching container). */
  container-type: inline-size;
}
/* Title/sub reuse .hero-headline/.hero-sub (same classes as Hero and
   Simplicity's "Finally, just normal products") so this reads as the same
   display-type family, not a smaller lookalike — see build/components/
   Products.mjs. Both need margin-inline:auto to stay centred as blocks
   within .products-head's text-align:center (hero-sub also carries its own
   max-width:34ch, which would otherwise hug the left edge). */
.products-head .hero-headline,
.products-head .hero-sub {
  margin-inline: auto;
}
/* wider than the shared .hero-sub's own 34ch (tuned for Hero's narrower,
   left-aligned copy column, competing for space with the bottle beside
   it) — Products' sub is centred with the full section width free, so a
   tight 34ch cap only forces extra, unnecessary wraps. */
.products-head .hero-sub { max-width: 46ch; }
/* content is a plain string (content/en.mjs) balanced by the browser —
   text-wrap:balance evens the line lengths at whatever width results
   (2 lines within the 46ch cap on desktop, 3 even lines on a phone),
   replacing a hard <br> that only looked right at one width band. Also
   undo the shared .hero-sub desktop nowrap (hero.css), which was a real
   centring bug: with nowrap forcing a single line wider than the
   max-width above, the browser doesn't centre-overflow it symmetrically,
   it clamps the line's start to the box's left edge — so the whole
   sentence silently rendered flush-left instead of centred. Equal
   specificity to hero.css's `.hero-sub{white-space:nowrap}` (single class
   each); this file loads later, so it wins. */
.products-head .hero-sub { white-space: normal; text-wrap: balance; }

/* ---- three-product composition ---- */
.trio {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--bottle-gap);
}
.trio-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.trio-item img {
  /* 20% larger than the original clamp(200px, 38svh, 440px) */
  height: clamp(240px, 45.6svh, 528px);
  width: auto;
  object-fit: contain;
  display: block;
}
/* short/landscape viewport (see hero.css's matching query) — the 240px
   floor above is a fixed desktop minimum, never meant to shrink further;
   on a ~420px-tall screen that alone is 57% of the viewport for just the
   bottle, on top of the headline above it, forcing a lot of scroll for a
   section that should be able to fit far more comfortably. Lower floor,
   vh instead of svh so it actually tracks this short height. */
@media (min-width: 768px) and (max-height: 600px) {
  .trio-item img { height: clamp(130px, 40vh, 240px); }
}
@media (max-width: 767px) {
  /* same row composition as desktop (three bottles side by side), just
     scaled down to fit a phone width — each bottle capped small enough
     that three plus their gaps stay comfortably inside the container. */
  .trio {
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(8px, 3.2vw, 18px);
  }
  .trio-item img {
    width: clamp(72px, 24vw, 112px);
    height: auto;
  }
}