/* ============================================================
   Torredellago.net — Portale del territorio
   Sistema grafico ripreso da cascatadotro.it (cream/ink, Kaisei Opti + DM Sans,
   bottoni pill, radius 16) esteso con le sezioni di un portale turistico.
   ============================================================ */

:root {
  --cream: #f9f7f2;
  --ink:   #1b1b18;
  --white: #ffffff;
  --acqua: #2f5d56;
  --opera: #7c2d3a;
  --line: rgba(27,27,24,0.12);

  --content: 1770px;
  --gutter:  clamp(1.25rem, 4vw, 75px);
  --radius:  16px;
  --radius-sm: 10px;
  --gap:     20px;

  --font-display: "Kaisei Opti", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

.container {
  width: min(var(--content), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

/* ---------- Topbar ---------- */
.topbar {
  background: var(--ink);
  color: var(--white);
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: clamp(0.78rem, 1.3vw, 13px);
  letter-spacing: 0.02em;
  text-align: center;
  padding: 0.5rem 1rem;
}
.topbar strong { font-weight: 700; }

/* ---------- Navbar ---------- */
.navbar {
  position: relative;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-block: 1rem;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 0;
  color: var(--ink);
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.brand__tag {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(27,27,24,0.6);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.9rem);
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 500;
}
.nav-links a { position: relative; padding-block: 4px; }
.nav-links a:hover { opacity: 0.6; }

/* ---------- Bottoni pill ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.9rem, 1.2vw, 14px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  border-radius: 999px;
  padding: 14px 30px;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.3s ease;
}
.btn:hover  { opacity: 0.88; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }

/* ---------- Hero ---------- */
.hero__img {
  width: 100%;
  aspect-ratio: 1771 / 782;
  object-fit: cover;
  border-radius: var(--radius);
}

/* ---------- Intro ---------- */
.intro { text-align: center; margin-top: 70px; }

.intro__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acqua);
  margin: 0 0 18px;
}

.intro__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

.intro__text {
  max-width: 900px;
  margin: 40px auto 0;
  font-size: clamp(1.05rem, 1.6vw, 19px);
  line-height: 1.6;
}
.intro__text p { margin: 0; }
.intro__text p + p { margin-top: 22px; }
.intro__text strong { font-weight: 600; }

.intro__cta { margin-top: 42px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Stats strip ---------- */
.stats {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.stats__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
}
.stats__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.1;
}
.stats__label {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(27,27,24,0.65);
  letter-spacing: 0.02em;
}

/* ---------- Section heading ---------- */
.section { margin-top: 130px; }
.section__head { margin-bottom: 50px; }
.section__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acqua);
  margin: 0 0 12px;
}
.section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 720px;
}
.section__lead {
  margin: 20px 0 0;
  max-width: 800px;
  font-size: clamp(1rem, 1.3vw, 18px);
  line-height: 1.6;
  color: rgba(27,27,24,0.8);
}

/* ---------- Split (immagine + testo) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.split__img { border-radius: var(--radius); overflow: hidden; }
.split__img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.split__text p { margin: 0 0 18px; line-height: 1.7; font-size: 1.02rem; }
.split__text p:last-child { margin-bottom: 0; }
.split--reverse .split__img { order: 2; }

/* ---------- Card grid ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
/* Fascia "Attivita a Torre del Lago": numero di colonne configurabile
   da conf.pl ($attivita_box_per_riga), sia in homepage che nell'elenco
   completo. Le media query piu' sotto (che puntano a .card-grid, non
   a questo modificatore) restano piu' specifiche per source order e
   continuano a vincere sotto i 900px/480px. */
.card-grid--attivita { grid-template-columns: repeat(var(--attivita-cols, 3), 1fr); }

/* Variante SOLO per la fascia Attivita in homepage (non nell'elenco
   completo, che resta a griglia con "a capo" + paginazione): invece
   di mandare a capo le card oltre il numero di colonne visibili nel
   breakpoint corrente, le mette in fila su scorrimento orizzontale.
   Cosi' non si "perde" mai una card sotto una riga vuota quando il
   numero caricato (##ATTIVITA_COLS##, da conf.pl) supera le colonne
   che il breakpoint corrente puo' mostrare. --attivita-visible viene
   ridefinito negli stessi breakpoint che sotto cambiano
   .card-grid--attivita. */
.card-grid--attivita-scroll {
  --attivita-visible: var(--attivita-cols, 3);
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.card-grid--attivita-scroll > * {
  flex: 0 0 calc((100% - (var(--attivita-visible) - 1) * var(--gap)) / var(--attivita-visible));
  scroll-snap-align: start;
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card__img { aspect-ratio: 4/3; overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 24px; }
.card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 10px;
}
.card__text { margin: 0; font-size: 0.95rem; line-height: 1.55; color: rgba(27,27,24,0.78); }
.card--noimg .card__body { padding: 28px 24px; }
.card--noimg { justify-content: center; }

/* ---------- Zone / tag list ---------- */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 50px;
  padding: 0;
  list-style: none;
}
.tag-list li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 14px;
  background: var(--white);
}

/* ---------- Gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: 856fr 436fr 436fr;
  gap: var(--gap);
}
.gallery__item {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 436 / 310;
}
.gallery__item--big { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__item figcaption { display: none; }

/* ---------- Eventi ---------- */
.events {
  display: grid;
  gap: 18px;
}
.event {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 26px;
  align-items: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 28px;
}
.event__date {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--opera);
}
.event__title { font-weight: 700; margin: 0 0 6px; font-size: 1.05rem; }
.event__place { font-size: 0.85rem; color: rgba(27,27,24,0.6); margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.event__text { margin: 0; font-size: 0.95rem; line-height: 1.55; color: rgba(27,27,24,0.8); }

/* ---------- Come arrivare ---------- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.info-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}
.info-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 12px;
}
.info-card__text { margin: 0; font-size: 0.95rem; line-height: 1.6; color: rgba(27,27,24,0.8); }

/* ---------- News ---------- */
.news-card__meta {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--opera);
}
.news-card__meta .news-card__cat {
  color: rgba(27,27,24,0.55);
  font-weight: 500;
}
.news-card__link {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.9rem;
  font-weight: 600;
}
.news-card__link:hover { opacity: 0.7; }

/* ---------- Card "Attivita a Torre del Lago" (homepage + elenco) ---------- */
/* Stessa struttura .card/.card__body delle altre card, ma con contenuti
   diversi: categoria, indirizzo e telefono al posto di data+estratto. */
.attivita-card__eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(27,27,24,0.45);
}
.attivita-card__indirizzo {
  margin: 0 0 14px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--opera);
}
.attivita-card__phone { margin: 0 0 16px; }
.attivita-card__phone a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(124, 45, 58, 0.1);
  color: var(--opera);
  font-weight: 700;
  font-size: 0.92rem;
}
.attivita-card__phone a:hover { background: rgba(124, 45, 58, 0.18); }
.attivita-card__phone-icon { width: 16px; height: 16px; flex-shrink: 0; }
/* "vedi scheda ->" sempre alla stessa altezza dal bordo inferiore del
   box, indipendentemente da quanto testo c'e' sopra (categoria,
   indirizzo su una o due righe, telefono presente o no): il corpo
   della card diventa una colonna flessibile e il link viene spinto
   in fondo con margin-top:auto. */
.attivita-card .card__body { display: flex; flex-direction: column; flex: 1; }
.attivita-card__link { display: block; text-align: right; margin-top: auto; padding-top: 12px; }

.news-sentinel { height: 1px; }
.news-loader {
  display: none;
  justify-content: center;
  padding: 30px 0 0;
  font-size: 0.9rem;
  color: rgba(27,27,24,0.55);
}
.news-loader.is-active { display: flex; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  margin: 0 0 28px;
  font-size: 1.05rem;
  color: rgba(27,27,24,0.5);
}
.breadcrumb a { color: rgba(27,27,24,0.55); font-weight: 500; }
.breadcrumb a:hover { color: var(--ink); }
.section__title-link { color: inherit; text-decoration: none; }
.section__title-link:hover { opacity: 0.7; }
.breadcrumb__sep { margin: 0 8px; opacity: 0.5; }
.breadcrumb__current { color: var(--ink); font-weight: 600; }

/* ---------- Foto/video incorporati nel testo articolo (marcatori [foto:]/[video:]) ---------- */
.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}
.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink);
}
.embed-responsive-16by9 { padding-top: 56.25%; }
.embed-responsive-item {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ---------- Fotogallery articolo (tabella news_photo_galleries) ---------- */
.news_gallery .section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 18px;
}
.news_gallery .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.news_gallery [class*="col-"] {
  padding: 0 10px;
  box-sizing: border-box;
}
.news_gallery .col-xs-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
@media (min-width: 768px) {
  .news_gallery .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
}
.news_gallery .img-responsive { width: 100%; }

/* ---------- Footer ---------- */
footer { margin-top: 130px; padding-bottom: 30px; }
.footer {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius);
  padding: 48px var(--gutter);
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 40px;
}
.footer h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 14px;
  font-weight: 700;
}
.footer p, .footer a { font-size: 0.9rem; line-height: 1.7; color: rgba(255,255,255,0.75); }
.footer a:hover { color: var(--white); }
.footer__bottom {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 10px;
  padding-top: 20px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split--reverse .split__img { order: 0; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid--attivita-scroll { --attivita-visible: 2; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .navbar { min-height: auto; justify-content: center; text-align: center; }
  .nav-links { justify-content: center; font-size: 14px; gap: 0.8rem 1.2rem; }
  .btn { padding: 12px 24px; }

  .intro { margin-top: 40px; }
  .intro__text { margin-top: 24px; }
  .intro__cta { margin-top: 28px; }
  .stats { margin-top: 48px; }
  .section { margin-top: 72px; }
  .section__head { margin-bottom: 32px; }
  footer { margin-top: 72px; }

  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery__item--big { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; }

  .event { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .card-grid { grid-template-columns: 1fr; }
  .card-grid--attivita-scroll { --attivita-visible: 1; }
  .gallery { grid-template-columns: 1fr; }
  .gallery__item { aspect-ratio: 3 / 2; }
}

/* Tablet verticale: per la fascia Attivita restano 2 colonne (come le
   altre card-grid qui sopra), invece delle colonne "da desktop"
   configurate in conf.pl ($attivita_box_per_riga) che altrimenti si
   applicherebbero da 1367px in su per i tablet piu' grandi in
   verticale (es. iPad Pro 12.9", 1024px), non coperti dalla regola
   generica a 900px qui sopra. */
@media (min-width: 481px) and (max-width: 1366px) and (orientation: portrait) {
  .card-grid--attivita { grid-template-columns: repeat(2, 1fr); }
  .card-grid--attivita-scroll { --attivita-visible: 2; }
}

/* Tablet orizzontale: 3 colonne per la fascia Attivita. Stessa fascia
   di larghezza di quella verticale qui sopra, dal piu' piccolo tablet
   (768px) al piu' grande (iPad Pro 12.9" orizzontale, 1366px). */
@media (min-width: 481px) and (max-width: 1366px) and (orientation: landscape) {
  .card-grid--attivita { grid-template-columns: repeat(3, 1fr); }
  .card-grid--attivita-scroll { --attivita-visible: 3; }
}

/* Smartphone in orizzontale: ne' la larghezza ne' l'altezza della
   finestra (window.innerWidth/innerHeight) bastano a riconoscerlo in
   modo affidabile. Alcuni tablet a bassa densita' riportano in
   orizzontale un'altezza della finestra piu' bassa di quella di un
   telefono grande. Il lato corto dello SCHERMO FISICO
   (screen.width/height, indipendente dall'interfaccia del browser) e'
   invece stabile: sotto i 500px solo per i telefoni, mai per un
   tablet (anche il piu' piccolo, 7", resta sopra i 600px). Il calcolo
   e' in JS (vedi script in template_index.htm e
   template_elenco_attivita.htm), che aggiunge la classe
   .is-phone-landscape su <html>. */
html.is-phone-landscape .card-grid--attivita { grid-template-columns: repeat(2, 1fr); }
html.is-phone-landscape .card-grid--attivita-scroll { --attivita-visible: 2; }