/* ═══════════════════════════════════════════════════════════════
   ApuliaOne — esplora.css (v3 — mobile-first ottimizzato)
   Layout mobile: filtri → mappa (priorità) → lista compatta
   Layout desktop: lista sinistra | mappa destra
═══════════════════════════════════════════════════════════════ */

/* Leaflet CSS */
@import url('https://unpkg.com/leaflet@1.9.4/dist/leaflet.css');


/* ─────────────────────────────────────────────
   FILTER BAR — sticky sotto header, scrollabile
   ───────────────────────────────────────────── */
.filter-wrap {
  background: var(--white);
  border-bottom: 1px solid var(--sand);
  padding: 10px 16px;
  position: sticky;
  top: 60px;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(11,46,107,0.05);
}
.filter-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.filter-bar::-webkit-scrollbar { display: none; }


/* ─────────────────────────────────────────────
   LAYOUT PRINCIPALE
   Mobile: colonna (mappa sopra, lista sotto)
   Desktop: lista | mappa affiancate
   ───────────────────────────────────────────── */
.esplora-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}


/* ─────────────────────────────────────────────
   MAPPA — priorità visiva su mobile
   Occupa la maggior parte dello schermo
   ───────────────────────────────────────────── */
.map-wrap {
  position: relative;
  height: 52vh;           /* più alta rispetto a prima */
  min-height: 260px;
  flex-shrink: 0;
  transition: margin-right 0.35s cubic-bezier(.22,.61,.36,1);
}
#map {
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Legenda tipo costa */
.map-legend {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 10;
  background: rgba(255,255,255,0.95);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(4px);
}
.legend-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #bbb;
  margin-bottom: 6px;
}
.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 4px;
}
.legend-row:last-child { margin-bottom: 0; }
.legend-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.12);
  flex-shrink: 0;
}
.legend-dot.d-sandy { background: #22c55e; }
.legend-dot.d-rocky { background: #f97316; }
.legend-dot.d-mixed { background: #eab308; }


/* ─────────────────────────────────────────────
   LISTA RISULTATI
   Mobile: compatta, max 4 risultati visibili,
   poi "mostra tutti" per espandere
   ───────────────────────────────────────────── */
.results-list {
  overflow-y: auto;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--beige);
}

/* Header lista con conteggio e bottone espandi */
.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 2px 4px;
}
.results-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #aaa;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.results-expand-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--teal);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.2s;
}
.results-expand-btn:hover { background: rgba(23,183,200,0.1); }

/* Riga spiaggia */
.srow {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: border-color 0.2s, transform 0.15s;
}
.srow:hover  { border-color: var(--teal); }
.srow.selected { border-color: var(--gold); background: rgba(214,165,58,0.04); }

/* Righe nascoste oltre il limite mobile */
.srow.hidden-mobile { display: none; }

.row-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(0,0,0,0.10);
}
.srow-content { flex: 1; min-width: 0; }
.row-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
}
.row-meta { font-size: 11px; color: #aaa; margin-top: 2px; }
.row-score {
  margin-left: auto;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--teal);
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────
   DETAIL PANEL — bottom sheet mobile
   Quando aperto: occupa quasi tutto lo schermo
   e nasconde la bottom nav
   ───────────────────────────────────────────── */
.detail-panel {
  position: fixed;
  left: 0; right: 0;
  bottom: -100%;
  /* 100vh = schermo intero meno solo la status bar */
  height: calc(100vh - 60px);
  background: var(--white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -4px 30px rgba(11,46,107,0.18);
  z-index: 250;   /* sopra tutto, inclusa bottom nav */
  overflow-y: auto;
  transition: bottom 0.35s cubic-bezier(.22,.61,.36,1);
}
.detail-panel.open { bottom: 0; }

/* Handle di trascinamento */
.bs-handle {
  width: 36px; height: 4px;
  background: var(--sand);
  border-radius: 10px;
  margin: 10px auto 0;
}

/* Header sticky del panel */
.dp-header {
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 2;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--sand);
}
.dp-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
}
.dp-close {
  background: var(--beige);
  border: none;
  border-radius: 50%;
  width: 32px; height: 32px;
  cursor: pointer;
  font-size: 16px;
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.dp-close:hover { background: var(--sand); }

/* Hero immagine/gradiente */
.dp-hero {
  height: 180px;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  position: relative;
}
.dp-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,46,107,0.6), transparent);
}
.dp-hero-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--white);
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  position: relative; z-index: 1;
}
.dp-hero-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  margin-top: 3px;
  position: relative; z-index: 1;
}

/* Body del panel */
.dp-body { padding: 16px; }

.dp-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 16px;
}
.dp-stat {
  background: var(--beige);
  border-radius: var(--radius-md);
  padding: 11px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.ds-icon { font-size: 20px; }
.ds-lbl  { font-size: 10px; color: #aaa; }
.ds-val  {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
}

.dp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.dp-sec-lbl {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ccc;
  margin-bottom: 10px;
}

/* Avviso sicurezza (correnti/vento) */
.dp-alert {
  background: #fef3c7;
  border: 1.5px solid #f59e0b;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.6;
  color: #78350f;
  margin-bottom: 14px;
}

.dp-score    { margin-bottom: 16px; }
.dp-desc     { font-size: 13px; line-height: 1.75; color: #555; margin-bottom: 18px; }
.dp-btn-maps { margin-bottom: 8px; }


/* ─────────────────────────────────────────────
   STATI LISTA
   ───────────────────────────────────────────── */
.list-loading {
  text-align: center;
  padding: 24px 20px;
  color: #999;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.list-empty {
  text-align: center;
  padding: 24px 20px;
  color: #bbb;
}
.list-empty-icon { font-size: 36px; margin-bottom: 10px; }
.list-empty p    { font-size: 13px; line-height: 1.6; }

/* Banner fallback */
.fallback-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background: rgba(234, 179, 8, 0.95);
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}


/* ─────────────────────────────────────────────
   DESKTOP (≥ 860px): lista | mappa affiancate
   ───────────────────────────────────────────── */
@media (min-width: 860px) {
  .esplora-body {
    flex-direction: row;
    height: calc(100vh - 60px - 52px);
    overflow: hidden;
  }

  .results-list {
    width: 340px;
    flex-shrink: 0;
    order: 1;
    height: 100%;
    overflow-y: auto;
    border-right: 1px solid var(--sand);
    padding: 12px;
  }

  /* Su desktop mostra tutti i risultati */
  .srow.hidden-mobile { display: flex !important; }
  .results-expand-btn { display: none; }

  .map-wrap {
    flex: 1;
    height: 100%;
    order: 2;
    min-height: unset;
  }

  /* Panel laterale da destra */
  .detail-panel {
    position: absolute;
    left: auto;
    right: -380px;
    bottom: 0; top: 0;
    width: 380px;
    height: 100%;
    border-radius: 0;
    box-shadow: -4px 0 30px rgba(11,46,107,0.15);
    transition: right 0.35s cubic-bezier(.22,.61,.36,1);
    z-index: 150;
  }
  .detail-panel.open { right: 0; bottom: 0; }
  .map-wrap.panel-open { margin-right: 380px; }
  .bs-handle { display: none; }
}


/* ─────────────────────────────────────────────
   MOBILE SPECIFICO (≤ 599px)
   ───────────────────────────────────────────── */
@media (max-width: 599px) {
  .page-body  { padding-bottom: 0; } /* il panel copre tutto */
  .map-wrap   { height: 48vh; min-height: 240px; }
  .results-list { padding-bottom: 12px; }
}