/* POPHIES — About page composition (page-about-pophies.php)

   Page-specific layout only. This file is enqueued after style.css
   (see functions.php), so it refines the shared system for this page
   and never redefines the global tokens, typography, buttons, cards,
   .grid, .facts, .rule-list, .steps, .media, .section or header/footer. */

/* ---------- 1. Anchors under the fixed header ---------- */
/* #main and every in-page anchor (#background, #focus, #how-we-work …)
   stop below the fixed header instead of hiding under it. */
#main,
section[id] { scroll-margin-top: calc(var(--header-h) + 28px); }

/* ---------- 2. Hero ---------- */
/* The section starts below the fixed header, then adds its own air. */
.about-hero {
  padding-top: calc(var(--header-h) + clamp(52px, 7vw, 104px));
  padding-bottom: var(--section);
}

/* Copy left, image right; centred against each other. */
.about-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  min-height: min(82vh, 820px);  /* fallback where svh is unknown */
  min-height: min(82svh, 820px); /* tall hero, capped so short screens never clip */
}

/* Copy column: one readable measure, actions row, facts strip. */
.about-hero__copy { max-width: var(--read); }

.about-hero__copy .lede { margin-top: clamp(22px, 2.4vw, 32px); }

.about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: clamp(30px, 3.4vw, 44px);
}

.about-hero__copy .facts { margin-top: clamp(44px, 5vw, 64px); }

.about-hero__media {
  min-width: 0;
  align-self: center;
}

/* ---------- 3. Split: prose plus a margin-note column ---------- */
.about-split {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.about-split__prose {
  min-width: 0;
  max-width: var(--read);
}

/* The aside reads as a note in the margin: a hairline, not a card. */
.about-split__aside {
  min-width: 0;
  padding-top: 22px;
  border-top: 1px solid var(--stone);
}

.about-split__aside h4 { margin-bottom: 14px; }

/* On dark sections the hairline has to stay visible. */
.section--dark .about-split__aside { border-top-color: var(--on-dark-line); }

/* ---------- 4. Media band after a split ---------- */
/* Two images on one row, stepped back from the prose above them. */
.about-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: clamp(56px, 5vw, 72px);
}

/* Three equal columns where the section calls for it. */
.about-band--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- 5. Workshop gallery ---------- */
/* Six blocks, three per row; the wider row gap keeps every caption
   attached to its own image rather than floating between rows. */
.about-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 22px;
}

/* ---------- 6. Responsive (same breakpoints as style.css) ---------- */
@media (max-width: 980px) {
  /* Text and image stack: copy first, media below, as in the markup. */
  .about-hero {
    padding-top: calc(var(--header-h) + var(--section-sm));
    padding-bottom: var(--section-sm);
  }

  .about-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    min-height: 0;
  }

  .about-hero__copy { max-width: none; }
  .about-hero__copy .facts { margin-top: 40px; }

  /* Split becomes one column: prose, then the note underneath. */
  .about-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .about-split__aside { padding-top: 20px; }

  /* Media rows step down to two columns before going single. */
  .about-band,
  .about-band--3,
  .about-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .about-band { margin-top: 52px; }
}

@media (max-width: 660px) {
  .about-hero {
    padding-top: calc(var(--header-h) + 40px);
    padding-bottom: var(--section-sm);
  }

  .about-hero__grid { gap: 28px; }
  .about-hero__copy .facts { margin-top: 34px; }

  /* Keep the tall hero image from dominating a narrow screen. */
  .about-hero__media { max-width: 480px; }

  .about-split { gap: 26px; }
  .about-split__aside {
    padding-top: 18px;
    margin-top: 4px;
  }

  .about-band,
  .about-band--3,
  .about-gallery { grid-template-columns: minmax(0, 1fr); }

  .about-band {
    gap: 26px;
    margin-top: 40px;
  }

  .about-gallery { gap: 28px; }
}