/* Landing città «Hotel a <Città>» (spec 2026-10-17-1950-campagne-citta-ricerca-scalapay).
 *
 * Solo body.lc-city: la pagina eredita testata e fascia finale di /viaggi
 * (viaggi-hoe.css), card e fiducia della home (hoescape-home.css) e il motore
 * hotel (hoescape.css + home-sheets.css). Qui solo ciò che è della città:
 * pillole delle date, riga delle rate, zone, guida. */

html[data-skin="hoe"] body.lc-city .lc-motor { padding: 6px 0 26px; }
html[data-skin="hoe"] body.lc-city .lc-offers,
html[data-skin="hoe"] body.lc-city .lc-zones-sec,
html[data-skin="hoe"] body.lc-city .lc-guide-sec { padding: 26px 0; background: #fff; }
html[data-skin="hoe"] body.lc-city .lc-lead { margin: 6px 0 0; color: #5b6785; font-size: 14px; }

/* ── pillole delle finestre di date ─────────────────────────────────── */
html[data-skin="hoe"] body.lc-city .lc-chips {
    display: flex; gap: 8px; margin: 16px -2px 6px; padding: 2px;
    overflow-x: auto; scrollbar-width: none;
}
html[data-skin="hoe"] body.lc-city .lc-chips::-webkit-scrollbar { display: none; }
html[data-skin="hoe"] body.lc-city .lc-chip {
    flex: 0 0 auto; display: grid; gap: 1px; padding: 8px 13px; text-align: left;
    border: 1.5px solid #e6ebf3; border-radius: 12px; background: #fff;
    color: var(--hoescape-primary, #1e3c72); font: 700 13.5px/1.2 'Figtree', system-ui, sans-serif; cursor: pointer;
}
html[data-skin="hoe"] body.lc-city .lc-chip small { color: #5b6785; font-size: 12px; font-weight: 500; }
html[data-skin="hoe"] body.lc-city .lc-chip em { color: var(--hoescape-primary, #1e3c72); font-size: 12px; font-style: normal; font-weight: 700; }
html[data-skin="hoe"] body.lc-city .lc-chip[aria-selected="true"] {
    background: var(--hoescape-primary, #1e3c72); border-color: var(--hoescape-primary, #1e3c72); color: #fff;
}
html[data-skin="hoe"] body.lc-city .lc-chip[aria-selected="true"] small,
html[data-skin="hoe"] body.lc-city .lc-chip[aria-selected="true"] em { color: #dbe4f7; }
html[data-skin="hoe"] body.lc-city .lc-chip:focus-visible,
html[data-skin="hoe"] body.lc-city .lc-zone:focus-visible { outline: 3px solid #9cc63b; outline-offset: 2px; }

/* ── card: stelle in giallo, riga delle rate sotto il prezzo ─────────── */
html[data-skin="hoe"] body.lc-city .lc-ocard .vxd-stars { color: #f5a623; letter-spacing: 0; }
html[data-skin="hoe"] body.lc-city .lc-rate {
    flex-basis: 100%; display: flex; justify-content: flex-end; align-items: center; gap: 4px;
    color: #5b6785; font-size: 12px; white-space: nowrap;
}
html[data-skin="hoe"] body.lc-city .lc-rate b { color: var(--hoescape-primary, #1e3c72); }
html[data-skin="hoe"] body.lc-city .lc-rate img { width: auto; height: 12px; }
html[data-skin="hoe"] body.lc-city .lc-empty { margin: 14px 0 0; color: #5b6785; font-size: 14px; }

/* ── zone ───────────────────────────────────────────────────────────── */
html[data-skin="hoe"] body.lc-city .lc-zones {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px;
}
html[data-skin="hoe"] body.lc-city .lc-zone {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
    min-height: 150px; padding: 14px; overflow: hidden; border-radius: 16px; color: #fff; text-decoration: none;
    background: linear-gradient(160deg, #2a5298 0%, #1e3c72 70%, #142a52 100%);
}
html[data-skin="hoe"] body.lc-city .lc-zone::after {
    content: ""; position: absolute; top: -24px; right: -24px; width: 110px; height: 110px;
    border: 18px solid rgba(255, 255, 255, .07); border-radius: 50%;
}
html[data-skin="hoe"] body.lc-city .lc-zone strong { font-size: 17px; line-height: 1.15; }
html[data-skin="hoe"] body.lc-city .lc-zone small { color: #c9d6f1; font-size: 12.5px; }
html[data-skin="hoe"] body.lc-city .lc-zone-p { margin-top: 4px; color: #e9f5c9; font-size: 13px; font-weight: 700; }

/* ── guida ──────────────────────────────────────────────────────────── */
html[data-skin="hoe"] body.lc-city .lc-guide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 16px; }
html[data-skin="hoe"] body.lc-city .lc-guide-item { padding: 12px 14px; border-radius: 12px; background: #f3f6fb; }
html[data-skin="hoe"] body.lc-city .lc-guide-item h3 { margin: 0; color: var(--hoescape-primary, #1e3c72); font-size: 15px; font-weight: 700; }
html[data-skin="hoe"] body.lc-city .lc-guide-item p { margin: 2px 0 0; color: #5b6785; font-size: 13.5px; }

@media (min-width: 992px) {
    html[data-skin="hoe"] body.lc-city .lc-offers,
    html[data-skin="hoe"] body.lc-city .lc-zones-sec,
    html[data-skin="hoe"] body.lc-city .lc-guide-sec { padding: 40px 0; }
    html[data-skin="hoe"] body.lc-city .lc-rate { font-size: 13px; }
    html[data-skin="hoe"] body.lc-city .lc-zones { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    html[data-skin="hoe"] body.lc-city .lc-zone { min-height: 210px; }
    html[data-skin="hoe"] body.lc-city .lc-guide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
    html[data-skin="hoe"] body.lc-city .lc-chip { transition: background .15s, color .15s; }
}