/* ==========================================================================
   Blush POC — Layout (S2): page wrapper, hero placeholder, two-column product.
   Composes from css/tokens.css. Loaded after base.css, before header.css.
   Desktop (≥768px) = two columns: text LEFT, media RIGHT.
   Mobile (<768px)  = single column stack: hero → media list → text.
   (Breakpoint per brief "Layout"; verified against assets-src/previews/.)
   ========================================================================== */

.page {
  /* Brief: media items are 500×500 and "the left column follows the width of
     the right column". No design token exists for this content dimension, so
     it lives here as one local constant (NOT a colour/space/type token). */
  --media-size: 500px;

  max-width: 1280px;                /* brief: desktop max-width */
  margin-inline: auto;
  padding-inline: var(--space-20);  /* page gutter */
  display: grid;
  gap: var(--space-40);             /* hero ↔ product rhythm */
  /* TEMPORARY (operator, S9): breathing room below the last image until the
     footer exists (footer is out of POC scope) — remove when it lands. */
  padding-block-end: calc(var(--space-80) * 2);
}

/* --- Hero -----------------------------------------------------------------
   S5's canvas hero (.hero / .hero__canvas) is the top region in this .page
   grid; its box sizing + cover-fit framing live in css/hero.css and
   js/hero-canvas.js. The floating header overlaps it. */

/* --- Product: media list + info block ------------------------------------ */
.product {
  display: grid;
  gap: var(--space-40);             /* media list ↔ info (mobile) */
  position: relative;               /* S9: the content scrolls up OVER the pinned
                                       hero — sit above its canvas (z:1) and
                                       edge strips (z:2) */
  z-index: 3;
}

.product__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-20);             /* mobile vertical media spacing */
}

.media-item {
  width: 100%;
  aspect-ratio: 1 / 1;              /* square; full-width on mobile */
  display: grid;
  place-items: center;
  background: var(--background-theme);
}

.product__info {
  max-width: var(--media-size);
  margin-inline: auto;             /* centre the text block in its track */
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

/* --- Mobile: the info block becomes a bottom-sheet drawer (S3) ------------
   Placement only — fixed to the viewport bottom, full width, above the page.
   The media list stays the page scroll; --drawer-peek reserves space so its
   last item clears the collapsed sheet. Surface + collapse live in content.css. */
@media (max-width: 767px) {
  .page { --drawer-peek: 128px; }         /* fallback; js/drawer.js measures it */

  .product { padding-block-end: var(--drawer-peek); }

  /* The media wall is FULL-BLEED and GAPLESS on mobile (operator, S9): no side
     gutters (same 50%−50vw escape as the splash; overflow-x:clip absorbs the
     scrollbar overhang) and no vertical spacing between the photos. */
  .product__media {
    width: 100vw;
    margin-inline-start: calc(50% - 50vw);
    gap: 0;
  }

  .product__info {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 20;                          /* above content + scrim (15) */
    max-width: none;                      /* override the desktop-track cap */
    margin-inline: 0;
    max-block-size: 90vh;                 /* never taller than the viewport */
  }
}

/* --- Desktop: two columns ------------------------------------------------ */
@media (min-width: 768px) {
  .product {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(var(--space-20), 6vw, var(--space-80)); /* gutter 20 → 80 */
    align-items: start;
  }
  .product__info  { grid-column: 1; grid-row: 1; }               /* text left */
  .product__media { grid-column: 2; grid-row: 1; gap: var(--space-40); } /* media right */
  .media-item     { max-width: var(--media-size); }              /* 500×500 max, centred */
}