/* =========================================================================
   ZAQORI · responsive-fixes.css
   -------------------------------------------------------------------------
   Correcciones responsivas para tablet y celular.
   IMPORTANTE: este archivo debe cargarse AL FINAL, después de fixes.css,
   para que sus reglas tengan prioridad. (Ver instrucciones del chat.)

   Si en algún momento quieres deshacer estos cambios, basta con quitar
   la línea <link ... href="responsive-fixes.css"> del index.html.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1) RED DE SEGURIDAD GLOBAL
   Evita el problema #1 en móvil: que un elemento ancho "empuje" la página
   y haga que todo se vea encogido o con scroll horizontal.
   overflow-x: clip no rompe el menú fijo ni el scroll a las anclas (#roadmap).
   ------------------------------------------------------------------------- */
html, body {
    overflow-x: clip;          /* corta cualquier desborde lateral accidental */
    max-width: 100%;
}

/* Ninguna imagen o video puede ser más ancho que su contenedor.
   (Solo limita el ancho; NO toca la altura, para no romper las celdas
   de la galería que usan object-fit: cover.) */
img, video, iframe {
    max-width: 100%;
}

/* Palabras o enlaces muy largos no rompen el layout en pantallas chicas. */
p, li, h1, h2, h3, .stage-lead, .gallery-overlay strong {
    overflow-wrap: break-word;
    word-wrap: break-word;
}


/* -------------------------------------------------------------------------
   2) GALERÍA — TABLET / MÓVIL GRANDE (601px a 900px)
   En 2 columnas las celdas eran muy bajas (150px) y las capturas se veían
   apretadas. Les damos algo más de alto para que se aprecien mejor.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) and (min-width: 601px) {
    .gallery-grid {
        grid-auto-rows: 190px;
        gap: 14px;
    }
    .gallery-item { min-height: 190px; }
}


/* -------------------------------------------------------------------------
   3) GALERÍA — CELULAR (600px o menos)  ← el arreglo principal
   Pasa de 2 columnas apretadas a 1 columna ancha, con tarjetas más altas
   para que cada captura se vea completa y legible.
   ------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: 1fr;   /* una sola columna */
        grid-auto-rows: 220px;        /* tarjetas más altas */
        gap: 14px;
    }

    /* todas las tarjetas ocupan el ancho completo, incluida la destacada */
    .gallery-item,
    .gallery-item.feat {
        grid-column: auto;
        grid-row: auto;
        min-height: 220px;
    }
}


/* -------------------------------------------------------------------------
   4) PANTALLAS TÁCTILES — mostrar los títulos sin "hover"
   En celular/tablet no hay cursor, así que el overlay con el nombre del
   proyecto nunca aparecía. Aquí lo dejamos visible, pero SOLO en las
   tarjetas que ya tienen una foto real (las que aún son marcador
   conservan su etiqueta centrada y no se duplican textos).
   ------------------------------------------------------------------------- */
@media (hover: none) {
    .gallery-item:has(img) .gallery-overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(5,8,22,0.92), transparent 62%);
    }
}


/* -------------------------------------------------------------------------
   5) AJUSTES FINOS DE MÓVIL (480px o menos)
   Respiros de espaciado para que nada quede pegado a los bordes.
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .gallery-block { padding-left: 4px; padding-right: 4px; }
    .gallery-sub { font-size: 14px; line-height: 1.5; }

    /* el timeline ya es vertical; solo evitamos que el texto quede muy junto */
    .stage-card { padding: 18px 16px; }
}