/* =============================================================
   Folia Gallery — Frontend CSS  |  v1.1.0
   Author: Davide Arduini — dadesign.it
   ============================================================= */

/* ── Variables ───────────────────────────────────────────────── */
:root {
    --folia-overlay-bg:    rgba(0, 0, 0, .55);
    --folia-caption-color: #fff;
    --folia-caption-bg:    rgba(0, 0, 0, .68);
    --folia-transition:    0.3s ease;
    --folia-arrow-bg:      rgba(255, 255, 255, .88);
    --folia-arrow-color:   #222;
    --folia-dot-color:     rgba(255, 255, 255, .55);
    --folia-dot-active:    #fff;
}

/* ── Base wrapper ────────────────────────────────────────────── */
.folia-gallery {
    --folia-columns:          3;
    --folia-gap:              10px;
    --folia-radius:           0px;
    --folia-justified-height: 250px;
    width: 100%;
    box-sizing: border-box;
}

.folia-gallery *,
.folia-gallery *::before,
.folia-gallery *::after { box-sizing: inherit; }

.folia-gallery-empty {
    padding: 1.5em;
    text-align: center;
    color: #999;
    font-style: italic;
}

/* ── Item base ───────────────────────────────────────────────── */
.folia-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--folia-radius);
}

.folia-item__link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}

.folia-item__thumb {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.folia-item__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--folia-transition);
}

/* ── Hover effects ───────────────────────────────────────────── */
.folia-hover-zoom .folia-item__link:hover .folia-item__thumb img {
    transform: scale(1.07);
}

.folia-hover-fade .folia-item__link::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--folia-overlay-bg);
    opacity: 0;
    transition: opacity var(--folia-transition);
}
.folia-hover-fade .folia-item__link:hover::after { opacity: 1; }

.folia-hover-slide .folia-item__thumb img { transform: translateY(6px); }
.folia-hover-slide .folia-item__link:hover .folia-item__thumb img { transform: translateY(0); }

/* ── Captions ────────────────────────────────────────────────── */
/* Overlay */
.folia-caption-overlay .folia-item__caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: .6em .85em;
    background: var(--folia-caption-bg);
    color: var(--folia-caption-color);
    font-size: .84rem;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--folia-transition), transform var(--folia-transition);
}
.folia-caption-overlay .folia-item__link:hover .folia-item__caption {
    opacity: 1;
    transform: translateY(0);
}

/* Below */
.folia-caption-below .folia-item__caption {
    padding: .4em .15em;
    font-size: .84rem;
    color: #555;
    line-height: 1.3;
}

/* ── Caption alignment ────────────────────────────────────────── */
.folia-caption-left  .folia-item__caption { text-align: left; }
.folia-caption-center .folia-item__caption { text-align: center; }
.folia-caption-right .folia-item__caption { text-align: right; }

/* ── GRID ────────────────────────────────────────────────────── */
.folia-gallery--grid {
    display: grid;
    grid-template-columns: repeat(var(--folia-columns), 1fr);
    gap: var(--folia-gap);
}

/* Grid aspect-ratio: applicato al .folia-item (cella grid) così
   overflow:hidden ritaglia, e la catena interna riempie al 100%.
   Quando ratio è "auto", aspect-ratio:auto lascia fluire l'immagine naturale. */
.folia-gallery--grid .folia-item {
    aspect-ratio: var(--folia-grid-ratio, 4/3);
}
.folia-gallery--grid .folia-item__thumb img {
    height: 100% !important; /* override WP/tema height:auto su img */
    object-fit: cover;
}
/* Quando ratio desktop è auto: solo sopra il mobile breakpoint */
@media (min-width: 561px) {
    .folia-gallery--grid.folia-grid-ratio--auto .folia-item {
        aspect-ratio: auto;
    }
    .folia-gallery--grid.folia-grid-ratio--auto .folia-item__thumb img {
        height: auto !important;
    }
}

/* ── GRID — Center last row ───────────────────────────────────── */
/* Quando attivo, sostituisce CSS Grid con Flexbox per permettere
   a justify-content:center di centrare gli orfani dell'ultima riga. */
.folia-gallery--grid.folia-center-last {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--folia-gap);
}
.folia-gallery--grid.folia-center-last .folia-item {
    width: calc((100% - (var(--folia-columns) - 1) * var(--folia-gap)) / var(--folia-columns));
    flex: 0 0 auto;
}

/* ── GRID — Last orphan fill content ──────────────────────────── */
/* Richiede center-last attivo (flexbox). L'ultimo item orfano si espande
   e mostra l'immagine con proporzioni naturali. */
.folia-gallery--grid.folia-center-last.folia-last-fill .folia-item:last-child {
    flex-grow: 1;
    aspect-ratio: auto;
}
.folia-gallery--grid.folia-center-last.folia-last-fill .folia-item:last-child .folia-item__thumb {
    height: auto;
}
.folia-gallery--grid.folia-center-last.folia-last-fill .folia-item:last-child .folia-item__thumb img {
    height: auto !important;
    object-fit: cover;
}

/* ── MASONRY ─────────────────────────────────────────────────── */
.folia-gallery--masonry {
    /* Layout gestito da jQuery Masonry — no column-count */
}

.folia-gallery--masonry .folia-item {
    width: calc((100% - (var(--folia-columns) - 1) * var(--folia-gap)) / var(--folia-columns));
    margin-bottom: var(--folia-gap);
}

.folia-gallery--masonry .folia-item__thumb { height: auto; }
.folia-gallery--masonry .folia-item__thumb img {
    height: auto;
    object-fit: unset;
}

/* ── JUSTIFIED ───────────────────────────────────────────────── */
.folia-gallery--justified {
    display: flex;
    flex-wrap: wrap;
    gap: var(--folia-gap);
    align-items: flex-start;
}

.folia-gallery--justified .folia-item {
    --folia-aspect: 1;
    flex-grow:  calc(var(--folia-aspect) * 100);
    flex-basis: calc(var(--folia-aspect) * var(--folia-justified-height));
    height: var(--folia-justified-height);
    min-width: 80px;
}

.folia-gallery--justified .folia-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── SLIDER ──────────────────────────────────────────────────── */
.folia-gallery--slider {
    position: relative;
    overflow: hidden;
}

.folia-slider__track { display: flex; width: 100%; }

.folia-gallery--slider .folia-item       { flex: 0 0 100%; display: none; }
.folia-gallery--slider .folia-item.is-active { display: block; }
.folia-gallery--slider .folia-item__thumb { aspect-ratio: 16 / 9; }

/* Frecce */
.folia-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: var(--folia-arrow-bg);
    color: var(--folia-arrow-color);
    border: none;
    border-radius: 50%;
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--folia-transition), background var(--folia-transition);
    padding: 0;
}
.folia-gallery--slider:hover .folia-slider__arrow { opacity: 1; }
.folia-slider__arrow:hover { background: #fff; }
.folia-slider__arrow--prev { left: 14px; }
.folia-slider__arrow--next { right: 14px; }
.folia-slider__arrow svg { width: 18px; height: 18px; pointer-events: none; }

/* Dots */
.folia-slider__dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 10;
}

.folia-slider__dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    border: none;
    background: var(--folia-dot-color);
    cursor: pointer;
    padding: 0;
    transition: background var(--folia-transition), transform var(--folia-transition);
}
.folia-slider__dot.is-active {
    background: var(--folia-dot-active);
    transform: scale(1.3);
}

/* ── Responsive ──────────────────────────────────────────────── */
/* Tablet ≤900px — le variabili --folia-columns-tablet / --folia-gap-tablet
   vengono iniettate inline dal PHP solo se configurate dall'utente.
   Per Masonry: sovrascriviamo direttamente width sugli item per evitare
   riferimenti circolari alle variabili CSS. */
@media (max-width: 900px) {
    .folia-gallery--grid {
        grid-template-columns: repeat(var(--folia-columns-tablet, 2), 1fr);
        gap: var(--folia-gap-tablet, var(--folia-gap));
    }
    .folia-gallery--grid.folia-center-last .folia-item {
        width: calc(
            (100% - (var(--folia-columns-tablet, 2) - 1) * var(--folia-gap-tablet, var(--folia-gap)))
            / var(--folia-columns-tablet, 2)
        );
    }
    .folia-gallery--masonry .folia-item {
        width: calc(
            (100% - (var(--folia-columns-tablet, 2) - 1) * var(--folia-gap-tablet, var(--folia-gap)))
            / var(--folia-columns-tablet, 2)
        );
        margin-bottom: var(--folia-gap-tablet, var(--folia-gap));
    }
    .folia-gallery--justified {
        gap: var(--folia-gap-tablet, var(--folia-gap));
    }
}

/* Mobile ≤560px */
@media (max-width: 560px) {
    .folia-gallery--grid {
        grid-template-columns: repeat(var(--folia-columns-mobile, 1), 1fr);
        gap: var(--folia-gap-mobile, var(--folia-gap-tablet, var(--folia-gap)));
    }
    .folia-gallery--grid .folia-item {
        aspect-ratio: var(--folia-grid-ratio-mobile, var(--folia-grid-ratio, 4/3));
    }
    /* Desktop auto, mobile fisso: riattivare crop */
    .folia-gallery--grid.folia-grid-ratio--auto:not(.folia-grid-ratio-mobile--auto) .folia-item__thumb img {
        height: 100% !important;
    }
    /* Mobile auto: fluire naturalmente */
    .folia-gallery--grid.folia-grid-ratio-mobile--auto .folia-item__thumb img {
        height: auto !important;
    }
    .folia-gallery--grid.folia-center-last .folia-item {
        width: calc(
            (100% - (var(--folia-columns-mobile, 1) - 1) * var(--folia-gap-mobile, var(--folia-gap-tablet, var(--folia-gap))))
            / var(--folia-columns-mobile, 1)
        );
    }
    .folia-gallery--masonry .folia-item {
        width: calc(
            (100% - (var(--folia-columns-mobile, 1) - 1) * var(--folia-gap-mobile, var(--folia-gap-tablet, var(--folia-gap))))
            / var(--folia-columns-mobile, 1)
        );
        margin-bottom: var(--folia-gap-mobile, var(--folia-gap-tablet, var(--folia-gap)));
    }
    .folia-gallery--justified {
        gap: var(--folia-gap-mobile, var(--folia-gap-tablet, var(--folia-gap)));
    }
    /* Override diretto height/flex-basis — la variabile inline non è sovrascrivibile dalla media query */
    .folia-gallery--justified .folia-item {
        height: var(--folia-justified-height-mobile, var(--folia-justified-height));
        flex-basis: calc(var(--folia-aspect) * var(--folia-justified-height-mobile, var(--folia-justified-height)));
    }
}