/* Calendario dei mesi della landing di destinazione (.vx-months, .vx-cal-*).
 * Si carica DOPO viaggi-dest-rows.css. Tutto vive sotto #partenze.vx-cal-on,
 * classe messa da viaggi-dest-calendar.js: senza JS restano le righe-mese
 * di sempre. Token --vl-* di HoEscape (navy, lime, arancio), nessun
 * colore nuovo. */

.vx-cal-head { padding: 34px 16px 4px; }
.vx-cal-head .vx-h2 { margin-top: 0; }
.vx-cal-lead { margin: 6px 0 0; font-size: 14px; color: var(--vl-muted); max-width: 56ch; }

/* ── fascia dei mesi ──────────────────────────────────────────────── */
.vx-months {
    display: flex; gap: 8px; align-items: flex-end;
    padding: 14px 16px 6px; overflow-x: auto;
    scroll-snap-type: x proximity; scroll-padding-inline: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.vx-months::-webkit-scrollbar { display: none; }
.vx-m {
    flex: 0 0 96px; scroll-snap-align: start; appearance: none; cursor: pointer;
    font: inherit; color: var(--vl-navy); background: #fff;
    border: 1px solid var(--vl-border); border-radius: 14px;
    padding: 10px 6px 12px; display: grid; justify-items: center; gap: 2px;
    transition: background .15s, color .15s, border-color .15s;
}
.vx-m[hidden] { display: none; }
.vx-m-bar {
    width: 56%; border-radius: 6px 6px 0 0; margin-bottom: 4px;
    background: linear-gradient(0deg, var(--vl-navy), #7f98c9);
}
.vx-m-name { font-size: 14px; font-weight: 700; }
.vx-m-price { font-size: 12.5px; font-weight: 700; }
.vx-m-count { font-size: 11px; font-weight: 600; color: var(--vl-muted); min-height: 1em; }
.vx-m[aria-pressed="true"] {
    background: var(--vl-navy); border-color: var(--vl-navy); color: #fff;
}
.vx-m[aria-pressed="true"] .vx-m-bar { background: linear-gradient(0deg, var(--vl-lime), #d3e68f); }
.vx-m[aria-pressed="true"] .vx-m-count { color: rgba(255, 255, 255, .75); }
.vx-m:focus-visible { outline: 3px solid var(--vl-orange); outline-offset: 2px; }

/* ── una riga alla volta, card in griglia ─────────────────────────── */
.vx-cal-on > .vn-row.vx-month-off { display: none; }
.vx-cal-on .vn-row { padding-top: 14px; }
.vx-cal-on .vn-row-arrows { display: none; }
.vx-cal-on .vn-scroller {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px; overflow: visible; scroll-snap-type: none;
}
.vx-cal-on .vn-card { max-width: none; flex: none; }

@media (min-width: 640px) {
    .vx-cal-on .vn-scroller { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .vx-cal-head,
    .vx-months {
        padding-left: calc((100% - 1200px) / 2 + 16px);
        padding-right: calc((100% - 1200px) / 2 + 16px);
    }
    .vx-m { flex: 1 1 0; min-width: 104px; }
    .vx-cal-on .vn-scroller { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .vx-m { transition: none; } }