/**
 * Cosamirai Image Slider Tabs
 *
 * Réutilise le markup du bloc cosamirai-image-slider dans chaque panel
 * (classes .cosamirai-image-slider + .image-slider__*), donc on importe
 * son CSS pour éviter la duplication.
 */
@import url("../cosamirai-image-slider/cosamirai-image-slider.css");

.cosamirai-image-slider-tabs {
    width: 100%;
}

/* ============================================
   HEADER (titre + onglets)
   ============================================ */

.cosamirai-image-slider-tabs .tabs-slider__header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: end;
    padding: 0 0 0 5%;
    margin-bottom: var(--wp--preset--spacing--medium);
}

.cosamirai-image-slider-tabs .tabs-slider__title > * {
    margin: 0;
}

.cosamirai-image-slider-tabs .tabs-slider__tabs {
    display: flex;
    flex-direction: column;
    align-items: self-end;
    gap: 0.25rem;
    margin-top: 2rem;
}

.cosamirai-image-slider-tabs .tabs-slider__tab {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    font-family: "PP Fragment Glare", serif;
    font-size: var(--fs-L-H4-SM, 1.1875rem);
    font-weight: 300;
    color: var(--c-oak-text);
    cursor: pointer;
    text-align: left;
    transition: opacity 0.2s ease;
    opacity: 0.25;
}

.cosamirai-image-slider-tabs .tabs-slider__tab:hover {
    opacity: 0.7;
}

.cosamirai-image-slider-tabs .tabs-slider__tab.is-active {opacity: 1;}

/* ============================================
   VIEWPORT — un panel visible à la fois (display none/block)
   ============================================ */

/* Pas de stacking : le panel actif est en flux normal et porte les classes
   .cosamirai-image-slider.image-slider--(auto|fixed)-height → il se comporte
   exactement comme le slider standalone (hauteur + responsive gérés par le CSS
   importé, aucun override ici). */
.cosamirai-image-slider-tabs .tabs-slider__viewport {
    position: relative;
    width: 100%;
}

.cosamirai-image-slider-tabs .tabs-slider__panel {
    display: none;
    background: var(--c-light-stone);
    /* Safari : compositing propre pour éviter les résidus entre slides du loop */
    isolation: isolate;
    overflow: hidden;
}

.cosamirai-image-slider-tabs .tabs-slider__panel.is-active {
    display: block;
}

/* Safari : promouvoir chaque slide en couche GPU indépendante — sans ça, en mode
   gallery+loop les slides clonés laissent des images fantômes / la même image qui
   apparaît en double / une fine ligne sub-pixel entre slides. */
.cosamirai-image-slider-tabs .tabs-slider__panel .image-slider__slide,
.cosamirai-image-slider-tabs .tabs-slider__panel .tns-item {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.cosamirai-image-slider-tabs .tabs-slider__panel .image-slider__image {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ============================================
   PLACEHOLDER / BACKEND
   ============================================ */

.cosamirai-image-slider-tabs .tabs-slider__placeholder {
    text-align: center;
    color: #999;
    padding: 2rem;
}

.cosamirai-image-slider-tabs.tabs-slider--backend {
    background: #f9f9f9;
    border: 2px dashed #ddd;
    padding: 1.5rem;
}

.cosamirai-image-slider-tabs.tabs-slider--backend .tabs-slider__tab {
    font-size: 0.95rem;
    padding: 0.15rem 0;
}

.cosamirai-image-slider-tabs.tabs-slider--backend .tabs-slider__tab.is-active {
    font-weight: 500;
}

.cosamirai-image-slider-tabs .tabs-slider__backend-preview {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.cosamirai-image-slider-tabs .tabs-slider__backend-thumb {
    width: 100px;
    height: 70px;
    overflow: hidden;
    border-radius: 4px;
}

.cosamirai-image-slider-tabs .tabs-slider__backend-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cosamirai-image-slider-tabs .tabs-slider__placeholder-small {
    color: #999;
    font-style: italic;
    font-size: 0.875rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {

    #page .cosamirai-image-slider-tabs {
        margin:0;
    }
    
    .cosamirai-image-slider-tabs .tabs-slider__header {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding-left: 0;
        margin-bottom: 1rem;
    }
}