/* =============================================================
   uv-responsive.css — shared device-adaptive layer
   ------------------------------------------------------------
   Templates are designed mobile-first with `vw` math sized for a
   ~390px phone canvas. Above ~600px (iPad portrait, landscape,
   desktop) the same layout looked tiny + drowned in empty space
   because `min-height: 100vh` stretched every scene to the full
   tablet viewport while the content stayed phone-sized.

   This file introduces a "design canvas" pattern that scales the
   whole cinema column up to a sane max width on tablet/desktop
   while keeping mobile EXACTLY as-is. Each .section also gets a
   gentler min-height ceiling so vertical empty space disappears.

   IMPORTANT: scoped to `.cinema` so the editor / dashboard / chrome
   are untouched. Mobile (≤600px) is unaffected — all rules are
   inside `@media (min-width: 601px)` so we never regress phones.
   ============================================================= */

/* ---- Tablet portrait & up (iPad mini, iPad, etc.) ---------- */
@media (min-width: 601px) {
  /* The full template stack scales as a centered "canvas" column.
     We pick 560px — wide enough for the largest clamp() targets to
     hit their ceiling, narrow enough to feel like a curated invite
     card rather than a phone screenshot stretched edge-to-edge. */
  .cinema {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Each section is still vertical-flex-centered, but stop forcing
     a full-viewport tall scene. 720px gives the design enough room
     to breathe (countdown rows, hero art, registry blocks) without
     leaving half a screen of empty space at iPad portrait/landscape. */
  .cinema .section {
    min-height: min(100svh, 720px);
  }

  /* CRITICAL EXCEPTIONS — hero sections (section-1) and any section with
     layered absolute-positioned art that anchors copy at the TOP and art
     at the BOTTOM must keep their full viewport height. Capping them
     pulled the bottom-anchored bear up into the top-anchored wordmark
     and produced an overlap. The .uv-tall escape hatch lets future
     templates opt any section out of the cap without per-template CSS. */
  .cinema .section-1,
  .cinema .section.uv-tall {
    min-height: 100svh;
  }

  /* Watercolor "accent" sprites are anchored bottom-right with vw.
     With a 560px canvas inside a wider viewport, `min(50vw, 240px)`
     resolves to 240px which now reads correctly at proportion. The
     section__art--accent rules already use !important — leave them. */
}

/* ---- Tablet landscape & desktop (≥1024px) ------------------ */
@media (min-width: 1024px) {
  /* Allow a touch more room on big screens so the design doesn't
     look like a phone shrunken into the middle of a desktop. */
  .cinema {
    max-width: 600px;
  }

  /* Compress the per-section vertical real estate a little more —
     desktop viewports are short relative to their width, so very
     tall sections force unnecessary scrolling. */
  .cinema .section {
    min-height: min(100svh, 760px);
  }

  /* Same hero exception as above — the layered-art hero needs the
     full viewport so the bottom-anchored bear stays clear of the
     top-anchored wordmark. */
  .cinema .section-1,
  .cinema .section.uv-tall {
    min-height: 100svh;
  }
}

/* ---- Optional: utility class authors can opt into ---------- */
/* If a template wants a wider hero scene (e.g. a multi-column block
   that benefits from desktop space), add .uv-wide to that scene. */
@media (min-width: 601px) {
  .cinema .section.uv-wide {
    max-width: none;
  }
}

/* ---- Background continuity --------------------------------- */
/* When the cinema column is narrower than the viewport, the empty
   margins to either side need a background so the canvas doesn't
   visually "float" on white. Templates already set body { background }
   so this is just a guard for any template that sets the parchment
   color on .cinema instead. */
@media (min-width: 601px) {
  body { background-color: var(--surface-warm, var(--bg, #faf7f2)); }
}