/* ==========================================================================
   Tennis Arcade Games — responsive layer
   Mobile-first. Base styles in style.css target the smallest screen; this
   file adds capability as the viewport grows, plus pointer-type adaptations.

   Breakpoints
     480px  large phone
     700px  small tablet / large phone landscape
     900px  tablet landscape — nav unfolds, sidebars appear
    1100px  laptop
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mobile-first defaults (< 900px): stack everything, drawer navigation
   -------------------------------------------------------------------------- */
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.article-layout { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: var(--s6); }
.hero__inner { grid-template-columns: 1fr; }
.sidebar { position: static; }

/* Off-canvas navigation drawer */
.nav-toggle { display: inline-grid; }

/* The panel stays inside the viewport at all times and is revealed with
   clip-path rather than being parked off-screen with translateX(100%).
   A fixed element translated past the right edge extends the page's
   scrollable width on every page — html's overflow-x cannot contain it,
   because fixed elements are laid out against the viewport itself. */
.nav {
  position: fixed; inset: 0 0 0 auto; z-index: 190;
  width: min(84vw, 330px);
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: calc(var(--header-h) + var(--s5)) var(--s5) var(--s5);
  overflow-y: auto;
  margin-left: 0;

  clip-path: inset(0 0 0 100%);
  visibility: hidden;
  /* Visibility flips only after the reveal finishes closing. */
  transition: clip-path 0.26s var(--ease), visibility 0s linear 0.26s;
}
.nav[data-open="true"] {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.26s var(--ease), visibility 0s;
}

.nav__list { flex-direction: column; align-items: stretch; gap: var(--s1); }
.nav__link { padding: var(--s3) var(--s4); font-size: var(--fs-base); border-radius: var(--radius); }

/* A short inward slide of the contents reads as a drawer opening without
   anything crossing the viewport edge. */
.nav__list, .nav__close {
  transform: translateX(14px);
  transition: transform 0.26s var(--ease);
}
.nav[data-open="true"] .nav__list,
.nav[data-open="true"] .nav__close { transform: none; }

.nav-scrim {
  position: fixed; inset: 0; z-index: 180;
  background: rgba(6, 44, 29, 0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 0.26s var(--ease);
}
.nav-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

.nav__close { position: absolute; top: var(--s4); right: var(--s4); }

/* Prevent the page scrolling behind the open drawer */
body[data-nav-open="true"] { overflow: hidden; }

/* --------------------------------------------------------------------------
   480px and up
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__cta .btn { min-width: 200px; }
  .cookie-bar { padding: var(--s5) var(--s6); }
}

/* --------------------------------------------------------------------------
   700px and up
   -------------------------------------------------------------------------- */
@media (min-width: 700px) {
  :root { --header-h: 72px; }
  .wrap { padding-inline: var(--s5); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .section { padding-block: var(--s10); }
  .author-box { padding: var(--s6); }
  .article-meta { gap: var(--s6); }
}

/* --------------------------------------------------------------------------
   900px and up — desktop navigation, two-column article, sticky sidebar
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .nav-toggle, .nav__close { display: none; }

  .nav {
    position: static; width: auto; visibility: visible;
    clip-path: none; transition: none;
    background: transparent; border: 0; box-shadow: none;
    padding: 0; overflow: visible; margin-left: auto;
  }
  .nav__list, .nav__close { transform: none; transition: none; }
  .nav__list { flex-direction: row; align-items: center; gap: var(--s1); }
  .nav__link { padding: var(--s2) var(--s3); font-size: var(--fs-sm); }
  .nav-scrim { display: none; }
  body[data-nav-open="true"] { overflow: auto; }

  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.6fr repeat(3, 1fr); }

  .article-layout { grid-template-columns: minmax(0, 1fr) 312px; }
  .sidebar { position: sticky; top: calc(var(--header-h) + var(--s4)); }

  .hero__inner { grid-template-columns: 1.15fr 0.85fr; }
  .hero { padding-block: var(--s11) var(--s10); }

  .filters { flex-direction: column; }
  .card--wide .card__media { width: 168px; }
}

/* --------------------------------------------------------------------------
   1100px and up
   -------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  .wrap { padding-inline: var(--s6); }
  .article-layout { gap: var(--s9); }
}

/* --------------------------------------------------------------------------
   Pointer-type adaptations
   On coarse pointers (touch) the on-screen game pads appear and every
   interactive target is grown to at least 44px.
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .touch-pad { display: flex; }
  .touch-pad--dpad { display: grid; }

  .card:hover { transform: none; box-shadow: none; }
  .cat-tile:hover { transform: none; }

  .chip { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .share a, .share button { width: 44px; height: 44px; }

  /* Games are easier to reach in landscape on a phone; the shell keeps a
     usable aspect ratio rather than filling an extreme viewport. */
  .game-stage { aspect-ratio: 4 / 3; }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  .game-stage { aspect-ratio: 16 / 9; }
  .touch-pad__btn { min-height: 48px; }
  .site-header { position: static; }
}

/* Keyboard users on touch devices still get the pads hidden if they have a
   fine pointer available. */
@media (any-hover: hover) and (any-pointer: fine) {
  .touch-pad, .touch-pad--dpad { display: none; }
}

/* --------------------------------------------------------------------------
   Print — strip chrome, keep the article readable
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .nav, .ad-slot, .cookie-bar, .share,
  .sidebar, .reading-bar, .newsletter, .game-shell, .touch-pad,
  .skip-link, .nav-scrim { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .article-layout { grid-template-columns: 1fr; }
  .article-body { max-width: none; }
  a { color: #000; text-decoration: underline; }
  .article-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .faq details { border: 1px solid #ccc; }
  .faq details[open] summary::after { display: none; }
  h2, h3 { break-after: avoid; }
  figure, .callout { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   Forced colours (Windows High Contrast)
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .btn, .chip, .card, .widget, .toc, .callout, .faq details {
    border: 1px solid ButtonBorder;
  }
  .chip[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .ad-slot { border: 1px dashed ButtonBorder; }
  :focus-visible { outline: 3px solid Highlight; }
}