/* ═══════════════════════════════════════════════════════
   Smart Image Grid v2.1 — Tetris Layout CSS
   
   REGLA PRINCIPAL: Las imágenes verticales (portrait) 
   siempre se renderizan en proporción 9:16.
   Las horizontales en 16:9. Los squares en 1:1.
   Los bloques se dimensionan automáticamente.
   ═══════════════════════════════════════════════════════ */

:root {
    --sig-gap: 8px;
    --sig-radius: 6px;
    --sig-base-h: 260px;
    --sig-portrait-ratio: 9 / 16;
    --sig-landscape-ratio: 16 / 9;
    --sig-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sig-grid {
    display: flex;
    flex-direction: column;
    gap: var(--sig-gap);
    width: 100%;
}

.sig-block {
    display: grid;
    gap: var(--sig-gap);
    width: 100%;
}


/* ═══════════════════════════════════════════════════════
   BLOQUES TETRIS — aspect-ratio en cada celda
   ═══════════════════════════════════════════════════════ */

/* ─── 3 PORTRAITS en fila — todos 9:16 ─── */
.sig-block-ppp {
    grid-template-columns: 1fr 1fr 1fr;
}
.sig-block-ppp .sig-cell {
    aspect-ratio: var(--sig-portrait-ratio);
}

/* ─── 2 PORTRAITS centrados — 9:16 ─── */
.sig-block-pp {
    grid-template-columns: 1fr 1fr;
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
}
.sig-block-pp .sig-cell {
    aspect-ratio: var(--sig-portrait-ratio);
}

/* ─── PORTRAIT SOLO — 9:16, centrado, max 33% ─── */
.sig-block-p-solo {
    grid-template-columns: 1fr;
    max-width: 33%;
    margin-left: auto;
    margin-right: auto;
}
.sig-block-p-solo .sig-cell {
    aspect-ratio: var(--sig-portrait-ratio);
}


/* ─── PORTRAIT 9:16 + 2 LANDSCAPES apilados ───
   ┌────┬─────────┐
   │    │   L1    │
   │ P  ├─────────┤
   │9:16│   L2    │
   └────┴─────────┘  */
.sig-block-p-ll {
    grid-template-columns: 5fr 7fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "tall  top"
        "tall  bot";
}
.sig-block-p-ll .sig-cell-left-tall {
    grid-area: tall;
    aspect-ratio: var(--sig-portrait-ratio);
}
.sig-block-p-ll .sig-cell-top-right    { grid-area: top; }
.sig-block-p-ll .sig-cell-bottom-right { grid-area: bot; }


/* ─── PORTRAIT 9:16 + LANDSCAPE ───
   ┌────┬──────────┐
   │ P  │    L     │
   │9:16│          │
   └────┴──────────┘  */
.sig-block-p-l {
    grid-template-columns: 4fr 8fr;
}
.sig-block-p-l .sig-cell-left-narrow {
    aspect-ratio: var(--sig-portrait-ratio);
}


/* ─── LANDSCAPE + PORTRAIT 9:16 ───
   ┌──────────┬────┐
   │    L     │ P  │
   │          │9:16│
   └──────────┴────┘  */
.sig-block-l-p {
    grid-template-columns: 8fr 4fr;
}
.sig-block-l-p .sig-cell-right-narrow {
    aspect-ratio: var(--sig-portrait-ratio);
}


/* ─── LANDSCAPE + 2 PORTRAITS 9:16 apilados ───
   ┌─────────┬────┐
   │         │P1  │
   │    L    ├────┤
   │         │P2  │
   └─────────┴────┘  */
.sig-block-l-pp {
    grid-template-columns: 7fr 5fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "wide  top"
        "wide  bot";
}
.sig-block-l-pp .sig-cell-left-wide { grid-area: wide; }
.sig-block-l-pp .sig-cell-top-right {
    grid-area: top;
    aspect-ratio: var(--sig-portrait-ratio);
}
.sig-block-l-pp .sig-cell-bottom-right {
    grid-area: bot;
    aspect-ratio: var(--sig-portrait-ratio);
}


/* ─── 2 LANDSCAPES apilados + PORTRAIT 9:16 ───
   ┌─────────┬────┐
   │   L1    │    │
   ├─────────┤ P  │
   │   L2    │9:16│
   └─────────┴────┘  */
.sig-block-ll-p {
    grid-template-columns: 7fr 5fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "top  tall"
        "bot  tall";
}
.sig-block-ll-p .sig-cell-top-left    { grid-area: top; }
.sig-block-ll-p .sig-cell-bottom-left { grid-area: bot; }
.sig-block-ll-p .sig-cell-right-tall {
    grid-area: tall;
    aspect-ratio: var(--sig-portrait-ratio);
}


/* ─── 2 PORTRAITS 9:16 apilados + LANDSCAPE ───
   ┌────┬─────────┐
   │ P1 │         │
   ├────┤    L    │
   │ P2 │         │
   └────┴─────────┘  */
.sig-block-pp-l {
    grid-template-columns: 5fr 7fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "top  tall"
        "bot  tall";
}
.sig-block-pp-l .sig-cell-top-left {
    grid-area: top;
    aspect-ratio: var(--sig-portrait-ratio);
}
.sig-block-pp-l .sig-cell-bottom-left {
    grid-area: bot;
    aspect-ratio: var(--sig-portrait-ratio);
}
.sig-block-pp-l .sig-cell-right-tall { grid-area: tall; }


/* ─── 3 LANDSCAPES 16:9 ─── */
.sig-block-lll {
    grid-template-columns: 1fr 1fr 1fr;
}
.sig-block-lll .sig-cell {
    aspect-ratio: var(--sig-landscape-ratio);
}

/* ─── 2 LANDSCAPES 16:9 ─── */
.sig-block-ll {
    grid-template-columns: 1fr 1fr;
}
.sig-block-ll .sig-cell {
    aspect-ratio: var(--sig-landscape-ratio);
}

/* ─── 3 SQUARES 1:1 ─── */
.sig-block-sss {
    grid-template-columns: 1fr 1fr 1fr;
}
.sig-block-sss .sig-cell {
    aspect-ratio: 1 / 1;
}

/* ─── 2 SQUARES 1:1 ─── */
.sig-block-ss {
    grid-template-columns: 1fr 1fr;
}
.sig-block-ss .sig-cell {
    aspect-ratio: 1 / 1;
}

/* ─── LANDSCAPE SOLO 16:9 ─── */
.sig-block-l-solo {
    grid-template-columns: 1fr;
}
.sig-block-l-solo .sig-cell {
    aspect-ratio: var(--sig-landscape-ratio);
}


/* ═══════════════════════════════════════════════════════
   CELDAS E IMÁGENES
   ═══════════════════════════════════════════════════════ */
.sig-cell {
    position: relative;
    overflow: hidden;
    border-radius: var(--sig-radius);
    background: #f0f0f0;
    min-height: 0;
    min-width: 0;
}

.sig-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform var(--sig-transition),
                filter var(--sig-transition);
}

.sig-link {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
    text-decoration: none;
}


/* ═══════════════════════════════════════════════════════
   HOVER EFFECTS
   ═══════════════════════════════════════════════════════ */
.sig-cell::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background var(--sig-transition);
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
}

.sig-hover-zoom .sig-cell:hover .sig-img { transform: scale(1.05); }
.sig-hover-zoom .sig-cell:hover::after { background: rgba(0,0,0,0.06); }
.sig-hover-fade .sig-cell:hover .sig-img { filter: brightness(0.82); }
.sig-hover-slide .sig-cell .sig-img { transform: scale(1.1); }
.sig-hover-slide .sig-cell:hover .sig-img { transform: scale(1) translateY(-1.5%); }
.sig-hover-none .sig-cell:hover .sig-img { transform: none; }


/* ═══════════════════════════════════════════════════════
   CAPTION
   ═══════════════════════════════════════════════════════ */
.sig-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 10px 14px;
    background: linear-gradient(transparent, rgba(0,0,0,0.5));
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--sig-transition), transform var(--sig-transition);
    pointer-events: none;
    z-index: 2;
}
.sig-cell:hover .sig-caption { opacity: 1; transform: translateY(0); }


/* ═══════════════════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════════════════ */
.sig-lightbox {
    position: fixed; inset: 0; z-index: 999999;
    background: rgba(0,0,0,0.92);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.sig-lightbox.sig-lb-open { opacity: 1; visibility: visible; }

.sig-lb-wrap {
    max-width: 92vw; max-height: 88vh;
    display: flex; flex-direction: column; align-items: center;
}
.sig-lb-img {
    max-width: 90vw; max-height: 82vh;
    object-fit: contain; border-radius: 3px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.5);
    opacity: 0; transform: scale(0.95);
    transition: opacity 0.25s ease 0.05s, transform 0.25s ease 0.05s;
}
.sig-lb-open .sig-lb-img { opacity: 1; transform: scale(1); }

.sig-lb-cap {
    color: rgba(255,255,255,0.75);
    font-size: 14px; margin-top: 12px; text-align: center;
}
.sig-lb-count {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.45); font-size: 13px; letter-spacing: 0.1em;
}

.sig-lb-close, .sig-lb-prev, .sig-lb-next {
    position: absolute; background: none; border: none;
    color: rgba(255,255,255,0.75); cursor: pointer;
    transition: color 0.2s, transform 0.2s; z-index: 10; padding: 8px; line-height: 1;
}
.sig-lb-close:hover, .sig-lb-prev:hover, .sig-lb-next:hover {
    color: #fff; transform: scale(1.12);
}
.sig-lb-close { top: 16px; right: 20px; font-size: 34px; font-weight: 300; }
.sig-lb-prev  { left: 16px; top: 50%; transform: translateY(-50%); font-size: 44px; font-weight: 300; }
.sig-lb-next  { right: 16px; top: 50%; transform: translateY(-50%); font-size: 44px; font-weight: 300; }
.sig-lb-prev:hover { transform: translateY(-50%) scale(1.12); }
.sig-lb-next:hover { transform: translateY(-50%) scale(1.12); }

.sig-empty { text-align: center; padding: 40px; color: #999; font-style: italic; }


/* ═══════════════════════════════════════════════════════
   ANIMACIÓN DE ENTRADA
   ═══════════════════════════════════════════════════════ */
.sig-block {
    opacity: 0; transform: translateY(20px);
    animation: sigBlockIn 0.5s ease forwards;
}
.sig-block:nth-child(1) { animation-delay: 0.04s; }
.sig-block:nth-child(2) { animation-delay: 0.1s; }
.sig-block:nth-child(3) { animation-delay: 0.16s; }
.sig-block:nth-child(4) { animation-delay: 0.22s; }
.sig-block:nth-child(5) { animation-delay: 0.28s; }
.sig-block:nth-child(n+6){ animation-delay: 0.34s; }

@keyframes sigBlockIn {
    to { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .sig-block-ppp {
        grid-template-columns: 1fr 1fr;
    }
    .sig-block-ppp .sig-cell:last-child {
        grid-column: 1 / -1;
        aspect-ratio: var(--sig-landscape-ratio);
    }

    .sig-block-lll {
        grid-template-columns: 1fr 1fr;
    }
    .sig-block-lll .sig-cell:last-child {
        grid-column: 1 / -1;
    }

    .sig-block-sss {
        grid-template-columns: 1fr 1fr;
    }
    .sig-block-sss .sig-cell:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .sig-block-p-ll,
    .sig-block-l-pp,
    .sig-block-ll-p,
    .sig-block-pp-l {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: none;
    }
    .sig-block-p-ll .sig-cell,
    .sig-block-l-pp .sig-cell,
    .sig-block-ll-p .sig-cell,
    .sig-block-pp-l .sig-cell {
        grid-area: auto !important;
        aspect-ratio: 1 / 1;
    }

    .sig-block-p-l,
    .sig-block-l-p {
        grid-template-columns: 1fr 1fr;
    }
    .sig-block-p-l .sig-cell,
    .sig-block-l-p .sig-cell {
        aspect-ratio: var(--sig-portrait-ratio);
    }

    .sig-block-pp { max-width: 80%; }
    .sig-block-p-solo { max-width: 50%; }

    .sig-lb-prev  { left: 6px; font-size: 34px; }
    .sig-lb-next  { right: 6px; font-size: 34px; }
    .sig-lb-close { top: 10px; right: 10px; font-size: 28px; }
}

@media (max-width: 480px) {
    .sig-block-ppp,
    .sig-block-lll,
    .sig-block-sss {
        grid-template-columns: 1fr;
    }
    .sig-block-ppp .sig-cell,
    .sig-block-ppp .sig-cell:last-child {
        grid-column: auto;
        aspect-ratio: var(--sig-portrait-ratio);
    }

    .sig-block-pp { max-width: 100%; }
    .sig-block-p-solo { max-width: 65%; }

    .sig-block-p-l,
    .sig-block-l-p,
    .sig-block-ll,
    .sig-block-ss {
        grid-template-columns: 1fr;
    }
    .sig-block-p-l .sig-cell-left-narrow,
    .sig-block-l-p .sig-cell-right-narrow {
        aspect-ratio: var(--sig-portrait-ratio);
    }
    .sig-block-p-l .sig-cell-right-wide,
    .sig-block-l-p .sig-cell-left-wide {
        aspect-ratio: var(--sig-landscape-ratio);
    }
    .sig-block-ll .sig-cell { aspect-ratio: var(--sig-landscape-ratio); }
    .sig-block-ss .sig-cell { aspect-ratio: 1 / 1; }
}