/* =========================================================
   NORTH LAKE COMO — homepage
   Font: Poppins (titoli) + Nunito Sans (testo)
   ========================================================= */

:root{
  --teal-dark: #08748D;      /* titoli, link, icone principali */
  --teal-overlay: #045D76;   /* overlay scuro su foto */
  --teal-light: #4CBABC;     /* logo, footer, accenti chiari */
  --orange: #F19011;         /* icone pin/calendario */
  --ink: #1D1D1B;             /* testo scuro */
  --gray-text: #55585A;       /* testo di paragrafo */
  --gray-placeholder: #9D9D9C;/* placeholder immagini mancanti */
  --card-bg: #E9E9EF;          /* sfondo card eventi/esperienze */
  --max-width: 1240px;
  --radius: 4px;
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Nunito Sans', sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3{ font-family: var(--font-display); margin:0; }
.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Focus visibile per accessibilità */
a:focus-visible, button:focus-visible{
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.header-inner{
  max-width: var(--max-width);
  margin:0 auto;
  padding: 14px 24px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 24px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.logo-mark{ width:42px; height:42px; }
.logo-text{
  font-family: var(--font-display);
  font-weight:500;
  font-size: 15px;
  line-height:1.05;
  color: var(--ink);
  text-transform: lowercase;
}
.logo-text strong{
  display:block;
  font-weight:800;
  font-size: 19px;
  color: var(--teal-dark);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.main-nav{
  display:flex;
  gap: 40px;
  flex:1;
  justify-content:center;
}
.nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size: 18px;
  font-weight:600;
  letter-spacing:.4px;
  text-transform: uppercase;
  color: var(--ink);
  white-space:nowrap;
}
.nav-icon{ width:24px; height:24px; color: var(--ink); }
.nav-item:hover{ color: var(--teal-dark); }
.nav-item:hover .nav-icon{ color: var(--teal-dark); }

.header-actions{
  display:flex;
  align-items:center;
  gap: 18px;
  flex-shrink:0;
}
.lang-select{
  background:none; border:none; cursor:pointer;
  font-family: var(--font-body); font-weight:700; font-size:18px;
  display:flex; align-items:center; gap:4px; color: var(--ink);
}
.chev{ width:16px; height:16px; }
.icon-btn{
  background:none; border:none; cursor:pointer; color: var(--ink);
  width:22px; height:22px; padding:0;
}
.icon-btn svg{ width:100%; height:100%; }
.menu-toggle{
  background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-size:18px; font-weight:400; letter-spacing:.5px; text-transform:uppercase;
  color: var(--ink);
}
.menu-toggle svg{ width:30px; height:30px; }

/* --- HEADER responsive --- */

/* Tablet: menu centrale più compatto */
@media (max-width: 900px) {
  .main-nav { gap: 22px; }
  .nav-item { font-size: 15px; }
  .header-actions { gap: 12px; }
}

/* Mobile: logo piccolo, menu centrale nascosto, resta l'hamburger */
@media (max-width: 560px) {
  .header-inner {
    padding: 10px 16px;
    gap: 12px;
  }

  /* Logo ridotto */
  .logo-mark { width: 32px; height: 32px; }
  .logo-text { font-size: 12px; }
  .logo-text strong { font-size: 15px; letter-spacing: .3px; }
  .logo { gap: 7px; }

  /* Nasconde il menu orizzontale: su mobile si usa l'hamburger */
  .main-nav { display: none; }

  /* Azioni più strette */
  .header-actions { gap: 10px; }
  .lang-select { font-size: 15px; }
  .menu-toggle svg { width: 26px; height: 26px; }
  .menu-toggle { font-size: 0; }   /* nasconde la scritta "MENU", lascia l'icona */
}


/* --- Dropdown lingua --- */
.lang-dropdown { position: relative; }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 140px;
  list-style: none;
  margin: 0;
  padding: .4rem 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 150;
}
.lang-dropdown.open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-menu li { margin: 0; }
.lang-menu a {
  display: block;
  padding: .55rem 1.1rem;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.lang-menu a:hover { background: #f2f6f8; color: var(--teal-dark); }
.lang-menu a.is-active { font-weight: 700; color: var(--teal-dark); }

/* la freccia ruota quando è aperto */
.lang-dropdown.open .chev { transform: rotate(180deg); }
.chev { transition: transform .18s ease; }

/* =========================================================
   HERO
   ========================================================= */
.hero-placeholder{
  height: min(70vh, 640px);
  min-height: 900px;
  background: var(--gray-placeholder);
  display:flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,.85);
  font-family: var(--font-display);
  font-weight:600;
  letter-spacing:.5px;
  background-size: cover;       /* riempie tutta l'area */
  background-position: center;  /* centrata */
  background-repeat: no-repeat;
}

/* =========================================================
   INTRO — "Lasciati ispirare"
   ========================================================= */
.intro{
  padding: 72px 24px 48px;
  display:grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: 48px;
  align-items:start;
}
.intro h1{
  font-size: clamp(40px, 5vw, 56px);
  font-weight:800;
  color: var(--teal-dark);
  line-height:1.05;
}
.intro-text p{
  margin: 0 0 16px;
  color: var(--gray-text);
  font-size: 15px;
}

/* =========================================================
   SEZIONI GENERICHE (In evidenza / Eventi / Esperienze)
   ========================================================= */
.section-block{ padding: 56px 24px; text-align:center; }
.section-head{ max-width: 760px; margin: 0 auto 40px; }
.section-icon{ width:34px; height:34px; margin-bottom:14px; }
.section-head h2{
  font-size: clamp(30px, 4vw, 42px);
  font-weight:800;
  color: var(--teal-dark);
  margin-bottom: 14px;
}
.section-desc{ color: var(--gray-text); font-size:15px; }

/* In evidenza — griglia 3 card fotografiche */
.evidenza-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align:left;
}
.evidenza-card{
  position:relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  background-size: cover;
  background-position:center;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}
.card-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(4,60,75,0) 40%, rgba(4,60,75,.75) 100%);
}
.card-content{
  position:relative;
  padding: 24px 20px;
  color:#fff;
}
.card-title{
  display:block;
  font-family: var(--font-display);
  font-weight:700;
  font-size: 24px;
  line-height:1.25;
  margin-bottom: 10px;
}
.card-link{
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  border-bottom: 1px solid rgba(255,255,255,.7);
  padding-bottom: 2px;
}
.evidenza-card:hover .card-title{ text-decoration: underline; }

/* Banner full-width con foto (Chiesa / Bar & Ristoranti) */
.full-banner{
  position:relative;
  background-size: cover;
  background-position: center;
  min-height: 800px;
  display:flex;
  align-items:center;
  color:#fff;
}
.full-banner-overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(4,60,75,.55), rgba(4,60,75,.35));
}
.full-banner-content{
  position:relative;
  text-align:center;
  margin: 0 auto;
}
.full-banner h2{
  font-size: clamp(34px, 5vw, 52px);
  font-weight:800;
  margin-bottom: 18px;
}
.banner-text{
  max-width: 720px;
  margin: 0 auto 18px;
  font-size:15px;
}
.link-underline{
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  border-bottom:1px solid #fff;
  padding-bottom:3px;
}

/* Carosello (Eventi / Esperienze) */
.carousel-wrap{
  display:flex;
  align-items:center;
  gap: 12px;
}
.carousel-arrow{
  flex-shrink:0;
  width:40px; height:40px;
  border-radius:50%;
  border: none;
  background:none;
  color: var(--ink);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.carousel-arrow svg{ width:26px; height:26px; }
.carousel-arrow:hover{ color: var(--teal-dark); }

.carousel-track{
  display:flex;
  gap: 22px;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  flex:1;
  padding: 4px 2px 12px;
  scrollbar-width: thin;
}
.event-card{
  flex: 0 0 260px;
  scroll-snap-align:start;
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow:hidden;
  text-align:left;
}
.event-card img{ width:100%; height:170px; object-fit:cover; }
.event-body{ padding: 18px 18px 22px; }
.event-body h3{
  font-size:17px;
  color: var(--teal-dark);
  font-weight:700;
  margin-bottom:12px;
  line-height:1.3;
}
.meta{
  display:flex;
  gap:8px;
  font-size:13.5px;
  margin: 0 0 8px;
  color: var(--ink);
}
.meta:last-child{ margin-bottom:0; }
.icon-orange{ width:18px; height:18px; flex-shrink:0; color: var(--orange); }
.indent{ display:inline-block; margin-left: 26px; }

#risultati {
  scroll-margin-top: 290px; /* = altezza header + un po' di respiro */
}

/* =========================================================
   DOVE SIAMO
   ========================================================= */
.dove-siamo{ background: #3bb9b8; color:#fff; padding-top: 56px; }   /* = sfondo di img/mappa.jpg, così la mappa non stacca */
.dove-head{
  display:grid;
  grid-template-columns: minmax(220px,340px) 1fr;
  gap: 48px;
  padding-bottom: 40px;
}
.dove-head h2{
  font-size: clamp(34px, 4.5vw, 48px);
  font-weight:800;
}
.dove-text p{ font-size:14.5px; margin:0 0 14px; }

.map-wrap{ position:relative; }
.map-placeholder{
  /* stesse proporzioni di img/mappa.jpg (1920x1200): mappa intera e centrata, senza tagli */
  aspect-ratio: 16 / 10;
  height: auto;
  min-height: 0;
  background: #0f5d73;
  display:flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,.7);
  font-family: var(--font-display);
  text-align:center;
  padding: 0 24px;
}
.map-cta{
  position:absolute;
  right: 40px; bottom: 40px;
  background: var(--teal-dark);
  color:#fff;
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 18px 22px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight:700;
  font-size: 20px;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.map-cta small{
  display:block;
  font-family: var(--font-body);
  font-weight:400;
  font-size: 13px;
  text-transform:none;
}
.pin-icon{ width:30px; height:30px; flex-shrink:0; }
.cta-arrow{ width:20px; height:20px; flex-shrink:0; }

.footer-links{
  display:grid;
  grid-template-columns: repeat(5, 1fr);   /* 5 sezioni del menu: 5 colonne, cosi' il blocco e' centrato sotto la mappa */
  gap: 24px;
  padding: 40px 24px;
  /* sitemap della home: fascia #0d748d a TUTTA larghezza (il box resta nel contenitore centrato) */
  background: #0d748d;
  box-shadow: 0 0 0 100vmax #0d748d;
  clip-path: inset(0 -100vmax);
}
.footer-col h4{
  font-family: var(--font-display);
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  margin: 0 0 14px;
}
.footer-col{ display:flex; flex-direction:column; }
.footer-col a{
  font-size:12.5px;
  padding: 3px 0;
  color: rgba(255,255,255,.92);
  text-transform:uppercase;
  letter-spacing:.2px;
}
.footer-col a:hover{ color: var(--orange); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:#fff; padding-top: 56px; }
.footer-top{
  display:flex;
  flex-wrap:wrap;
  gap: 40px;
  justify-content:space-between;
  align-items:flex-start;
  padding-bottom: 32px;
}
.footer-office{ text-align:center; flex:1; min-width:260px; }
.office-title{
  font-family: var(--font-display);
  font-weight:700;
  color: var(--teal-dark);
  font-size:17px;
  margin: 0 0 14px;
}
.office-address{
  color: var(--teal-dark);
  font-size:14px;
  margin: 0 0 18px;
}
.btn-scrivici{
  display:inline-block;
  background: var(--teal-light);
  color:#fff;
  font-family: var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  font-size:14px;
  letter-spacing:.5px;
  padding: 10px 28px;
  border-radius: var(--radius);
}
.btn-scrivici:hover{ background: var(--teal-dark); }
.partner-logo{
  font-family: var(--font-display);
  font-weight:700;
  font-size:18px;
  color: var(--ink);
  text-align:right;
  display:block;
}
.partner-logo small{
  display:block;
  font-family: var(--font-body);
  font-weight:600;
  font-size:10px;
  letter-spacing:.5px;
  color: var(--gray-text);
}

.footer-social{
  display:flex;
  gap: 14px;
  padding-bottom: 32px;
}
.footer-social a{
  width:34px; height:34px;
  border-radius:50%;
  background: var(--teal-light);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.footer-social a svg{ width:18px; height:18px; }
.footer-social a:hover{ background: var(--teal-dark); }

.footer-bottom{
  border-top: 1px solid #e4e4e4;
  padding: 20px 24px 40px;
  text-align:center;
  font-size:13px;
}
.footer-legal{ margin-bottom:10px; }
.footer-legal a{ color: var(--teal-dark); font-weight:600; }
.footer-legal span{ margin: 0 8px; color:#ccc; }
.copyright{ color: var(--gray-text); margin:0; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px){
  .main-nav{ display:none; }
  .intro, .dove-head{ grid-template-columns: 1fr; }
  .evidenza-grid{ grid-template-columns: 1fr 1fr; }
  .footer-links{ grid-template-columns: repeat(3, 1fr); }
  .footer-top{ flex-direction:column; align-items:center; text-align:center; }
  .partner-logo{ text-align:center; }
}

@media (max-width: 600px){
  .header-inner{ padding: 10px 16px; }
  .logo-text{ font-size:12px; }
  .logo-text strong{ font-size:15px; }
  .evidenza-grid{ grid-template-columns: 1fr; }
  .footer-links{ grid-template-columns: repeat(2, 1fr); }
  .map-cta{ left:16px; right:16px; bottom:16px; font-size:16px; }
  .section-block{ padding: 40px 16px; }
  .intro{ padding: 48px 16px 32px; }
}

/* Stato voce di menu attiva (impostata da includes/header.php via $bodyClass) */
.nav-item.active{ color: var(--teal-dark); }
.nav-item.active .nav-icon{ color: var(--teal-dark); }

/* =========================================================
   PAGINE DI LISTATO (Eventi / Dove Dormire / Esperienze / Trekking...)
   Stesso impianto per tutte: banner + form ricerca + griglia card.
   ========================================================= */

/* Banner di testata, foto in bianco/nero con overlay scuro */
.page-banner{
  position:relative;
  min-height: 360px;
  background-size: cover;
  background-position:center;
  background-color: var(--gray-placeholder);
  filter: grayscale(1);
  display:flex;
  align-items:center;
  justify-content:center;
}
.page-banner-overlay{
  position:absolute; inset:0;
  background: rgba(20,20,20,.45);
}
.page-banner-content{
  position:relative;
  text-align:center;
  color:#fff;
}
.page-banner-icon{
  width:34px; height:34px;
  margin-bottom:12px;
}
.page-banner-content h1{
  font-size: clamp(32px, 5vw, 48px);
  font-weight:800;
}

/* Sezione contenitore del listato */
.listing-section{ padding: 48px 24px 64px; }
.intro-page{
  text-align:center;
  color: var(--teal-dark);
  font-weight:600;
  font-size: 15px;
  max-width: 760px;
  margin: 0 auto 32px;
}

/* Barra filtri */
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap: 28px;
  padding-bottom: 22px;
  margin-bottom: 40px;
  border-bottom: 1px solid #e4e4e4;
}
.filter-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.3px;
  color: var(--ink);
  cursor:pointer;
  background:none;
  border:none;
  font-family: var(--font-body);
}
.filter-item svg{ width:20px; height:20px; flex-shrink:0; color: var(--ink); }
.filter-item select,
.filter-item input[type="date"]{
  border:none;
  background:none;
  font-family: var(--font-body);
  font-size:13px;
  font-weight:600;
  color: var(--ink);
  text-transform:uppercase;
  cursor:pointer;
  max-width: 130px;
}
.filter-item select:focus,
.filter-item input:focus{ outline: 2px solid var(--teal-dark); }
.filter-action{ cursor:pointer; }
.filter-action:hover{ color: var(--teal-dark); }
.filter-action:hover svg{ color: var(--teal-dark); }
.filter-reset{ color: var(--orange); }
.filter-reset svg{ color: var(--orange); }
.filter-reset:hover{ color: var(--orange); opacity:.75; }
.filter-reset:hover svg{ color: var(--orange); }
.filter-pdf{ color: var(--gray-text); }
.filter-pdf svg{ color: var(--gray-text); }

/* Griglia risultati (riusa .event-card definita per Eventi/Esperienze in home) */
.listing-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.listing-grid .event-card img{ height: 190px; }
.listing-empty{
  text-align:center;
  color: var(--gray-text);
  padding: 40px 0;
}

.listing-more{
  text-align:center;
  margin-top: 40px;
}
.btn-load-more{
  display:inline-block;
  background: var(--orange);
  color:#fff;
  font-family: var(--font-display);
  font-weight:700;
  font-size:13px;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding: 14px 34px;
  border-radius: var(--radius);
}
.btn-load-more:hover{ background: #d67e0a; }

@media (max-width: 900px){
  .listing-grid{ grid-template-columns: 1fr 1fr; }
  .filter-bar{ justify-content:flex-start; gap:20px; }
}
@media (max-width: 600px){
  .listing-grid{ grid-template-columns: 1fr; }
  .filter-item select,
  .filter-item input[type="date"]{ max-width: 100px; }
}

/* =========================================================
   SCHEDA DETTAGLIO (Evento / Esperienza singola)
   ========================================================= */

/* Sfondo azzurrino chiaro condiviso da hero+descrizione+location+mappa */
.bg-soft{ background: #EEF3F6; padding-bottom: 56px; }

.detail-hero{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 48px 24px 40px;
  align-items:start;
}
.detail-hero-img img{
  width:100%;
  border-radius: var(--radius);
  aspect-ratio: 4/3;
  object-fit: cover;
}
.detail-hero-info h1{
  color: var(--teal-dark);
  font-size: clamp(26px, 3vw, 36px);
  font-weight:800;
  line-height:1.2;
  margin-bottom: 22px;
}
.detail-meta-list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.detail-meta-list li{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  color: var(--teal-dark);
  font-weight:700;
  font-size:14px;
  letter-spacing:.2px;
}
.detail-meta-list li svg{ width:22px; height:22px; flex-shrink:0; margin-top:1px; }

.detail-body{
  display:grid;
  grid-template-columns: 1fr 260px;
  gap: 40px;
  padding: 8px 24px 40px;
  border-top: 1px solid #dfe6ea;
}
.detail-description{ padding-top: 32px; color: var(--ink); font-size:14.5px; }
.detail-description > p{ margin: 0 0 28px; }

.detail-blocks{ display:flex; flex-direction:column; gap: 20px; }
.detail-block h3{
  font-size:14px;
  font-weight:700;
  color: var(--teal-dark);
  text-transform:uppercase;
  letter-spacing:.3px;
  margin: 0 0 6px;
}
.detail-block .tilde{ color: var(--orange); font-weight:700; }
.detail-block p{ margin:0; color: var(--ink); font-size:14.5px; }

.detail-sidebar{
  border-left: 1px solid #dfe6ea;
  padding: 32px 0 0 32px;
}
.sidebar-name{ font-weight:800; color: var(--ink); margin: 0 0 8px; }
.sidebar-line{ margin: 0 0 4px; font-size:14px; }
.sidebar-line a{ color: var(--ink); text-decoration: underline; text-decoration-color: #ccc; }
.sidebar-line a:hover{ color: var(--teal-dark); }
.sidebar-social{ display:flex; gap:10px; margin: 14px 0 20px; }
.sidebar-social a{
  width:28px; height:28px; border-radius:50%;
  background: var(--teal-light); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.sidebar-social a svg{ width:15px; height:15px; }
.sidebar-social a:hover{ background: var(--teal-dark); }
.btn-prenota{
  display:inline-block;
  background: var(--orange);
  color:#fff;
  font-family: var(--font-display);
  font-weight:700;
  font-size:13px;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding: 12px 30px;
  border-radius: var(--radius);
}
.btn-prenota:hover{ background:#d67e0a; }

.detail-location{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
  padding: 24px;
  border-top: 1px solid #dfe6ea;
}
.location-info{ display:flex; align-items:flex-start; gap: 12px; }
.location-pin{ width:30px; height:30px; flex-shrink:0; }
.location-name{ margin:0; font-weight:800; color: var(--ink); font-size:17px; }
.location-address{ margin:0; color: var(--gray-text); font-size:14px; }
.btn-indicazioni{
  display:inline-block;
  background: var(--teal-dark);
  color:#fff;
  font-family: var(--font-display);
  font-weight:700;
  font-size:13px;
  letter-spacing:.4px;
  text-transform:uppercase;
  padding: 13px 26px;
  border-radius: var(--radius);
  white-space:nowrap;
}
.btn-indicazioni:hover{ background:#065d71; }

.detail-map{ padding: 0 24px; }
.map-static{
  width:100%;
  height: 420px;
  object-fit:cover;
  border-radius: var(--radius);
  display:block;
}

/* Sezione correlati su sfondo teal chiaro */
.related-section{ background: var(--teal-light); }
.related-section .section-head h2{ color: var(--teal-dark); }
.related-section .section-icon path,
.related-section .section-icon circle{ stroke: var(--teal-dark); }

@media (max-width: 900px){
  .detail-hero{ grid-template-columns: 1fr; gap: 28px; }
  .detail-body{ grid-template-columns: 1fr; }
  .detail-sidebar{
    border-left:none; border-top: 1px solid #dfe6ea;
    padding: 24px 0 0; margin-top: 8px;
  }
}
@media (max-width: 600px){
  .detail-location{ flex-direction:column; align-items:flex-start; }
  .btn-indicazioni{ width:100%; text-align:center; }
}
/* =================================================================
   ARTE E CULTURA — pagina archivio  (body.page-arte-cultura)
   Aggiungere in coda a css/style.css
   Palette dal logo: #08748D teal scuro · #4CBABC teal chiaro · #F19011 arancio
   ================================================================= */

/* --- HERO --- */
.ac-hero {
  position: relative;
  min-height: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3a4a52 url('../img/hero-arte-cultura.jpg') center/cover no-repeat;
  text-align: center;
}
.ac-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 40, 48, 0.45);
}
.ac-hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
}
.ac-hero-icon {
  width: 84px;
  height: 64px;
  margin-bottom: .5rem;
}
.ac-hero-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4rem);
  margin: 0;
  color: #fff;
}

/* --- INTRO + FORM --- */
.ac-search {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 0;
}
.ac-search-intro {
  text-align: center;
  color: #08748D;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 760px;
  margin: 0 auto 1.75rem;
}
.ac-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  border-bottom: 2px solid #d9e2e5;
  padding-bottom: 1rem;
}
.ac-filter {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .04em;
  color: #3a4a52;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.ac-filter-ico {
  width: 30px;
  height: 30px;
  color: #F19011;
  flex: none;
}
.ac-filter-ico svg { width: 100%; height: 100%; display: block; }
.ac-select {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: .04em;
  cursor: pointer;
  padding-right: .5rem;
}
.ac-select:focus { outline: 2px solid #4CBABC; outline-offset: 2px; }
.ac-filter-btn { margin-left: auto; }
.ac-filter-reset { color: #9aa7ac; }

/* --- GRIGLIA CARD --- */
.ac-results {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}
.ac-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.ac-card {
  display: flex;
  flex-direction: column;
  background: #eef3f5;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ac-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(8, 116, 141, 0.14);
}
.ac-card-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #d9e2e5;
}
.ac-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ac-card-body { padding: 1rem 1.1rem 1.25rem; }
.ac-card-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  color: #08748D;
  margin: 0 0 .6rem;
}
.ac-card-meta {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: .3rem 0;
  font-size: .9rem;
  color: #5a6a70;
}
.ac-meta-ico {
  width: 16px;
  height: 16px;
  color: #F19011;
  flex: none;
}

/* --- STATO VUOTO --- */
.ac-empty {
  text-align: center;
  color: #5a6a70;
  padding: 2rem 0;
}

/* --- PAGINAZIONE --- */
.ac-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2.5rem;
}
.ac-page-info {
  font-size: .85rem;
  color: #9aa7ac;
}
.ac-page-btn {
  display: inline-block;
  background: #F19011;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .04em;
  padding: .7rem 1.4rem;
  text-decoration: none;
  transition: background .18s ease;
}
.ac-page-btn:hover { background: #d97d05; }
.ac-page-prev { background: #08748D; }
.ac-page-prev:hover { background: #055e72; }

/* --- RESPONSIVE --- */
@media (max-width: 860px) {
  .ac-grid { grid-template-columns: repeat(2, 1fr); }
  .ac-filters { gap: 1rem 1.5rem; }
  .ac-filter-btn { margin-left: 0; }
}
@media (max-width: 540px) {
  .ac-grid { grid-template-columns: 1fr; }
  .ac-hero { min-height: 240px; }
  .ac-pagination { justify-content: center; flex-wrap: wrap; }
}

/* =================================================================
   SEZIONE — pagina indice parametrica  (body.page-sezione)
   Aggiungere in coda a css/style.css.
   ================================================================= */

/* Filtri su UNA riga sul desktop, a capo solo su mobile */
.sez-filters {
  flex-wrap: nowrap;
  gap: 1.5rem;
  align-items: center;
}
.sez-filters .ac-filter { min-width: 0; flex: 0 1 auto; }
.sez-filters .ac-select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }

/* Filtro data: due input affiancati */
.sez-filter-data { gap: .4rem; }
.sez-filter-data .ac-select {
  padding: .2rem .3rem;
  font-family: inherit;
  color: #3a4a52;
}

/* Stelle (riusate anche qui) */
.ac-stars { display: inline-flex; gap: 1px; margin-left: .4rem; vertical-align: middle; color: #F19011; }
.ac-star { width: 15px; height: 15px; }
.ac-star-on path { fill: #F19011; }

/* Stato vuoto sezione senza filtri */
.sez-empty {
  max-width: 700px;
  margin: 0 auto;
  padding: 4rem 1.25rem;
  text-align: center;
}
.sez-empty a { color: #08748D; font-weight: 600; }

@media (max-width: 900px) {
  .sez-filters { flex-wrap: wrap; gap: 1rem 1.5rem; }
}

/* ---- Filtri sezione: spaziatura uniforme ---- */
.ac-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;                /* spazio uguale tra tutti i filtri */
  align-items: stretch;
}
.ac-filters .ac-filter {
  flex: 1 1 180px;          /* stessa larghezza base, crescono in modo uguale */
  min-width: 160px;
  margin: 0;                /* rimuove margini disuguali preesistenti */
}
/* i bottoni Cerca / Rimuovi non devono allargarsi come i select */
.ac-filters .ac-filter-btn,
.ac-filters .ac-filter-reset {
  flex: 0 0 auto;
}
@media (max-width: 700px) {
  .ac-filters .ac-filter { flex: 1 1 100%; }  /* uno per riga su mobile */
}
/* ============================================================
   PUNTO DI INTERESSE — pagina di dettaglio (v2, layout completo)
   ============================================================ */

/* Breadcrumb */
.poi-breadcrumb {
  font-family: 'Nunito Sans', sans-serif;
  font-size: .85rem;
  padding: 1rem 0;
  color: #6c757d;
}
.poi-breadcrumb a { color: #6c757d; text-decoration: none; }
.poi-breadcrumb a:hover { color: #0a5b8c; text-decoration: underline; }
.poi-breadcrumb .sep { margin: 0 .5rem; opacity: .5; }
.poi-breadcrumb .current { color: #212529; font-weight: 600; }

.poi { padding: .5rem 0 0; }

/* --- Intestazione: immagine sinistra + titolo destra --- */
.poi-head {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 2.25rem;
}
.poi-head-img {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #eef1f3;
}
.poi-head-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poi-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  color: #2f6d86;
  margin: 0 0 1rem;
  line-height: 1.1;
}
.poi-tags { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.poi-tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #2f6d86;
}
.poi-tag svg { fill: #e8792b; flex-shrink: 0; }

@media (max-width: 768px) {
  .poi-head { grid-template-columns: 1fr; gap: 1.25rem; }
  .poi-head-img { aspect-ratio: 16 / 10; }
}

/* --- Layout corpo: testo + sidebar --- */
.poi-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;   /* colonna contatti: 320px per mail e siti lunghi (era 260) */
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 860px) {
  .poi-layout { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* Testo contenuto (HTML dal DB) */
.poi-content {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #3a4148;
  text-align: justify;
}
.poi-content p { margin: 0 0 1.1rem; }
.poi-content a { color: #0a5b8c; }
.poi-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1rem 0; }

/* Sezioni con icona (Orari / Tariffe / Accessibilità) */
.poi-section { margin-top: 2rem; }
.poi-section-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: 'Poppins', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #e8792b;
  margin: 0 0 .75rem;
}
.poi-section-title svg { stroke: #e8792b; flex-shrink: 0; }
.poi-section-body {
  font-family: 'Nunito Sans', sans-serif;
  font-size: .95rem;
  line-height: 1.6;
  color: #3a4148;
}

/* Accessibilità (riga con icona) */
.poi-access { margin-top: 2rem; }
.poi-access-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #e8792b;
  margin: 0 0 .5rem;
}
.poi-access-row svg { stroke: #e8792b; fill: #e8792b; flex-shrink: 0; }

/* --- Sidebar contatti (stile modello PDF) --- */
.poi-sidebar { position: sticky; top: 1.5rem; }
@media (max-width: 860px) { .poi-sidebar { position: static; } }

.poi-contacts {
  border-left: 2px solid #9fb8c2;   /* la linea verticale del modello */
  padding-left: 1.5rem;
}

.poi-contacts-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: #1f2937;                   /* scuro, quasi nero */
  margin: 0 0 .75rem;
}

.poi-contacts-list {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1rem;
}
.poi-contacts-list li { margin: 0 0 .15rem; }
.poi-contacts-list a {
  color: #2f6d86;                   /* blu-grigio del modello */
  text-decoration: none;
}
.poi-contacts-list a:hover { text-decoration: underline; }

/* Social */
.poi-social {
  display: flex;
  gap: .6rem;
  margin-bottom: 2rem;
}
.poi-social a {
  color: #2f6d86;
  display: inline-flex;
  transition: color .15s ease;
}
.poi-social a:hover { color: #0a5b8c; }
.poi-social .nlc-icon { width: 1.9em; height: 1.9em; }

/* Pulsante Prenota */
.poi-book {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .03em;
  padding: .75rem 2rem;
  border-radius: 6px;
  background: #e8792b;
  color: #fff;
  text-decoration: none;
  transition: background .15s ease, transform .1s ease;
}
.poi-book:hover { background: #d16a1f; color: #fff; }
.poi-book:active { transform: translateY(1px); }

.ac-page-next {
  display: block;
  width: fit-content;
  margin: 15px 5px 5px auto;  /* auto a sinistra = spinge a destra */
}

/* --- Mappa --- */
.poi-map-section { margin-top: 3rem; }
.poi-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.poi-map-place { display: flex; align-items: center; gap: .75rem;font-size: 3em }
.poi-map-place svg { fill: #e8792b; flex-shrink: 0; }
.poi-map-name {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 2rem;
  color: #2f6d86;
}
.poi-map-addr {
  display: block;
  font-family: 'Nunito Sans', sans-serif;
  font-size: .9rem;
  color: #6c757d;
}
.poi-map-btn {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .85rem;
  padding: .6rem 1.1rem;
  border-radius: 8px;
  background: #2f6d86;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease;
}
.poi-map-btn:hover { background: #245567; color: #fff; }
.poi-map-embed {
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}
.poi-map-embed iframe { display: block; width: 100%; }

/* --- Altri punti di interesse --- */
.poi-related {
  margin-top: 3.5rem;
  padding: 3rem 0;
  background: linear-gradient(180deg, #cfe6ec 0%, #eaf4f6 100%);
}
.poi-related-head {
  text-align: center;
  margin-bottom: 2.25rem;
}
.poi-related-icon { width: 56px; height: 42px; margin: 0 auto .5rem; display: block; }
.poi-related-icon path,
.poi-related-icon rect { stroke: #2f6d86; }
.poi-related-head h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #2f6d86;
  margin: 0;
}
.poi-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 768px) {
  .poi-related-grid { grid-template-columns: 1fr; }
}
.poi-card {
  display: block;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.poi-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.poi-card-img { aspect-ratio: 16 / 11; background: #eef1f3; overflow: hidden; }
.poi-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poi-card-body { padding: 1rem 1.25rem 1.25rem; }
.poi-card-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: #2f6d86;
  margin: 0 0 .6rem;
}
.poi-card-loc,
.poi-card-cat {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #e8792b;
  margin: .25rem 0;
}
.poi-card-loc svg,
.poi-card-cat svg { fill: #e8792b; flex-shrink: 0; }

/* Stato 404 */
.poi-notfound { padding: 4rem 0; text-align: center; }
.poi-notfound h1 { font-family: 'Poppins', sans-serif; color: #2f6d86; }

.nlc-icon {
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  fill: currentColor;
}

.nlc-icon path {
  /*stroke: currentColor;
  stroke-width: 1;
  paint-order: stroke; */ /* mette il contorno sotto il riempimento */
}
.site-header .nlc-icon { color: #08748D; } 

/* --- Carosello correlati --- */
.poi-carousel {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.poi-carousel-viewport {
  overflow: hidden;
  flex: 1 1 auto;
}

.poi-carousel-track {
  display: flex;
  gap: 1.5rem;
  transition: transform .4s ease;
  /* su mobile diventa scroll libero (vedi media query) */
}

/* Ogni card: 3 visibili per volta su desktop */
.poi-carousel-track .poi-card {
  flex: 0 0 calc((100% - 3rem) / 3);  /* 3 card, 2 gap da 1.5rem */
}

/* Frecce */
.poi-carousel-arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #2f6d86;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  transition: background .15s ease, color .15s ease, opacity .2s ease;
}
.poi-carousel-arrow:hover { background: #2f6d86; color: #fff; }
.poi-carousel-arrow:disabled { opacity: .35; cursor: default; }
.poi-carousel-arrow:disabled:hover { background: #fff; color: #2f6d86; }

/* MOBILE: niente frecce, scroll libero con swipe */
@media (max-width: 768px) {
  .poi-carousel-arrow { display: none; }
  .poi-carousel-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;              /* Firefox */
  }
  .poi-carousel-viewport::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
  .poi-carousel-track {
    transition: none;                   /* niente animazione JS su mobile */
    transform: none !important;         /* annulla lo spostamento desktop */
    padding-bottom: .5rem;
  }
  .poi-carousel-track .poi-card {
    flex: 0 0 78%;                       /* card larga, sbircia la successiva */
    scroll-snap-align: start;
  }
}

/* ============================================================
   SITE FOOTER (modello North Lake Como)
   ============================================================ */
.site-footer {
  background: #fff;
  padding: 3rem 0 1.5rem;
  font-family: 'Nunito Sans', sans-serif;
}

/* Riga principale: 4 colonne */
.site-footer-main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  align-items: center;
  justify-items: center;
  padding-bottom: 2rem;
}

/* 1. Logo NLC */
.site-footer-logo { height: 120px; width: auto; display: block; }

/* 2. Menu */
.site-footer-menu {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  text-align: center;
}
.site-footer-menu a {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #2f6d86;
  text-decoration: none;
  transition: color .15s ease;
}
.site-footer-menu a:hover { color: #e8792b; }

/* 3. Contattaci + social */
.site-footer-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.site-footer-contact-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #2f6d86;
  text-decoration: none;
  transition: color .15s ease;
}
.site-footer-contact-link:hover { color: #e8792b; }
.site-footer-contact-link .nlc-icon { width: 1.6em; height: 1.6em; }

.site-footer-social {
  display: flex;
  gap: .6rem;
}
.site-footer-social a {
  color: #2f6d86;
  display: inline-flex;
  transition: color .15s ease;
}
.site-footer-social a:hover { color: #e8792b; }
.site-footer-social .nlc-icon { width: 1.7em; height: 1.7em; }

/* 4. Loghi partner */
.site-footer-partners {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.site-footer-partners img { height: 80px; width: auto; max-width: 100%; object-fit: contain; display: block; }   /* logo Lago di Como: 80px (era 48) */

/* Riga legale */
.site-footer-legal {
  border-top: 1px solid #e6e6e6;
  padding-top: 1.5rem;
  text-align: center;
  color: #2f6d86;
  font-size: .9rem;
  line-height: 1.6;
}
.site-footer-legal p { margin: 0 0 .25rem; }
.site-footer-copy { font-size: .8rem; margin-top: .5rem; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .site-footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    justify-items: center;
  }
  .site-footer-partners { flex-direction: row; }
}
@media (max-width: 560px) {
  .site-footer-main {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}
/* Organizza il tuo viaggio */
.plan-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding: 20px;
  color: var(--teal-dark);
  font-family: var(--font-display);
  font-weight:600;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.plan-link .nlc-icon{ width:38px; height:38px; color: var(--orange); }
.plan-link:hover{ color: var(--orange); }

/* icona arancione nelle meta delle card evento (se non già presente) */
.meta .nlc-icon{ width:18px; height:18px; color: var(--orange); flex-shrink:0; }
.meta{ align-items:center; }

/* --- Hero video di sfondo --- */
.hero-video {
  position: relative;
  overflow: hidden;
  container-type: size;   /* le misure del video si basano sulla hero, non sullo schermo */
}
.hero-video-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* il video non è cliccabile: è decorativo */
}
.hero-video-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* scale: ingrandisce il video così titolo, canale e logo di YouTube (ai bordi) restano fuori dalla hero */
  transform: translate(-50%, -50%) scale(1.25);
  /* Trucco 16:9 "cover": il video riempie sempre l'area, ritagliando i bordi */
  width: 100vw;
  height: 56.25vw;            /* 16:9 → 9/16 = 0.5625 */
  min-height: 100%;
  min-width: 177.78vh;        /* 16/9 → 1.7778 */
}
/* Browser moderni: cover calcolato sulla hero (alta 900px anche su schermi più bassi),
   altrimenti su portatili e mobile il riquadro non è 16:9 e YouTube aggiunge bande nere */
@supports (width: 1cqw) {
  .hero-video-wrap iframe {
    width: max(100cqw, 177.78cqh);
    height: max(56.25cqw, 100cqh);
    min-width: 0;
    min-height: 0;
  }
}
@media (max-width: 1024px) {
  .hero-placeholder { min-height: 600px; }
}
@media (max-width: 768px) {
  .hero-placeholder { min-height: 60vh; }
}

/* =================================================================
   DOVE DORMIRE — pagina archivio  (body.page-dormire)
   Aggiungere in coda a css/style.css, DOPO il blocco Arte e Cultura
   (riusa tutte le classi .ac-* ; qui solo ciò che è specifico).
   ================================================================= */

/* Hero: eventuale immagine di sfondo dedicata */
.dd-hero {
  background-image: url('../img/hero-dove-dormire.jpg');
}

/* Il form ha 4 filtri: lascio che vadano a capo con più respiro */
/* Filtri su UNA riga sul desktop: niente wrap, spazio distribuito.
   Le select possono restringersi (min-width:0) senza sfondare. */
.dd-filters {
  flex-wrap: nowrap;
  gap: 1.5rem;
  align-items: center;
}
.dd-filters .ac-filter {
  min-width: 0;
  flex: 0 1 auto;
}
.dd-filters .ac-select {
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
}
/* Sotto i 900px torna ad andare a capo, altrimenti diventa illeggibile */
@media (max-width: 900px) {
  .dd-filters {
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
  }
}

/* --- STELLE accanto al titolo card --- */
.dd-stars {
  display: inline-flex;
  gap: 1px;
  margin-left: .4rem;
  vertical-align: middle;
  color: #F19011;
}
.dd-star {
  width: 15px;
  height: 15px;
}
.dd-star-on path { fill: #F19011; }

/* --- TOGGLE "MOSTRA SULLA MAPPA" (segnaposto) --- */
.dd-maptoggle-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}
.dd-maptoggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .04em;
  color: #F19011;
  cursor: pointer;
}
.dd-maptoggle:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.dd-maptoggle .ac-filter-ico { color: #F19011; }

/* =================================================================
   PUNTO DI INTERESSE — pagina dettaglio  (body.page-poi).
   ================================================================= */

/* --- HERO immagine --- */
.poi-hero {
  position: relative;
  min-height: 360px;
  background: #3a4a52 center/cover no-repeat;
}
.poi-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,40,48,.15) 0%, rgba(20,40,48,.35) 100%);
}

/* --- HEAD: titolo + tag --- */
.poi-head {
  background: #eef3f5;
}
.poi-head-inner,
.poi-body-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.75rem 1.25rem;
}
.poi-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: #08748D;
  margin: 0 0 .75rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.poi-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.poi-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #08748D;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .95rem;
}
.poi-tag-ico { width: 20px; height: 20px; color: #F19011; flex: none; }

/* --- STELLE --- */
.poi-stars { display: inline-flex; gap: 2px; color: #F19011; }
.poi-star  { width: 20px; height: 20px; }
.poi-star-on path { fill: #F19011; }

/* --- BODY: due colonne --- */
.poi-body-inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  align-items: start;
}
.poi-content {
  font-family: 'Nunito Sans', sans-serif;
  color: #3a4a52;
  line-height: 1.7;
}
.poi-content p { margin: 0 0 1rem; }
.poi-content h2,
.poi-content h3 {
  font-family: 'Poppins', sans-serif;
  color: #08748D;
  margin: 1.6rem 0 .6rem;
}

/* Accessibilità */
.poi-accessibility {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #d9e2e5;
}
.poi-acc-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #08748D;
  font-weight: 600;
  margin: .4rem 0;
}
.poi-acc-ico { width: 26px; height: 26px; color: #F19011; flex: none; }

/* --- SIDEBAR contatti --- */
.poi-side { position: sticky; top: 90px; }
.poi-contacts {
  background: #eef3f5;
  padding: 1.5rem;
}
.poi-side-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #2d3345;
  margin: 0 0 1rem;
}
.poi-contact-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}
.poi-contact-list li {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .55rem 0;
  font-size: .95rem;
  word-break: break-word;
}
.poi-contact-list a { color: #08748D; text-decoration: none; }
.poi-contact-list a:hover { text-decoration: underline; }
.poi-ci { width: 20px; height: 20px; color: #F19011; flex: none; }

.poi-btn-prenota {
  display: block;
  text-align: center;
  background: #F19011;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .85rem 1rem;
  text-decoration: none;
  transition: background .18s ease;
}
.poi-btn-prenota:hover { background: #d97d05; }

/* bottone scarica documento (business: doc1 / doc2) */
.poi-doc { margin-top: 1rem; }
.pag-docs { max-width: 340px; margin-top: 1.5rem; }   /* pagina.php: bottoni SCARICA sotto il testo */
.poi-doc-desc { margin: 0 0 .5rem; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px; color: #08748D; line-height: 1.3; }
.poi-btn-doc {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: #08748D;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .85rem 1rem;
  text-decoration: none;
  transition: background .18s ease;
}
.poi-btn-doc:hover { background: #065d71; }
.poi-btn-doc-ico { width: 18px; height: 18px; flex: none; }

/* --- MAPPA --- */
.poi-map-section { max-width: 1100px; margin: 1rem auto 0; padding: 0 1.25rem; }
.poi-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.poi-map-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #08748D;
}
.poi-map-pin { width: 30px; height: 30px; color: #08748D; flex: none; }
.poi-map-title strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 1.15rem;
}
.poi-map-title span { font-size: .9rem; color: #5a6a70; }
.poi-directions {
  background: #08748D;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .04em;
  padding: .7rem 1.3rem;
  text-decoration: none;
  transition: background .18s ease;
}
.poi-directions:hover { background: #055e72; }
.poi-map-embed {
  aspect-ratio: 16 / 7;
  background: #d9e2e5;
}
.poi-map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- ALTRE STRUTTURE (carosello) --- */
.poi-related {
  background: #4CBABC;
  margin-top: 3rem;
  padding: 2.5rem 1.25rem 3rem;
}
.poi-related-head {
  text-align: center;
  color: #08748D;
  margin-bottom: 2rem;
}
.poi-related-ico { width: 70px; height: 52px; color: #08748D; }
.poi-related-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: #08748D;
  margin: .25rem 0 0;
}
.poi-related-track {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .5rem;
}
.poi-related-card { scroll-snap-align: start; background: #eef3f5; }

/* --- 404 minima --- */
.poi-notfound {
  max-width: 700px;
  margin: 0 auto;
  padding: 4rem 1.25rem;
  text-align: center;
}
.poi-back { color: #08748D; font-weight: 600; }

/* --- RESPONSIVE --- */
@media (max-width: 860px) {
  .poi-body-inner { grid-template-columns: 1fr; }
  .poi-side { position: static; }
}

/* =================================================================
   STRUTTURE RICETTIVE — testata con galleria affiancata
   (body.page-strutture)
   Aggiungere in coda a css/style.css DOPO il blocco punto-di-interesse:
   questa pagina riusa .poi-body, .poi-content, .poi-side, .poi-map-*,
   .poi-related-* del dettaglio; qui si ridefinisce solo la TESTATA.
   ================================================================= */

.sr-head {
  background: #eef3f5;
}
.sr-head-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.25rem;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 2.5rem;
  align-items: center;
}

/* --- Galleria: una foto alla volta, dissolvenza --- */
.sr-gallery {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #d9e2e5;
  overflow: hidden;
}
.sr-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .9s ease;
}
.sr-slide.is-active {
  opacity: 1;
}
.sr-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Titolo + tag a fianco --- */
.sr-head-main { min-width: 0; }
.sr-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: #08748D;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.sr-tags {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.sr-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #08748D;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1rem;
}
.sr-tag-ico { width: 22px; height: 22px; color: #F19011; flex: none; }

/* Riusa le stelle del dettaglio */
.page-strutture .poi-stars { display: inline-flex; gap: 2px; color: #F19011; }

/* --- Responsive: galleria sopra, testo sotto --- */
@media (max-width: 780px) {
  .sr-head-inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .sr-tags { flex-direction: row; flex-wrap: wrap; gap: 1.25rem; }
}

/* ---- CIN fisso nell'header struttura ---- */
.sr-cin {
  margin: .8rem 0 0;
  font-size: .9rem;
  color: #444;
}
.sr-cin-label {
  display: inline-block;
  background: var(--nlc-teal, #08748D);
  color: #fff;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .05em;
  padding: .15em .55em;
  border-radius: 4px;
  margin-right: .4em;
}

/* ---- Social nella sidebar contatti (strutture-ricettive.php) ---- */
.poi-social {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0;
}
.poi-social-link {
  display: inline-flex;
  color: var(--nlc-teal, #08748D);  /* colore icone (fill: currentColor) */
  transition: opacity .2s ease, transform .2s ease;
}
.poi-social-link:hover { opacity: .8; transform: translateY(-2px); }
/* le icone usano .nlc-icon (2em dal CSS base); qui solo eventuale ritocco */
.poi-social-link .poi-social-ico { width: 1.8em; height: 1.8em; }

/* =================================================================
   STRUTTURE RICETTIVE — testata con galleria affiancata
   (body.page-strutture)
   Aggiungere in coda a css/style.css DOPO il blocco punto-di-interesse:
   questa pagina riusa .poi-body, .poi-content, .poi-side, .poi-map-*,
   .poi-related-* del dettaglio; qui si ridefinisce solo la TESTATA.
   ================================================================= */

.sr-head {
  background: #eef3f5;
}
.sr-head-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.25rem;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 2.5rem;
  align-items: center;
}

/* --- Galleria: una foto alla volta, dissolvenza --- */
.sr-gallery {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #d9e2e5;
  overflow: hidden;
}
.sr-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .9s ease;
}
.sr-slide.is-active {
  opacity: 1;
}
.sr-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Titolo + tag a fianco --- */
.sr-head-main { min-width: 0; }
.sr-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: #08748D;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.sr-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.25rem;
}
.sr-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #08748D;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1rem;
}
.sr-tag-service {
  font-weight: 600;
  font-size: .9rem;
  background: #eef3f5;
  padding: .3rem .8rem .3rem .55rem;
  border-radius: 999px;
}
.sr-tag-ico { width: 22px; height: 22px; color: #F19011; flex: none; }

/* Riusa le stelle del dettaglio */
.page-strutture .poi-stars { display: inline-flex; gap: 2px; color: #F19011; }

/* --- Responsive: galleria sopra, testo sotto --- */
@media (max-width: 780px) {
  .sr-head-inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
/* ---- Servizi (accordion) in strutture-ricettive.php ---- */
.sr-services { padding: 1.5rem 0; }
.sr-services-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}
.sr-services-title {
  display: flex;
  align-items: center;
  gap: .5em;
  margin: 0 0 1rem;
}
.sr-services-ico { width: 1.3em; height: 1.3em; }

.sr-acc-list {
  border-top: 1px solid #e3e3e3;
}
.sr-acc {
  border-bottom: 1px solid #e3e3e3;
}
.sr-acc-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: .9rem .2rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: left;
  color: inherit;
}
.sr-acc-chev {
  transition: transform .2s ease;
  font-size: 1.4em;
  line-height: 1;
  color: var(--nlc-teal, #08748D);
}
.sr-acc.is-open .sr-acc-chev { transform: rotate(90deg); }

.sr-acc-body {
  display: none;
  padding: 0 .2rem 1rem;
}
.sr-acc.is-open .sr-acc-body { display: block; }

.sr-acc-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .4rem 1.2rem;
}
.sr-acc-item {
  display: flex;
  align-items: flex-start;
  gap: .5em;
  line-height: 1.4;
}
.sr-acc-check {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  margin-top: .2em;
  color: var(--nlc-teal, #08748D);
}
.sr-acc-item small { color: #666; }
/* =================================================================
   MENU OFFCANVAS — pannello 33% da sinistra, accordion
   Aggiungere in coda a css/style.css
   ================================================================= */

/* Contenitore full-screen, nascosto di default */
.offcanvas {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
}
.offcanvas.open {
  visibility: visible;
  pointer-events: auto;
}

/* Sfondo scuro */
.offcanvas-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 40, 48, 0.5);
  opacity: 0;
  transition: opacity .3s ease;
}
.offcanvas.open .offcanvas-backdrop { opacity: 1; }

/* Pannello da sinistra, 33% larghezza */
.offcanvas-panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 33%;
  min-width: 320px;
  max-width: 480px;
  background: #fff;
  box-shadow: 4px 0 24px rgba(0, 0, 0, .18);
  transform: translateX(-100%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.offcanvas.open .offcanvas-panel { transform: translateX(0); }

/* Testata pannello: logo + chiudi */
.offcanvas-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e4ebee;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}
.offcanvas-logo img { height: 44px; width: auto; display: block; }
.offcanvas-close {
  background: none;
  border: 0;
  font-size: 2rem;
  line-height: 1;
  color: #08748D;
  cursor: pointer;
  padding: 0 .25rem;
}

/* Navigazione */
.mnu { padding: .5rem 0 2rem; }
.mnu-root, .mnu-sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Voce foglia (link) */
.mnu-link {
  display: block;
  padding: .7rem 1.5rem;
  color: #2d3345;
  text-decoration: none;
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-size: 1rem;
  transition: background .15s ease, color .15s ease;
}
.mnu-link:hover { background: #eef3f5; color: #08748D; }

/* Voce contenitore (toggle accordion) */
.mnu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .8rem 1.5rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: #08748D;
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
}
.mnu-chev {
  width: 20px;
  height: 20px;
  flex: none;
  transition: transform .25s ease;
}
.mnu-item.is-expanded > .mnu-toggle .mnu-chev { transform: rotate(180deg); }

/* Sottomenu: chiuso di default, aperto quando .is-expanded sul parent */
.mnu-sub {
  display: none;
  background: #f6f9fa;
}
.mnu-item.is-expanded > .mnu-sub { display: block; }

/* Livelli annidati: rientro progressivo */
.mnu-lvl1 .mnu-link,
.mnu-lvl1 .mnu-toggle { padding-left: 2.25rem; }
.mnu-lvl2 .mnu-link,
.mnu-lvl2 .mnu-toggle { padding-left: 3rem; }
.mnu-lvl1 .mnu-toggle { font-size: .98rem; }
.mnu-lvl2 .mnu-toggle { font-size: .92rem; font-weight: 600; }

/* Link "Tutto: X" del contenitore che ha anche pagina propria */
.mnu-link-self { font-style: italic; color: #08748D; }

/* Voce senza pagina ancora (href="#") */
.mnu-link[href="#"] { color: #9aa7ac; cursor: default; }
.mnu-link[href="#"]:hover { background: none; }

/* Selettore lingua: evidenzia attiva */
.lang-menu a.active { font-weight: 700; color: #F19011; }

/* Dropdown lingua: si apre con la classe .open (JS in includes/footer.php),
   vedi blocco .lang-dropdown.open .lang-menu in testa al file.
   (Rimosso il vecchio display:none/.is-open che lo teneva sempre nascosto.) */

/* --- Responsive: su mobile il pannello occupa quasi tutto --- */
@media (max-width: 780px) {
  .offcanvas-panel { width: 86%; min-width: 0; max-width: none; }
}

/* =================================================================
   SEZIONE2 — box senza filtri  (body.page-sezione2)
   Aggiungere in coda a css/style.css.
   Riusa .ac-hero, .ac-card, .ac-grid, .ac-results, .dd-maptoggle.
   Qui: card "tessera" (Layout A) + intestazione senza hero.
   ================================================================= */

/* --- Intestazione senza hero (Località): titolo + intro a fianco --- */
.s2-head {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.5rem;
  align-items: start;
}
.s2-title {
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: #08748D;
  margin: 0;
}
.s2-intro {
  font-family: 'Nunito Sans', sans-serif;
  color: #5a6a70;
  line-height: 1.6;
  padding-top: .5rem;
}

/* --- Mostra sulla mappa --- */
.s2-maptoggle {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
  display: flex;
  justify-content: flex-end;
}

/* --- LAYOUT A: griglia di tessere --- */
.s2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.s2-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 3.2;
  background: #3a4a52 center/cover no-repeat;
  overflow: hidden;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.s2-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(8, 116, 141, 0.2);
}
.s2-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,40,48,.15) 0%, rgba(20,40,48,.55) 100%);
}
.s2-tile-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem;
  color: #fff;
}
.s2-tile-title {
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.s2-tile-link {
  margin-top: .5rem;
  font-size: .72rem;
  letter-spacing: .08em;
  font-weight: 600;
  opacity: .95;
}

/* --- Pulsante "mostra altro" --- */
.s2-more {
  display: flex;
  justify-content: flex-end;
  margin-top: 2.5rem;
}

/* --- Responsive --- */
@media (max-width: 860px) {
  .s2-grid { grid-template-columns: repeat(2, 1fr); }
  .s2-head { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 540px) {
  .s2-grid { grid-template-columns: 1fr; }
  .s2-more { justify-content: center; }
}

/* ---- Testo introduttivo nelle pagine di scelta (sezione2 static) ---- */
.s2-intro-text {
  margin: 1.5rem auto;
  line-height: 1.6;
}
.s2-intro-text p { margin: 0 0 1rem; }

/* =================================================================
   BUSINESS — dettaglio centro  (body.page-business)
   Aggiungere in coda a css/style.css.
   Riusa .sr-* (testata), .poi-* (corpo, sidebar, mappa, related).
   Qui solo il placeholder descrizione.
   ================================================================= */

.poi-desc-todo {
  color: #9aa7ac;
  font-style: italic;
}

/* =================================================================
   PAGINA — pagina di solo testo  (body.page-testo)
   Aggiungere in coda a css/style.css. Riusa .ac-hero.
   ================================================================= */

/* Intro: primo paragrafo, teal, centrato */
.pag-intro {
  max-width: 900px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 0.5rem;
  text-align: center;
}
.pag-intro p {
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.55;
  color: #08748D;
  margin: 0;
}

/* Corpo testo */
.pag-body {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3.5rem;
}
.pag-content {
  font-family: 'Nunito Sans', sans-serif;
  color: #3a4a52;
  line-height: 1.7;
  font-size: 1rem;
}
.pag-content p { margin: 0 0 1.1rem; }
.pag-content a { color: #08748D; text-decoration: underline; }
.pag-content a:hover { color: #F19011; }

/* Se in futuro il testo conterrà titoletti di sezione:
   <h2> = pill teal, <h3> = sottotitolo arancione (come nel mockup) */
.pag-content h2 {
  display: inline-block;
  background: #08748D;
  color: #fff;
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-size: .95rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .35rem .9rem;
  border-radius: 4px;
  margin: 1.8rem 0 .8rem;
}
.pag-content h3 {
  color: #F19011;
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 1.4rem 0 .5rem;
}

/* =================================================================
   LOCALITÀ — dettaglio paese  (body.page-localita)
   Aggiungere in coda a css/style.css.
   Riusa .poi-map-section, .poi-related, .poi-carousel, .poi-card.
   Qui: galleria carosello in cima + titolo/testo.
   ================================================================= */

/* --- Galleria carosello --- */
.loc-gallery {
  position: relative;
  max-width: 1100px;
  margin: 1.5rem auto 0;
  padding: 0 1.25rem;
}
/* --- Galleria località: 2 foto per volta, le altre nascoste ---
   SOSTITUISCE in style.css il vecchio blocco .loc-gallery-track + .loc-slide
   (quello con position:absolute / opacity). Lasciare invariati .loc-gallery
   e .loc-gallery-arrow. */

.loc-gallery-viewport {
  overflow: hidden;      /* nasconde le foto fuori dalle 2 centrali */
  border-radius: 4px;
  background: #d9e2e5;
}
.loc-gallery-track {
  display: flex;
  transition: transform .6s ease;
}
.loc-slide {
  flex: 0 0 50%;         /* 2 foto per volta */
  margin: 0;
  aspect-ratio: 4 / 3;
  box-sizing: border-box;
  border-right: 4px solid #fff;   /* stacco tra le due */
}
.loc-slide:last-child { border-right: 0; }
.loc-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Mobile: una foto per volta */
@media (max-width: 640px) {
  .loc-slide { flex-basis: 100%; border-right: 0; }
}

.loc-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  color: #08748D;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  transition: background .15s ease;
}
.loc-gallery-arrow:hover { background: #fff; }
.loc-gallery-prev { left: 2rem; }
.loc-gallery-next { right: 2rem; }

/* --- Titolo + testo --- */
.loc-body {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1.25rem;
}
.loc-title {
  text-align: center;
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  color: #08748D;
  margin: 0 0 1.5rem;
}
.loc-content {
  font-family: 'Nunito Sans', sans-serif;
  color: #3a4a52;
  line-height: 1.7;
}
.loc-content p { margin: 0 0 1.1rem; text-align: justify; }
.loc-content a { color: #08748D; text-decoration: underline; }
.loc-content a:hover { color: #F19011; }

/* --- Sezione Eventi: sfondo leggermente diverso per distinguerla --- */
.loc-related-eventi { background: #eef3f5; }

@media (max-width: 640px) {
  .loc-gallery-prev { left: .5rem; }
  .loc-gallery-next { right: .5rem; }
}
@media (max-width: 640px) {
  .loc-slide { flex-basis: 100%; border-right: 0; }
}

/* --- Dintorni: testo + sidebar contatti a due colonne --- */
.loc-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 860px) {
  .loc-layout { grid-template-columns: 1fr; }
}

/* =================================================================
   ITINERARI — archivio  (body.page-itinerari)
   Aggiungere in coda a css/style.css.
   Riusa .ac-hero, .ac-search, .ac-filters, .ac-grid, .ac-card,
   .ac-pagination, .sez-filters. Qui: card itinerario (loc multiple + metriche).
   ================================================================= */

/* Località multiple sopra il titolo */
.it-card-loc {
  font-size: .72rem;
  letter-spacing: .02em;
  color: #5a6a70;
  line-height: 1.4;
  margin: 0 0 .4rem;
  text-transform: uppercase;
}

/* Riga metriche (lunghezza / dislivello / tempo) */
.it-card-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: .6rem;
}
.it-metric {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  color: #3a4a52;
}
.it-metric-ico {
  width: 20px;
  height: 20px;
  color: #F19011;
  flex: none;
}

/* Filtri itinerari: stessa riga singola come dove-dormire/sezione */
.page-itinerari .sez-filters { flex-wrap: nowrap; gap: 1.5rem; }
.page-itinerari .sez-filters .ac-filter { min-width: 0; flex: 0 1 auto; }
@media (max-width: 900px) {
  .page-itinerari .sez-filters { flex-wrap: wrap; gap: 1rem 1.5rem; }
}
/* =================================================================
   ITINERARIO — dettaglio  (body.page-itinerario)
   Aggiungere in coda a css/style.css.
   Riusa .loc-gallery (galleria), .poi-related/.poi-carousel/.poi-card,
   .it-card-* (card correlate). Qui: head metriche, corpo 2 col, mappa, profilo.
   ================================================================= */

/* --- Head: metriche + titolo + intro --- */
.itd-head {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem .5rem;
  text-align: center;
}
.itd-metrics {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e4ebee;
  margin-bottom: 1rem;
}
.itd-metric { display: inline-flex; align-items: center; gap: .4rem; color: #3a4a52; font-weight: 600; }
.itd-metric-ico { width: 22px; height: 22px; color: #08748D; flex: none; }
.itd-locs { font-size: .75rem; letter-spacing: .03em; color: #5a6a70; text-transform: uppercase; margin: 0 0 .3rem; }
.itd-title {
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.8rem); color: #08748D; margin: 0 0 .75rem;
}
.itd-intro { color: #3a4a52; line-height: 1.6; max-width: 800px; margin: 0 auto; }

/* --- Corpo: due colonne --- */
.itd-body { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem; }
.itd-body-inner { display: grid; grid-template-columns: 1fr 340px; gap: 2.5rem; align-items: start; }
.itd-sec-title {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  color: #08748D; font-size: 1.1rem; margin: 0 0 1rem;
}
.itd-sec-title svg { width: 24px; height: 24px; color: #F19011; }
.itd-content { font-family: 'Nunito Sans', sans-serif; color: #3a4a52; line-height: 1.7; }
.itd-content p { margin: 0 0 1rem; text-align: justify; }

/* Accordion sezioni */
.itd-acc { border-top: 1px solid #e4ebee; margin-top: 1rem; }
.itd-acc-toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: 0; padding: .9rem 0; cursor: pointer;
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-weight: 600; color: #08748D; font-size: 1rem; text-align: left;
}
.itd-acc-chev { transition: transform .2s ease; }
.itd-acc.is-open .itd-acc-chev { transform: rotate(90deg); }
.itd-acc-body { display: none; padding: 0 0 1rem; color: #3a4a52; line-height: 1.6; }
.itd-acc.is-open .itd-acc-body { display: block; }

/* --- Dati percorso (tabella) --- */
.itd-data { background: #eef3f5; padding: 1.5rem; }
.itd-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.itd-table th {
  text-align: left; color: #08748D; font-weight: 700; font-size: .72rem;
  letter-spacing: .02em; padding: .5rem .5rem .5rem 0; vertical-align: top; width: 45%;
}
.itd-table td { color: #3a4a52; padding: .5rem 0; vertical-align: top; }
.itd-table tr { border-bottom: 1px solid #dce5e8; }

.itd-downloads { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
.itd-btn {
  display: block; text-align: center; padding: .8rem 1rem; text-decoration: none;
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif; font-weight: 700;
  letter-spacing: .03em; font-size: .85rem; border: 0; cursor: pointer;
}
.itd-btn-gpx { background: #F19011; color: #fff; }
.itd-btn-gpx:hover { background: #d97d05; }
.itd-btn-pdf { background: #08748D; color: #fff; }
.itd-btn-pdf:hover { background: #055e72; }

/* --- Mappa + profilo altimetrico --- */
.itd-map-section { max-width: 1100px; margin: 1rem auto 2rem; padding: 0 1.25rem; }
.itd-map { width: 100%; height: 440px; background: #d9e2e5; border-radius: 4px; }
.itd-elevation-wrap { margin-top: 1rem; background: #fff; padding: 1rem; border: 1px solid #e4ebee; border-radius: 4px; }

/* --- Responsive --- */
@media (max-width: 860px) {
  .itd-body-inner { grid-template-columns: 1fr; }
}

/* Print: nasconde header/footer/mappa per la "stampa PDF" */
@media print {
  .site-header, .offcanvas, .site-footer, .poi-related, .itd-downloads,
  .loc-gallery-arrow, .itd-map-section { display: none !important; }
  .itd-body-inner { grid-template-columns: 1fr 1fr; }
}
/* ---- Bottoni download itinerario (PDF sopra, GPX arancione sotto) ---- */
.itd-downloads {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: 1rem;
}
.itd-downloads .itd-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: .7em 1em;
  font-weight: 700;
  letter-spacing: .03em;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
/* PDF: colore primario teal */
.itd-btn-pdf {
  background: var(--nlc-teal, #08748D);
  color: #fff;
}
/* GPX: arancione */
.itd-btn-gpx {
  background: var(--nlc-orange, #F19011);
  color: #fff;
}
/* =================================================================
   ELENCO-INFO — box con info dentro  (body.page-elenco-info)
   Aggiungere in coda a css/style.css. Riusa .ac-hero, .ac-results,
   .dd-maptoggle, .s2-more.
   ================================================================= */

.ei-maptoggle {
  max-width: 1100px; margin: 0 auto; padding: .5rem 1.25rem;
  display: flex; justify-content: flex-end;
}

.ei-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}

.ei-box {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.25rem;
  background: #eef3f5;
  padding: 1.25rem;
}
/* Card elenco-info: foto in 4:3 senza deformazione */
.ei-box-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.ei-box-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* riempie il 4:3 ritagliando, non schiaccia */
  display: block;
}

.ei-box-body { min-width: 0; }
.ei-box-title {
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: 1.15rem; line-height: 1.2;
  color: #08748D; margin: 0 0 .6rem;
}

.ei-box-addr, .ei-box-note {
  display: flex; gap: .5rem; align-items: flex-start;
  margin: .4rem 0; font-size: .9rem; color: #3a4a52; line-height: 1.4;
}
.ei-ico { width: 18px; height: 18px; color: #F19011; flex: none; margin-top: .1rem; }

.ei-directions {
  display: inline-block;
  background: #F19011; color: #fff;
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-weight: 600; font-size: .7rem; letter-spacing: .03em;
  padding: .35rem .8rem; text-decoration: none; margin: .3rem 0 .6rem;
}
.ei-directions:hover { background: #d97d05; }

.ei-book {
  display: inline-block;
  background: #F19011; color: #fff;
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: .75rem; letter-spacing: .03em;
  padding: .4rem 1rem; text-decoration: none; margin: .3rem 0 .6rem;
}
.ei-book:hover { background: #d97d05; }

.ei-box-contacts { display: flex; gap: .5rem; align-items: flex-start; margin-top: .5rem; }
.ei-contacts-list { display: flex; flex-direction: column; font-size: .85rem; word-break: break-word; }
.ei-contacts-list a { color: #08748D; text-decoration: none; }
.ei-contacts-list a:hover { text-decoration: underline; }

@media (max-width: 780px) {
  .ei-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ei-box { grid-template-columns: 1fr; }
  .ei-box-media { aspect-ratio: 16 / 9; }
}

/* =================================================================
   ELENCO-INFO — box con info dentro  (body.page-elenco-info)
   Aggiungere in coda a css/style.css. Riusa .ac-hero, .ac-results,
   .dd-maptoggle, .s2-more.
   ================================================================= */

.ei-maptoggle {
  max-width: 1100px; margin: 0 auto; padding: .5rem 1.25rem;
  display: flex; justify-content: flex-end;
}

.ei-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}

.ei-box {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.25rem;
  background: #eef3f5;
  padding: 1.25rem;
}

.ei-box-body { min-width: 0; }
.ei-box-title {
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: 1.15rem; line-height: 1.2;
  color: #08748D; margin: 0 0 .6rem;
}

.ei-box-addr, .ei-box-note {
  display: flex; gap: .5rem; align-items: flex-start;
  margin: .4rem 0; font-size: .9rem; color: #3a4a52; line-height: 1.4;
}
.ei-ico { width: 18px; height: 18px; color: #F19011; flex: none; margin-top: .1rem; }

.ei-directions {
  display: inline-block;
  background: #F19011; color: #fff;
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-weight: 600; font-size: .7rem; letter-spacing: .03em;
  padding: .35rem .8rem; text-decoration: none; margin: .3rem 0 .6rem;
}
.ei-directions:hover { background: #d97d05; }

.ei-book {
  display: inline-block;
  background: #F19011; color: #fff;
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: .75rem; letter-spacing: .03em;
  padding: .4rem 1rem; text-decoration: none; margin: .3rem 0 .6rem;
}
.ei-book:hover { background: #d97d05; }

.ei-box-contacts { display: flex; gap: .5rem; align-items: flex-start; margin-top: .5rem; }
.ei-contacts-list { display: flex; flex-direction: column; font-size: .85rem; word-break: break-word; }
.ei-contacts-list a { color: #08748D; text-decoration: none; }
.ei-contacts-list a:hover { text-decoration: underline; }

@media (max-width: 780px) {
  .ei-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ei-box { grid-template-columns: 1fr; }
  .ei-box-media { aspect-ratio: 16 / 9; }
}

/* Box senza immagine (es. infopoint da contact): una sola colonna */
.ei-box-noimg { grid-template-columns: 1fr; }

/* ---- Data evento nelle card (sezione.php) ---- */
.ac-card-data {
  display: flex;
  align-items: center;
  gap: .4em;
  margin: 0 0 .4em;
  font-size: .85rem;
  font-weight: 600;
  color: var(--nlc-teal, #0b8a8f);
  text-transform: capitalize;
}
.ac-card-data .ac-meta-ico {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}
/* ---- Data evento nelle card correlate (punto-di-interesse.php) ---- */
.poi-card-data {
  display: flex;
  align-items: center;
  gap: .4em;
  margin: 0 0 .4em;
  font-size: .85rem;
  font-weight: 600;
  color: var(--nlc-teal, #0b8a8f);
  text-transform: capitalize;
}
.poi-card-data .nlc-icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}
/* ---- Occhiello categoria nelle card "In Evidenza" ---- */
.evidenza-card .card-eyebrow {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: .35em;
  padding: .2em .7em;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--nlc-orange, #e0842b);
  border-radius: 999px;
}

/* ---- Sitemap footer: sotto-titoli e sotto-link ---- */
.footer-col .footer-sub-title {
  margin: .8em 0 .2em;
  font-weight: 700;
  font-size: .95em;
}
.footer-col .footer-sub-title a { text-decoration: none; }
.footer-col .footer-sub-link {
  display: block;
  padding-left: .8em;
  font-size: .9em;
  opacity: .9;
}

/* ---- Modal mappa (sezione2.php) ---- */
.dd-maptoggle:not([disabled]) { cursor: pointer; }

.s2-mapmodal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
}
.s2-mapmodal[aria-hidden="false"] { display: block; }

.s2-mapmodal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}
.s2-mapmodal-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 900px);
  height: min(82vh, 620px);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.s2-mapmodal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1rem;
  border-bottom: 1px solid #eee;
}
.s2-mapmodal-title {
  font-weight: 700;
  font-size: 1.05rem;
}
.s2-mapmodal-close {
  border: 0;
  background: transparent;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  color: #555;
}
.s2-mapmodal-close:hover { color: #000; }
.s2-mapmodal-canvas {
  flex: 1 1 auto;
  width: 100%;
}
.s2-mapmodal-canvas .leaflet-popup-content a { font-weight: 600; }

/* ---- Form segnalazione errori (segnala.php) ---- */
.form-segnala { max-width: 640px; }
.form-segnala .form-row { margin-bottom: 1.1rem; }
.form-segnala label { display: block; font-weight: 600; margin-bottom: .35rem; }
.form-segnala input[type="email"],
.form-segnala input[type="text"],
.form-segnala textarea {
  width: 100%;
  padding: .6em .7em;
  border: 1px solid #ccc;
  border-radius: 6px;
  font: inherit;
  box-sizing: border-box;
}
.form-segnala textarea { resize: vertical; }
.form-segnala .req { color: #c0392b; }

.form-row-check label {
  display: flex;
  align-items: flex-start;
  gap: .6em;
  font-weight: 400;
  line-height: 1.4;
}
.form-row-check input { margin-top: .25em; flex: 0 0 auto; }

.form-btn {
  background: var(--nlc-teal, #08748D);
  color: #fff;
  border: 0;
  padding: .7em 1.6em;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
}
.form-btn:hover { opacity: .92; }
.form-note { font-size: .85rem; color: #666; }

/* Alert */
.form-alert {
  padding: .9rem 1.1rem;
  border-radius: 8px;
  margin-bottom: 1.2rem;
}
.form-alert-ok { background: #e6f5ea; color: #1e6b34; border: 1px solid #b7e0c3; }
.form-alert-ko { background: #fdeaea; color: #a12626; border: 1px solid #f3bcbc; }
.form-alert ul { margin: 0; padding-left: 1.2rem; }

/* ---- Card file scaricabili (mappe/brochure in sezione2 fonte fileupload) ---- */
.file-card .ac-card-img { background:#f3f3f3; }
.file-card .ac-card-img img { object-fit: contain; }  /* le mappe non vanno tagliate */
.file-card-dl {
  display: flex;
  align-items: center;
  gap: .4em;
  font-weight: 700;
  color: var(--nlc-orange, #F19011);
}

/* =================================================================
   METEO — pagina previsioni  (body.page-meteo)
   Riusa .ac-hero, .container.
   ================================================================= */

.meteo-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3.5rem;
}

/* --- ADESSO --- */
.meteo-now {
  background: #08748D;
  color: #fff;
  border-radius: 14px;
  padding: 1.6rem 1.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.meteo-now-main { display: flex; align-items: center; gap: 1rem; }
.meteo-now-ico { width: 64px; height: 64px; color: #fff; }
.meteo-now-temp {
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: 3.4rem; line-height: 1;
}
.meteo-now-cond {
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-weight: 600; font-size: 1.1rem; margin: 0 0 .25rem;
}
.meteo-now-place {
  display: flex; align-items: center; gap: .35rem;
  font-size: .9rem; opacity: .9; margin: 0;
}
.meteo-pin { width: 16px; height: 16px; color: #F19011; flex: none; }

.meteo-now-meta {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 2rem;
}
.meteo-now-meta li { display: flex; flex-direction: column; }
.meteo-now-meta span { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.meteo-now-meta strong {
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: 1.3rem;
}

/* --- PROSSIMI GIORNI --- */
.meteo-days {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}
.meteo-day {
  background: #eef3f5;
  border-radius: 12px;
  padding: 1.1rem .6rem;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.meteo-day-name {
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: .85rem; color: #08748D;
  text-transform: uppercase; letter-spacing: .03em;
}
.meteo-day-ico { width: 44px; height: 44px; color: #08748D; }
.meteo-day-cond { font-size: .8rem; color: #3a4a52; min-height: 2.2em; }
.meteo-day-temps { display: flex; gap: .5rem; align-items: baseline; }
.meteo-tmax {
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: 1.15rem; color: #F19011;
}
.meteo-tmin { font-size: .95rem; color: #8aa0a8; }
.meteo-day-extra {
  display: flex; gap: .8rem; font-size: .75rem; color: #5a6b73;
  border-top: 1px solid #dde7ea; padding-top: .5rem; width: 100%; justify-content: center;
}
.meteo-day-extra span { display: inline-flex; align-items: center; gap: .2rem; }
.meteo-xi { width: 14px; height: 14px; color: #08748D; }

.meteo-credit { text-align: center; font-size: .8rem; color: #8aa0a8; margin-top: 1.5rem; }
.meteo-credit a { color: #08748D; }

/* --- Responsive --- */
@media (max-width: 820px) {
  .meteo-days { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .meteo-now { flex-direction: column; align-items: flex-start; }
  .meteo-now-meta { gap: 1.4rem; }
  .meteo-days { grid-template-columns: repeat(2, 1fr); }
}
.poi-organizer { margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid #e3eaed; }
.poi-organizer-name { font-weight: 600; color: #08748D; margin: .2rem 0 0; }
/* ============================================================
   STRUTTURE RICETTIVE — CIN in fondo, dopo gli accordion servizi
   ============================================================ */
.sr-services + .sr-cin-section { padding-top: 0; }
.sr-cin-section .sr-cin { margin: 0; }
.sr-cin-section .sr-cin + .sr-cin { margin-top: .4rem; }   /* più CIN: uno per riga */

/* ============================================================
   ELENCO-INFO — card verticali: foto grande sopra, contenuto sotto
   (sovrascrive il layout a 2 colonne foto-sx / testo-dx dei blocchi
   ELENCO-INFO precedenti)
   ============================================================ */
.ei-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.ei-box {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}
.ei-box-media { aspect-ratio: 4 / 3; }
.ei-box-body { padding: 1.1rem 1.25rem 1.25rem; }

@media (max-width: 980px) {
  .ei-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ei-grid { grid-template-columns: 1fr; }
}

/* ELENCO-INFO — "Indicazioni stradali" in fondo alla card, allineato tra le card della riga */
.ei-box-body { flex: 1; display: flex; flex-direction: column; }
.ei-box-body .ei-directions { margin: auto 0 0; padding-top: .35rem; align-self: flex-start; }
.ei-box-contacts { margin-bottom: 1rem; }

/* ============================================================
   METEO — webcam Camping North Wind sotto le previsioni
   ============================================================ */
.meteo-webcam { margin-top: 2.5rem; }
.meteo-webcam-title {
  font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: 1.3rem; color: #08748D; margin: 0 0 .25rem;
}
.meteo-webcam-title a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.meteo-webcam-title a:hover { color: #F19011; }
.meteo-webcam-note { font-size: .85rem; color: #8aa0a8; margin: 0 0 .8rem; }
.meteo-webcam-img { display: block; overflow-x: auto; }
.meteo-webcam-img img { display: block; width: 100%; height: auto; }

/* HERO — credito fotografo (riusabile su qualsiasi .ac-hero) */
.ac-hero-credit {
  position: absolute; right: 1rem; bottom: .75rem; z-index: 2;
  font-size: .75rem; color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* ELENCO-INFO — social nella card (riusa .poi-social / .poi-social-link) */
.ei-box .ei-social { gap: .75rem; margin: 0 0 1rem; }
.ei-box .ei-social .poi-social-ico { width: 1.5em; height: 1.5em; }

/* ELENCO-INFO — nota card in HTML dal backoffice (p, strong, br, ul...) */
.ei-box-note-text { min-width: 0; }
.ei-box-note-text > :first-child { margin-top: 0; }
.ei-box-note-text > :last-child  { margin-bottom: 0; }
.ei-box-note-text p { margin: 0 0 .35rem; }
.ei-box-note-text ul, .ei-box-note-text ol { margin: .2rem 0 .35rem; padding-left: 1.1rem; }
.ei-box-note-text h1, .ei-box-note-text h2, .ei-box-note-text h3, .ei-box-note-text h4 {
  font-size: .95rem; font-weight: 700; margin: .3rem 0 .2rem; color: #3a4a52;
}
.ei-box-note-text a { color: #08748D; }

/* ============================================================
   SEZIONE — filtri a scelta multipla (form.sez-filters.is-multi)
   Barra come da mockup (icona arancio + etichetta maiuscola, linea teal);
   ogni filtro apre una tendina con caselle, conteggi e APPLICA.
   ============================================================ */
.sez-filters.is-multi {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 1rem;
  border-bottom-color: #4CBABC;
}
.sez-filters.is-multi .ac-filter { flex: 0 1 auto; min-width: 0; }

.mf { position: relative; }
.mf-toggle {
  display: flex; align-items: center; gap: .5rem;
  list-style: none; cursor: pointer; user-select: none;
  padding: .25rem .1rem; white-space: nowrap;
}
.mf-toggle::-webkit-details-marker { display: none; }
.mf-toggle::marker { content: ''; }
.mf-toggle:focus-visible { outline: 2px solid #4CBABC; outline-offset: 3px; border-radius: 4px; }
.mf-label { letter-spacing: .04em; }
.mf-chev { width: 14px; height: 14px; color: #9aa7ac; transition: transform .2s ease; flex: none; }
.mf[open] .mf-chev { transform: rotate(180deg); }
.mf.has-sel .mf-label, .mf[open] .mf-label { color: #08748D; }
.mf-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: #F19011; color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: 0;
}

.mf-panel {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 30;
  width: 290px; max-width: 86vw;
  background: #fff; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(20, 40, 48, .18), 0 0 0 1px rgba(20, 40, 48, .06);
  padding: .5rem 0 0;
  font-family: 'Nunito Sans', sans-serif; font-weight: 400; letter-spacing: 0;
  cursor: default;
}
.mf-list { list-style: none; margin: 0; padding: 0 .4rem; max-height: 300px; overflow-y: auto; }
.mf-opt {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .6rem; border-radius: 6px; cursor: pointer;
  font-size: .92rem; color: #2c3a40;
}
.mf-opt:hover { background: #eef6f7; }
.mf-opt input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #F19011; cursor: pointer; }
.mf-opt-name { flex: 1; line-height: 1.25; }
.mf-opt-n {
  font-size: .75rem; color: #6f8188; background: #eef3f5;
  border-radius: 999px; padding: .1rem .5rem; flex: none;
}
.mf-opt input:checked ~ .mf-opt-name { color: #08748D; font-weight: 700; }
.mf-empty { padding: .6rem 1rem; margin: 0; font-size: .9rem; color: #6f8188; }

.mf-actions {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid #e3eaed; margin-top: .4rem; padding: .6rem .9rem;
}
.mf-clear, .mf-apply {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .75rem; letter-spacing: .04em;
  border: 0; cursor: pointer;
}
.mf-clear { background: none; color: #9aa7ac; padding: .4rem 0; }
.mf-clear:hover { color: #3a4a52; }
.mf-apply { background: #F19011; color: #fff; padding: .5rem 1.1rem; border-radius: 6px; }
.mf-apply:hover { background: #d97d05; }

/* voci scelte sotto la barra */
.mf-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.mf-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #e6f4f4; color: #08748D; text-decoration: none;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .78rem;
  padding: .35rem .5rem .35rem .8rem; border-radius: 999px;
}
.mf-chip:hover { background: #d3ecec; }
.mf-chip-x { font-size: 1.05rem; line-height: 1; opacity: .7; }

/* tablet: la barra va a capo */
@media (max-width: 980px) {
  .sez-filters.is-multi { flex-wrap: wrap; justify-content: flex-start; gap: 1rem 1.5rem; }
}
/* mobile: un filtro per riga, tendina sotto a tutta larghezza */
@media (max-width: 700px) {
  .sez-filters.is-multi .ac-filter { flex: 1 1 100%; }
  .sez-filters.is-multi .ac-filter-btn, .sez-filters.is-multi .ac-filter-reset { flex: 0 0 auto; }
  .mf-panel { position: static; width: auto; max-width: none; margin-top: .5rem; box-shadow: 0 0 0 1px #d9e2e5; }
}
/* la tendina non eredita il layout "affiancato" di .ac-filter: titolo sopra, pannello sotto */
details.mf { display: block; }
.mf-opt.is-zero { opacity: .5; }
.sez-filters.is-multi .ac-filter-btn,
.sez-filters.is-multi .ac-filter-reset { white-space: nowrap; }

/* ============================================================
   FILTRI — tendina a scelta SINGOLA (.mf-single): stesso stile, senza caselle.
   Ogni voce è un link; la voce scelta in teal con la spunta.
   ============================================================ */
.mf-panel-title {
  margin: 0; padding: .35rem 1rem .4rem;
  font-family: 'Poppins', sans-serif; font-size: .7rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #9aa7ac;
}
.mf-single .mf-panel { padding-bottom: .4rem; }
.mf-link { text-decoration: none; position: relative; padding-left: 1.9rem; }
.mf-link::before {                      /* spunta della voce scelta */
  content: ''; position: absolute; left: .7rem; top: 50%;
  width: 6px; height: 11px; margin-top: -7px;
  border: solid transparent; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.mf-link.is-on { color: #08748D; font-weight: 700; background: #eef6f7; }
.mf-link.is-on::before { border-color: #F19011; }
.mf-single.has-sel .mf-label { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   CONTATTI (colonna a destra delle schede): email / sito su UNA riga.
   Se non ci stanno finiscono con "…"; il testo intero è nel title (al passaggio
   del mouse) e il link funziona comunque con l'indirizzo completo.
   ============================================================ */
.poi-contact-list li { word-break: normal; min-width: 0; }
.poi-contact-list li > a {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.poi-contact-list li > .poi-ci, .poi-contact-list li > svg { flex: none; }

/* =================================================================
   CONTATTACI (contatti.php) — layout da CONTATTACI.pdf
   Hero = .ac-hero (foto infopoint); modulo centrato su fondo sfumato.
   ================================================================= */
.ct-hero { background-position: center 60%; }
.ct-body {
  background: linear-gradient(180deg, #fff 0%, #fff 25%, #dcecee 100%);
  padding: 3.5rem 16px 4.5rem;
}
.ct-wrap { max-width: 760px; margin: 0 auto; }
.ct-intro {
  color: var(--teal-dark);
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0 0 2rem;
}
.ct-row { margin-bottom: 1.6rem; }
.ct-row > label {
  display: block;
  color: var(--teal-dark);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .5rem;
}
.ct-form .req { color: var(--orange); }
.ct-form input[type="text"],
.ct-form input[type="email"],
.ct-form input[type="tel"],
.ct-form select,
.ct-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: .7em .8em;
  border: 1px solid var(--teal-dark);
  border-radius: 2px;
  background: #fff;
  font: inherit;
  color: #222;
}
.ct-form textarea { min-height: 170px; resize: vertical; }
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus {
  outline: 2px solid var(--teal-light);
  outline-offset: 1px;
}
/* select con freccia teal */
.ct-select { position: relative; }
.ct-select select { appearance: none; -webkit-appearance: none; padding-right: 2.8em; cursor: pointer; }
.ct-select::after {
  content: '';
  position: absolute;
  right: 1.1em;
  top: 50%;
  width: .6em;
  height: .6em;
  border-right: 2px solid var(--teal-dark);
  border-bottom: 2px solid var(--teal-dark);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
/* privacy */
.ct-check { display: flex; align-items: flex-start; gap: .9em; }
.ct-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.2em; height: 1.2em;
  margin: .15em 0 0;
  accent-color: var(--teal-dark);
}
.ct-check label { color: #333; line-height: 1.45; font-size: .95rem; font-weight: 400; }
.ct-check a { color: inherit; text-decoration: underline; }
.ct-note { font-size: .85rem; color: #555; margin: 0 0 1.5rem; }
.ct-actions { text-align: right; }
.ct-btn {
  background: var(--teal-dark);
  color: #fff;
  border: 0;
  border-radius: 2px;
  padding: .55em 1.4em;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  cursor: pointer;
}
.ct-btn:hover { background: var(--teal-overlay); }
@media (max-width: 768px) {
  .ct-hero { min-height: 55vh; }
  .ct-body { padding-top: 2.5rem; }
}

/* --- Icone per voce (2026-10-19) ---------------------------------------
   Titoli dei blocchi in Come arrivare / Come muoversi (pagina.php aggregata)
   e nome dei gruppi Servizi (includes/servizi.php). */
.pag-content h2.pag-blocco-tit { display: inline-flex; align-items: center; gap: .55em; }
.pag-blocco-ico { width: 1.9em; height: 1.9em; margin: -.2em 0; flex: 0 0 auto; color: #fff; }
.sr-acc-name { display: inline-flex; align-items: center; gap: .6em; }
.sr-acc-ico { width: 1.6em; height: 1.6em; flex: 0 0 auto; color: var(--orange); }

/* Tessera senza foto (es. Come arrivare / Come muoversi): fondo teal + icona della voce */
.s2-tile.s2-tile-noimg { background: linear-gradient(160deg, var(--teal-light) 0%, var(--teal-dark) 100%); }
.s2-tile-noimg .s2-tile-overlay { background: none; }
.s2-tile-ico { width: 4.5rem; height: 4.5rem; color: #fff; margin-bottom: .8rem; }

/* =================================================================
   RICERCA nel sito (2026-10-19): campo nell'header + pagina cerca.php
   ================================================================= */
.site-search { border-top: 1px solid #e3ecee; background: #fff; }
.site-search[hidden] { display: none; }
.site-search-form {
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 24px 4px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.site-search-form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: .7em .9em;
  border: 1px solid var(--teal-dark);
  border-radius: 2px;
  font: inherit;
  font-size: 1rem;
}
.site-search-form input[type="search"]:focus { outline: 2px solid var(--teal-light); outline-offset: 1px; }
.site-search-btn {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--teal-dark); color: #fff; border: 0; border-radius: 2px;
  padding: .75em 1.2em; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; letter-spacing: .5px;
}
.site-search-btn svg { width: 1.1em; height: 1.1em; }
.site-search-btn:hover { background: var(--teal-overlay); }
.site-search-close {
  background: none; border: 0; cursor: pointer;
  font-size: 1.8rem; line-height: 1; color: var(--teal-dark); padding: 0 .2em;
}
@media (max-width: 540px) {
  .site-search-form { padding: 10px 16px 0; gap: 6px; }
  .site-search-btn span { display: none; }      /* su mobile solo la lente */
}

.cerca-body { padding: 2.5rem 16px 4rem; max-width: 900px; margin: 0 auto; }
.cerca-title {
  font-family: var(--font-display); color: var(--teal-dark);
  font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 .4rem;
}
.cerca-info { color: #444; margin: 0 0 1.8rem; }
.cerca-list { list-style: none; margin: 0; padding: 0; }
.cerca-item + .cerca-item { border-top: 1px solid #e3ecee; }
.cerca-link {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding: 1rem .3rem; text-decoration: none; color: inherit;
}
.cerca-link:hover .cerca-nome { color: var(--orange); }
.cerca-thumb {
  flex: 0 0 96px; height: 72px; border-radius: 4px;
  background: linear-gradient(160deg, var(--teal-light), var(--teal-dark)) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.cerca-thumb-ico { width: 34px; height: 34px; color: #fff; }
.cerca-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cerca-sez {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--orange);
}
.cerca-nome {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--teal-dark); line-height: 1.25;
}
.cerca-estratto { color: #555; font-size: .92rem; line-height: 1.45; overflow-wrap: anywhere; }
.cerca-list mark, .cerca-nome mark { background: #fde9c8; color: inherit; padding: 0 .1em; border-radius: 2px; }
@media (max-width: 540px) {
  .cerca-thumb { flex-basis: 72px; height: 56px; }
}

/* --- Icone header e sezioni home (2026-10-20): blu tema, nere al passaggio del mouse --- */
.site-header .nlc-icon,
.site-header .menu-toggle svg { color: var(--teal-dark); transition: color .15s ease; }
.site-header .nav-item:hover .nlc-icon,
.site-header .icon-btn:hover .nlc-icon,
.site-header .menu-toggle:hover svg { color: #000; }
.site-header .nav-item:hover,
.site-header .menu-toggle:hover { color: #000; }   /* anche la scritta (EVENTI, MENÙ…) */
.section-ico { display: inline-block; font-size: 1.6em; line-height: 0; }
.section-ico .nlc-icon { color: var(--teal-dark); transition: color .15s ease; }
.section-ico:hover .nlc-icon { color: #000; }

/* Caroselli home (Eventi / Esperienze): niente barra di scorrimento visibile;
   si scorre con le frecce, il trascinamento o il touch */
.carousel-track { scrollbar-width: none; -ms-overflow-style: none; }
.carousel-track::-webkit-scrollbar { display: none; }

/* --- Menu laterale (2026-10-20): voci blu tema normali, voci con sottomenu in grassetto;
       al passaggio del mouse nere, come le icone dell'header --- */
.mnu-link { color: var(--teal-dark); font-weight: 400; }
.mnu-link:hover { color: #000; }
.mnu-toggle,
.mnu-lvl2 .mnu-toggle { color: var(--teal-dark); font-weight: 700; }
.mnu-toggle:hover { color: #000; }

/* --- Sfondo di tutte le pagine (2026-10-20): bianco in alto che sfuma verso
       l'azzurro tema in basso; il footer (bianco) resta così "staccato". --- */
html { background: #fff; }
body {
  min-height: 100vh;
  background: linear-gradient(180deg, #fff 0%, #fff 20%, #cfe8eb 100%);
}
.ct-body { background: none; }   /* Contatti: prima aveva una sfumatura sua */

/* --- Banner prima del footer nelle sezioni (sezione2 config 'banner', es. Clima e venti
       in Sport acquatici): 200px, largo quanto la colonna, foto + icona + titolo --- */
.s2-banner-wrap { margin-top: 1rem; margin-bottom: 3.5rem; }
.s2-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--teal-dark) center/cover no-repeat;
  text-decoration: none;
}
.s2-banner-overlay {
  position: absolute; inset: 0;
  background: rgba(4, 93, 118, .45);
  transition: background .2s ease;
}
.s2-banner:hover .s2-banner-overlay { background: rgba(4, 93, 118, .6); }
.s2-banner-body {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: .8rem;
  color: #fff;
}
.s2-banner-ico { width: 3.2rem; height: 3.2rem; color: #fff; }
.s2-banner-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* --- Menu laterale: Contatti + social in fondo (2026-10-21) --- */
.mnu-extra {
  border-top: 1px solid #e3ecee;
  margin-top: .5rem;
  padding: 1.1rem 1.5rem 1.5rem;
}
.mnu-contatti {
  display: inline-flex; align-items: center; gap: .6em;
  color: var(--teal-dark); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
}
.mnu-contatti:hover { color: #000; }
.mnu-extra-ico { width: 1.5em; height: 1.5em; color: var(--teal-dark); }
.mnu-contatti:hover .mnu-extra-ico { color: #000; }
.mnu-social { display: flex; gap: 1rem; margin-top: 1rem; }
.mnu-social a { color: var(--teal-dark); }
.mnu-social a:hover { color: #000; }
.mnu-social-ico { width: 2rem; height: 2rem; color: inherit; }
/* icone Contatti e social del menu: arancioni (nere al passaggio del mouse) */
.mnu-extra-ico, .mnu-social a { color: var(--orange); }
/* Contattaci e icone social sulla stessa riga */
.mnu-extra { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.4rem; }
.mnu-social { margin-top: 0; }

/* --- Menu laterale: ricerca + lingua in alto (2026-10-21) --- */
.mnu-tools { padding: .9rem 1.5rem 1rem; border-bottom: 1px solid #e3ecee; display: flex; flex-direction: column; gap: .8rem; }
.mnu-search { display: flex; }
.mnu-search input[type="search"] {
  flex: 1 1 auto; min-width: 0;
  padding: .55em .7em; font: inherit; font-size: .95rem;
  border: 1px solid var(--teal-dark); border-right: 0; border-radius: 2px 0 0 2px;
}
.mnu-search input[type="search"]:focus { outline: 2px solid var(--teal-light); outline-offset: 0; }
.mnu-search button {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 2.6rem; border: 0; border-radius: 0 2px 2px 0; cursor: pointer;
  background: var(--teal-dark); color: #fff;
}
.mnu-search button:hover { background: #000; }
.mnu-search-ico { width: 1.2rem; height: 1.2rem; color: #fff; }
.mnu-lang { display: flex; gap: .4rem; }
.mnu-lang a {
  padding: .25em .7em; border: 1px solid var(--teal-dark); border-radius: 2px;
  color: var(--teal-dark); text-decoration: none; font-weight: 700; font-size: .9rem;
}
.mnu-lang a:hover { color: #000; border-color: #000; }
.mnu-lang a.active { background: var(--teal-dark); color: #fff; }
/* Menu laterale in alto: tendina lingua + lente come nell'header */
.mnu-tools-row { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.mnu-tools .icon-btn .nlc-icon { color: var(--teal-dark); }
.mnu-tools .icon-btn:hover .nlc-icon { color: #000; }
.mnu-langdd .lang-select { color: var(--teal-dark); }
.mnu-langdd .lang-select:hover { color: #000; }
.mnu-langdd .lang-menu { left: auto; right: 0; z-index: 20; }   /* si apre verso sinistra, dentro il pannello */
.mnu-search[hidden] { display: none; }

/* --- Caroselli home (Eventi / Esperienze) su mobile (2026-10-21): niente frecce
       (si scorre col dito), card all'85% della larghezza così si vede la successiva --- */
@media (max-width: 640px) {
  .carousel-wrap { gap: 0; }
  .carousel-arrow { display: none; }
  .carousel-track { gap: 14px; }
  .carousel-track .event-card { flex: 0 0 85%; max-width: 85%; }
}

/* --- Organizza il tuo viaggio (2026-10-21): griglia propria, sta nello spazio:
       3 colonne su computer, 2 su telefono --- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}
.plan-link span { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .plan-link { padding: 14px 6px; font-size: 13px; }
}
/* Contattaci nel menu: solo icona, stessa misura delle icone social */
.mnu-extra-ico { width: 2rem; height: 2rem; }
.mnu-extra { gap: .8rem 1rem; }

/* Testata punti di interesse: una riga per gruppo di filtri (voci separate da virgola);
   se la riga va a capo l'icona resta in alto */
.sr-tag[data-gruppo], .poi-tag[data-gruppo] { align-items: flex-start; }
.sr-tag[data-gruppo] .sr-tag-ico, .poi-tag[data-gruppo] svg { flex: 0 0 auto; margin-top: .15em; }

/* ===== Lingue non disponibili per la pagina (header + menu) e avviso ===== */
/* stessa voce delle altre lingue, solo più chiara e non cliccabile */
.lang-menu .lang-off{display:block;padding:.55rem 1.1rem;font-family:var(--font-body);font-size:16px;color:#c3cbd0;cursor:default;user-select:none}
.lang-notice{display:inline-block;margin:0 0 10px;padding:6px 12px;border-radius:6px;background:#fff4e5;color:#8a5300;font-size:.9rem;font-weight:500}

/* ===== Galleria località / itinerario: frecce FUORI dalle foto (desktop e tablet) =====
   La galleria lascia ai lati lo spazio per le frecce; su mobile restano sopra le foto. */
@media (min-width: 641px) {
  .loc-gallery { padding: 0 4rem; }
  .loc-gallery-arrow {
    background: #fff;
    color: #08748D;
    box-shadow: 0 2px 8px rgba(8,116,141,.18);
  }
  .loc-gallery-arrow:hover { background: #08748D; color: #fff; }
  .loc-gallery-prev { left: .75rem; }
  .loc-gallery-next { right: .75rem; }
}