/* ═══════════════════════════════════════════════
   Ornix24 Gallery Grid Widget — CSS v1.1.0
   ═══════════════════════════════════════════════ */

/* ── FIX Elementor container ── */
.elementor-widget-ornix24_gallery_grid {
    width: 100%;
}

/* ── Wrapper ── */
.ornix24-gg-wrapper {
    --ornix24-cols   : 3;
    --ornix24-gap-h  : 16px;
    --ornix24-gap-v  : 16px;
    --ornix24-aspect : 1/1;
    width: 100%;
    box-sizing: border-box;
}

/* ── Category tabs ── */
.ornix24-gg-tabs {
    display        : flex;
    flex-wrap      : wrap;
    gap            : 8px;
    margin-bottom  : 20px;
}
.ornix24-gg-tab {
    padding        : 6px 16px;
    border         : 2px solid currentColor;
    border-radius  : 3px;
    cursor         : pointer;
    background     : transparent;
    font-family    : inherit;
    font-size      : 0.88rem;
    font-weight    : 600;
    letter-spacing : 0.03em;
    transition     : background .2s, color .2s;
    color          : #333;
}
.ornix24-gg-tab.is-active,
.ornix24-gg-tab:hover {
    background : #333;
    color      : #fff;
}

/* ── Grid ── */
.ornix24-gg-grid {
    display                : grid;
    grid-template-columns  : repeat( var(--ornix24-cols), 1fr );
    gap                    : var(--ornix24-gap-v) var(--ornix24-gap-h);
    position               : relative;
    min-height             : 200px;
    width                  : 100%;
    box-sizing             : border-box;
}

/* ── Loading spinner ── */
.ornix24-gg-loading-spinner {
    position        : absolute;
    inset           : 0;
    display         : flex;
    align-items     : center;
    justify-content : center;
    z-index         : 10;
    min-height      : 200px;
}
.ornix24-gg-loading-spinner span {
    width            : 36px;
    height           : 36px;
    border           : 3px solid rgba(0,0,0,0.1);
    border-top-color : #333;
    border-radius    : 50%;
    animation        : ornix24-spin .7s linear infinite;
    flex-shrink      : 0;
}
.ornix24-gg-grid.is-loaded .ornix24-gg-loading-spinner {
    display: none;
}

@keyframes ornix24-spin {
    to { transform: rotate(360deg); }
}

/* ── Tile ── */
.ornix24-gg-tile {
    display         : block;
    position        : relative;
    text-decoration : none;
    width           : 100%;
    min-width       : 0;        /* crucial dans une grid */
    box-sizing      : border-box;
    /* état initial : invisible, décalée à droite */
    opacity         : 0;
    transform       : translateX(40px);
}
/* L'IntersectionObserver ajoute .ornix24-is-visible quand la tuile entre dans le viewport */
.ornix24-gg-tile.ornix24-is-visible {
    animation: ornix24-slide-in .45s cubic-bezier(.22,.68,0,1.2) forwards;
}

@keyframes ornix24-slide-in {
    to { opacity: 1; transform: translateX(0); }
}

/* ── Tile inner : contient l'image, ratio fixé ── */
.ornix24-gg-tile-inner {
    position     : relative;
    width        : 100%;
    /* FIX: aspect-ratio + overflow hidden pour que l'image soit bien cadrée */
    aspect-ratio : var(--ornix24-aspect, 1/1);
    overflow     : hidden;
    background   : transparent;
    display      : block;
}

/* ── Images : FIX cover centré ── */
.ornix24-gg-main-img,
.ornix24-gg-slide-img {
    position        : absolute;
    inset           : 0;
    width           : 100%;
    height          : 100% !important;
    object-fit      : cover;
    object-position : center center;
    display         : block;
    /* Repos : zoomé 1.01, invisible — PAS de transition opacity à la sortie */
    transform  : scale(1.01);
    opacity    : 0;
    transition : transform 0.1s linear;
}

.ornix24-gg-main-img { z-index: 1; }
/* Les slides sont au-dessus — elles couvrent la main-img */
.ornix24-gg-slide-img { z-index: 2; }

/* Image active : apparaît INSTANTANÉMENT (0s sur tout) */
.ornix24-gg-main-img.is-active,
.ornix24-gg-slide-img.is-active {
    transform  : scale(1);
    opacity    : 1;
    transition : transform 0s linear;
}

/* ── Dézoom activé ── */
/* Au hover : transition longue sur le transform uniquement */
.ornix24-gg-wrapper[data-dezoom="yes"] .ornix24-gg-tile:hover .ornix24-gg-main-img.is-active,
.ornix24-gg-wrapper[data-dezoom="yes"] .ornix24-gg-tile:hover .ornix24-gg-slide-img.is-active {
    transition : transform 0.7s linear;
}

/* ── Dézoom désactivé ── */
.ornix24-gg-wrapper[data-dezoom="no"] .ornix24-gg-tile:hover .ornix24-gg-main-img.is-active,
.ornix24-gg-wrapper[data-dezoom="no"] .ornix24-gg-tile:hover .ornix24-gg-slide-img.is-active {
    transition : transform 0s linear;
}

/* Éditeur : forcer visibilité sans dépendre du JS */
.elementor-editor-active .ornix24-gg-main-img {
    opacity    : 1 !important;
    transform  : scale(1) !important;
    transition : none !important;
}

/* ── Overlay ── */
.ornix24-gg-overlay {
    position       : absolute;
    inset          : 0;
    background     : transparent;
    transition     : background .3s ease;
    z-index        : 3;
    pointer-events : none;
}

/* ── Tile : structure pour "below" ── */
.ornix24-gg-tile--below {
    display        : flex;
    flex-direction : column;
}
.ornix24-gg-tile--below .ornix24-gg-tile-link {
    display : block;
    width   : 100%;
}

/* ── Caption overlay (top/bottom) ── */
.ornix24-gg-caption--overlay {
    position       : absolute;
    left           : 0;
    right          : 0;
    z-index        : 4;
    display        : flex;
    flex-direction : column;
    pointer-events : none;
    padding        : 8px 14px;
    bottom         : 0;
    background     : linear-gradient(transparent, rgba(0,0,0,.6));
    opacity        : 0;
    transform      : translateY(6px);
    transition     : opacity .3s ease, transform .3s ease;
    width          : 100%;
    box-sizing     : border-box;
}
.ornix24-gg-tile:hover .ornix24-gg-caption--overlay {
    opacity   : 1;
    transform : translateY(0);
}
/* Position top */
.ornix24-gg-wrapper[data-caption-pos="top"] .ornix24-gg-caption--overlay {
    bottom     : auto;
    top        : 0;
    background : linear-gradient(rgba(0,0,0,.55), transparent);
    transform  : translateY(-6px);
}

/* ── Caption below (hors tuile-inner) ── */
.ornix24-gg-caption--below {
    display        : flex;
    flex-direction : column;
    width          : 100%;
    box-sizing     : border-box;
    padding        : 8px 4px 0;
    background     : none;
    pointer-events : none;
    /* Pas d'animation, toujours visible */
}

/* ── Legend & Subtitle ── */
.ornix24-gg-legend {
    display     : block;
    font-weight : 600;
    font-size   : 0.95rem;
    color       : #fff;
    line-height : 1.3;
}
.ornix24-gg-subtitle {
    display    : block;
    font-size  : 0.8rem;
    color      : rgba(255,255,255,.75);
    margin-top : 3px;
}

/* ── No thumb placeholder ── */
.ornix24-gg-no-thumb {
    position   : absolute;
    inset      : 0;
    background : #1e1e1e;
}

/* ══════════════════════════════════════════
   Pagination
══════════════════════════════════════════ */
.ornix24-gg-pagination {
    display         : flex;
    justify-content : center;
    align-items     : center;
    gap             : 6px;
    margin-top      : 28px;
    flex-wrap       : wrap;
}

.ornix24-gg-page-btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    min-width       : 38px;
    height          : 38px;
    padding         : 0 10px;
    background      : #1a1a1a;
    color           : #fff;
    border          : none;
    border-radius   : 4px;
    font-size       : 0.9rem;
    cursor          : pointer;
    transition      : background .2s, transform .15s;
    font-family     : inherit;
}
.ornix24-gg-page-btn:hover:not(:disabled):not(.active) {
    background : #333;
    transform  : translateY(-1px);
}
.ornix24-gg-page-btn.active {
    background  : #333;
    color       : #fff;
    cursor      : default;
    font-weight : 700;
}
.ornix24-gg-page-btn:disabled {
    opacity : .35;
    cursor  : not-allowed;
}
.ornix24-gg-prev,
.ornix24-gg-next {
    font-size : 1.3rem;
    padding   : 0 12px;
}

/* ══════════════════════════════════════════
   Skeleton loading — paramétrable
══════════════════════════════════════════ */
.ornix24-gg-wrapper {
    --ornix24-skel-bg1    : #e8e8e8;   /* couleur de base shimmer */
    --ornix24-skel-bg2    : #f4f4f4;   /* couleur highlight shimmer */
    --ornix24-skel-icon   : none;      /* url() ou none */
    --ornix24-skel-icon-size : 40px;
}
.ornix24-gg-skeleton {
    opacity   : 1 !important;
    transform : none !important;
    animation : none !important;
}
.ornix24-gg-skeleton .ornix24-gg-tile-inner {
    background-color  : var(--ornix24-skel-bg1);
    background-image  : linear-gradient(
        90deg,
        var(--ornix24-skel-bg1) 25%,
        var(--ornix24-skel-bg2) 50%,
        var(--ornix24-skel-bg1) 75%
    );
    background-size   : 200% 100%;
    animation         : ornix24-shimmer 1.4s infinite;
    position          : relative;
}
/* Icône/logo centré dans le skeleton */
.ornix24-gg-skeleton .ornix24-gg-tile-inner::after {
    content            : '';
    display            : block;
    position           : absolute;
    inset              : 0;
    background-image   : var(--ornix24-skel-icon);
    background-repeat  : no-repeat;
    background-position: center center;
    background-size    : var(--ornix24-skel-icon-size) auto;
    opacity            : 0.25;
}
@keyframes ornix24-shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════
   Responsive
══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .ornix24-gg-grid {
        grid-template-columns: repeat( var(--ornix24-cols-tablet, var(--ornix24-cols)), 1fr );
    }
}
@media (max-width: 767px) {
    .ornix24-gg-grid {
        grid-template-columns: repeat( var(--ornix24-cols-mobile, 1), 1fr );
    }
}

/* ══════════════════════════════════════════
   Editeur Elementor — preview statique
══════════════════════════════════════════ */
.elementor-editor-active .ornix24-gg-tile {
    opacity   : 1 !important;
    transform : none !important;
    animation : none !important;
}
/* Dans l'éditeur les tuiles sont déjà visibles via render PHP */
.elementor-editor-active .ornix24-gg-tile.ornix24-is-visible {
    animation : none !important;
}

/* ══════════════════════════════════════════
   Override prefers-reduced-motion
   (thème/Elementor annule toutes les transitions)
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .ornix24-gg-main-img,
    .ornix24-gg-slide-img {
        transition : transform 0.1s linear !important;
    }
    .ornix24-gg-main-img.is-active,
    .ornix24-gg-slide-img.is-active {
        transition : transform 0s linear !important;
    }
    .ornix24-gg-wrapper[data-dezoom="yes"] .ornix24-gg-tile:hover .ornix24-gg-main-img.is-active,
    .ornix24-gg-wrapper[data-dezoom="yes"] .ornix24-gg-tile:hover .ornix24-gg-slide-img.is-active {
        transition : transform 0.7s linear !important;
    }
}