/* =============================================================================
   HERO SIZES — the one place to tune the landing page's first screen
   =============================================================================
   Every size in the hero is a variable below; css/desktop.css and
   css/mobile.css only read them. After a change, bump ?v= on this file's
   <link> in index.html (nginx sends no Cache-Control) and deploy.

   How to read the values:
     rem      a fixed size; 1rem = 16px
     vw, svh  a share of the screen's width / height (5vw = 5% of the width)
     clamp(min, preferred, max)
              the preferred size, never below min or above max
     --hu     one pixel of the desktop composition. The hero is laid out for a
              1262×716 laptop and scaled to fill the first screen of every
              other one: --hu is 1 there, about 1.4 on a 1920×1080 monitor,
              0.8 on a small laptop. A size written calc(var(--hu) * N) grows
              and shrinks with the screen; the others don't.
     --mss-consent-h
              the cookie bar's height while it is up (assets/consent.js sets
              it), unset otherwise: on a laptop or tablet the first screen
              ends at the bar's top edge, so the order button is never under
              it. A phone does it its own way (css/mobile.css, .consent-tight). */

/* ------------------------------------------- laptops, desktops and tablets */
@media (min-width: 700px) and (min-height: 501px) {
  :root {
    /* Whichever runs out first — the screen's width (1262 at scale 1) or the
       height left below the 88px nav (628 at scale 1) — sets the scale. */
    --hu: clamp(.55px, min(calc(100vw / 1262), calc((100vh - 88px - var(--mss-consent-h, 0px)) / 628)), 2.2px);

    --hero-d-eyebrow: .74rem;                         /* "PERSONALIZED SAINT STORYBOOKS" */
    --hero-d-title: clamp(3rem, 5.2vw, 5.3rem);       /* "Your child becomes the saint…": 5.2% of the screen's width, 48–85px */
    --hero-d-button: 1.08rem;                         /* "Order the book" */
    --hero-d-gap: calc(var(--hu) * 30);               /* space between the eyebrow, the headline and the button */
    --hero-d-book: calc(var(--hu) * 512);             /* the book's width (it is square) */
    --hero-d-book-space-top: calc(var(--hu) * 52);    /* room above the book, for the photo and the paperclip */
    --hero-d-book-space-bottom: calc(var(--hu) * 36); /* room below it, for its shadow */
    --hero-d-columns-gap: calc(var(--hu) * 64);       /* between the text and the book */
    --hero-d-bob: calc(var(--hu) * 12);               /* how far the book rises before it changes child (index.html, every 2 s) */
  }
  @supports (height: 100svh) {
    :root { --hu: clamp(.55px, min(calc(100vw / 1262), calc((100svh - 88px - var(--mss-consent-h, 0px)) / 628)), 2.2px); }
  }
  /* A tablet (a touch screen first) puts the order button under the book
     (css/desktop.css). On its side, the composition scales into the height
     left over once the button has its row. */
  @media (hover: none) and (pointer: coarse) {
    :root {
      --hero-t-cta: 122px;                            /* the order button and the price under it, below the book, with room around them */
      --hu: clamp(.55px, min(calc(100vw / 1262), calc((100vh - 88px - var(--mss-consent-h, 0px) - var(--hero-t-cta)) / 628)), 2.2px);
    }
    @supports (height: 100svh) {
      :root { --hu: clamp(.55px, min(calc(100vw / 1262), calc((100svh - 88px - var(--mss-consent-h, 0px) - var(--hero-t-cta)) / 628)), 2.2px); }
    }
  }
  /* An upright tablet stacks the text above the book, so the composition is
     a 700×990 frame there (the button and the price included). */
  @media (max-aspect-ratio: 9/10) {
    :root { --hu: clamp(.55px, min(calc(100vw / 700), calc((100vh - 88px - var(--mss-consent-h, 0px)) / 990)), 2.2px); }
    @supports (height: 100svh) {
      :root { --hu: clamp(.55px, min(calc(100vw / 700), calc((100svh - 88px - var(--mss-consent-h, 0px)) / 990)), 2.2px); }
    }
  }
}

/* ------------------------------------------------------------------ phones */
@media (max-width: 699.98px), (max-height: 500.98px) {
  :root {
    --mnav-h: 52px;                                   /* the thin bar with the logo and the menu button */
    --hero-m-eyebrow: .66rem;                         /* "PERSONALIZED SAINT STORYBOOKS" (shrinks only if a phone is too narrow for one line) */
    --hero-m-title: clamp(2.3rem, 10vw, 2.9rem);      /* "Your child becomes the saint…": 10% of the width, 37–46px */
    --hero-m-button: 1.06rem;                         /* "Order the book" */
    --hero-m-height: 93vh;                            /* the hero's height, as a share of the screen (above the cookie bar: css/mobile.css, .consent-tight) */
    --hero-m-height-min: 460px;                       /* …but never less than this */
    --hero-m-book-max: calc(100vw - 44px);            /* the book is never wider than the screen less its margins */
    --hero-m-bob: 8px;                                /* how far the book rises before it changes child (index.html, every 2 s) */
  }
  @supports (height: 100svh) {
    :root { --hero-m-height: 93svh; }
  }
}