/**
 * ==================================================
 * Galería de Propiedades
 * Tema: Apartamentos Bogotá
 * ==================================================
 */


/* ==================================================
   Contenedor principal
================================================== */

.property-gallery{

    width:100%;

}


/* ==================================================
   Imagen principal
================================================== */

.property-gallery-main{

    position:relative;

    overflow:hidden;

    border-radius:16px;

    background:#f5f5f5;

    border:1px solid #e5e7eb;

}


/* ==================================================
   Imagen
================================================== */

.property-image,
.property-main-image{

    display:block;

    width:100%;

    height:auto;

    aspect-ratio:4 / 3;

    object-fit:cover;

    transition:transform .35s ease;

}


/* ==================================================
   Efecto hover
================================================== */

.property-gallery-main:hover .property-image,
.property-gallery-main:hover .property-main-image{

    transform:scale(1.02);

}


/* ==================================================
   Miniaturas
================================================== */

.property-gallery-thumbnails,
.property-gallery-thumbs{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:18px;

}


/* ==================================================
   Botón miniatura
================================================== */

.property-thumbnail,
.property-thumb-button{

    padding:0;

    border:2px solid transparent;

    border-radius:10px;

    overflow:hidden;

    cursor:pointer;

    background:#ffffff;

    transition:
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}


/* ==================================================
   Hover miniatura
================================================== */

.property-thumbnail:hover,
.property-thumb-button:hover{

    border-color:var(--primary);

    transform:translateY(-2px);

}


/* ==================================================
   Miniatura activa
================================================== */

.property-thumbnail.active,
.property-thumb-button.active{

    border-color:var(--primary);

    box-shadow:
        0 0 0 3px rgba(15,76,58,.15);

}


/* ==================================================
   Imagen de miniatura
================================================== */

.property-thumbnail img,
.property-thumb-image{

    display:block;

    width:90px;

    height:70px;

    object-fit:cover;

}


/* ==================================================
   Responsive Tablet
================================================== */

@media (max-width:991px){

    .property-image,
    .property-main-image{

        aspect-ratio:4 / 3;

    }

}


/* ==================================================
   Responsive Móvil
================================================== */

@media (max-width:767px){

    .property-image,
    .property-main-image{

        aspect-ratio:4 / 3;

    }


    .property-gallery-thumbnails,
    .property-gallery-thumbs{

        gap:8px;

        margin-top:12px;

    }


    .property-thumbnail img,
    .property-thumb-image{

        width:70px;

        height:60px;

    }

}


/* ==================================================
   Pantallas muy pequeñas
================================================== */

@media (max-width:480px){

    .property-gallery-main{

        border-radius:12px;

    }


    .property-image,
    .property-main-image{

        aspect-ratio:4 / 3;

    }


    .property-thumbnail img,
    .property-thumb-image{

        width:62px;

        height:52px;

    }

}


/* ==================================================
   Accesibilidad
================================================== */

.property-thumbnail:focus-visible,
.property-thumb-button:focus-visible{

    outline:3px solid var(--primary);

    outline-offset:2px;

}


/* ==================================================
   Transiciones
================================================== */

.property-image,
.property-main-image{

    transition:transform .35s ease;

}