/* Mappa della Sicilia in home — ripresa dal portale Sicily Home Rentals
   e riportata ai colori di questo sito (oro e navy invece del suo oro/verde).

   Il profilo dell'isola e' un tracciato SVG disegnato dentro la pagina:
   nessun servizio di mappe esterno, quindi nessuna chiave API, nessun costo
   e nessuna terza parte da dichiarare nel banner cookie. */

.lux-map-section{ background:var(--pearl,#F8F5F0); }
.lux-map-inner{ max-width:1180px; margin:0 auto; padding:0 22px; }
.lux-map-section .lux-eyebrow,
.lux-map-section .lux-h2{ text-align:center; }

.map-sub{ text-align:center; color:var(--text-muted,#5a7080); margin:-.4em auto 26px; max-width:620px; }

.map-layout{ display:grid; grid-template-columns:1fr 260px; gap:24px; align-items:start; }

.map-wrap{
  position:relative;
  background:linear-gradient(180deg,#eaf4f8,#dfeef4);
  border:1px solid var(--sand,#EDE8DF);
  border-radius:16px;
  padding:22px;
  overflow:hidden;
}
.map-svg{ width:100%; height:auto; display:block; overflow:visible; aspect-ratio:3/2; }
.map-land{ fill:#d8e6d2; stroke:#a9c1a2; stroke-linejoin:round; }

/* Il segnaposto delle case: oro, come il resto del sito */
.map-pin-halo{ fill:var(--gold,#C9A84C); opacity:.20; }
.map-pin-dot{ fill:var(--gold,#C9A84C); stroke:#fff; }
.map-name{
  font-family:'Playfair Display',Georgia,serif; font-weight:700; fill:var(--navy,#0D1B2A);
  paint-order:stroke; stroke:#fff; stroke-linejoin:round;
}
.map-count{
  font-family:Inter,sans-serif; fill:var(--text-muted,#5a7080);
  paint-order:stroke; stroke:#fff; stroke-linejoin:round;
}

/* Icona dentro il pallino: onde, perche' Terrasini e' sul mare */
.map-ico{ fill:#fff; pointer-events:none; }
.map-ico .ico-line{ stroke:#fff; stroke-width:2.6; stroke-linecap:round; fill:none; }

/* Nome del mare: leggero, serve solo a orientare */
.map-sea{
  font-family:Inter,sans-serif; font-weight:500;
  fill:#7fa8bd; opacity:.75; text-transform:uppercase;
}

/* Citta' e luoghi: grigi e piu' piccoli, non sono nostre strutture
   e non devono competere con il segnaposto delle case. */
.map-poi{ pointer-events:none; }
.poi-dot{ fill:#8fa08c; opacity:.85; }
.poi-plane{ fill:#6d7f8c; opacity:.9; }
.poi-label{
  font-family:Inter,sans-serif; fill:#6a7a86;
  paint-order:stroke; stroke:#fff; stroke-linejoin:round;
}
.map-poi-airport .poi-label{ fill:#3d4f5c; font-weight:600; }

/* Chilometraggio sotto il nome della citta': e' l'informazione che l'ospite
   cerca davvero, quindi sta sulla mappa e non solo nella riga di testo. */
.poi-km{
  font-family:Inter,sans-serif; font-weight:600; fill:#8a6f2e;
  paint-order:stroke; stroke:#fff; stroke-linejoin:round;
}

/* Miniatura dell'isola intera con il riquadro della zona ingrandita:
   serve a chi non conosce la Sicilia per capire dove si trova Terrasini. */
.map-inset{
  position:absolute; bottom:14px; right:14px;
  width:172px; padding:9px 10px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--sand,#EDE8DF); border-radius:10px;
  box-shadow:0 6px 18px rgba(13,27,42,.10);
  line-height:0;
}
.map-inset svg{ width:100%; height:auto; display:block; }
.inset-land{ fill:#dfe9da; stroke:#b6c8b0; stroke-width:3; }
.inset-box{ fill:rgba(201,168,76,.22); stroke:var(--gold,#C9A84C); stroke-width:8; }

/* Elenco delle due case accanto alla mappa */
.map-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.map-list a{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:14px 18px; background:#fff; border:1px solid var(--sand,#EDE8DF);
  border-radius:12px; text-decoration:none;
  transition:border-color .15s ease, transform .15s ease;
}
.map-list a:hover, .map-list a:focus-visible{
  border-color:var(--gold,#C9A84C); transform:translateX(2px); text-decoration:none;
}
.map-list-name{ font-family:'Playfair Display',Georgia,serif; font-size:19px; color:var(--navy,#0D1B2A); }
.map-list-count{ font-size:13px; color:var(--text-muted,#5a7080); white-space:nowrap; }

.map-legend{
  display:flex; flex-wrap:wrap; gap:18px; justify-content:center;
  margin:16px 0 0; font-size:13px; color:var(--text-muted,#5a7080);
}
.map-legend span{ display:inline-flex; align-items:center; gap:7px; }
.map-legend i{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.map-legend .lg-house{ background:var(--gold,#C9A84C); box-shadow:0 0 0 3px rgba(201,168,76,.22); }
.map-legend .lg-poi{ background:#8fa08c; width:8px; height:8px; }

.map-dist{
  text-align:center; margin:12px auto 0; max-width:760px;
  font-size:13.5px; color:var(--text-muted,#5a7080); line-height:1.7;
}
.map-dist strong{ color:var(--navy,#0D1B2A); font-weight:600; }
.map-credit{ text-align:center; font-size:12px; color:var(--text-muted,#5a7080); margin:10px 0 0; opacity:.8; }

@media (max-width:900px){
  .map-layout{ grid-template-columns:1fr; }
  .map-inset{ width:120px; bottom:10px; right:10px; padding:7px 8px; }
}
@media (max-width:520px){
  .map-wrap{ padding:12px; }
  .map-inset{ width:96px; }
}