/**
 * Gallery page layout.
 *
 * Loaded only on the gallery template (see rayan_assets), so it can own plain
 * class names without competing with the shared stylesheet.
 *
 * The page has two bodies of work stacked on one another: a short video reel
 * and a long photo mosaic. The shared centered `.sec-head` cannot separate them
 * (three centered blocks in a row read as one undifferentiated column), so both
 * get a start-aligned baseline header instead: title on the reading edge, count
 * on the far edge, one hairline underneath. Two sections, one header system,
 * two different content grids.
 */

/* ---------- Section header (baseline row) ---------- */

.sec-lead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-bottom: 1.1rem;
  margin-bottom: 2.6rem;
  border-bottom: 1px solid var(--line-soft);
}

.sec-lead-text { max-width: 58ch; }

.sec-lead h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  color: var(--cream);
  margin: 0;
}

.sec-lead p {
  margin: .7rem 0 0;
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.85;
}

/* The count sits on the far edge and stays on the headline's baseline. It is
   the page's only "how much is here" signal, so it keeps the accent colour. */
.sec-count {
  flex: none;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--gold-2);
  white-space: nowrap;
}

/* ---------- Photo mosaic ---------- */

/* Section spacing is tightened between the two grids: they are one chapter of
   the page, and the full 6.5rem rhythm made them read as unrelated pages. */
.gal-photos { padding-top: 3.5rem; }

/* Per-cell reveal. main.js already staggers `.reveal` elements in document
   order, so marking the cells (rather than the grid) makes the mosaic arrive in
   reading order instead of as one block. Collapses under reduced motion via the
   shared rule in styles.css. */
.gallery--mosaic .g-item { will-change: opacity, transform; }

.gallery--mosaic .g-item.in { will-change: auto; }

@media (max-width: 780px) {
  .sec-lead {
    margin-bottom: 2rem;
    gap: .5rem 1.5rem;
  }
  .gal-photos { padding-top: 2.5rem; }
}