/**
 * Portfolio Gallerie (shortcode levels_lc_portfolio_gallery)
 * Styles pour le bloc card-extra (titres / champs ACF) dans les slides.
 * Tous les sélecteurs sont préfixés par .levels-lc-portfolio-gallery pour isoler le CSS.
 */

[data-levels-lc-component="portfolio-gallery"] {
    /* Largeur max carte mobile ≈ 100vw moins ce GAP de chaque côté (vh = hauteur écran, pas la largeur). */
    --levels-lc-gallery-mobile-gap: 10px;
    /* Zoom au survol de la slide (zone photo enveloppée en PHP, overflow hidden). */
    --levels-lc-gallery-img-zoom: 1.06;
    --levels-lc-gallery-img-zoom-dur: 0.78s;
    /* Courbe ease-out douce (entrée progressive, fin amortie) ; symétrique à la sortie du survol. */
    --levels-lc-gallery-img-zoom-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * Zoom : tout passe par .levels-lc-gallery-photo-scale (voir PHP). Pas sur <img> —
 * Salient pose souvent transform inline sur les médias ; ça casse les transitions CSS.
 */
[data-levels-lc-component="portfolio-gallery"] .levels-lc-gallery-photo,
.levels-lc-portfolio-gallery .levels-lc-gallery-photo {
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

[data-levels-lc-component="portfolio-gallery"] .levels-lc-gallery-photo-scale,
.levels-lc-portfolio-gallery .levels-lc-gallery-photo-scale {
    display: block;
    width: 100%;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;
    transition: transform var(--levels-lc-gallery-img-zoom-dur) var(--levels-lc-gallery-img-zoom-ease) !important;
    will-change: transform;
    backface-visibility: hidden;
}

[data-levels-lc-component="portfolio-gallery"] .nectar-flickity .flickity-slider > .cell:hover .levels-lc-gallery-photo-scale,
.levels-lc-portfolio-gallery .nectar-flickity .flickity-slider > .cell:hover .levels-lc-gallery-photo-scale {
    transform: translate3d(0, 0, 0) scale(var(--levels-lc-gallery-img-zoom)) !important;
}

@media (prefers-reduced-motion: reduce) {
    [data-levels-lc-component="portfolio-gallery"] .levels-lc-gallery-photo-scale,
    .levels-lc-portfolio-gallery .levels-lc-gallery-photo-scale {
        transition: none !important;
        will-change: auto;
    }

    [data-levels-lc-component="portfolio-gallery"] .nectar-flickity .flickity-slider > .cell:hover .levels-lc-gallery-photo-scale,
    .levels-lc-portfolio-gallery .nectar-flickity .flickity-slider > .cell:hover .levels-lc-gallery-photo-scale {
        transform: translate3d(0, 0, 0) scale(1) !important;
    }
}

/*
 * Curseur Flickity / mode tactile Salient (touch_total, etc.)
 *
 * 1) Le <a class="entire-slide-link"> couvre la cellule mais la caption (.item-meta) et le bloc
 *    injecté (.levels-lc-portfolio-card-extra) sont souvent AU-DESSUS en ordre de peinture :
 *    le pointeur ne touche pas le lien → curseur « main » ou défaut au lieu du grab.
 * 2) Les ancres ont encore cursor:pointer via la feuille de style navigateur : il faut gagner
 *    en spécificité + !important sur la slide, puis rétablir pointer sur les vrais liens du card-extra.
 */
[data-levels-lc-component="portfolio-gallery"] .nectar-flickity.flickity-enabled.is-draggable .flickity-slider > .cell,
.levels-lc-portfolio-gallery .nectar-flickity.flickity-enabled.is-draggable .flickity-slider > .cell {
    cursor: move !important;
    cursor: -webkit-grab !important;
    cursor: grab !important;
}

[data-levels-lc-component="portfolio-gallery"] .nectar-flickity.flickity-enabled.is-draggable.is-dragging .flickity-slider > .cell,
.levels-lc-portfolio-gallery .nectar-flickity.flickity-enabled.is-draggable.is-dragging .flickity-slider > .cell,
[data-levels-lc-component="portfolio-gallery"] .nectar-flickity.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down .flickity-slider > .cell,
.levels-lc-portfolio-gallery .nectar-flickity.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down .flickity-slider > .cell {
    cursor: -webkit-grabbing !important;
    cursor: grabbing !important;
}

[data-levels-lc-component="portfolio-gallery"] .nectar-flickity.flickity-enabled.is-draggable .flickity-slider .cell > a.entire-slide-link,
.levels-lc-portfolio-gallery .nectar-flickity.flickity-enabled.is-draggable .flickity-slider .cell > a.entire-slide-link {
    cursor: inherit !important;
}

[data-levels-lc-component="portfolio-gallery"] .levels-lc-portfolio-card-extra a,
[data-levels-lc-component="portfolio-gallery"] .levels-lc-portfolio-card-extra__link,
.levels-lc-portfolio-gallery .levels-lc-portfolio-card-extra a,
.levels-lc-portfolio-gallery .levels-lc-portfolio-card-extra__link {
    cursor: pointer !important;
}

/*
 * Écart gauche/droite du rail Flickity = même unité que « Espacement Flickity » (côté carte).
 * Les cartes ont déjà margin-left/right = spacing : une marge de +1× sur le rail recrée l’écart
 * « entre deux cartes » aussi devant la 1ère (et la dernière), y compris avant l’init JS
 * (où Salient force margin-left: 0 sur .cell:first-child).
 * Valeur réelle : inline sur [data-levels-lc-component="portfolio-gallery"] depuis le PHP.
 */
[data-levels-lc-component="portfolio-gallery"] .nectar-flickity .flickity-slider {
    margin-left: var(--levels-lc-gallery-flickity-track-inset, 10px) !important;
    margin-right: var(--levels-lc-gallery-flickity-track-inset, 10px) !important;
}

/*
 * Mobile : padding sur le bloc Nectar (pas sur .flickity-viewport) pour que Flickity mesure une largeur
 * utile cohérente ; sinon la largeur de cellule en px peut ignorer le padding à droite → marge droite absente.
 * Plafond des .cell = 100vw − 2×GAP (équivalent « pleine largeur moins l’écart »).
 */
@media (max-width: 768px) {
    [data-levels-lc-component="portfolio-gallery"] .nectar-flickity.flickity-enabled {
        padding-left: var(--levels-lc-gallery-mobile-gap) !important;
        padding-right: var(--levels-lc-gallery-mobile-gap) !important;
        box-sizing: border-box !important;
    }

    [data-levels-lc-component="portfolio-gallery"] .nectar-flickity .flickity-slider {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    [data-levels-lc-component="portfolio-gallery"] .nectar-flickity .flickity-slider > .cell {
        max-width: calc(100vw - (2 * var(--levels-lc-gallery-mobile-gap))) !important;
        box-sizing: border-box !important;
    }
}

/*
 * Hauteur bas de .cell : gérée par levels-lc-portfolio-gallery.js (mesure + 15px), car Salient
 * imposait une hauteur (lazy / maxCellHeight Flickity) insensible au bloc card-extra injecté.
 */
.levels-lc-portfolio-gallery .cell {
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
}

.levels-lc-portfolio-gallery .cell .item-meta:has(.levels-lc-portfolio-card-extra) {
    flex: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* !important : dans les cellules Salient/Flickity, padding et margin des enfants sont souvent forcés à 0. */
.levels-lc-portfolio-gallery .levels-lc-portfolio-card-extra {
    /* 15px entre le bas de la zone titre / caption et ce bloc (moins qu’avant cumul margin + padding). */
    margin-top: 15px !important;
    margin-bottom: 0 !important;
    padding-top: 0px !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.9em;
    box-sizing: border-box;
    flex-shrink: 0;
}

.levels-lc-portfolio-gallery .levels-lc-portfolio-card-acf-fields {
    list-style: none;
    margin: 0;
    padding: 0;
}

.levels-lc-portfolio-gallery .levels-lc-portfolio-card-acf-field {
    margin-bottom: 0.35em;
}

.levels-lc-portfolio-gallery div.levels-lc-portfolio-card-acf-field {
    display: none;
}

@media (max-width: 460px) {
    .levels-lc-portfolio-gallery div.levels-lc-portfolio-card-acf-field {
        display: block;
    }
}

.levels-lc-portfolio-gallery .levels-lc-portfolio-card-acf-field__label {
    font-weight: 600;
    color: inherit;
}

.levels-lc-portfolio-gallery .levels-lc-portfolio-card-acf-field__value {
    color: inherit;
}

.levels-lc-portfolio-gallery .levels-lc-portfolio-card-extra__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.levels-lc-portfolio-gallery .levels-lc-portfolio-card-extra__link:hover {
    text-decoration: underline;
}