/* Righe-carosello «Netflix» della landing di destinazione (.vn-*).
 * Spec: docs/superpowers/specs/2026-08-06-viaggi-destinazione-netflix-design.md
 * Carica DOPO viaggi-landing.css e viaggi-dest.css: usa i token --vl-*.
 * Mobile-first (colonna piena, card 72vw a snap); desktop ≥1024px. */

/* ── hero: Ken Burns + scroll-cue ─────────────────────────────────── */
@keyframes vn-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}
.vx-page .vl-hero-slide.is-active .vl-hero-img {
    animation: vn-kenburns 14s ease-out forwards;
}
.vn-scrollcue {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
    font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: #fff; opacity: .92;
}
@keyframes vn-cue { 0%, 100% { transform: translateY(0); }
                    50% { transform: translateY(4px); } }
.vn-scrollcue-arrow { display: inline-block;
                      animation: vn-cue 1.6s ease-in-out infinite; }

/* ── pill-bar aeroporti sticky ────────────────────────────────────── */
.vn-airports {
    position: sticky; top: 0; z-index: 30;
    display: flex; gap: 8px; padding: 10px 16px; overflow-x: auto;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--vl-border);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.vn-airports::-webkit-scrollbar { display: none; }
.vn-airpill {
    flex: 0 0 auto; appearance: none; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 700;
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--vl-field-border);
    background: #fff; color: var(--vl-navy);
    transition: background .15s, color .15s, border-color .15s;
}
.vn-airpill.is-active {
    background: var(--vl-navy); border-color: var(--vl-navy); color: #fff;
}
.vn-airpill:focus-visible { outline: 2px solid var(--vl-lime);
                            outline-offset: 2px; }

/* ── riga ─────────────────────────────────────────────────────────── */
.vn-row { padding: 26px 0 6px; }
.vn-row-head {
    display: flex; align-items: baseline; gap: 10px;
    padding: 0 16px 12px; flex-wrap: wrap;
}
.vn-row-sub { font-size: 12px; font-weight: 600; color: var(--vl-muted); }
.vn-row-arrows { margin-left: auto; display: none; gap: 6px; }
.vn-arrow {
    appearance: none; cursor: pointer; width: 34px; height: 34px;
    border-radius: 50%; border: 1px solid var(--vl-field-border);
    background: #fff; color: var(--vl-navy); font-size: 18px; line-height: 1;
}
.vn-arrow:hover { background: var(--vl-tint); }

/* riga scura «Ultimi posti»: full-bleed, unico contrasto dark */
.vn-row--dark { background: var(--vl-navy-hero); padding: 30px 0 26px; }
.vn-row--dark .vn-row-sub { color: rgba(255, 255, 255, .75); }
.vn-row--dark .vn-arrow { background: transparent; color: #fff;
                          border-color: rgba(255, 255, 255, .35); }

/* ── scroller a snap ──────────────────────────────────────────────── */
.vn-scroller {
    display: flex; gap: 12px; padding: 4px 16px 18px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.vn-scroller::-webkit-scrollbar { display: none; }
.vn-scroller--deals > .vl-deal { flex: 0 0 88%; scroll-snap-align: start; }

/* ── card ─────────────────────────────────────────────────────────── */
.vn-card {
    flex: 0 0 72vw; max-width: 300px; scroll-snap-align: start;
    border-radius: var(--vl-radius); overflow: hidden;
    background: #fff; box-shadow: var(--vl-shadow-card);
    transition: transform .25s, box-shadow .25s;
}
.vn-card-link { display: block; color: inherit; }
.vn-card-photo { display: block; position: relative; aspect-ratio: 3 / 2;
                 background: var(--vl-tint); }
.vn-card-photo img { width: 100%; height: 100%; object-fit: cover;
                     display: block; transition: transform .35s; }
.vn-card-seats {
    position: absolute; left: 10px; bottom: 10px;
    font-size: 11px; font-weight: 800; color: #fff;
    background: var(--vl-orange); border-radius: 999px; padding: 4px 10px;
}
.vn-card-seats--low { background: var(--vl-alarm); }
.vn-card-body { display: block; padding: 12px 14px 14px; }
.vn-card-title { display: block; font-size: 14px; font-weight: 700;
                 line-height: 1.25; color: var(--vl-navy); }
.vn-card-stars { color: var(--vl-orange); font-size: 12px; margin-left: 6px;
                 letter-spacing: .08em; }
.vn-card-meta { display: block; margin-top: 4px; font-size: 12px;
                color: var(--vl-muted); }
.vn-card-more { font-weight: 700; color: var(--vl-navy);
                background: var(--vl-tint); border-radius: 999px;
                padding: 2px 8px; font-size: 11px;
                display: inline-block; white-space: nowrap; }
.vn-card-price { display: block; margin-top: 8px; font-size: 12px;
                 color: var(--vl-muted); }
.vn-card-price strong { font-size: 18px; font-weight: 800;
                        color: var(--vl-navy); letter-spacing: -.02em; }
.vn-row--dark .vn-card { box-shadow: none; }

/* ── reveal on scroll (stati pilotati da viaggi-dest-rows.js) ─────── */
[data-vn-row] { opacity: 0; transform: translateY(22px);
                transition: opacity .5s ease, transform .5s ease; }
[data-vn-row].is-inview { opacity: 1; transform: none; }
[data-vn-row] .vn-card { opacity: 0; transform: translateY(16px);
                         transition: opacity .45s ease, transform .45s ease; }
[data-vn-row].is-inview .vn-card { opacity: 1; transform: none; }
[data-vn-row].is-inview .vn-card:nth-child(2) { transition-delay: .06s; }
[data-vn-row].is-inview .vn-card:nth-child(3) { transition-delay: .12s; }
[data-vn-row].is-inview .vn-card:nth-child(4) { transition-delay: .18s; }
[data-vn-row].is-inview .vn-card:nth-child(5) { transition-delay: .24s; }
[data-vn-row].is-inview .vn-card:nth-child(n+6) { transition-delay: .3s; }

/* ── desktop ──────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .vn-airports { padding: 12px calc((100% - 1200px) / 2 + 16px); }
    .vn-row-head, .vn-scroller {
        padding-left: calc((100% - 1200px) / 2 + 16px);
        padding-right: calc((100% - 1200px) / 2 + 16px);
    }
    .vn-row-arrows { display: inline-flex; }
    .vn-card { flex-basis: 300px; }
    .vn-card:hover { transform: translateY(-4px);
                     box-shadow: var(--vl-shadow-card-lg); }
    .vn-card:hover .vn-card-photo img { transform: scale(1.05); }
    .vn-scroller--deals > .vl-deal { flex-basis: 560px; }
}

/* ── reduced motion: TUTTO fermo, tutto visibile ──────────────────── */
@media (prefers-reduced-motion: reduce) {
    .vx-page .vl-hero-slide.is-active .vl-hero-img,
    .vn-scrollcue-arrow { animation: none; }
    [data-vn-row], [data-vn-row] .vn-card {
        opacity: 1; transform: none; transition: none;
    }
    .vn-card, .vn-card-photo img { transition: none; }
}