/* ============================================================
   EDITORIAL CARD — a photo + a short title/caption, used 3x in the
   "nothing unnecessary" gallery (css/sections/simplicity.css's .cards).
   Two layouts from one markup (caption is a SIBLING of .card-media):
   - mobile: caption overlaid on the image over a soft scrim (this file)
   - desktop: image left, caption right on plain bg, horizontal card
     (css/sections/simplicity.css's .simplicity-bottom .card block)
   ============================================================ */
/* position:relative is the containing block for the mobile overlay
   caption (absolute, below) — harmless on desktop where the card becomes
   a grid and the caption is static. */
.card { position: relative; }
.card-media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
@media (max-width: 767px) {
  /* fixed height range (not aspect-ratio) — a 3:4 box stretched to a
     narrow phone's full width would run taller than intended */
  .card-media { aspect-ratio: auto; height: clamp(360px, 52svh, 440px); }
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* the caption lives ON the image (bottom-left, over a soft off-white
   scrim) instead of in a separate block below it — images dominate,
   text is secondary. Off-white (not the old dark scrim), so the
   caption reads as dark text on a pale fade, Aesop/Muji-style, rather
   than white-on-black. */
.card-scrim {
  position: absolute;
  inset: 0;
  /* the three source photographs (jasmine flowers, foam, clear gel) are
     all deliberately pale/light — the gradient needs to be strong
     enough to guarantee dark-text contrast regardless of how light the
     image underneath is */
  background: var(--scrim-card);
  pointer-events: none;
}
.card-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(24px, 3vw, 40px);
}
/* same tracked-caps treatment as the CTA's own "Join the waitlist"
   heading (.cta-head-lg, css/components/cta-form.css) — reusing that
   exact style instead of a one-off, so this caption reads as part of
   the same type system as the rest of the page. */
/* same style as the product-stage carousel's ".stage-name .type-label"
   (SHAMPOO): weight 500, --t-label (12px), 0.16em tracking, uppercase,
   dark. Per explicit request all the gallery caps-labels share this one. */
.card-title {
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary);
}
/* Body tier (--t-body, ~14-16) — a step or two below the H3-ish size it
   used to be, so the supporting copy across the gallery/transparency/story
   reads at one consistent smaller body size. */
.card-text {
  margin-top: 8px;
  max-width: 30ch;
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--text-muted);
}