/* ==========================================================================
   responsive.css - the only file with media queries
   Mobile is the baseline; these rules add the wider layouts.
   ========================================================================== */

/* ---------- large: hero becomes two columns -------------------------------- */
@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--sp-9);
  }

  .hero__aside {
    max-width: 620px;
    margin-left: auto;
  }

  .about__grid {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: var(--sp-8);
  }

  .section-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 46ch);
    align-items: end;
    justify-content: space-between;
  }

  .section-head p {
    text-align: right;
  }
}

/* ---------- medium: hamburger nav ---------- */
@media (max-width: 900px) {
  .nav-toggle {
    display: block;
  }

  .nav-links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-3) var(--gutter) var(--sp-6);
    background-color: var(--bg-deep);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity var(--t-mid) var(--ease),
      transform var(--t-mid) var(--ease), visibility var(--t-mid);
  }

  .nav-links.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .nav-links a {
    padding-block: var(--sp-4);
    font-size: var(--fs-base);
  }

  .nav-links a::after {
    content: none;
  }
}

/* ---------- small: single column everything ---------- */
@media (max-width: 640px) {
  :root {
    --gutter: var(--sp-4);
    --nav-h: 64px;
  }

  .section {
    padding-block: var(--sp-8);
  }

  /* no extra padding on the hero itself: every .slide already clears the
     navbar with its own padding-top, and this pushed the artwork down far
     enough to leave a band of page background above it and shove the
     progress dots below the fold */
  .hero__scroll {
    display: none;
  }

  .hero__logo {
    width: min(78vw, 360px);
  }

  .hero__logo--emblem {
    width: min(64vw, 300px);
  }

  .game-card__body {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  .game-card__cta {
    align-self: flex-start;
  }

  .btn-row {
    width: 100%;
  }

  .btn-row .btn {
    flex: 1 1 auto;
  }

  .slide-dots {
    bottom: var(--sp-3);
  }

  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- print ---------- */
@media print {
  .navbar,
  .hero__media,
  .hero__veil,
  .video {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}