/* Liste offerte hotel, versione B (owner 18/10/2026, anteprima
   https://claude.ai/artifact/5DjF28ywBCxrBWLCsep9jy). Solo con la veste
   HoEscape: body.hlb-page in templates/public/offer_list_page.html, card in
   _lista_offerte_hotel_card_hoe.html, comportamento in static/js/lista-hotel-b.js.
   Qui si ridisegnano card e righe dei periodi; prezzi, promo, tabelle e
   pulsanti restano quelli di _offer_period_card.html. */
body.hlb-page {
    --hlb-ink: var(--hoescape-primary, #1e3c72);
    --hlb-deep: #152a4f;
    --hlb-muted: #5b6785;
    --hlb-text: #33435f;
    --hlb-line: #e3e7ef;
    --hlb-soft: #f3f6fb;
    --hlb-leaf: var(--hoescape-accent, #a4c639);
    --hlb-leaf-t: #5a7612;
    --hlb-wa: #1f8f4e;
    --light-bg: #fff;
    background: #fff;
}
/* stesso carattere delle liste viaggi B; le icone tengono il loro */
body.hlb-page .hlb-top,
body.hlb-page .hlb-bar,
body.hlb-page .hlb-card { font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body.hlb-page .hlb-top *,
body.hlb-page .hlb-bar *,
body.hlb-page .hlb-card *:not(.bi) { font-family: inherit; }
body.hlb-page .hlb-wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

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

/* motore sotto il titolo, largo quanto le card */
body.hlb-page .offer-list-search { padding: 10px 0 4px; }
body.hlb-page .offer-list-search > .container-fluid { max-width: 1132px; }

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

/* scheda struttura */
body.hlb-page .hotel-offer-card.hlb-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px 12px; max-width: 1100px; margin: 0 auto 14px; padding: 12px; border: 1px solid var(--hlb-line); border-radius: 16px; background: #fff; box-shadow: none; overflow: visible; }
body.hlb-page .hlb-ph { position: relative; grid-column: 1; grid-row: 1; width: 104px; height: 104px; overflow: hidden; border-radius: 12px; background: var(--hlb-soft); }
body.hlb-page .hlb-ph button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
body.hlb-page .hlb-ph img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
body.hlb-page .hlb-info { grid-column: 2; grid-row: 1; min-width: 0; }
body.hlb-page .hlb-kick { margin: 0; color: var(--hlb-leaf-t); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
body.hlb-page .hlb-name { margin: 2px 0; color: var(--hlb-ink); font-size: 17px; font-weight: 800; line-height: 1.2; }
body.hlb-page .hlb-name a { color: inherit; text-decoration: none; }
body.hlb-page .hlb-name a:hover { text-decoration: underline; }
body.hlb-page .hlb-stars { color: #f0a500; font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
body.hlb-page .hlb-det { margin: 0; color: var(--hlb-muted); font-size: 13.5px; }
body.hlb-page .hlb-reco { color: var(--hlb-leaf-t); font-weight: 700; }
body.hlb-page .hlb-from { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 0; }
body.hlb-page .hlb-rib { display: inline-block; padding: 3px 9px; border-radius: 8px; background: var(--hlb-ink); color: #fff; font-size: 16px; font-weight: 800; }
body.hlb-page .hlb-rib small { font-size: 11px; font-weight: 600; }
body.hlb-page .hlb-pp { color: var(--hlb-muted); font-size: 12.5px; }

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

/* periodi: una riga ciascuno */
body.hlb-page .hlb-rows { grid-column: 1 / -1; grid-row: 3; margin: 0; border-top: 1px solid var(--hlb-line); }
body.hlb-page .hlb-off { display: none !important; }
body.hlb-page .hlb-card .period-item { margin: 0; border-radius: 0; border-bottom: 1px solid var(--hlb-line); box-shadow: none; background: none; }
body.hlb-page .hlb-card .period-item:hover { box-shadow: none; }
body.hlb-page .hlb-card .period-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 2px; flex-wrap: nowrap; }
body.hlb-page .hlb-card .period-header:hover { background: none; }
body.hlb-page .hlb-card .period-header > .period-promo-strip { grid-column: 1 / -1; }
body.hlb-page .hlb-card .period-header:hover .date-part b { text-decoration: underline; }
body.hlb-page .hlb-card .period-header.expanded { background: var(--hlb-soft); }
body.hlb-page .hlb-card .period-dates,
body.hlb-page .hlb-card .dates-text { color: var(--hlb-text); font-size: 14.5px; font-weight: 400; letter-spacing: 0; text-transform: none; }
body.hlb-page .hlb-card .date-part b { color: var(--hlb-ink); font-weight: 700; }
body.hlb-page .hlb-card .hlb-nights { color: var(--hlb-muted); }
body.hlb-page .hlb-card .period-treatment-row { margin: 1px 0 0; padding: 0; gap: 6px; }
body.hlb-page .hlb-card .period-treatment-line { margin: 0; padding: 0; color: var(--hlb-muted); font-size: 12.5px; font-weight: 500; }
body.hlb-page .hlb-card .period-price-tag { min-width: 0; color: var(--hlb-ink); font-size: 17px; font-weight: 800; }
body.hlb-page .hlb-card .period-price-tag .period-from-prefix,
body.hlb-page .hlb-card .period-price-tag .period-nights-label { font-size: 11px; font-weight: 600; }
body.hlb-page .hlb-card .period-duration-range-mobile { display: none !important; }
body.hlb-page .hlb-card .period-chevron { color: var(--hlb-muted); font-size: 14px; }

/* periodo aperto */
body.hlb-page .hlb-card .period-body { padding: 12px 4px 16px; border-top: 0; background: none; }
body.hlb-page .hlb-card .period-body-inner { padding: 0; }
body.hlb-page .hlb-card .section-label { margin: 0 0 6px; color: var(--hlb-muted); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
body.hlb-page .hlb-card .section-label .bi { display: none; }
body.hlb-page .hlb-tbl { overflow-x: auto; }
body.hlb-page .hlb-cols { width: 100%; border: 1px solid var(--hlb-line); border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; font-size: 14px; font-variant-numeric: tabular-nums; }
body.hlb-page .hlb-cols th { padding: 8px 10px; border-bottom: 1px solid var(--hlb-line); background: var(--hlb-soft); color: var(--hlb-ink); font-size: 12px; font-weight: 700; text-align: right; }
body.hlb-page .hlb-cols td { padding: 7px 10px; border-bottom: 1px solid var(--hlb-line); text-align: right; }
body.hlb-page .hlb-cols th:first-child,
body.hlb-page .hlb-cols td:first-child { text-align: left; }
body.hlb-page .hlb-cols tr:last-child td { border-bottom: 0; }
body.hlb-page .hlb-cols b { color: var(--hlb-ink); }
body.hlb-page .hlb-cols s { margin-right: 4px; color: var(--hlb-muted); font-size: .85em; }
body.hlb-page .hlb-cols .hlb-promo { color: #c2410c; }
body.hlb-page .hlb-card .detail-accordion .accordion-item { margin-bottom: 6px; border: 1px solid var(--hlb-line); border-radius: 10px; overflow: hidden; background: #fff; }
body.hlb-page .hlb-card .detail-accordion .accordion-button { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; min-height: 0; padding: 9px 12px; background: #fff; color: var(--hlb-ink); font-size: 14px; font-weight: 700; box-shadow: none; }
body.hlb-page .hlb-card .detail-accordion .accordion-button .acc-title-main { display: block; flex: 1 1 auto; }
body.hlb-page .hlb-card .detail-accordion .accordion-button .acc-sub { display: none; }
body.hlb-page .hlb-card .detail-accordion .accordion-button .bi { display: none; }
body.hlb-page .hlb-card .cta-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; justify-content: stretch !important; }
body.hlb-page .hlb-card .cta-row .btn-request-quote { display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px 16px; border-radius: 10px; box-shadow: none; font-size: 15px; font-weight: 800; }
body.hlb-page .hlb-card .cta-row .btn-open-lead-form { grid-column: 1 / -1; border: 2px solid var(--hlb-ink); background: var(--hlb-ink); color: #fff; }
body.hlb-page .hlb-card .cta-row .btn-open-lead-form:hover { transform: none; background: var(--hlb-deep); }
body.hlb-page .hlb-card .cta-row .btn-cta-icon { border: 2px solid var(--hlb-ink); background: #fff !important; color: var(--hlb-ink); }
body.hlb-page .hlb-card .cta-row .btn-cta-icon[aria-label*="WhatsApp"] { border-color: var(--hlb-wa); color: var(--hlb-wa); }
body.hlb-page .hlb-card .cta-row .btn-cta-icon:hover { transform: none; }

@media (min-width: 768px) {
    body.hlb-page .hlb-title { font-size: 36px; }
    body.hlb-page .hlb-bar { display: flex; }
    body.hlb-page .hlb-f,
    body.hlb-page .hlb-f:nth-child(odd) { flex: 1 1 0; margin: 0; border-bottom: 0; border-right: 1px solid var(--hlb-line); }
    body.hlb-page .hlb-f:last-child { border-right: 0; }
    body.hlb-page .hotel-offer-card.hlb-card { grid-template-columns: 200px minmax(0, 1fr); gap: 12px 18px; padding: 14px; }
    body.hlb-page .hlb-ph { grid-row: 1 / span 2; width: 200px; height: auto; min-height: 150px; }
    body.hlb-page .hlb-card:not(:has(.hlb-months)) .hlb-ph { grid-row: 1; height: 130px; min-height: 0; }
    body.hlb-page .hlb-info { position: relative; padding-right: 170px; }
    body.hlb-page .hlb-from { position: absolute; top: 0; right: 0; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0; }
    body.hlb-page .hlb-rib { font-size: 20px; }
    body.hlb-page .hlb-name { font-size: 20px; }
    body.hlb-page .hlb-months { grid-column: 2; }
    body.hlb-page .hlb-card .period-header { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 8px; }
}