/**
 * com_references - Portfolio CSS
 * Compatible Bootstrap 5.3.8 + jQuery 3.7.1
 */

/* =============================================
   FILTRES STICKY
   ============================================= */
#ref-filters-sticky {
    position: sticky;
    top: 76px;
    z-index: 100;
    background: var(--bs-body-bg);
    padding: .75rem 0 .5rem 0;
    margin-bottom: .5rem;
}

@media (min-width: 992px) {
    #ref-filters-sticky {
        top: 96px;
    }
}

@media (min-width: 1200px) {
    #ref-filters-sticky {
        top: 112px;
    }
}

/* =============================================
   VOILE HOVER sur la miniature
   ============================================= */
.ref-thumb-wrapper {
    border-radius: .375rem;
    background: #f8f9fa;
}

.ref-thumb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background .3s ease;
    border-radius: .375rem;
    pointer-events: none;
}

.ref-thumb-overlay-inner {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease;
    padding: .75rem;
    width: 100%;
}

.ref-overlay-title {
    font-size: clamp(.75rem, 2vw, 1rem);
    margin-bottom: .25rem;
    line-height: 1.3;
}

.ref-overlay-cat {
    font-size: clamp(.65rem, 1.5vw, .85rem);
}

/* Hover => voile noir 90% + contenu visible */
.ref-thumb-wrapper:hover .ref-thumb-overlay {
    background: rgba(0, 0, 0, .90);
}

.ref-thumb-wrapper:hover .ref-thumb-overlay-inner {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================
   BADGE "VOIR"
   ============================================= */
.ref-thumb-overlay .badge {
    font-size: .75rem;
    padding: .4em .8em;
    letter-spacing: .04em;
}

/* =============================================
   FILTRES
   ============================================= */
.ref-cat-badge,
.ref-tag-badge {
    transition: opacity .2s ease, transform .15s ease;
}

.ref-cat-badge:hover,
.ref-tag-badge:hover {
    transform: scale(1.06);
}

/* Item de grille en cours de masquage/affichage */
.ref-item {
    transition: opacity .35s ease, transform .35s ease;
}

.ref-item.ref-hidden {
    opacity: 0;
    transform: scale(.95);
    pointer-events: none;
}

/* Suppression physique après animation */
.ref-item.ref-none {
    display: none !important;
}

/* Masquage des badges filtrés */
.ref-cat-badge.ref-none,
.ref-tag-badge.ref-none {
    display: none !important;
}

/* =============================================
   MODAL IMAGE
   ============================================= */
#ref-modal-img-wrap img {
    max-width: 100%;
    height: auto;
    border-radius: .375rem;
}

/* =============================================
   RESPONSIVE : ajustement du nb de colonnes
   via les classes Bootstrap col-* dans le HTML
   ============================================= */
/* Sur très petit écran (< 576px) : 2 par ligne (col-6) */
/* Sur sm (≥576) : 3 par ligne (col-sm-4) */
/* Sur md (≥768) : 4 par ligne (col-md-3) */
/* Sur xl (≥1200) : 6 par ligne (col-xl-2) */
/* Ajustement si miniatures larges : on peut surcharger ici */

@media (max-width: 320px) {
    /* 1 par ligne sur très petits téléphones */
    .ref-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}