/* ============================================================
   Foiano.it — 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;
  --olive: #6b7a4f;
  --terracotta: #b5622f;
  --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(--terracotta);
  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 (stile "Gallery" del template) ---------- */
.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(--terracotta);
  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 (Da Vedere) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
/* Fascia "Attivita a Foiano della Chiana": 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 992px/600px. */
.card-grid--attivita { grid-template-columns: repeat(var(--attivita-cols, 3), 1fr); }
.card-grid--pubbliredazionali { grid-template-columns: repeat(var(--pubbliredazionali-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 (es. tablet Doogee in
   orizzontale: 4 card caricate, 3 visibili, la 4a si scorre invece
   di andare a capo da sola). --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; }

/* ---------- Frazioni ---------- */
.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 (griglia del template originale) ---------- */
.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(--terracotta);
}
.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(--terracotta);
}
.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 Foiano della Chiana" (homepage + elenco) ---------- */
/* Stessa struttura .card/.card__body delle altre card, ma con contenuti
   diversi: categoria, indirizzo e telefono al posto di data+estratto,
   secondo il mockup fornito dall'utente. */
.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(--terracotta);
}
.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(181, 98, 47, 0.1);
  color: var(--terracotta);
  font-weight: 700;
  font-size: 0.92rem;
}
.attivita-card__phone a:hover { background: rgba(181, 98, 47, 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. Le card della stessa riga hanno gia'
   tutte la stessa altezza (comportamento di default di grid/flex),
   quindi il link finisce cosi' alla stessa quota su ogni box. */
.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, .card-grid--pubbliredazionali { 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, .card-grid--pubbliredazionali { 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' (es. Doogee Tab A9+,
   11", devicePixelRatio ~1.33) riportano in orizzontale un'altezza
   della finestra (~433px, ridotta anche dalla barra multi-tab del
   browser) 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, html.is-phone-landscape .card-grid--pubbliredazionali { grid-template-columns: repeat(2, 1fr); }
html.is-phone-landscape .card-grid--attivita-scroll { --attivita-visible: 2; }