/* ==========================================================================
   Cat Arcade - responsive behaviour
   Mobile-first. The base stylesheet targets 320px and up; everything here
   progressively widens the layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Very small phones (320px - 374px)
   -------------------------------------------------------------------------- */

@media (max-width: 374px) {
  body {
    font-size: 16px;
  }

  .container {
    padding-inline: var(--s-3);
  }

  .brand-tag {
    display: none;
  }

  .game-grid,
  .post-grid,
  .cat-grid,
  .mini-card-grid,
  .tip-list,
  .cluster-grid {
    grid-template-columns: 1fr;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .steps li {
    padding-left: var(--s-4);
    padding-top: 52px;
  }

  .steps li::before {
    top: var(--s-3);
  }
}

/* --------------------------------------------------------------------------
   Mobile navigation (below 960px the menu collapses)
   -------------------------------------------------------------------------- */

@media (max-width: 959px) {
  .nav-burger {
    display: flex;
  }

  .header-actions {
    order: 2;
    margin-left: auto;
  }

  .nav-burger {
    order: 3;
    margin-left: 0;
  }

  .primary-nav {
    order: 4;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    display: none;
  }

  .primary-nav.is-open {
    display: block;
  }

  .header-inner {
    position: relative;
    flex-wrap: wrap;
  }

  .primary-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-3) var(--s-4) var(--s-5);
  }

  .primary-nav > ul > li {
    border-bottom: 1px solid var(--line);
  }

  .primary-nav > ul > li:last-child {
    border-bottom: 0;
  }

  .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 0.9em 0.4em;
    font-size: 1rem;
    border-radius: 0;
  }

  .subnav {
    position: static;
    display: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: var(--surface-2);
    padding: var(--s-2) 0 var(--s-3) var(--s-4);
    min-width: 0;
  }

  .subnav.is-open {
    display: flex;
  }

  .subnav a {
    padding: 0.65em 0.4em;
  }
}

/* --------------------------------------------------------------------------
   Larger phones and small tablets (>= 560px)
   -------------------------------------------------------------------------- */

@media (min-width: 560px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .article-meta {
    gap: var(--s-4);
  }

  .notfound-actions .btn {
    min-width: 200px;
  }
}

/* --------------------------------------------------------------------------
   Tablets (>= 768px)
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  :root {
    --header-h: 74px;
  }

  body {
    font-size: 17.5px;
  }

  .container {
    padding-inline: var(--s-5);
  }

  .hero-inner {
    grid-template-columns: 1.15fr 0.85fr;
    padding-block: var(--s-8) var(--s-9);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1.4fr 1fr;
  }

  .game-grid-4,
  .game-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .author-box {
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   Laptops (>= 1024px) - sidebar appears
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 312px;
    gap: var(--s-7);
  }

  .sidebar {
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
    align-self: start;
    max-height: calc(100vh - var(--header-h) - var(--s-6));
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 2px;
  }

  .footer-grid {
    grid-template-columns: 1.5fr repeat(4, 1fr);
  }

  .game-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .game-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Desktop (>= 1280px)
   -------------------------------------------------------------------------- */

@media (min-width: 1280px) {
  body {
    font-size: 18px;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr) 340px;
  }

  .page-head {
    padding-top: var(--s-7);
  }
}

/* --------------------------------------------------------------------------
   Large desktop (>= 1600px)
   -------------------------------------------------------------------------- */

@media (min-width: 1600px) {
  :root {
    --container: 1400px;
  }

  .hero-svg {
    max-width: 540px;
  }
}

/* --------------------------------------------------------------------------
   Short viewports - do not let a sticky sidebar trap content
   -------------------------------------------------------------------------- */

@media (max-height: 640px) and (min-width: 1024px) {
  .sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* --------------------------------------------------------------------------
   Coarse pointers - bigger tap targets, no hover lifts
   -------------------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
  .game-card:hover,
  .post-card:hover,
  .cat-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }

  .btn,
  .filter-btn,
  .icon-btn,
  .fav-btn {
    min-height: 46px;
  }

  .faq-item summary {
    padding-block: var(--s-4);
  }
}

/* --------------------------------------------------------------------------
   Forced colours / high contrast
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
  .btn,
  .filter-btn,
  .icon-btn,
  .fav-btn,
  .game-card,
  .post-card,
  .cat-card,
  .sidebar-card {
    border: 1px solid CanvasText;
  }

  .filter-btn.is-active {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}