.supercontainer {
    width: 100%;
    min-height: 0;
    opacity: 0;
    animation: antar-fade-in 0.6s ease-out 2s both;
    transition: opacity 0.6s ease-out;
    overflow-x: scroll;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x:auto !important;
    overscroll-behavior-y:auto !important;
    touch-action: pan-x pan-y;
}

div.slider-articoli {
    box-sizing: border-box;
}


.slider-articoli {
    display: flex;
    flex-direction: row;
    gap: 160px;
    padding: 0;
    width: max-content;
}

.slider-articoli > div {
    flex: none;
    height: 100%;
    text-align: center;
    opacity: 1;
    transition: all .3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box;
    position: relative;
}

.slider-articoli > div:hover {
    transform: scale(1.03);
    z-index: 2;
}

.slider-articoli > div > a {
    display: block;
    position: relative;
}

@media (min-width: 768px) {
    .slider-articoli > div > a {
        height: 100%;
        width: 100%;
    }
}


.slider-articoli:first-child {
    padding-left: 160px;
    padding-right: 160px;
}


.slider-articoli > div img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: cover;
}

.imm-articolo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0;
    height: 600px;
    width: auto;
    overflow: visible;
}

/* Post without featured image: solid rectangle backup behind the data-URI SVG img */
.imm-articolo.no-image {
    background-color: #2a2a2a;
}

/* Title always visible */
.slider-articoli.title-always > div h4 {
    display: block;    
}

/* Title only visible on hover */
.slider-articoli.title-hover > div h4 {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.slider-articoli.title-hover > div:hover h4 {
    opacity: 1;
    visibility: visible;
}


/*** MOBILE ***/

/* Vertical grid layout with variable columns */
.slider-articoli.vertical-grid {
    opacity: 0;
    animation: antar-fade-in 0.6s ease-out 2s both;
    transition: opacity 0.6s ease-out;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Default 2 columns */
    gap: 20px;
    flex-direction: row;
    flex-wrap: wrap;
    transform: none;
    transform-origin: initial;
    width: 100%;
    max-height: none;
    overflow-y: visible;
    overflow-x: visible;
    padding: 20px 0;
}

/* Support for different column counts */
.slider-articoli.vertical-grid.columns-1 {
    grid-template-columns: 1fr;
}

.slider-articoli.vertical-grid.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.slider-articoli.vertical-grid.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.slider-articoli.vertical-grid.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.slider-articoli.vertical-grid > div {
    height: auto;
    width: fit-content;
    align-self: center;
    justify-self: center;
}

.slider-articoli.vertical-grid > div img {
    height: auto;
    max-width: 100%;
    object-fit: cover;
}

.slider-articoli.vertical-grid .imm-articolo {
    height: auto;
    width: 100%;
}

/* Mobile styles - vertical scrolling */
@media (max-width: 767px) {
    .quadrati {
        padding: 0;
    }

    .slider-articoli {
        gap: 80px;
        width: 100%;
        flex-direction: column;
        padding: 20px 28px;
    }

    /* Single column on mobile for all vertical grid variants */
    .slider-articoli.vertical-grid,
    .slider-articoli.vertical-grid.columns-1,
    .slider-articoli.vertical-grid.columns-2,
    .slider-articoli.vertical-grid.columns-3,
    .slider-articoli.vertical-grid.columns-4 {
        grid-template-columns: 1fr;
        gap: 80px;
    }
}

/* Mobile styles for slider items */
@media (max-width: 767px) {
    .slider-articoli > div {
        transform: none;
        transform-origin: initial;
        height: auto;
        width: 100%;
        max-width: 600px;
        margin: 15px auto;
        flex: 0 0 auto;
        display: block;
    }
    .slider-articoli:first-child {
        padding-left: 28px;
        padding-right: 28px;
        padding-top: 60px;
    }
    .slider-articoli:last-child {
        padding-bottom: 60px;
    }
}

/* Mobile styles for images */
@media (max-width: 767px) {
    .slider-articoli > div img {
        height: auto;
        width: 100%;
    }
    .supercontainer {
        height: auto;
        min-height: 0;
        overflow: visible;
    }
}

/* Item text wrapper: positions the whole title+artista block over the image */
.slider-articoli > div .item-text-wrap {
    position: absolute;
    bottom: 0;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
}

/* Modalità orizzontale (desktop): i titoli lunghi non devono superare la larghezza
   dell'immagine. max-width:33vw limita il contributo del container alla larghezza
   intrinseca dell'item, così il titolo va a capo invece di allargare l'item. */
@media (min-width: 768px) {
    .slider-articoli:not(.vertical-grid) > div .item-text-wrap {
        max-width: 33vw;
        /* Quando il container è più stretto dell'immagine (per via del max-width)
           va centrato sotto di essa, non allineato a sinistra. */
        margin-left: auto;
        margin-right: auto;
    }
}

/* Tablet (768–1024): su questi viewport l'immagine occupa una frazione maggiore
   della larghezza rispetto al desktop, quindi 33vw risulta troppo stretto e il
   titolo va a capo su 3 righe cramped. 50vw riempie molto meglio lo spazio
   dell'immagine (≈512px a 1024) restando comunque ≤ larghezza immagine, quindi
   senza stirarla. */
@media (min-width: 768px) and (max-width: 1024px) {
    .slider-articoli:not(.vertical-grid) > div .item-text-wrap {
        max-width: 50vw;
    }
}

.slider-articoli > div h4 {
    line-height: 1.4;
    font-family: var(--font-hiragino, "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif);
    font-size: 18px;
    letter-spacing: 8px;
    text-transform: uppercase;
    max-width: 100%;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    background-color: transparent;
    color: #FF0000;
    border-radius: 5px;
    font-weight: 100;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    margin: 0;
    padding: 0 10px;
}

/* Solo-titolo (nessun artista/brand): aggiunge spazio tra foto e titolo.
   Quando c'è l'artista, è lui il primo figlio e questa regola non si applica. */
.slider-articoli > div .item-text-wrap > h4:first-child {
    margin-top: 14px;
}

/* Item text wrapper: vertical grid — flows below the image */
.slider-articoli.vertical-grid > div .item-text-wrap {
    position: relative;
    left: auto;
    transform: none;
    bottom: auto;
    top: auto;
    width: 0;
    min-width: 100%;
    max-width: 100%;
}

/* Title styles for vertical grid layout */
.slider-articoli.vertical-grid > div h4 {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 10px;
    border-radius: 0 0 8px 8px;
    font-size: 18px;
    letter-spacing: 8px;
}

/* Add shadow class for when shadow is enabled */
.slider-articoli.show-shadow > div h4 {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Artista/Brand */
.slider-articoli > div .artista-articolo {
    line-height: 1.4;
    font-size: 52px;
    max-width: 100%;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    background-color: transparent;
    color: #ffffff;
    overflow-wrap: anywhere;
    word-break: break-word;
    margin: 0;
    padding: 0;
}

/* Artista/Brand always visible */
.slider-articoli.description-always > div .artista-articolo {
    display: block;
}

/* Artista/Brand only visible on hover */
.slider-articoli.description-hover > div .artista-articolo {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.slider-articoli.description-hover > div:hover .artista-articolo {
    opacity: 1;
    visibility: visible;
}

/* Artista/Brand in vertical grid */
.slider-articoli.vertical-grid > div .artista-articolo {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.slider-articoli.vertical-grid > div > a {
    height: auto;
}

/* Image overlay: semi-transparent layer over the photo to improve text readability */
.imm-articolo > .img-overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* Modalità verticale (/works): overlay nero leggermente più scuro per migliorare
   la leggibilità delle scritte bianche sovrapposte alla foto. Specificità (0,3,0)
   per vincere sulla regola Elementor {{WRAPPER}} .img-overlay (0,2,0). */
.slider-articoli.vertical-grid > div .imm-articolo > .img-overlay {
    background-color: rgba(0, 0, 0, 0.45);
}

/* Mobile styles for title/text */
@media (max-width: 767px) {
    /* Text wrapper always flows below the image on mobile */
    .slider-articoli > div .item-text-wrap {
        position: relative;
        left: auto;
        transform: none;
        bottom: auto;
        top: auto;
        width: 100%;
    }

    .slider-articoli > div h4 {
        width: 100%;
        margin: 0;
        padding: 0;
        color: #000;
        display: block;
        overflow: visible;
        font-size: 16px;
        letter-spacing: 6px;
        line-height: 1.6;
    }

    .slider-articoli.title-hover > div h4 {
        opacity: 1;
        visibility: visible;
        display: block;
    }

    .slider-articoli > div .artista-articolo {
        width: 100%;
        margin: 0;
        padding: 6px 0 0;
        display: block;
    }

    .slider-articoli.description-hover > div .artista-articolo {
        opacity: 1;
        visibility: visible;
        display: block;
    }
}

/* Badge */
.antar-badge {
    --antar-badge-c1: #888888;
    --antar-badge-c2: #555555;
    --badge-transform-origin: center;
    position: absolute;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 100px;
    color: #ffffff;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "HiraginoSans-W6", sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(135deg, var(--antar-badge-c1) 0%, var(--antar-badge-c2) 100%);
    box-shadow:
        0 0 24px 0 color-mix(in srgb, var(--antar-badge-c1) 50%, transparent),
        0 0 8px 0 color-mix(in srgb, var(--antar-badge-c2) 40%, transparent);
    z-index: 20;
    white-space: nowrap;
    pointer-events: none;
    line-height: 1;
    rotate: var(--antar-badge-rotation, 0deg);
    transform-origin: var(--badge-transform-origin);
}
.slider-articoli.badge-alternate-rotation > div:nth-child(odd) .antar-badge {
    rotate: var(--antar-badge-rotation, 0deg);
}
.slider-articoli.badge-alternate-rotation > div:nth-child(even) .antar-badge {
    rotate: calc(-1 * var(--antar-badge-rotation, 0deg));
}
.antar-badge-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.slider-articoli > div .antar-badge-icon img,
.slider-articoli.vertical-grid > div .antar-badge-icon img {
    width: 22px !important;
    height: 22px !important;
    display: block;
    object-fit: contain;
    opacity: 0.92;
}

/* Colori per categoria (slug) */
.antar-badge--music-video { --antar-badge-c1: #2E8C5A; --antar-badge-c2: #2F8970; }
.antar-badge--music       { --antar-badge-c1: #2E8C5A; --antar-badge-c2: #2F8970; }
.antar-badge--adv         { --antar-badge-c1: #938F34; --antar-badge-c2: #D9743A; }
.antar-badge--tv-series   { --antar-badge-c1: #3A5FD9; --antar-badge-c2: #6B4AC7; }
.antar-badge--films       { --antar-badge-c1: #C73A4A; --antar-badge-c2: #D9563A; }
.antar-badge--photos      { --antar-badge-c1: #9E4AB8; --antar-badge-c2: #D94A8F; }

/* Mobile: badge più piccoli */
@media (max-width: 767px) {
    .antar-badge {
        gap: 5px;
        padding: 6px 14px;
        font-size: 9px;
    }
    .slider-articoli > div .antar-badge-icon img,
    .slider-articoli.vertical-grid > div .antar-badge-icon img {
        width: 15px !important;
        height: 15px !important;
    }
}
.antar-badge-top-left     { top: 12px;    left: 12px;  }
.antar-badge-top-right    { top: 12px;    right: 12px; }
.antar-badge-bottom-left  { bottom: 12px; left: 12px;  }
.antar-badge-bottom-right { bottom: 18px; right: 18px; }
.antar-badge-center       { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Mobile: posizionamento badge più vicino al bordo */
@media (max-width: 767px) {
    .antar-badge-top-left     { top: 10px;    left: 10px;  }
    .antar-badge-top-right    { top: 10px;    right: 10px; }
    .antar-badge-bottom-left  { bottom: 10px; left: 10px;  }
    .antar-badge-bottom-right { bottom: 10px; right: 10px; }
}

/* Badge visibility */
.slider-articoli.badge-hover > div .antar-badge {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.slider-articoli.badge-hover > div:hover .antar-badge {
    opacity: 1;
    visibility: visible;
}

/* Image glow effect: box-shadow is driven entirely by CSS vars so that Elementor
   responsive controls (which set --glow-*-base per breakpoint) can retarget it
   without re-running the sampler JS. The JS only writes --glow-r/g/b + the
   data-antar-glow-done flag after sampling. */
img[data-antar-glow] {
    transition: box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
img[data-antar-glow][data-antar-glow-done] {
    box-shadow: 0 0
        var(--glow-blur-base, 50px)
        var(--glow-spread-base, 5px)
        rgba(var(--glow-r, 166), var(--glow-g, 166), var(--glow-b, 166),
             var(--glow-opacity-base, 0.45));
}

/* On hover: boost the glow using color vars set by JS + base vars from supercontainer */
.slider-articoli > div:hover img[data-antar-glow][data-antar-glow-done] {
    box-shadow: 0 0
        calc(var(--glow-blur-base, 50px) * 1.4)
        calc(var(--glow-spread-base, 5px) * 1.8)
        rgba(var(--glow-r, 166), var(--glow-g, 166), var(--glow-b, 166),
             calc(var(--glow-opacity-base, 0.45) + 0.2));
}

/* Very subtle white overlay on image hover */
.slider-articoli > div .imm-articolo::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.35s ease;
}
.slider-articoli > div:hover .imm-articolo::after {
    opacity: 0.04;
}

/* Mouse hover glow: radial gradient that follows the cursor */
.slider-articoli.hover-glow > div .imm-articolo::before,
.slider-articoli.hover-glow > div .imm-articolo::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 500ms;
    pointer-events: none;
}
.slider-articoli.hover-glow > div .imm-articolo::before {
    background: radial-gradient(
        800px circle at var(--mouse-x) var(--mouse-y),
        rgba(255, 255, 255, calc(0.06 * var(--hover-glow-intensity, 1))),
        transparent 40%
    );
    z-index: 3;
}
.slider-articoli.hover-glow > div .imm-articolo::after {
    background: radial-gradient(
        600px circle at var(--mouse-x) var(--mouse-y),
        rgba(255, 255, 255, calc(0.1 * var(--hover-glow-intensity, 1))),
        transparent 40%
    );
    z-index: 1;
}
.slider-articoli.hover-glow:hover > div .imm-articolo::after {
    opacity: 1;
}
.slider-articoli.hover-glow > div:hover .imm-articolo::before {
    opacity: 1;
}

/* Mobile styles for image container */
@media (max-width: 767px) {
    .imm-articolo {
        height: auto;
        width: 100%;
        overflow: visible;
    }

    .supercontainer {
        width: 100%;
        overflow: visible;
    }
}

/* Touch devices: disable hover-only animations.
   Tap visibility follows the "always visible" behavior to match mobile. */
@media (hover: none), (pointer: coarse) {
    .slider-articoli > div:hover {
        transform: none;
    }
    .slider-articoli.title-hover > div h4,
    .slider-articoli.title-hover > div:hover h4,
    .slider-articoli.description-hover > div .artista-articolo,
    .slider-articoli.description-hover > div:hover .artista-articolo,
    .slider-articoli.badge-hover > div .antar-badge,
    .slider-articoli.badge-hover > div:hover .antar-badge {
        opacity: 1;
        visibility: visible;
    }
    .slider-articoli > div:hover img[data-antar-glow][data-antar-glow-done] {
        box-shadow: 0 0
            var(--glow-blur-base, 50px)
            var(--glow-spread-base, 5px)
            rgba(var(--glow-r, 166), var(--glow-g, 166), var(--glow-b, 166),
                 var(--glow-opacity-base, 0.45));
    }
    .slider-articoli > div:hover .imm-articolo::after {
        opacity: 0;
    }
    .slider-articoli.hover-glow > div .imm-articolo::before,
    .slider-articoli.hover-glow > div .imm-articolo::after,
    .slider-articoli.hover-glow:hover > div .imm-articolo::after,
    .slider-articoli.hover-glow > div:hover .imm-articolo::before {
        opacity: 0 !important;
    }
}

/* ---------- Load fade ---------- */
/* Primary path: JS adds .antar-page-ready on window.load → CSS transition fires.
   CSS fallback: animation with 1.5s delay fires if JS is unavailable/slow.
   Whichever triggers first wins. */

@keyframes antar-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------- Filters Bar ---------- */

.antar-filter-bar {
    --antar-filter-top: 130px;
    --antar-filter-gap: 14px;

    position: fixed;
    top: var(--antar-filter-top);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--antar-filter-gap);

    height: 58px;
    padding: 10px 14px;
    pointer-events: auto;
    opacity: 0;
    animation: antar-fade-in 0.6s ease-out 2s both;
    transition: opacity 0.6s ease-out;
}

/* Filter bar vertical offset: larger on tablet/below */
@media (max-width: 1024px) {
    .antar-filter-bar {
        --antar-filter-top: 165px;
    }
}

/* JS added .antar-page-ready on window.load: fire transition immediately,
   cancel the CSS fallback animation so they don't both run. */
html.antar-page-ready .antar-filter-bar,
html.antar-page-ready .supercontainer,
html.antar-page-ready .slider-articoli.vertical-grid {
    opacity: 1;
    animation: none;
}

html.antar-page-ready .antar-filter-chip {
    opacity: 1 !important;
}

/* Elementor editor: render inline to avoid covering the canvas */
.antar-filter-bar--preview {
    position: static;
    transform: none;
    opacity: 1;
    animation: none;
}

.antar-filter-bar--preview .antar-filter-chip {
    opacity: 1;
}

/* WordPress admin bar compensation (32px at ≥782px, 46px below) */
.admin-bar .antar-filter-bar {
    top: calc(var(--antar-filter-top) + 32px);
}
@media screen and (max-width: 782px) {
    .admin-bar .antar-filter-bar {
        top: calc(var(--antar-filter-top) + 46px);
    }
}

.antar-filter-chip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 100px;
    color: #ffffff;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "HiraginoSans-W6", sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, 0.06);

    background: linear-gradient(135deg,
        color-mix(in srgb, var(--antar-badge-c1) 24%, rgba(14, 14, 14, 0.1)) 0%,
        color-mix(in srgb, var(--antar-badge-c2) 24%, rgba(14, 14, 14, 0.1)) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: none;

    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: opacity .4s ease,
                padding .25s cubic-bezier(.34, 1.56, .64, 1),
                transform .2s cubic-bezier(.34, 1.56, .64, 1),
                box-shadow .25s ease,
                background .25s ease,
                filter .25s ease;
}

.antar-filter-chip:hover {
    transform: scale(1.06);
    filter: brightness(1.15);
}

.antar-filter-chip:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

.antar-filter-chip .antar-badge-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.antar-filter-chip .antar-badge-icon img {
    width: 18px;
    height: 18px;
    display: block;
    object-fit: contain;
    opacity: 0.92;
}

/* Another chip is active: non-active chips shrink (via padding) and dim */
.antar-filter-bar.has-active .antar-filter-chip:not(.is-active) {
    filter: brightness(0.75) saturate(0.85);
    padding: 5px 14px;
    box-shadow: none;
}

/* Active chip: full brightness, larger (via padding), strong colored glow */
.antar-filter-chip.is-active {
    background: linear-gradient(135deg, var(--antar-badge-c1) 0%, var(--antar-badge-c2) 100%);
    padding: 9px 22px;
    box-shadow:
        0 0 32px 2px color-mix(in srgb, var(--antar-badge-c1) 70%, transparent),
        0 0 12px 0 color-mix(in srgb, var(--antar-badge-c2) 55%, transparent);
    filter: none;
}

@media (max-width: 979px) {
.antar-filter-bar {
        z-index: 99;
    }
}
@media (max-width: 767px) {
    .antar-filter-bar {
        --antar-filter-gap: 8px;
        height: auto;
        row-gap: 10px;
        padding: 32px 8px;
        left: 8px;
        right: 8px;
        transform: none;
        flex-wrap: wrap;
        justify-content: center;
        overflow: visible;
        z-index: 99;
    }

    .antar-filter-chip {
        padding: 6px 12px;
        font-size: 10px;
        gap: 5px;
    }
    .antar-filter-chip .antar-badge-icon img {
        width: 13px;
        height: 13px;
    }

    /* Softer glow on mobile — box-shadow clipping is less of an issue now */
    .antar-filter-chip.is-active {
        padding: 8px 18px;
        box-shadow:
            0 0 14px 1px color-mix(in srgb, var(--antar-badge-c1) 65%, transparent),
            0 0 6px 0   color-mix(in srgb, var(--antar-badge-c2) 50%, transparent);
    }
}

/* Filter-only items (extra posts fetched to expand the filter pool beyond
   numberposts): hidden when no filter is active; revealed layout-native when
   any filter is active, then the per-slug rule below hides the non-matching ones. */
html:not([data-antar-filter]) .slider-articoli > div.antar-filter-only {
    display: none !important;
}

/* Filter behavior: hide non-matching items and all badges while a filter is active */
html[data-antar-filter="music-video"] .slider-articoli > div:not([data-antar-category="music-video"]),
html[data-antar-filter="adv"]         .slider-articoli > div:not([data-antar-category="adv"]),
html[data-antar-filter="tv-series"]   .slider-articoli > div:not([data-antar-category="tv-series"]),
html[data-antar-filter="films"]       .slider-articoli > div:not([data-antar-category="films"]),
html[data-antar-filter="photos"]      .slider-articoli > div:not([data-antar-category="photos"]) {
    display: none !important;
}

/* Hide badge when a filter is active — but only in sliders that respect the filter */
html[data-antar-filter] .supercontainer:not([data-antar-ignore-filters]) .antar-badge,
html[data-antar-filter] .antar-ajax-wrapper:not([data-antar-ignore-filters]) .antar-badge {
    display: none !important;
}

/* Ignore filters: always show all items — html prefix bumps specificity to (0,3,2)
   to beat the per-slug hide rules; cascade order wins the tie */
html .supercontainer[data-antar-ignore-filters] .slider-articoli > div,
html .antar-ajax-wrapper[data-antar-ignore-filters] .slider-articoli > div {
    display: flex !important;
}

/* Pagination: prev/next arrows below the slider */
.antar-pagination {
    display: flex;
    justify-content: center;
    gap: 32px;
    padding: 10px 0;
}

.antar-pagination .antar-pag-btn {
    opacity: 0.9;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    font-family: inherit;
    color: #fff;
    padding: 0;
    line-height: 1.4;
    transition: opacity 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.antar-ajax-wrapper {
    position: relative;
}

/* Keep the scroller (and its prev/next pagination) clickable when a FOLLOWING
   section uses a negative top margin to overlap upward. On /works the events
   container has margin-top:-60px, which otherwise paints over the previous
   scroller's pagination buttons and swallows their clicks. Lifting the scroller
   widget into its own stacking layer (above the auto z-index of sibling
   sections) keeps the buttons on top and clickable. */
.elementor-widget-horizontal_scroller {
    position: relative;
    z-index: 1;
}

.antar-ajax-content {
    transition: opacity 0.2s ease;
}
.antar-ajax-content.antar-ajax-loading {
    opacity: 0.4;
    pointer-events: none;
    min-height: 180px;
}

.antar-spinner {
    position: absolute;
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    pointer-events: none;
}
.antar-spinner img {
    display: block;
    width: 56px;
    height: 56px;
    animation: antar-dot-bounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
}
@keyframes antar-dot-bounce {
    0%   { transform: scale(0.25); }
    100% { transform: scale(1.35); }
}
@keyframes antar-dot-shrink {
    from { transform: scale(var(--spinner-cur-scale, 1)); opacity: 1; }
    to   { transform: scale(0); opacity: 0; }
}
.antar-spinner--hiding img {
    animation: antar-dot-shrink 0.38s ease-in forwards !important;
}


.antar-pag-current {
    opacity: 0.85;
    font-size: 18px;
    font-family: inherit;
    color: #fff;
    line-height: 1.4;
    align-self: center;
}

.antar-pagination .antar-pag-btn:hover {
    opacity: 1;
}

.antar-empty-state {
    color: rgba(255, 255, 255, 0.45);
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: 14px;
    text-align: center;
    padding: 60px 0 40px;
    margin: 0;
}

/* ─── View All Button ─── */

.antar-view-all-wrap {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    box-sizing: border-box;
    /* Horizontal padding matches .slider-articoli (160px ≥768px, 28px ≤767px) so the
       right-aligned button lines up with the scroller items' right edge. */
    padding: 8px 160px 32px;
    /* Move the button up 20px (closer to the scroller above). */
    margin-top: -20px;
}
@media (max-width: 767px) {
    .antar-view-all-wrap {
        padding-left: 28px;
        padding-right: 28px;
        margin-top: -40px;
    }
}

.antar-view-all {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    letter-spacing: 4px;
    text-transform: uppercase;
    opacity: 0.8;
    transition: opacity .2s ease;
    font-family: var(--font-hiragino, "Hiragino Sans", sans-serif);
}

.antar-view-all:hover {
    opacity: 1;
}

/* Mobile: shrink the button by 20% (placed AFTER the base rule so it wins). */
@media (max-width: 767px) {
    .antar-view-all {
        font-size: 14.4px;
        letter-spacing: 3.2px;
    }
}

/* ─── Horizontal Swiper Widget ─── */

/* Elementor editor: JS doesn't run → container collapses to 0 height.
   Scope a fallback min-height to editor only so production is unaffected. */
.elementor-editor-active .antar-swiper-container {
    min-height: 460px;
}
.elementor-editor-active .antar-swiper-card {
    position: relative !important; /* let cards flow in editor so container expands */
    display: flex;
    margin: 0 auto 12px;
    transform: none !important;
    opacity: 1 !important;
    z-index: auto !important;
}
/* Show only the first card in editor to keep things clean */
.elementor-editor-active .antar-swiper-card:not(:first-child) {
    display: none;
}

.antar-swiper-wrapper {
    width: 99dvw;
    position: relative;
    /* Extra top space so rotated/upward-moving cards aren't clipped during swipe */
    padding: 90px 20px 40px;
    /* overflow-x: clip + overflow-y: visible — clips horizontally without forcing
       a scroll container on Y. Older browsers fall back to overflow-x: hidden via
       the second declaration; in those, top corners may still clip but the page
       is still safe (overflow-x: hidden does not allow scrolling on this axis). */
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: visible;
    box-sizing: border-box;
    margin-left: calc(50% - 50dvw);
}

.antar-swiper-container {
    position: relative;
    height: auto;      /* JS sets exact height via container.style.height */
    width: 100%;
    max-width: none;
    min-height: 0;
    overflow: visible;
    contain: layout style;
}

.antar-swiper-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 650px;
    height: auto;
    min-height: 280px;
    background: rgba(30, 30, 30, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    cursor: grab;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    will-change: transform, opacity;
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    flex-direction: row;
    outline: none;
}

.antar-swiper-card:focus {
    outline: none;
}

.antar-swiper-card:hover {
    border-color: rgba(255, 255, 255, 0.17);
}

.antar-swiper-card:active {
    cursor: grabbing;
}

.antar-swiper-card-image {
    width: 40%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.2);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

.antar-swiper-card-overlay {
    width: 60%;
    height: auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px; /* fallback — Elementor overlay_padding control overrides this */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2));
}

.antar-swiper-card-title {
    margin: 0 0 10px 0;
    font-size: 48px !important;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
}

/* ── Neon flicker sui titoli card ──
   Ogni lettera e' wrappata in <span class="neon-char"> via JS; il glow
   (colore + text-shadow) e' ereditato dal titolo. Solo 2 lettere casuali
   non adiacenti ricevono .neon-char--flicker (animazione impostata inline). */
.antar-swiper-card-title > span {
    color: inherit;
    text-shadow: inherit;
}
.antar-swiper-card-title .neon-char--flicker {
    animation: neon-flicker 12s infinite;
}
@keyframes neon-flicker {
    0%, 14.8%, 16%, 34.8%, 35.4%, 35.7%, 36.2%,
    54.8%, 55.8%, 74.7%, 75.3%, 75.6%, 76.1%,
    89.8%, 90.8%, 100% { visibility: visible; }
    15%, 15.6%                      { visibility: hidden; }
    35%, 35.3%, 35.9%, 36%          { visibility: hidden; }
    55%, 55.4%                      { visibility: hidden; }
    74.9%, 75.2%, 75.8%, 76%        { visibility: hidden; }
    90%, 90.4%                      { visibility: hidden; }
}
@keyframes neon-flicker-b {
    0%, 8.8%, 10%, 28.8%, 29.4%, 29.7%, 30.2%,
    48.8%, 49.8%, 64.7%, 65.3%, 65.6%, 66.1%,
    82.8%, 83.8%, 100% { visibility: visible; }
    9%, 9.6%                        { visibility: hidden; }
    29%, 29.3%, 29.9%, 30%          { visibility: hidden; }
    49%, 49.4%                      { visibility: hidden; }
    64.9%, 65.2%, 65.8%, 66%        { visibility: hidden; }
    83%, 83.4%                      { visibility: hidden; }
}
@keyframes neon-flicker-c {
    0%, 22.8%, 24%, 42.8%, 43.4%, 43.7%, 44.2%,
    61.8%, 62.8%, 80.7%, 81.3%, 81.6%, 82.1%,
    95.8%, 96.8%, 100% { visibility: visible; }
    23%, 23.6%                      { visibility: hidden; }
    43%, 43.3%, 43.9%, 44%          { visibility: hidden; }
    62%, 62.4%                      { visibility: hidden; }
    80.9%, 81.2%, 81.8%, 82%        { visibility: hidden; }
    96%, 96.4%                      { visibility: hidden; }
}


.antar-swiper-card-content {
    font-size: 13px;
    color: #cccccc;
    line-height: 1.4;
    margin: 0;
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.antar-swiper-card.is-dragging {
    z-index: 10;
}

/* Landscape layout is now default */
/* Removed .is-landscape variant as it's the base layout now */

/* ── Swiper nav arrows ── */
.antar-swiper-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.35s ease, background 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
    padding: 0;
}
.antar-swiper-arrow.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.antar-swiper-arrow:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.08);
}
.antar-swiper-arrow:active {
    transform: translateY(-50%) scale(0.95);
}
.antar-swiper-arrow--left  { left: 1rem; }
.antar-swiper-arrow--right { right: 1rem; }
.antar-swiper-arrow svg {
    width: 22px;
    height: 22px;
    stroke: rgba(255, 255, 255, 0.85);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

@media (max-width: 767px) {
    .antar-swiper-wrapper {
        padding: 70px 15px 30px;
    }
    /* .antar-swiper-container height is managed entirely by JS */
    /* Stacked layout on mobile: image on top, content below */
    .antar-swiper-card {
        flex-direction: column;
        width: min(416px, 80vw);
        max-width: 80vw;
        height: auto;
        min-height: 0;
    }
    .antar-swiper-card-image {
        width: 100%;
        min-height: 0;
        height: auto;
        aspect-ratio: 16/9;
        object-fit: cover;
        flex-shrink: 0;
    }
    .antar-swiper-card-overlay {
        width: 100%;
        min-height: 0;
        padding: 15px;
        background: none;
    }
    .antar-swiper-card-title {
        font-size: 28px !important;
    }
    .antar-swiper-card-content {
        font-size: 12px;
    }
}