/* ==========================================================================
   Tallowvale Studios — responsive overrides
   Wordt ná style.css geladen. Drie breekpunten:

     ≤ 1024px  tablet landscape / kleine laptops
     ≤  840px  tablet portrait   (iPad 768/820, Android tablets)
     ≤  640px  telefoon portrait (iPhone / Android, 320–430px breed)

   Het hamburgermenu verschijnt pas ≤ 640px: op een tablet in portrait is er
   ruimte genoeg voor de gewone navigatiebalk.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet landscape en kleiner (~1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --fs-3xl: 2.8rem;
    --fs-2xl: 2.2rem;
  }

  .game-feature {
    grid-template-columns: 1fr;
  }

  /* Foto gecentreerd bovenaan, maar de lange bio-tekst blijft links
     uitgelijnd: gecentreerde alinea's van 10+ regels lezen slecht. */
  .founder {
    grid-template-columns: 1fr;
  }

  .founder__photo {
    width: 180px;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   Tablet portrait (~840px)
   -------------------------------------------------------------------------- */
@media (max-width: 840px) {
  /* Navigatie blijft inline, maar iets compacter zodat alle vijf links passen. */
  .main-nav__list {
    gap: var(--space-5);
  }

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

  /* Bij 3 kaarten in 2 kolommen zou de derde alleen op een halve rij staan.
     Een oneven laatste kaart krijgt daarom de volle breedte. */
  .grid--3 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* In de shard-panelen is die volle-breedte kaart maar ~3 regels hoog; de
     18rem-reservering (voor de 2-koloms rij erboven) zou hem leeg rekken. */
  .shard-panel__body .grid--3 > :last-child:nth-child(odd) {
    min-height: 9rem;
  }

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

  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-5);
  }
}

/* --------------------------------------------------------------------------
   Telefoon portrait (~640px)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root {
    --fs-3xl: 2.2rem;
    --fs-2xl: 1.8rem;
    --fs-xl: 1.5rem;
    --space-7: 2.25rem;
    --space-8: 3rem;
    --space-9: 4rem;
  }

  .container {
    padding-inline: var(--space-4);
  }

  /* ---- Header + hamburgermenu ------------------------------------------ */
  .site-header__inner {
    padding-block: var(--space-3);
  }

  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 18px 24px rgba(0, 0, 0, 0.45);
    max-height: 0;
    overflow: hidden;
    /* visibility zorgt dat de verborgen links niet met Tab te bereiken zijn. */
    visibility: hidden;
    transition: max-height var(--transition-base), visibility 0s linear 0.25s;
  }

  .main-nav.is-open {
    max-height: 420px;
    visibility: visible;
    transition: max-height var(--transition-base), visibility 0s;
  }

  .main-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--space-4) var(--space-4);
  }

  .main-nav__list a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding-block: 0;
    font-size: var(--fs-base);
    border-bottom: 1px solid var(--color-border);
  }

  .main-nav__list li:last-child a {
    border-bottom: 0;
  }

  .main-nav__list a:hover,
  .main-nav__list a[aria-current="page"] {
    border-bottom-color: var(--color-border);
  }

  .main-nav__list li:last-child a:hover,
  .main-nav__list li:last-child a[aria-current="page"] {
    border-bottom-color: transparent;
  }

  .main-nav__list a[aria-current="page"] {
    color: var(--color-accent);
  }

  /* Echoes-pagina: het uitklapmenu volgt het gekozen shard-thema. */
  body[class*="shard-theme--"] .main-nav {
    background: var(--s-body-bg);
    border-bottom-color: var(--s-line);
  }

  body[class*="shard-theme--"] .main-nav__list a {
    border-bottom-color: var(--s-line);
  }

  /* ---- Hero ------------------------------------------------------------ */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .section-header {
    margin-bottom: var(--space-6);
  }

  /* ---- Game carousel: pijlen op een eigen rij onder de slide ----------- */
  .game-carousel__inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
  }

  .game-carousel__viewport {
    flex-basis: 100%;
  }

  .game-carousel__arrow {
    order: 1;
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
  }

  /* ---- Grids en kaarten ------------------------------------------------ */
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .grid {
    gap: var(--space-5);
  }

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

  /* Minder binnenpadding: op 390px breed bleef er anders maar ~260px over
     voor de tekst in kaarten en de "featured game"/founder-blokken. */
  .card {
    padding: var(--space-5);
  }

  .game-feature,
  .founder {
    padding: var(--space-5);
    gap: var(--space-5);
  }

  a[href^="mailto:"] {
    overflow-wrap: anywhere;
  }

  /* ---- Footer: merk bovenaan, Site en Legal naast elkaar ---------------- */
  .site-footer {
    padding-block: var(--space-6);
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__grid > :first-child {
    grid-column: 1 / -1;
  }

  .site-footer li a {
    display: inline-block;
    padding-block: 0.4rem;
  }

  .site-footer__bottom {
    flex-direction: column;
  }

  .error-page__code {
    font-size: 4rem;
  }

  /* ---- Echoes of Verdania: shard-tabs ---------------------------------- */
  /* Alle drie de tabs passen naast elkaar; geen horizontaal scrollen meer
     (de derde tab stond eerder half buiten beeld). */
  .shard-tabs__list {
    gap: 0.4rem;
    padding: var(--space-3) var(--space-4);
  }

  .shard-tab {
    min-width: 0;
    padding: 0.65rem 0.25rem;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
  }

  .shard-tab__sub {
    font-size: 0.7rem;
    letter-spacing: 0;
  }

  .shard-tabs__note {
    padding-inline: var(--space-4);
  }

  .shard-panel__hero,
  .shard-panel__body {
    padding-block: var(--space-7);
  }

  /* De kaarten staan hier onder elkaar; de hoogte-reservering (bedoeld om
     panelen op desktop gelijk te laten lopen) geeft alleen lege kaarten. */
  .shard-panel__body .grid--3 .card,
  .shard-panel__body .grid--3 > :last-child:nth-child(odd) {
    min-height: 0;
  }

  .shard-panel__body > .container > p:first-child {
    min-height: 0;
  }

  .kin-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  /* ---- Lightbox ---------------------------------------------------------- */
  .lightbox {
    padding: var(--space-4);
  }

  .lightbox__nav {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }
}