/* Lista offerte viaggi, versione B (owner 18/10/2026, anteprima
   https://claude.ai/artifact/WpVK7EWZ7DnqcZjqWx1dWb). Template
   templates/public/viaggi/lista_offerte.html, comportamento in
   static/js/viaggi-lista-b.js.
   Telefono: foto piccola accanto al nome, fascia dei mesi e partenze a tutta
   larghezza. Computer (≥ 768px): foto alta quanto nome + fascia, partenze a
   tutta larghezza della scheda, riga aperta su due colonne.
   Caratteri +2 px sui testi piccoli delle card (date, aeroporti, «a persona»,
   trattamento, località), +1 su nome, stelle e prezzo della riga: grandezza
   «3 · +2» (owner 18/10/2026, come le card di /cerca). */
body.vlb-page {
    --vlb-ink: var(--hoescape-primary, #1e3c72);
    --vlb-deep: #152a4f;
    --vlb-muted: #5b6785;
    --vlb-text: #33435f;
    --vlb-line: #e3e7ef;
    --vlb-soft: #f3f6fb;
    --vlb-leaf: var(--hoescape-accent, #a4c639);
    --vlb-leaf-t: #5a7612;
    --vlb-warm: #b4532a;
    --vlb-wa: #1f8f4e;
    background: #fff;
}
body.vlb-page .vlb { font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--vlb-text); }
body.vlb-page .vlb-wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* testata */
body.vlb-page .vlb-top { padding: 18px 0 8px; text-align: center; }
body.vlb-page .vlb-crumb { font-size: 12.5px; color: var(--vlb-muted); }
body.vlb-page .vlb-crumb a { color: inherit; text-decoration: none; }
body.vlb-page .vlb-crumb a:hover { text-decoration: underline; }
body.vlb-page .vlb-title { margin: 6px 0 8px; color: var(--vlb-ink); font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; }
body.vlb-page .vlb-lead { margin: 0 auto; max-width: 62ch; color: var(--vlb-muted); font-size: 16.5px; line-height: 1.5; }
body.vlb-page .vlb-parent { display: inline-block; margin-top: 4px; color: var(--vlb-ink); font-weight: 700; }
body.vlb-page .vlb-note { margin: 10px auto 0; max-width: 62ch; color: var(--vlb-text); font-size: 15.5px; }

/* motore «Trova il tuo viaggio» sotto il titolo */
body.vlb-page .vl-landing.vlb-search { max-width: 1100px; margin: 10px auto 0; padding: 0 16px; background: transparent; }
body.vlb-page .vl-landing.vlb-search .vl-search { margin: 0 auto; }

/* barra Dove · Quando · Da dove · Ordina */
body.vlb-page .vlb-offers { padding: 14px 0 36px; }
body.vlb-page .vlb-bar { display: grid; grid-template-columns: 1fr 1fr; max-width: 880px; margin: 0 auto 18px; border: 1px solid #cfd8e6; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(21, 42, 79, .08); overflow: hidden; }
/* il -1px fa sparire sotto il bordo della barra la riga dell'ultima fila */
body.vlb-page .vlb-f { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin: 0 0 -1px; padding: 9px 14px; border-bottom: 1px solid var(--vlb-line); cursor: pointer; }
body.vlb-page .vlb-f:nth-child(odd) { border-right: 1px solid var(--vlb-line); }
body.vlb-page .vlb-f:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
body.vlb-page .vlb-f span { color: var(--vlb-ink); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
body.vlb-page .vlb-f select { min-width: 0; padding: 0; border: 0; background: transparent; color: var(--vlb-text); font: inherit; font-size: 15px; text-overflow: ellipsis; cursor: pointer; -webkit-appearance: none; appearance: none; }
body.vlb-page .vlb-f select:focus-visible { outline: 2px solid var(--vlb-leaf); outline-offset: 2px; border-radius: 4px; }

/* scheda struttura */
body.vlb-page .vlb-list { display: grid; gap: 14px; }
body.vlb-page .vlb-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px 12px; padding: 12px; border: 1px solid var(--vlb-line); border-radius: 16px; background: #fff; }
body.vlb-page .vlb-card[hidden] { display: none; }
body.vlb-page .vlb-ph { position: relative; grid-column: 1; grid-row: 1; width: 104px; height: 104px; overflow: hidden; border-radius: 12px; background: var(--vlb-soft); }
body.vlb-page .vlb-ph img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
body.vlb-page .vlb-info { grid-column: 2; grid-row: 1; min-width: 0; }
body.vlb-page .vlb-kick { margin: 0; color: var(--vlb-leaf-t); font-size: 13.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
body.vlb-page .vlb-name { margin: 2px 0; color: var(--vlb-ink); font-size: 18px; font-weight: 800; line-height: 1.2; }
body.vlb-page .vlb-name a { color: inherit; text-decoration: none; }
body.vlb-page .vlb-name a:hover { text-decoration: underline; }
body.vlb-page .vlb-stars { color: #f0a500; font-size: 14px; letter-spacing: 1px; white-space: nowrap; }
body.vlb-page .vlb-det { margin: 0; color: var(--vlb-muted); font-size: 15.5px; }
body.vlb-page .vlb-from { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 0; }
body.vlb-page .vlb-rib { display: inline-block; padding: 3px 9px; border-radius: 8px; background: var(--vlb-ink); color: #fff; font-size: 16px; font-weight: 800; }
body.vlb-page .vlb-rib small { margin-right: 1px; font-size: 11px; font-weight: 600; }
body.vlb-page .vlb-rib b { font-weight: 800; }
body.vlb-page .vlb-pp { color: var(--vlb-muted); font-size: 14.5px; }

/* fascia dei mesi: una tabella continua, non bottoni separati */
body.vlb-page .vlb-months { grid-column: 1 / -1; grid-row: 2; align-self: end; display: flex; overflow-x: auto; border: 1px solid var(--vlb-line); border-radius: 10px; scrollbar-width: none; }
body.vlb-page .vlb-months::-webkit-scrollbar { display: none; }
body.vlb-page .vlb-m { flex: 1 0 62px; display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border: 0; border-right: 1px solid var(--vlb-line); background: #fff; color: var(--vlb-text); font: inherit; cursor: pointer; }
body.vlb-page .vlb-m:last-child { border-right: 0; }
body.vlb-page .vlb-m b { color: var(--vlb-muted); font-size: 12px; font-weight: 700; }
body.vlb-page .vlb-m span { color: var(--vlb-ink); font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
body.vlb-page .vlb-m.is-low span { color: var(--vlb-leaf-t); }
body.vlb-page .vlb-m[aria-selected="true"] { background: var(--vlb-ink); }
body.vlb-page .vlb-m[aria-selected="true"] b,
body.vlb-page .vlb-m[aria-selected="true"] span { color: #fff; }
body.vlb-page .vlb-m:disabled { cursor: default; opacity: .45; }
body.vlb-page .vlb-m:focus-visible { outline: 2px solid var(--vlb-leaf); outline-offset: -2px; }

/* partenze */
body.vlb-page .vlb-rows { grid-column: 1 / -1; grid-row: 3; margin: 0; padding: 0; border-top: 1px solid var(--vlb-line); list-style: none; }
body.vlb-page .vlb-rows > li { border-bottom: 1px solid var(--vlb-line); }
body.vlb-page .vlb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 2px 10px; align-items: center; width: 100%; padding: 10px 2px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
body.vlb-page .vlb-row:hover .vlb-r-date b { text-decoration: underline; }
body.vlb-page .vlb-row:focus-visible { outline: 2px solid var(--vlb-leaf); outline-offset: -2px; border-radius: 6px; }
body.vlb-page .vlb-row[aria-expanded="true"] { background: var(--vlb-soft); }
body.vlb-page .vlb-r-date { color: var(--vlb-text); font-size: 16.5px; font-variant-numeric: tabular-nums; }
/* «· 7 notti» va a capo intero, mai «7» su una riga e «notti» sull'altra */
body.vlb-page .vlb-r-n { white-space: nowrap; }
body.vlb-page .vlb-r-date b { color: var(--vlb-ink); }
body.vlb-page .vlb-r-ap { grid-column: 1; min-width: 0; overflow: hidden; color: var(--vlb-muted); font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; }
body.vlb-page .vlb-seats { color: var(--vlb-warm); font-weight: 700; }
body.vlb-page .vlb-r-price { grid-column: 2; grid-row: 1 / span 2; color: var(--vlb-ink); font-size: 18px; font-weight: 800; line-height: 1.1; text-align: right; font-variant-numeric: tabular-nums; }
body.vlb-page .vlb-r-price small { display: block; color: var(--vlb-leaf-t); font-size: 11px; font-weight: 700; }
body.vlb-page .vlb-r-price.is-low { color: var(--vlb-leaf-t); }
body.vlb-page .vlb-chev { grid-column: 3; grid-row: 1 / span 2; justify-self: center; width: 10px; height: 10px; margin-top: -4px; border-right: 2px solid var(--vlb-muted); border-bottom: 2px solid var(--vlb-muted); transform: rotate(45deg); transition: transform .2s; }
body.vlb-page .vlb-row[aria-expanded="true"] .vlb-chev { margin-top: 4px; transform: rotate(-135deg); }

/* riga aperta */
body.vlb-page .vlb-pan { display: grid; gap: 14px; padding: 12px 4px 16px; }
body.vlb-page .vlb-pan-l,
body.vlb-page .vlb-pan-r { display: grid; gap: 14px; align-content: start; min-width: 0; }
body.vlb-page .vlb-pan h4 { margin: 0 0 6px; color: var(--vlb-muted); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
body.vlb-page .vlb-aps { display: grid; gap: 6px; }
body.vlb-page .vlb-ap { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 0; padding: 8px 10px; border: 1px solid var(--vlb-line); border-radius: 10px; background: #fff; cursor: pointer; }
body.vlb-page .vlb-ap input { margin: 0; accent-color: var(--vlb-ink); }
body.vlb-page .vlb-ap:has(input:checked) { border-color: var(--vlb-ink); box-shadow: inset 0 0 0 1px var(--vlb-ink); }
body.vlb-page .vlb-ap b { color: var(--vlb-ink); font-size: 14.5px; }
body.vlb-page .vlb-ap em { display: block; color: var(--vlb-muted); font-size: 12.5px; font-style: normal; }
body.vlb-page .vlb-ap strong { color: var(--vlb-ink); font-size: 15px; font-variant-numeric: tabular-nums; }
body.vlb-page .vlb-fl { padding: 10px 12px; border: 1px solid var(--vlb-line); border-radius: 12px; background: #fff; }
body.vlb-page .vlb-fl-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; margin-bottom: 6px; color: var(--vlb-ink); font-size: 13.5px; font-weight: 700; }
body.vlb-page .vlb-fl-head span:last-child { color: var(--vlb-muted); font-weight: 600; }
body.vlb-page .vlb-leg { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 2px 10px; padding: 6px 0; border-top: 1px solid var(--vlb-line); font-size: 14px; }
body.vlb-page .vlb-fl-head + .vlb-leg { border-top: 0; }
body.vlb-page .vlb-leg > span { padding-top: 2px; color: var(--vlb-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
body.vlb-page .vlb-leg b { color: var(--vlb-ink); font-variant-numeric: tabular-nums; }
body.vlb-page .vlb-leg small { display: block; color: var(--vlb-muted); font-size: 12.5px; }
body.vlb-page .vlb-leg .vlb-direct { color: var(--vlb-leaf-t); font-weight: 700; }
body.vlb-page .vlb-rooms { display: grid; gap: 4px; }
body.vlb-page .vlb-room { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--vlb-line); font-size: 14px; }
body.vlb-page .vlb-room:last-child { border-bottom: 0; }
body.vlb-page .vlb-room b { color: var(--vlb-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
body.vlb-page .vlb-room s,
body.vlb-page .vlb-sum s { margin-right: 4px; color: var(--vlb-muted); font-size: .8em; font-weight: 600; }
body.vlb-page .vlb-acc { padding: 0 12px; border: 1px solid var(--vlb-line); border-radius: 10px; background: #fff; }
body.vlb-page .vlb-acc + .vlb-acc { margin-top: -8px; }
body.vlb-page .vlb-acc summary { padding: 9px 0; color: var(--vlb-ink); font-size: 14px; font-weight: 700; cursor: pointer; }
body.vlb-page .vlb-acc ul { margin: 0 0 10px; padding-left: 18px; font-size: 13.5px; }
body.vlb-page .vlb-acc li { margin: 3px 0; }
body.vlb-page .vlb-acc .vp-link { padding: 0; border: 0; background: none; color: var(--vlb-ink); font: inherit; text-align: left; text-decoration: underline; cursor: pointer; }
body.vlb-page .vlb-note-q { margin: 0; color: var(--vlb-muted); font-size: 13px; }
body.vlb-page .vlb-sum { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 10px 12px; border-radius: 12px; background: var(--vlb-soft); }
body.vlb-page .vlb-sum > span { color: var(--vlb-muted); font-size: 13.5px; }
body.vlb-page .vlb-sum b { color: var(--vlb-ink); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
body.vlb-page .vlb-sum b small { color: var(--vlb-muted); font-size: 13px; font-weight: 600; }
body.vlb-page .vlb-btns { display: grid; gap: 8px; }
body.vlb-page .vlb-btn { display: flex; align-items: center; justify-content: center; padding: 12px 16px; border: 2px solid var(--vlb-ink); border-radius: 10px; font: inherit; font-size: 15px; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; }
body.vlb-page .vlb-btn-ink { background: var(--vlb-ink); color: #fff; }
body.vlb-page .vlb-btn-ink:hover { background: var(--vlb-deep); color: #fff; }
body.vlb-page .vlb-btn-line { background: #fff; color: var(--vlb-ink); }
body.vlb-page .vlb-btn-wa { border-color: var(--vlb-wa); background: #fff; color: var(--vlb-wa); }
body.vlb-page .vlb-btn:focus-visible { outline: 3px solid var(--vlb-leaf); outline-offset: 2px; }

/* vuoti, link e note */
body.vlb-page .vlb-empty { margin: 18px 0; color: var(--vlb-muted); text-align: center; }
body.vlb-page .vlb-reset { padding: 0; border: 0; background: none; color: var(--vlb-ink); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
body.vlb-page .vlb-none { padding: 30px 0; text-align: center; color: var(--vlb-muted); }
body.vlb-page .vlb-none h3 { color: var(--vlb-ink); font-size: 20px; font-weight: 800; }
body.vlb-page .vlb-cross { margin: 22px 0 0; text-align: center; }
body.vlb-page .vlb-cross a { color: var(--vlb-ink); font-weight: 800; }
body.vlb-page .vlb-foot { margin: 18px 0 0; color: var(--vlb-muted); font-size: 12.5px; text-align: center; }

@media (min-width: 768px) {
    body.vlb-page .vlb-title { font-size: 36px; }
    body.vlb-page .vlb-bar { display: flex; }
    body.vlb-page .vlb-f,
    body.vlb-page .vlb-f:nth-child(odd) { flex: 1 1 0; margin: 0; border-bottom: 0; border-right: 1px solid var(--vlb-line); }
    body.vlb-page .vlb-f:last-child { border-right: 0; }
    body.vlb-page .vlb-card { grid-template-columns: 200px minmax(0, 1fr); gap: 12px 18px; padding: 14px; }
    body.vlb-page .vlb-ph { grid-row: 1 / span 2; width: 200px; height: auto; min-height: 150px; }
    body.vlb-page .vlb-card:not(:has(.vlb-months)) .vlb-ph { grid-row: 1; height: 130px; min-height: 0; }
    body.vlb-page .vlb-info { position: relative; padding-right: 150px; }
    body.vlb-page .vlb-from { position: absolute; top: 0; right: 0; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0; }
    body.vlb-page .vlb-rib { font-size: 20px; }
    body.vlb-page .vlb-name { font-size: 21px; }
    body.vlb-page .vlb-months { grid-column: 2; }
    body.vlb-page .vlb-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto 18px; padding: 10px 8px; }
    body.vlb-page .vlb-r-ap { grid-column: 2; grid-row: 1; }
    body.vlb-page .vlb-r-price { grid-column: 3; grid-row: 1; }
    body.vlb-page .vlb-chev { grid-column: 4; grid-row: 1; }
    body.vlb-page .vlb-pan { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 22px; padding: 14px 8px 18px; }
    body.vlb-page .vlb-btns { grid-template-columns: 1fr 1fr; }
    body.vlb-page .vlb-btns .vlb-btn-ink { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    body.vlb-page .vlb-chev { transition: none; }
}

/* Motore come il box «Estero» della home (owner 18/10/2026): al computer la
   colonna della lista è più stretta della home, quindi campi un filo più
   piccoli e tasto più stretto, come sulle pagine TOP dei viaggi. */
@media (min-width: 1024px) {
    html[data-skin="hoe"] body.hoe-home.vlb-page .hoe-travel .vl-search-grid {
        grid-template-columns: 1.15fr 1.25fr 1fr .85fr .85fr 84px;
        gap: 10px;
    }
    html[data-skin="hoe"] body.hoe-home.vlb-page .hoe-travel .vl-search-grid > label,
    html[data-skin="hoe"] body.hoe-home.vlb-page .hoe-travel .vl-search-pax > div { padding: 16px 14px; }
    html[data-skin="hoe"] body.hoe-home.vlb-page .hoe-travel .vl-field,
    html[data-skin="hoe"] body.hoe-home.vlb-page .hoe-travel .vl-stepper { font-size: 17px; }
    html[data-skin="hoe"] body.hoe-home.vlb-page .hoe-travel .vl-search-cta { width: 84px; }
}