/* ==========================================================================
   EL PATIO DE LGM — responsive.css
   Mobile first: la base vive en style.css.
   Aquí solo se agregan mejoras progresivas para pantallas más grandes.
   ========================================================================== */

/* ---- Tablets pequeñas / móviles grandes (≥ 600px) ---- */
@media (min-width: 600px) {
  .gallery-grid { columns: 2; }

  .bio-roles { gap: 0.8em; }
}

/* ---- Tablets (≥ 768px) ---- */
@media (min-width: 768px) {
  :root { --container-pad: 2.5rem; }

  .nav-toggle { display: none; }

  .nav-menu {
    position: static;
    inset: auto;
    background: transparent;
    flex-direction: row;
    align-items: center;
    padding: 0;
    transform: none;
    gap: var(--space-md);
  }
  .nav-menu li { border-bottom: none; width: auto; padding-bottom: 0; }
  .nav-menu a {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: inherit;
  }
  .nav-menu-footer { display: none; }

  .site-header:not(.is-scrolled) .nav-menu a { color: var(--color-white); }

  .hero-scroll-cue { display: block; }

  .bio-grid {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
  }

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

  .manifesto-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-lg);
  }
}

/* ---- Laptops / iPad landscape (≥ 1024px) ---- */
@media (min-width: 1024px) {
  .gallery-grid { columns: 3; }

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

  .hero-content { padding-bottom: var(--space-xl); }

  .story-form { max-width: 760px; }
}

/* ---- Pantallas grandes (≥ 1440px) ---- */
@media (min-width: 1440px) {
  :root { --container-max: 1320px; }
}

/* ---- Móviles muy pequeños (≤ 360px) ajuste fino ---- */
@media (max-width: 360px) {
  :root { --container-pad: 1.1rem; }
  .hero-title { max-width: 12ch; }
}