/* The two breakpoints, and nothing else.
 *
 * Last in the cascade on purpose: these rules have the same specificity as the
 * base rules they override, so loading this file earlier would silently lose
 * every one of them. See `stylesheets` in lib/assets.dart.
 *
 * Two blocks rather than per-component queries scattered across five files.
 * About a dozen rules change in total, and the question a reader actually has
 * is "what does the phone look like?" — which per-component queries answer in
 * five places or not at all.
 *
 * ---------------------------------------------------------------------------
 * WHAT DELIBERATELY GETS NO QUERY
 *
 * Every `repeat(auto-fit, minmax(300px, 1fr))` grid — the Interregnum fact
 * section, Support and the FAQ. At a 32px gutter those need about 720px of
 * viewport before a second column fits, so they collapse on their own,
 * between these two breakpoints, with no query firing.
 *
 * Adding queries for them would be dead code that later contradicts the
 * `auto-fit` the moment a gap changes. Do not "fix" their absence.
 * ------------------------------------------------------------------------ */

/* ===========================================================================
 * Tablet — 860px
 * ======================================================================== */
@media (max-width:860px){
  :root{ --site-gutter:24px; }

  /* The showcase's fixed ratio needs roughly 700px of content to work. Below
   * that the figure and the prose both get too narrow to read, so it becomes
   * one column and the frame sits above the text. */
  .page-home__showcase{
    grid-template-columns:1fr;
    gap:var(--space-xxl);
    padding:48px 0;
  }

  .site-nav{ gap:var(--space-xl); }

  .page-home__hero{ padding:64px 0 56px; }
  .page__masthead,
  .page-game__masthead{ padding:56px 0 var(--space-xxl); }
  .page-game__facts,
  .page-support__grid,
  .page-faq__columns{ gap:40px; }

  /* Five phones across stop being legible below the tablet width, so the
   * grid becomes a strip that scrolls sideways and snaps phone by phone,
   * bleeding to the screen edge so the next phone peeks in as the cue. */
  .page-game__shots{
    display:flex;
    gap:var(--space-md);
    margin-inline:calc(var(--site-gutter) * -1);
    padding-inline:var(--site-gutter);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--site-gutter);
    overscroll-behavior-x:contain;
  }
  .page-game__shot{
    flex:0 0 min(46%, 240px);
    scroll-snap-align:start;
  }

  /* The masthead stays at 44px here — it fits, and shrinking type at the
   * first breakpoint is how a design ends up with four sizes of heading. */
}

/* ===========================================================================
 * Phone — 560px
 * ======================================================================== */
@media (max-width:560px){
  :root{ --site-gutter:20px; }

  /* ---- the header becomes two rows -------------------------------------
   *
   * At 520px of content, a 26px wordmark plus three labels plus `PT · EN` at
   * 28px gaps does not fit. The options were: shrink the nav type, hide the
   * nav behind a hamburger, or give the nav its own row.
   *
   * Shrinking breaks the tab role — `--type-support` is 15px and the next
   * size down is the 13px footnote, which is the reading floor and not a
   * control size. A hamburger needs JavaScript, or a `<details>` that traps
   * focus oddly, for three links.
   *
   * So the bar keeps the wordmark and the language pair at 56px, and the nav
   * moves to its own 44px row. Still sticky, still three links, still the 2px
   * underline, still no JavaScript.
   * -------------------------------------------------------------------- */
  .site-header__bar{
    flex-wrap:wrap;
    height:auto;
    padding:0;
  }
  .site-header__mark,
  .site-lang{
    height:56px;
  }
  .site-header__mark{ padding-left:var(--site-gutter); }
  .site-lang{ margin-right:var(--site-gutter); }
  .site-nav{
    order:3;
    justify-content:space-between;
    width:100%;
    height:var(--touch-min);
    padding:0 var(--site-gutter);
    border-top:var(--stroke-chrome) solid var(--chrome-hairline);
  }
  /* Two rows now, so every deep-link target's offset grows with it. Setting
   * the variable rather than the `scroll-margin-top` means there is still one
   * number, and it is the one the header actually measures: 56px of bar,
   * 44px of nav, and the two 0.33px rules the browser resolves to 125. */
  :root{ --header-height:125px; }

  /* ---- the masthead ----------------------------------------------------
   *
   * 44/45 is a 1.02 line-height: fine for a one-line iOS title, too tight for
   * "Perguntas frequentes" wrapping to two lines at 320px. 32/34 holds the
   * token's -0.02em ratio (-0.64px) and gives the descenders room.
   *
   * As shipped, the design is a WCAG 1.4.10 failure at 320px and 200% zoom,
   * so this block is a conformance fix rather than polish.
   * -------------------------------------------------------------------- */
  .page__title{
    font:var(--weight-bold) 32px/34px var(--font-serif);
    letter-spacing:-0.64px;
  }

  .page-home__hero{ padding:40px 0; }
  .page__masthead,
  .page-game__masthead{ padding:40px 0 24px; gap:var(--space-lg); }
  .page-game__shot{ flex-basis:62%; }
  .page-legal__body{ padding:var(--space-xxl) 0 56px; }
  .page-game__steps,
  .page-game__gallery,
  .page-game__facts,
  .page-support__grid,
  .page-support__launch,
  .page-faq__more{ padding:var(--space-xxl) 0; }
  .page-faq__columns{ padding:var(--space-xxl) 0 0; }

  .page-home__figure{ padding:24px; }
  .page-game__step{ grid-template-columns:28px 1fr; gap:var(--space-md); }

  /* The 404's masthead takes the same treatment as every other page's, and
   * for the same reason: 44/45 is too tight for a heading that wraps. It is
   * listed separately because `web/404.html` is hand-written rather than a
   * route, so it does not share `.page__title`. */
  .page-404__title{
    font:var(--weight-bold) 32px/34px var(--font-serif);
    letter-spacing:-0.64px;
  }
  .page-404__block{ padding:var(--space-xxl) 0; }
}