/* how-made.css — "How it's made" · Figma D 1817:4802 (1050x337) / M 1817:5365 (358x526)
   Pattern C: nested in .science-index__main (no .container, no own padding/margin — the host owns gutter + gap).
   Source: brief/how-made.md §1b / §2 / §5 / §6 / §11 + cache/how-made.{desktop,mobile}.json (v1.5).
   Not built: "Video note" 1817:4809 (D-HM-3 / BA-SC-3), off-frame mobile guide 1817:5373 (D-HM-4).
   Scoped to .how-made / .how-made__* only (GLOBAL-SCOPE LOCK). Mobile-first: base = 390 anchor,
   768 pseudo-tablet = desktop split row (split-row rule), 1024 desktop. */

/* ---- Section shell (mobile base): column, text above video — 1817:5366 gap 24 ---- */
.how-made {
  --how-made-gap: clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 40px);        /* text ↔ video: M 24 */
  --how-made-title-gap: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px);  /* title → body: 16 */
  --how-made-p-gap: clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 8px);         /* p → p: 8 */

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--how-made-gap);
  width: 100%;
}

/* Text block 1817:5367 — vertical, gap 16, FILL width, Figma maxWidth 505 (D-HM-8, < 768 only) */
.how-made__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--how-made-title-gap);
  width: 100%;
  max-width: 505px;
}

/* Heading 1817:5368 / 1817:4804 — Heading/H2, #333333 (literal, brief-page §4.4) */
.how-made__title {
  width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: #333333;
}

/* Paragraph group 1849:17935 / 1834:14928 — vertical, gap 8 */
.how-made__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--how-made-p-gap);
  width: 100%;
}

/* p1, p2 1817:5369–5370 / 1817:4805–4806 + caption 1817:5371 / 1817:4807 — Body/Large/Regular (D-HM-2) */
.how-made__p,
.how-made__caption {
  width: 100%;
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: #333333;
}

.how-made__caption {
  color: var(--color-graphite);   /* #232323 — drawn fill differs from p1/p2 */
}

/* Video placeholder 1817:5372 — FILL width x FIXED 180 (D-HM-5), #292624, clipsContent; BA-HM-1: empty box */
.how-made__media {
  width: 100%;
  height: clamp(148px, calc(180px + (var(--max-vw) - 390px) * 0.015), 337px);
  background-color: #292624;
  overflow: hidden;
}

/* ---- Pseudo-tablet 768–1023 (no Figma layer): desktop split row, row-top (brief §6 Tablet layout) ---- */
@media (min-width: 768px) {
  .how-made {
    --how-made-gap: clamp(29.66px, calc(29.66px + (var(--max-vw) - 768px) * 0.025), 40px);
    --how-made-title-gap: 16px;
    --how-made-p-gap: 8px;

    flex-direction: row;
    align-items: flex-start;      /* 1817:4802 alignItems MIN — natural heights (D-HM-6) */
  }

  .how-made__text {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;              /* M2: the mobile 505 cap is a < 768 rule; the flex share governs the row */
  }

  .how-made__media {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: auto;
    aspect-ratio: 505 / 337;      /* 1817:4808 targetAspectRatio (locked) */
  }
}

/* ---- Desktop 1024+ (vw-base 1920): text 505 | gap 40 | video 505 = 1050 ---- */
@media (min-width: 1024px) {
  .how-made {
    --how-made-gap: clamp(21px, calc(40px * (var(--max-vw) / var(--vw-base))), 40px);
    --how-made-title-gap: clamp(9px, calc(16px * (var(--max-vw) / var(--vw-base))), 16px);
    --how-made-p-gap: clamp(4px, calc(8px * (var(--max-vw) / var(--vw-base))), 8px);
  }

  /* 1817:4804 FIXED 450 in the 505 column (D-HM-7) */
  .how-made__title {
    max-width: 89.1%;
  }
}