/**
 * KOODE - Estilos para el nuevo layout de galeria "grid - koode"
 * Agregado: 2026-09-02
 *
 * Archivo nuevo e independiente del CSS original del tema (style.css /
 * style.min.css no se tocan). Se carga solo en single de propiedad y solo
 * aporta reglas para .property-gallery-grid (usado por
 * templates/koode_gallery_grid.php).
 *
 * Enfoque mobile-first:
 * - Por defecto (sin media query) el grid es 1 columna, fotos apiladas a
 *   ancho completo (celular).
 * - A partir de 992px (misma idea de breakpoint md que usa el tema) se
 *   arma el grid tipo "1 foto grande + 3 chicas" para desktop.
 * - .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.
 */

/* KOODE (2026-09-02): full-bleed - el grid rompe el ancho del contenedor de
   contenido y ocupa todo el viewport (sin el margen/borde blanco lateral que
   deja el theme), tanto en mobile como en desktop. El "gap" de 4px entre
   fotos se mantiene, solo se quita el espacio alrededor de todo el bloque.
   Truco: width:100vw + margen negativo calculado contra el 50% del propio
   contenedor, funciona sin importar cuantos wrappers/columnas de WPBakery
   tenga encima. */
.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 (2026-09-02): sin esto, el "escape" de arriba se queda con un
   borde blanco porque algun wrapper padre (de WPBakery o del theme:
   vc_row, wpb_wrapper, full_width_prop, etc.) tiene "overflow" puesto para
   contener floats, y eso recorta cualquier hijo que intente salirse de su
   ancho. El :has() hace que esto SOLO afecte a esos wrappers cuando
   adentro traen nuestro grid — el resto del sitio (donde esos mismos
   wrappers se usan para otras cosas) sigue exactamente igual. */
.container.content_wrapper:has(.property-gallery-grid),
.single-content.page_template_loader:has(.property-gallery-grid),
.estate_property_first_row:has(.property-gallery-grid),
.full_width_prop:has(.property-gallery-grid),
.wpb-content-wrapper:has(.property-gallery-grid),
.vc_row:has(.property-gallery-grid),
.vc_column_container:has(.property-gallery-grid),
.vc_column-inner:has(.property-gallery-grid),
.wpb_wrapper:has(.property-gallery-grid),
.wpestate_estate_property_slider_section_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;
}

/* 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%;
    }
}

/* ===== KOODE CUSTOM START (2026-09-02, v2 - corregido) =====
 * Ticket separado: el titulo de la propiedad (h1.entry-title) aparece
 * tapado por el buscador avanzado ("Buscar Estado, Ciudad o Colonia" /
 * "Mostrar todos los tipos" / "Tipo de operacion" / "BUSCAR PROPIEDADES").
 *
 * Causa: en el HTML, #search_wrapper (el buscador) esta ANTES de
 * .container.content_wrapper (el bloque que contiene el <h1>, la galeria,
 * etc.), pero el tema lo saca del flujo con position:absolute sin "top" -
 * pensado para flotar centrado sobre el contenido, usando como referencia
 * de posicionamiento un ancestro .container mas arriba (position:relative,
 * ancho 1200px), no el que se ve inmediatamente antes en el HTML. Al
 * quedar fuera del flujo, no reserva espacio: .container.content_wrapper
 * arranca pegado al header, y el buscador se dibuja encima, tapando el
 * <h1>.
 *
 * v1 (revertido): cambiar el buscador mismo a position:relative rompio su
 * centrado de 1110px, porque en el HTML no es hijo de .container.content_wrapper
 * sino de otro wrapper mas ancho (el bloque del mapa) - al ponerlo en flujo
 * quedaba pegado a la izquierda ocupando ese ancho completo en vez de los
 * 1110px centrados que se ven en el resto del sitio.
 *
 * v2 (este fix, medido con Chromium headless contra el sitio en vivo antes
 * de subirlo - ver notas de medicion mas abajo): no se toca el buscador
 * (sigue absoluto y centrado como en el resto del sitio, donde funciona
 * bien). En su lugar, se le reserva el espacio a .container.content_wrapper
 * con un padding-top, asi el <h1> y todo lo demas arranca debajo en vez de
 * atras. Escondido detras de body.single-estate_property para no afectar
 * ninguna otra plantilla (se confirmo que el mismo #search_wrapper existe
 * tal cual en el home sin causar overlap ahi, porque esa plantilla no tiene
 * un .container.content_wrapper pegado al header como este).
 *
 * Medicion real (Chromium headless, contenido de esta misma propiedad):
 * - >=993px (formulario completo, 4 campos en fila, ~97px de alto): el
 *   buscador termina en ~187px desde arriba; con padding-top:150px el <h1>
 *   arranca en ~210px - deja un margen limpio de ~23px, sin overlap.
 * - <=992px (breakpoint del tema donde el buscador se colapsa a una franja
 *   angosta de ~15px): NO hay overlap ni con el theme original (h1 ya
 *   arranca ~43px despues de donde termina el buscador, de forma natural).
 *   Por eso el padding-top de abajo se limita a min-width:993px - meterlo
 *   tambien en mobile/tablet solo agregaria un hueco en blanco que hoy no
 *   hace falta.
 */
@media (min-width: 993px) {
    body.single-estate_property .container.content_wrapper {
        padding-top: 150px;
    }
}
/* ===== KOODE CUSTOM END ===== */