/* ==========================================================================
   GALLERY FILTERS - Sistema de filtros para galería de imágenes
   Diseño exacto de apartmentThumbSec para consistencia visual
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Variables CSS para los filtros de galería
   ---------------------------------------------------------------------------- */

:root {
    /* Timing - Igual que apartmentThumbSec */
    --gallery-filter-transition: 0.8s cubic-bezier(0.3, 1, 0.3, 1);

    /* Colores - Igual que exploreBtn de apartmentThumbSec */
    --gallery-filter-btn-bg: transparent;
    --gallery-filter-btn-bg-hover: #ded9d4;
    --gallery-filter-btn-bg-active: #ded9d4;
    --gallery-filter-btn-color: #606060;
    --gallery-filter-btn-color-hover: #606060;
    --gallery-filter-btn-color-active: #606060;
    --gallery-filter-btn-border: #d3d0cf;
    --gallery-filter-btn-border-hover: #ded9d4;
    --gallery-filter-btn-border-active: #ded9d4;

    /* Espaciado */
    --gallery-filter-gap: 15px;
    --gallery-filter-padding: 12px 25px;
    --gallery-filter-margin-bottom: 48px;
}

/* ----------------------------------------------------------------------------
   Contenedor de Filtros - Base Mobile First
   ---------------------------------------------------------------------------- */

.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gallery-filter-gap);
    margin-bottom: var(--gallery-filter-margin-bottom);
    justify-content: center;
    width: 100%;
    padding: 0;
    list-style: none;
}

/* ----------------------------------------------------------------------------
   Botones de Filtro - Estilo exacto de apartmentThumbSec exploreBtn
   ---------------------------------------------------------------------------- */

.gallery-filter-btn {
    /* Layout y espaciado - Igual que exploreBtn */
    display: inline-block;
    padding: var(--gallery-filter-padding);
    margin: 0;

    /* Apariencia - Igual que exploreBtn */
    border: 1px solid var(--gallery-filter-btn-border);
    background-color: var(--gallery-filter-btn-bg);
    color: var(--gallery-filter-btn-color);
    border-radius: 0px;

    /* Tipografía - Igual que exploreBtn */
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.15rem;
    letter-spacing: 0.0938rem; /* IMPORTANTE: Espaciado amplio como exploreBtn */
    text-transform: uppercase;
    text-decoration: none;
    font-family: "Gill Sans", sans-serif;
    text-align: center;

    /* Interacción */
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;

    /* Transiciones - Igual que exploreBtn */
    transition: var(--gallery-filter-transition);

    /* Reset */
    white-space: nowrap;
    position: relative;
}

/* Estructura interna del botón (para mantener consistencia con apartmentThumbSec) */
.gallery-filter-btn .btnText {
    display: flex;
    align-items: center;
    justify-content: center; /* Center en lugar de space-between para filtros */
    gap: 15px;
    width: 100%;
    overflow: hidden;
    height: 1.05rem; /* Altura fija para evitar cambios de tamaño */
}

.gallery-filter-btn .btnText span {
    display: block;
    white-space: nowrap;
    text-shadow: 0px calc(20px * 1.25) transparent;
    transform: translateY(0);
    transition: text-shadow var(--gallery-filter-transition),
                transform var(--gallery-filter-transition);
}

/* ----------------------------------------------------------------------------
   Estados Interactivos - Igual que apartmentThumbSec
   ---------------------------------------------------------------------------- */

/* Estado Activo - cuando el filtro está seleccionado */
.gallery-filter-btn.is-active {
    border-color: var(--gallery-filter-btn-border-active);
    background-color: var(--gallery-filter-btn-bg-active);
    color: var(--gallery-filter-btn-color-active);
}

/* NO cambiar font-weight para evitar reflow */
.gallery-filter-btn.is-active .btnText span {
    text-shadow: 0px 20px #606060;
    transform: translateY(calc(20px * -1));
    transition: all var(--gallery-filter-transition);
}

/* Estado Hover - interacción del mouse */
.gallery-filter-btn:hover:not(.is-active) {
    border-color: var(--gallery-filter-btn-border-hover);
    background-color: var(--gallery-filter-btn-bg-hover);
    color: var(--gallery-filter-btn-color-hover);
}

.gallery-filter-btn:hover:not(.is-active) .btnText span {
    text-shadow: 0px 20px #606060;
    transform: translateY(calc(20px * -1));
    transition: all var(--gallery-filter-transition);
}

/* Estado Focus - accesibilidad con teclado */
.gallery-filter-btn:focus {
    outline: 1px solid #8c8275;
    outline-offset: 3px;
}

/* Estado Disabled */
.gallery-filter-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ----------------------------------------------------------------------------
   Animaciones de Imágenes - Estados de Visibilidad
   ---------------------------------------------------------------------------- */

/* Estado Oculto - imagen filtrada fuera */
.image-list-item.is-hidden {
    display: none;
}

/* Estado Visible - imagen mostrada */
.image-list-item.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Estado de carga inicial */
.image-list-item {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease-in-out;
}

/* ----------------------------------------------------------------------------
   Responsive - TABLET (768px - 959px)
   ---------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .gallery-filter-btn {
        padding: 10px 17px;
        font-size: 0.8125rem;
    }
}

/* ----------------------------------------------------------------------------
   Responsive - DESKTOP PEQUEÑO (959px - 1180px)
   ---------------------------------------------------------------------------- */

@media only screen and (min-width: 959px) and (max-width: 1180px) {
    .gallery-filter-btn {
        padding: 10px 17px;
    }
}

/* ----------------------------------------------------------------------------
   Responsive - MÓVIL (< 767px)
   ---------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
    :root {
        --gallery-filter-gap: 10px;
        --gallery-filter-margin-bottom: 40px;
    }

    .gallery-filter-btn {
        padding: 10px 17px;
        font-size: 0.875rem;
    }
}

/* ----------------------------------------------------------------------------
   Optimizaciones de Performance
   ---------------------------------------------------------------------------- */

.gallery-filter-btn {
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.image-list-item {
    will-change: opacity;
}

/* ----------------------------------------------------------------------------
   Accesibilidad - Reducción de Movimiento
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .gallery-filter-btn,
    .gallery-filter-btn .btnText span,
    .image-list-item {
        transition: none;
    }

    .gallery-filter-btn:hover .btnText span,
    .gallery-filter-btn.is-active .btnText span {
        transform: none;
        text-shadow: none;
    }
}

/* ----------------------------------------------------------------------------
   Print Styles
   ---------------------------------------------------------------------------- */

@media print {
    .gallery-filters {
        display: none;
    }

    .image-list-item.is-hidden {
        display: block;
        opacity: 1;
        visibility: visible;
    }
}