/* ============================================================
   RESPONSIVE.CSS — Media query breakpoints.
   We use a mobile-first approach where the base CSS is for
   all screens, then we ADD styles for larger screens.
   However, some layout collapses are handled top-down here
   (desktop → tablet → mobile) for clarity.

   Breakpoints:
     --tablet:  max-width 1024px
     --mobile:  max-width 768px
     --xs:      max-width 480px
   ============================================================ */


/* ═══════════════════════════════════════════════════════════
   TABLET — max-width: 1024px
   Two-column layouts start to collapse, spacing tightens
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Navigation ──────────────────────────────────────── */

  /* Hide desktop link list; show hamburger button */
  .nav__links    { display: none; }
  .nav__hamburger { display: flex; }


  /* ── Hero section ────────────────────────────────────── */

  /* Slightly tighten top padding at tablet */
  .hero__content { padding-top: var(--space-lg); }

  /* Stats strip: wrap to 2 columns and hide some dividers */
  .hero__stat-divider:nth-child(6) { display: none; }


  /* ── Games grid → 2 columns ──────────────────────────── */

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


  /* ── About — stack vertically ────────────────────────── */

  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .about__story .section-title { text-align: left; }


  /* ── Royalty strip → 2 columns ───────────────────────── */

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

  /* Remove right border on 2nd item (now end of first row) */
  .royalty-strip__item:nth-child(2) { border-right: none; }

  /* Add bottom border between rows */
  .royalty-strip__item:nth-child(1),
  .royalty-strip__item:nth-child(2) {
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: var(--space-md);
  }

  /* Restore right border on 3rd item (start of second row) */
  .royalty-strip__item:nth-child(3) { border-right: 1px solid var(--clr-border); }


  /* ── Team → 2 columns ────────────────────────────────── */

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


  /* ── Footer ──────────────────────────────────────────── */

  .footer__inner {
    flex-direction: column;
    gap: var(--space-xl);
  }

  .footer__nav {
    justify-content: flex-start;
    gap: var(--space-xl);
  }
}


/* ═══════════════════════════════════════════════════════════
   MOBILE — max-width: 768px
   Single-column layouts, increased tap targets, bigger text
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Global section spacing — tighter on mobile ──────── */

  section {
    padding-block: var(--space-2xl);
  }


  /* ── Navigation ──────────────────────────────────────── */

  /* Shrink nav height slightly */
  .nav { height: 60px; }
  :root { --nav-height: 60px; }

  .nav__logo-img { width: 32px; height: 32px; }

  .nav__logo-text { font-size: 0.9rem; }


  /* ── Hero ────────────────────────────────────────────── */

  /* Reduce top padding — the nav is shorter */
  .hero__content { padding-top: var(--space-md); }

  /* Stats strip: 2 items per row, hide vertical dividers */
  .hero__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }

  .hero__stat-divider { display: none; }

  /* Add a subtle top border between each stat as a visual separator */
  .hero__stat {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-sm);
    background: var(--clr-bg-3);
    border: 1px solid var(--clr-border);
    border-radius: var(--border-radius);
  }

  .hero__stat-num { font-size: var(--fs-lg); }


  /* ── Games grid → single column ─────────────────────── */

  .games__grid {
    grid-template-columns: 1fr;
  }

  /* Make game card thumbnails a bit shorter */
  .game-card__thumb { height: 200px; }

  /* Always show the play overlay on mobile (no hover available) */
  .game-card__overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(10,10,15,0.85) 0%, transparent 60%);
    backdrop-filter: none;
    align-items: flex-end;
    padding-bottom: var(--space-sm);
  }


  /* ── About section ───────────────────────────────────── */

  /* Pillars: 1 column on mobile */
  .about__pillars {
    grid-template-columns: 1fr;
  }


  /* ── Studio timeline ─────────────────────────────────── */

  /* Reduce marker size, tighten gap */
  .timeline__item {
    grid-template-columns: 40px 1fr;
    gap: var(--space-sm);
  }

  .timeline__marker {
    width: 40px;
    height: 40px;
  }

  .timeline__marker span { font-size: var(--fs-sm); }

  /* Move the vertical line to match smaller marker */
  .timeline::before { left: 19px; }


  /* ── Royalty strip → single column ──────────────────── */

  .royalty-strip {
    grid-template-columns: 1fr;
  }

  /* Reset all borders; add bottom border between each item */
  .royalty-strip__item {
    border-right: none;
    border-bottom: 1px solid var(--clr-border);
    padding-block: var(--space-md);
  }

  .royalty-strip__item:last-child { border-bottom: none; }

  /* Remove the nth-child border overrides from tablet */
  .royalty-strip__item:nth-child(2) { border-right: none; }
  .royalty-strip__item:nth-child(3) { border-right: none; }


  /* ── Team → single column ────────────────────────────── */

  .team__grid { grid-template-columns: 1fr; }


  /* ── Contact links → stack vertically ───────────────── */

  .contact__links {
    flex-direction: column;
    align-items: stretch;
  }

  .contact__link {
    min-width: unset;
    width: 100%;
  }


  /* ── Footer ──────────────────────────────────────────── */

  /* Stack nav columns into a single column */
  .footer__nav {
    flex-direction: column;
    gap: var(--space-lg);
  }

  /* Footer bottom: stack the two lines */
  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }


  /* ── Section header text → left-aligned on mobile ───── */
  /* (centre alignment can feel too tight on narrow screens) */
  .section-header { text-align: left; }
  .section-sub    { margin-inline: 0; }


  /* ── Buttons: full-width in the hero on mobile ───────── */
  .hero__ctas {
    flex-direction: column;
  }

  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ═══════════════════════════════════════════════════════════
   EXTRA SMALL — max-width: 480px
   Very small phones — tighten everything further
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Hero: stats in a single column on the smallest screens */
  .hero__stats {
    grid-template-columns: 1fr;
  }

  /* Smaller game card thumbnails */
  .game-card__thumb { height: 170px; }

  /* Tighter section padding */
  section { padding-block: var(--space-xl); }

  /* About pillars already 1-col, just tighten padding */
  .pillar { padding: var(--space-sm); }

  /* Footer logo smaller */
  .footer__logo { width: 48px; height: 48px; }
}


/* ═══════════════════════════════════════════════════════════
   LARGE DESKTOP — min-width: 1400px
   More breathing room for very wide screens
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {

  :root {
    --container-max: 1320px;
  }

  /* Hero headline can go even bigger */
  .hero__headline {
    font-size: clamp(5rem, 10vw, 9rem);
  }
}