/*
  Breakpoints reales en CSS. Antes esto se resolvía con JavaScript leyendo
  window.innerWidth y reescribiendo grid-template-columns a mano — ese
  mecanismo tenía un bug de fondo (podía borrar el valor de escritorio en
  vez de restaurarlo) y dos secciones habían quedado directamente afuera.
  Todo eso queda reemplazado acá por @media, que el navegador resuelve solo
  y no se puede "olvidar" de una sección nueva.

  860px  → el header pasa de menú horizontal a botón de hamburguesa,
           y las grillas de 2 columnas pasan a 1.
  560px  → las grillas de 4/5 tarjetas (método, recorrido, trayectoria,
           galería) pasan de 2 a 1 columna para que el texto no quede
           apretado.
  480px  → el margen lateral de las secciones se reduce un poco en
           teléfonos angostos.
*/

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

  .beginner__grid,
  .contact__grid {
    grid-template-columns: 1fr;
  }

  .method__line {
    display: none;
  }

  .pillars,
  .journey,
  .trajectory,
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .community {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: 220px;
  }

  .exp-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .pillars,
  .journey,
  .trajectory,
  .gallery {
    grid-template-columns: 1fr;
  }
  .gallery__cell--tall {
    grid-row: auto;
  }
}

@media (max-width: 480px) {
  :root {
    --section-pad-x: 24px;
  }
  .hero {
    padding-left: 24px;
    padding-right: 24px;
  }
}