/* ==========================================================================
   Destinazioni (indice con mappa, scheda del Paese), temi di viaggio e offerte
   Componenti comuni (.photo-head .cta-card .prose .dgrid .dchips .deplist .dep…) in site.css, sezione 11.
   Regole iPhone: la mappa dell'indice resta «appiccicata» solo da 1100 px in su (colonna stretta, mai a tutta larghezza); sotto i 1100 px scorre con la pagina.
   ========================================================================== */

/* ---------- mappe: riquadro con lo stesso aspetto prima che Leaflet si carichi (poi lo stile lo dà maps.css) ---------- */
[data-world-map]:not(.map), [data-country-map]:not(.map) { position: relative; overflow: hidden; height: var(--map-h, 420px); border-radius: var(--r-xl); border: 1px solid var(--line-2); background: linear-gradient(135deg, var(--sea-100), #cfe3f2); box-shadow: var(--shadow-md); }
.map-fallback { padding: 24px; color: var(--muted); font-weight: 600; }

/* ---------- indice delle destinazioni: mappa + elenco collegati ---------- */
.dest-head .page-head { padding-bottom: 8px; }
.explorer { display: grid; gap: 20px; }
.explorer__map { --map-h: clamp(380px, 92vw, 560px); min-width: 0; order: -1; } /* nell'HTML l'elenco viene prima (è il contenuto); sul telefono la mappa sta sopra */
.explorer__list { min-width: 0; }
.explorer__count { margin-bottom: 14px; color: var(--muted); font-weight: 700; font-size: .92rem; }
.explorer .dcard[hidden] { display: none; }
.dcard.is-hot { box-shadow: 0 0 0 3px var(--sun), var(--shadow-lg); }
@media (min-width: 1100px) {
  .explorer { grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr); gap: 28px; align-items: start; }
  .explorer__map { order: 0; --map-h: min(calc(100svh - var(--header-space) - 28px), 780px); position: sticky; top: calc(var(--header-space) + 6px); }
  .dgrid--explorer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1500px) { .dgrid--explorer { grid-template-columns: repeat(3, minmax(0, 1fr)); } .explorer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- scheda di una destinazione ---------- */
.about { display: grid; gap: 28px; align-items: start; }
@media (min-width: 960px) { .about { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }
.facts { padding: clamp(20px, 3vw, 30px); }
.facts__title { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font: 500 1.45rem/1.2 var(--font-display); }
.facts__title .i { color: var(--aegean-500); }
.facts__list { display: grid; gap: 14px; }
.fact { display: grid; gap: 6px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.fact:last-child { padding-bottom: 0; border-bottom: 0; }
.fact dt { display: flex; align-items: center; gap: 10px; font: 700 .74rem/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fact__icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--sea-50); color: var(--aegean-600); }
.fact__icon .i { width: 18px; height: 18px; }
.fact dd { margin: 0; padding-left: 42px; color: var(--ink-2); font-size: .97rem; line-height: 1.55; }
.about__text { display: grid; gap: 14px; align-content: start; }
.about__text h2 { font-size: clamp(1.9rem, 1.1rem + 2.7vw, 3.1rem); }
.country { display: grid; gap: 16px; }
.country__legend { display: flex; flex-wrap: wrap; gap: 8px; }
.legend-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink-2); font: 650 .9rem/1.2 var(--font-body); text-align: left; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.legend-btn[aria-pressed='true'] { border-color: var(--navy-900); background: var(--navy-900); color: #fff; }
@media (hover: hover) { .legend-btn:not([aria-pressed='true']):hover { border-color: var(--navy-800); color: var(--navy-900); } }

/* ---------- temi ---------- */
.sortbar { align-items: center; margin-bottom: clamp(20px, 3vw, 32px); }
.sortbar__label { margin-right: 4px; color: var(--muted); font-weight: 700; font-size: .88rem; }
.theme-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-list { padding-top: clamp(20px, 3vw, 40px); }

/* ---------- offerte ---------- */
.offer-filter { margin-bottom: clamp(20px, 3vw, 32px); }
.offers-empty { margin-top: 8px; }
.offers-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 22px; }
.offers-more .btn[hidden] + .link-arrow { margin-left: auto; }
.coupons { display: grid; gap: 16px; }
@media (min-width: 900px) { .coupons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.coupon { display: grid; grid-template-columns: 112px minmax(0, 1fr); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); }
.coupon__amount { position: relative; display: grid; place-content: center; gap: 2px; padding: 18px 8px; border-radius: var(--r-lg) 0 0 0; background: var(--sun); color: var(--navy-950); text-align: center; }
.coupon__amount strong { font: 500 2.1rem/1 var(--font-display); letter-spacing: -.02em; }
.coupon__amount span { font: 700 .72rem/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.coupon__amount::after { content: ''; position: absolute; right: -1px; top: 10px; bottom: 10px; border-right: 2px dashed rgba(10, 37, 64, .28); }
.coupon__main { display: grid; gap: 8px; align-content: start; padding: 16px 20px 14px; min-width: 0; }
.coupon__desc { font-weight: 700; line-height: 1.4; }
.coupon__terms { display: grid; gap: 2px; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.coupon__terms li::before { content: '•'; margin-right: 8px; color: var(--sun-700); }
.coupon__code { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px dashed var(--line); }
.coupon__code code { padding: 10px 14px; border-radius: 10px; background: var(--paper-2); font: 800 1.02rem/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .12em; color: var(--navy-900); overflow-wrap: anywhere; }
.coupon__code .btn.is-copied { background: var(--olive); border-color: var(--olive); color: #fff; }