/* ═══════════════════════════════════════════════════
   gallery-mobile.css — responsive de gallery.html
   Requiere shared.css y gallery.css cargados antes
   ═══════════════════════════════════════════════════ */

/* ── Móvil portrait ────────────────────────────────── */
@media (max-width: 480px) {

    main {
        margin-left: var(--sidebar-collapsed) !important;
        padding: 1.2rem 0.75rem 2rem;
    }

    body:not(.sidebar-closed) main {
        margin-left: var(--sidebar-collapsed) !important;
    }


    .gallery-filters {
        justify-content: center;
    }

    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        width: 100%;
    }

    .gallery-grid.illustration-view {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    /* Overlay siempre visible en móvil (no hay hover) */
    .gallery-item-overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(15, 32, 27, 0.7) 0%, transparent 60%);
    }

    .gallery-item-title {
        font-size: 0.82rem;
    }

    .gallery-item-tag {
        font-size: 0.58rem;
    }

    .lightbox-arrow {
        display: none;
    }
}

/* ── Landscape móvil ───────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) {

    body {
        height: auto;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .layout {
        min-height: calc(100dvh - var(--header-h));
        height: auto;
        overflow-x: hidden;
        overflow-y: visible;
    }

    main {
        margin-left: var(--sidebar-collapsed) !important;
        padding: 1rem 1rem 2rem;
        overflow: visible;
        height: auto;
        width: calc(100vw - var(--sidebar-collapsed));
        box-sizing: border-box;
    }

    body:not(.sidebar-closed) main {
        margin-left: var(--sidebar-collapsed) !important;
    }

    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        width: 100%;
    }

    .gallery-grid.illustration-view {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .gallery-item-overlay {
        opacity: 1;
    }
}