/**
 * KOODE - Estilos para el layout "Grid Koode" de la galeria de fotos en la
 * Single de Propiedad.
 * Agregado: 2026-09-07 (reconstruido tras la actualizacion del theme a v5.6.0)
 *
 * Archivo nuevo e independiente del CSS del theme/plugin. Solo aporta
 * estilos para .property-gallery-grid (usado por wpestate_koode_grid_slider_content()
 * en functions.php de este child theme).
 *
 * ===== KOODE UPDATE (2026-09-08) =====
 * El comentario original de aca abajo decia que no hacia falta el truco
 * de "full-bleed" porque el contenedor ya ocuparia el ancho disponible -
 * resulto ser incorrecto: el cliente pidio expresamente que el grid vaya
 * a todo el ancho de la pantalla (como en produccion), y midiendo la
 * cadena real de ancestros (con puppeteer, ver metodo en el resto del
 * proyecto) se confirmo que SI queda encajonado en el wrapper de 1200px
 * (.wpresidence-content-container-wrapper) con margen beige a los lados.
 * Se vuelve a aplicar el mismo truco que en produccion v1.32.1: width:100vw
 * + margin negativo, mas overflow:visible en los 2 ancestros que lo
 * recortaban:
 *   - .koode_gallery_grid_wrapper (nuestro propio wrapper del carousel;
 *     hereda overflow:hidden del carousel nativo del tema, que normalmente
 *     recorta para mostrar 1 slide a la vez - no hace falta scoped con
 *     :has() porque esta clase la generamos SOLO nosotros)
 *   - .wpresidence-content-container-wrapper (el wrapper de 1200px,
 *     compartido por TODAS las propiedades tengan o no el grid activado -
 *     este si va scoped con :has() para no afectar a las que usan el
 *     slider normal del tema)
 *
 * Enfoque mobile-first:
 * - Por defecto (sin media query) el grid es 1 columna, fotos apiladas a
 *   ancho completo (celular).
 * - A partir de 992px se arma el grid tipo "1 foto grande + 3 chicas".
 * - .count-1 / .count-2 / .count-3 / .count-4 cubren el caso de que la
 *   propiedad tenga menos de 4 fotos, para que el grid no se rompa.
 */
.property-gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    margin-bottom: 20px;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.koode_gallery_grid_wrapper {
    overflow: visible !important;
}

.wpresidence-content-container-wrapper:has(.property-gallery-grid) {
    overflow: visible !important;
}

.property-gallery-grid .gallery-grid-item {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: #eee;
}

.property-gallery-grid .gallery-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .35s ease;
}

.property-gallery-grid .gallery-grid-item:hover img {
    transform: scale(1.03);
}

.property-gallery-grid .gallery-more-overlay {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(20, 20, 20, 0.72);
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    /* KOODE (2026-09-07): el JS de lightbox del tema (js/property.js) solo
       escucha clicks en el <img class="lightbox_trigger">, no en este
       overlay (que va position:absolute encima de la imagen). Sin esto,
       el click en el boton "Ver X fotos" no abre nada - dejamos que el
       click atraviese el span y le llegue a la imagen de abajo. */
    pointer-events: none;
}

/* Desktop: 1 foto grande (izquierda, ocupa las 2 filas) + 2 chicas arriba-derecha
   + 1 ancha abajo-derecha con el boton "Ver mas fotos". */
@media (min-width: 992px) {

    .property-gallery-grid.count-4 {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
        height: 60vh;
        min-height: 420px;
        max-height: 560px;
    }

    .property-gallery-grid.count-4 .gallery-grid-item {
        aspect-ratio: unset;
        height: 100%;
    }

    .property-gallery-grid.count-4 .gallery-grid-item:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }

    .property-gallery-grid.count-4 .gallery-grid-item:nth-child(2) {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }

    .property-gallery-grid.count-4 .gallery-grid-item:nth-child(3) {
        grid-column: 4 / 5;
        grid-row: 1 / 2;
    }

    .property-gallery-grid.count-4 .gallery-grid-item:nth-child(4) {
        grid-column: 3 / 5;
        grid-row: 2 / 3;
    }

    /* Propiedad con solo 3 fotos: grande a la izquierda + 2 apiladas a la derecha */
    .property-gallery-grid.count-3 {
        grid-template-columns: 2fr 1fr;
        grid-template-rows: repeat(2, 1fr);
        height: 55vh;
        min-height: 400px;
        max-height: 520px;
    }

    .property-gallery-grid.count-3 .gallery-grid-item {
        aspect-ratio: unset;
        height: 100%;
    }

    .property-gallery-grid.count-3 .gallery-grid-item:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }

    .property-gallery-grid.count-3 .gallery-grid-item:nth-child(2) {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    .property-gallery-grid.count-3 .gallery-grid-item:nth-child(3) {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    /* Propiedad con solo 2 fotos: mitad y mitad */
    .property-gallery-grid.count-2 {
        grid-template-columns: 1fr 1fr;
        height: 50vh;
        min-height: 380px;
        max-height: 480px;
    }

    .property-gallery-grid.count-2 .gallery-grid-item {
        aspect-ratio: unset;
        height: 100%;
    }

    /* Propiedad con 1 sola foto */
    .property-gallery-grid.count-1 {
        grid-template-columns: 1fr;
        height: 55vh;
        min-height: 400px;
        max-height: 560px;
    }

    .property-gallery-grid.count-1 .gallery-grid-item {
        aspect-ratio: unset;
        height: 100%;
    }
}