/* ic-prov-pill-refine.css — Night-3 refinement pill provincia (2026-05-26)
   Migliora: padding asimmetrico (icona a sx, freccia a dx senza touch del testo),
   ombra e bordo più moderni, hover stato, gradient soft sull'icona container,
   chevron animato. Override puntuale, niente !important salvo necessità di specificity. */

html body #provPills .prov-pill-wrap.prov-pill-wrap,
html body .prov-pills .prov-pill-wrap.prov-pill-wrap {
  background: #ffffff !important;
  border: 1px solid #E4E7ED !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(11,35,64,0.04), 0 4px 14px rgba(11,35,64,0.04) !important;
  overflow: hidden !important;
  transition: box-shadow .25s ease, border-color .25s ease, transform .2s ease !important;
}

html body #provPills .prov-pill-wrap.prov-pill-wrap:hover,
html body .prov-pills .prov-pill-wrap.prov-pill-wrap:hover {
  border-color: #C9D1DD !important;
  box-shadow: 0 2px 4px rgba(11,35,64,0.05), 0 10px 28px rgba(11,35,64,0.08) !important;
  transform: translateY(-1px) !important;
}

html body #provPills .prov-pill-wrap[open].prov-pill-wrap,
html body .prov-pills .prov-pill-wrap[open].prov-pill-wrap {
  border-color: #B0BCCC !important;
  box-shadow: 0 4px 6px rgba(11,35,64,0.06), 0 16px 38px rgba(11,35,64,0.10) !important;
  overflow: visible !important;
}

/* SUMMARY — grid template raffinato:
   - icona 60px (leggermente più contenuta)
   - gap 16px tra icona e testo
   - testo flex column
   - gap 22px tra testo e freccia (RESPIRO!) → evita "Trani" che tocca la freccia
   - freccia 22px
   - padding 14px 22px 14px 14px → meno sinistra (cerchio + testo più a sx), più destra */
html body #provPills .prov-pill-wrap > summary.prov-pill,
html body .prov-pills .prov-pill-wrap > summary.prov-pill {
  grid-template-columns: 60px 1fr 22px !important;
  gap: 16px !important;
  padding: 14px 22px 14px 14px !important;
  align-items: center !important;
}

/* Padding-right extra sul container del testo: distanza fissa minima dalla freccia */
html body #provPills .prov-pill-wrap > summary.prov-pill > .prov-pill__text,
html body .prov-pills .prov-pill-wrap > summary.prov-pill > .prov-pill__text {
  padding-right: 8px !important;
  min-width: 0 !important;
}

/* Icona container: gradient soft + ombra interna sottile */
html body #provPills .prov-pill__icon,
html body .prov-pills .prov-pill__icon {
  width: 60px !important; height: 60px !important;
  background: linear-gradient(135deg, #F6F7FA 0%, #ECEFF4 100%) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(11,35,64,0.04), inset 0 1px 0 rgba(255,255,255,0.6) !important;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
}

html body #provPills .prov-pill-wrap.prov-pill-wrap:hover .prov-pill__icon,
html body .prov-pills .prov-pill-wrap.prov-pill-wrap:hover .prov-pill__icon {
  background: linear-gradient(135deg, #EEF1F6 0%, #E2E6EE 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(11,35,64,0.06), inset 0 1px 0 rgba(255,255,255,0.7) !important;
}

html body #provPills .prov-pill__icon img,
html body #provPills .prov-pill__icon svg,
html body .prov-pills .prov-pill__icon img,
html body .prov-pills .prov-pill__icon svg {
  width: 44px !important; height: 44px !important;
  display: block !important;
}

/* Tipografia raffinata */
html body #provPills .prov-pill__name,
html body .prov-pills .prov-pill__name {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0B2340 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.012em !important;
  /* Auto-shrink se necessario per parole molto lunghe (Barletta/Andria/Trani) */
  overflow-wrap: anywhere !important;
}

html body #provPills .prov-pill__meta,
html body .prov-pills .prov-pill__meta {
  font-size: 13.5px !important;
  color: #6B7585 !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em !important;
  margin-top: 2px !important;
}

/* Chevron: 22px, slide-right animato sull'hover */
html body #provPills .prov-pill__chev,
html body .prov-pills .prov-pill__chev {
  width: 22px !important; height: 22px !important;
  stroke: #5B6779 !important;
  stroke-width: 2.6 !important;
  fill: none !important;
  flex-shrink: 0 !important;
  transition: transform .2s ease, stroke .2s ease !important;
}

html body #provPills .prov-pill-wrap.prov-pill-wrap:hover .prov-pill__chev,
html body .prov-pills .prov-pill-wrap.prov-pill-wrap:hover .prov-pill__chev {
  stroke: #0B2340 !important;
  transform: translateX(2px) !important;
}

/* Quando details è aperto, freccia ruota di 90° (apre verso il basso) */
html body #provPills .prov-pill-wrap[open] .prov-pill__chev,
html body .prov-pills .prov-pill-wrap[open] .prov-pill__chev {
  transform: rotate(90deg) !important;
  stroke: #0B2340 !important;
}

/* Focus visibile a11y */
html body #provPills .prov-pill-wrap > summary.prov-pill:focus-visible,
html body .prov-pills .prov-pill-wrap > summary.prov-pill:focus-visible {
  outline: 3px solid #A47A2A !important;
  outline-offset: 3px !important;
  border-radius: 18px !important;
}

/* Reduced motion: nessuna transizione fluttuante */
@media (prefers-reduced-motion: reduce) {
  html body #provPills .prov-pill-wrap,
  html body #provPills .prov-pill__icon,
  html body #provPills .prov-pill__chev,
  html body .prov-pills .prov-pill-wrap,
  html body .prov-pills .prov-pill__icon,
  html body .prov-pills .prov-pill__chev { transition: none !important; }
  html body #provPills .prov-pill-wrap:hover,
  html body .prov-pills .prov-pill-wrap:hover { transform: none !important; }
}

/* Mobile: padding più compatto, icona leggermente più piccola */
@media (max-width: 480px) {
  html body #provPills .prov-pill-wrap > summary.prov-pill,
  html body .prov-pills .prov-pill-wrap > summary.prov-pill {
    grid-template-columns: 52px 1fr 20px !important;
    gap: 12px !important;
    padding: 12px 18px 12px 12px !important;
  }
  html body #provPills .prov-pill__icon,
  html body .prov-pills .prov-pill__icon {
    width: 52px !important; height: 52px !important;
    padding: 8px !important;
  }
  html body #provPills .prov-pill__icon img,
  html body #provPills .prov-pill__icon svg,
  html body .prov-pills .prov-pill__icon img,
  html body .prov-pills .prov-pill__icon svg {
    width: 36px !important; height: 36px !important;
  }
  html body #provPills .prov-pill__name,
  html body .prov-pills .prov-pill__name { font-size: 18px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   v2 — Allineamento a sinistra + no-wrap su Barletta/Andria/Trani
   Data: 2026-05-26
   ═══════════════════════════════════════════════════════════════════ */

/* Riduci padding-left per spostare icona/testo verso il bordo sinistro */
html body #provPills .prov-pill-wrap > summary.prov-pill,
html body .prov-pills .prov-pill-wrap > summary.prov-pill {
  padding: 14px 16px 14px 10px !important;
  gap: 12px !important;
  grid-template-columns: 60px 1fr 22px !important;
}

/* Forza nome provincia su singola riga — niente più "Tra/ni" spezzato */
html body #provPills .prov-pill__name,
html body .prov-pills .prov-pill__name {
  overflow-wrap: normal !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

/* BAT (Barletta/Andria/Trani) è il nome più lungo: font scalato per evitare ellissi */
html body #provPills .prov-pill-wrap[data-prov="BT"] .prov-pill__name,
html body .prov-pills .prov-pill-wrap[data-prov="BT"] .prov-pill__name {
  font-size: 16.5px !important;
  letter-spacing: -0.02em !important;
}

/* Allineamento esplicito testo a sinistra (override eventuale center inherit) */
html body #provPills .prov-pill__text,
html body .prov-pills .prov-pill__text {
  text-align: left !important;
  padding-right: 4px !important;
}

/* Mobile: lascia spazio ulteriormente ridotto a sinistra */
@media (max-width: 640px) {
  html body #provPills .prov-pill-wrap > summary.prov-pill,
  html body .prov-pills .prov-pill-wrap > summary.prov-pill {
    padding: 12px 14px 12px 8px !important;
    gap: 10px !important;
    grid-template-columns: 52px 1fr 20px !important;
  }
  html body #provPills .prov-pill__icon,
  html body .prov-pills .prov-pill__icon {
    width: 52px !important; height: 52px !important;
  }
  html body #provPills .prov-pill-wrap[data-prov="BT"] .prov-pill__name,
  html body .prov-pills .prov-pill-wrap[data-prov="BT"] .prov-pill__name {
    font-size: 14.5px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v3 (2026-05-31) — cerchio più a SINISTRA + più RESPIRO prima della
   freccia, così "Barletta/Andria/Trani" non tocca mai il chevron a destra.
   ═══════════════════════════════════════════════════════════════════ */
html body #provPills .prov-pill-wrap > summary.prov-pill,
html body .prov-pills .prov-pill-wrap > summary.prov-pill {
  padding: 14px 20px 14px 4px !important;   /* meno a sinistra (cerchio shift sx), più a destra */
  gap: 12px !important;
  grid-template-columns: 60px 1fr 24px !important;
}
html body #provPills .prov-pill-wrap > summary.prov-pill > .prov-pill__text,
html body .prov-pills .prov-pill-wrap > summary.prov-pill > .prov-pill__text {
  padding-right: 16px !important;           /* distanza minima testo → freccia */
}
@media (max-width: 640px) {
  html body #provPills .prov-pill-wrap > summary.prov-pill,
  html body .prov-pills .prov-pill-wrap > summary.prov-pill {
    padding: 12px 16px 12px 4px !important;
    grid-template-columns: 52px 1fr 22px !important;
  }
  html body #provPills .prov-pill-wrap > summary.prov-pill > .prov-pill__text,
  html body .prov-pills .prov-pill-wrap > summary.prov-pill > .prov-pill__text {
    padding-right: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v8 (2026-06-01) — DESKTOP: 6 province, 3 col × 2 righe, tasti a VETRO CHIARO
   (riempimento bianco translucido + bordo bianco + angoli 10px, come il cerca).
   - pill traslucide (vetro) con testo bianco, sopra lo slideshow
   - larghezza FISSA calibrata su "Barletta/Andria/Trani" (1 riga + freccia staccata)
   - angoli meno smussati (raggio 12px)
   - icona su chip chiaro (le icone-provincia sono linee navy → restano visibili)
   - da APERTE: card bianca solida, testo scuro (elenco comuni leggibile)
   Specificità più alta di ic-fix-night-2/ic-spacing-harmony/ic-a11y → vince.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* 3 colonne strette a larghezza fissa, griglia centrata */
  html body #provPills.prov-pills.prov-pills.prov-pills,
  html body .prov-pills.prov-pills.prov-pills {
    grid-template-columns: repeat(3, 300px) !important;
    justify-content: center !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin: 0 auto 20px !important;
    padding: 0 !important;
  }
  /* CHIUSE: riempimento bianco LEGGERMENTE TRASPARENTE (frosted, come il cerca),
     bordo bianco, angoli meno smussati. Testo/freccia scuri → leggibili sul vetro chiaro. */
  html body #provPills .prov-pill-wrap.prov-pill-wrap {
    min-height: 0 !important;
    height: 100% !important;
    background: rgba(255,255,255,.20) !important;
    border: 1px solid rgba(255,255,255,.45) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(16px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 16px rgba(0,0,0,.15) !important;
    transition: background .18s ease, border-color .18s ease !important;
  }
  html body #provPills .prov-pill-wrap.prov-pill-wrap:hover {
    background: rgba(255,255,255,.30) !important;
    border-color: rgba(255,255,255,.6) !important;
  }
  html body #provPills .prov-pill-wrap > summary.prov-pill,
  html body .prov-pills .prov-pill-wrap > summary.prov-pill {
    min-height: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
    padding: 11px 12px 11px 10px !important;
    gap: 10px !important;
    grid-template-columns: 42px 1fr 20px !important;
  }
  /* icona: chip leggermente trasparente, ma abbastanza chiaro da far leggere le linee navy */
  html body #provPills .prov-pill-wrap > summary.prov-pill > .prov-pill__icon {
    width: 42px !important; height: 42px !important; padding: 8px !important;
    background: rgba(255,255,255,.55) !important;
  }
  html body #provPills .prov-pill-wrap > summary.prov-pill > .prov-pill__icon img,
  html body #provPills .prov-pill-wrap > summary.prov-pill > .prov-pill__icon svg {
    width: 30px !important; height: 30px !important;
  }
  /* testo scuro (navy) leggibile sul vetro chiaro; freccia staccata dal nome */
  html body #provPills .prov-pill-wrap > summary.prov-pill > .prov-pill__text {
    padding-right: 14px !important;
  }
  html body #provPills .prov-pill-wrap > summary.prov-pill .prov-pill__name,
  html body .prov-pills .prov-pill-wrap > summary.prov-pill .prov-pill__name {
    font-size: 16px !important;
    line-height: 1.15 !important;
    color: #0b2340 !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  /* BT: nome lungo → font ridotto, entra in 1 riga lasciando spazio alla freccia */
  html body #provPills .prov-pill-wrap[data-prov="BT"] .prov-pill__name,
  html body .prov-pills .prov-pill-wrap[data-prov="BT"] .prov-pill__name {
    font-size: 14px !important;
    letter-spacing: -.015em !important;
  }
  html body #provPills .prov-pill-wrap > summary.prov-pill .prov-pill__meta {
    font-size: 12.5px !important;
    color: #41506a !important;
    text-shadow: none !important;
  }
  html body #provPills .prov-pill-wrap > summary.prov-pill > .prov-pill__chev { color: #0b2340 !important; }
  html body #provPills .prov-pill-wrap > summary.prov-pill > .prov-pill__chev path { stroke: #0b2340 !important; }

  /* APERTE: torna card bianca solida → elenco comuni leggibile, testo scuro */
  html body #provPills .prov-pill-wrap[open] {
    background: rgba(255,255,255,.97) !important;
    border-color: #e6e8ec !important;
  }
  html body #provPills .prov-pill-wrap[open] > summary.prov-pill .prov-pill__name {
    color: #0b2340 !important; text-shadow: none !important;
  }
  html body #provPills .prov-pill-wrap[open] > summary.prov-pill .prov-pill__meta {
    color: #6b7283 !important; text-shadow: none !important;
  }
  html body #provPills .prov-pill-wrap[open] > summary.prov-pill > .prov-pill__chev { color: #0b2340 !important; }
  html body #provPills .prov-pill-wrap[open] > summary.prov-pill > .prov-pill__chev path { stroke: #0b2340 !important; }

  /* meno bianco tra le pill e la sezione sotto */
  html body section.hero.hero--puglia-map.hero--dark.hero--puglia-map {
    padding-bottom: 24px !important;
  }
}


/* FIX mobile 2026-06-01c: a tendina APERTA alza #provPills sopra la barra di ricerca (z:100),
   cosi la ricerca non buca la lista comuni. Solo a tendina aperta (:has). */
html body #provPills:has(.prov-pill-wrap[open]),
html body .prov-pills:has(.prov-pill-wrap[open]) {
  position: relative !important;
  z-index: 1000 !important;
}


/* FIX 2026-06-01b: tendina comuni colonna singola + riquadri stretti + scroll stabile */
html body #provPills .prov-pill-wrap[open] .prov-dd-grid,
html body .prov-pills .prov-pill-wrap[open] .prov-dd-grid {
  grid-template-columns: 1fr !important;
  gap: 3px !important;
}
html body #provPills .prov-pill-wrap[open] .prov-dd-item,
html body .prov-pills .prov-pill-wrap[open] .prov-dd-item {
  padding: 8px 14px !important;
  min-height: 0 !important;
  border-radius: 10px !important;
}
html body #provPills .prov-pill-wrap[open] .prov-dd,
html body .prov-pills .prov-pill-wrap[open] .prov-dd {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}


/* FIX 2026-06-01d: tendina larga quanto il tasto della provincia */
html body #provPills .prov-pill-wrap[open] .prov-dd.prov-dd.prov-dd.prov-dd,
html body .prov-pills .prov-pill-wrap[open] .prov-dd.prov-dd.prov-dd.prov-dd {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
}