/* Armonizzazione delle schede -------------------------------------------------
   Un solo vestito per l'INTERNO di schede e riquadri: stessa famiglia di
   caratteri, stessa scala di testi, stessa tavolozza calda (carta, inchiostro
   bruno, terracotta, oro). Non cambia struttura, ordine o funzioni: agisce
   soltanto su tipografia e colore, così comuni, monumenti, tradizioni,
   itinerari e schede luogo si assomigliano davvero.
   Scoped a html:not([data-theme="dark"]) per non toccare il tema scuro. */

html:not([data-theme="dark"]) {
  --ch-ink: #2a2320;          /* titoli */
  --ch-text: #5d5348;         /* testo corrente */
  --ch-meta: #8a6746;         /* etichette e righe di luogo */
  --ch-accent: #b0512c;       /* terracotta: link, bottoni, numeri */
  --ch-accent-dark: #8c3d20;
  --ch-gold: #c39a44;         /* unico accento secondario */
  --ch-line: #e8dccb;
  --ch-soft-line: #eadfc9;
  --ch-surface: #fffdf8;      /* fondo di ogni scheda */
  --ch-soft: #f8f2e6;         /* fondo dei riquadri interni */
  --ch-serif: Georgia, 'Times New Roman', Times, serif;
}

/* 1. Fondo, bordo e ombra uguali per tutte le schede --------------------- */
html:not([data-theme="dark"]) .place-card,
html:not([data-theme="dark"]) .monument-card,
html:not([data-theme="dark"]) .tradition-card,
html:not([data-theme="dark"]) .tradition-editorial-card,
html:not([data-theme="dark"]) .route-card,
html:not([data-theme="dark"]) .pg-shell {
  background: var(--ch-surface) !important;
  border-color: var(--ch-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 28px rgba(70, 48, 30, .07) !important;
  color: var(--ch-text) !important;
}

html:not([data-theme="dark"]) .place-card:hover,
html:not([data-theme="dark"]) .monument-card:hover,
html:not([data-theme="dark"]) .tradition-card:hover,
html:not([data-theme="dark"]) .tradition-editorial-card:hover,
html:not([data-theme="dark"]) .route-card:hover {
  border-color: #dcbfa4 !important;
  box-shadow: 0 18px 38px rgba(70, 48, 30, .12) !important;
}

html:not([data-theme="dark"]) .card-image,
html:not([data-theme="dark"]) .monument-card-image {
  background: #e7dccb !important;
}

/* 2. Titoli: una sola voce, serif, stessa misura ------------------------- */
html:not([data-theme="dark"]) .card-body h3,
html:not([data-theme="dark"]) .monument-card-body h3,
html:not([data-theme="dark"]) .tradition-card h3,
html:not([data-theme="dark"]) .monument-detail-copy h2,
html:not([data-theme="dark"]) .monument-detail-hero-text h2,
html:not([data-theme="dark"]) .tradition-story-dialog h2 {
  font-family: var(--ch-serif) !important;
  font-size: clamp(1.24rem, 1.9vw, 1.5rem) !important;
  font-weight: 600 !important;
  line-height: 1.16 !important;
  letter-spacing: -.015em !important;
  color: var(--ch-ink) !important;
  text-shadow: none !important;
}

/* Titoli delle schede secondarie: stessa voce, un gradino più piccoli. */
html:not([data-theme="dark"]) .pg-card-head h4,
html:not([data-theme="dark"]) .tradition-editorial-card h4,
html:not([data-theme="dark"]) .monument-story-block h3,
html:not([data-theme="dark"]) .pg-tip h4,
html:not([data-theme="dark"]) main#top > .culture-compass .culture-card h3,
html:not([data-theme="dark"]) .route-card strong {
  font-family: var(--ch-serif) !important;
  font-size: clamp(1.02rem, 1.4vw, 1.16rem) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  color: var(--ch-ink) !important;
}

/* 3. Testo corrente: stessa misura, stesso respiro ----------------------- */
html:not([data-theme="dark"]) .card-lead,
html:not([data-theme="dark"]) .card-body p,
html:not([data-theme="dark"]) .monument-card-body p,
html:not([data-theme="dark"]) .tradition-card-short,
html:not([data-theme="dark"]) .tradition-card-description,
html:not([data-theme="dark"]) .tradition-editorial-card p,
html:not([data-theme="dark"]) .tradition-story-dialog p,
html:not([data-theme="dark"]) .monument-story p,
html:not([data-theme="dark"]) .monument-story-note,
html:not([data-theme="dark"]) .monument-detail-copy p,
html:not([data-theme="dark"]) .pg-card-body,
html:not([data-theme="dark"]) .pg-gallery figcaption,
html:not([data-theme="dark"]) .pg-credit-note,
html:not([data-theme="dark"]) .card-culture-note,
html:not([data-theme="dark"]) .route-card-blurb,
html:not([data-theme="dark"]) main#top > .culture-compass .culture-card p {
  font-size: .95rem !important;
  line-height: 1.62 !important;
  color: var(--ch-text) !important;
}

/* 4. Etichette, righe di luogo e occhielli ------------------------------ */
html:not([data-theme="dark"]) .place-card .eyebrow-small,
html:not([data-theme="dark"]) .monument-card .eyebrow-small,
html:not([data-theme="dark"]) .tradition-card .eyebrow-small,
html:not([data-theme="dark"]) .pg-shell .eyebrow-small,
html:not([data-theme="dark"]) .detail-content .eyebrow-small,
html:not([data-theme="dark"]) .cinema-sheet .eyebrow-small,
html:not([data-theme="dark"]) .culture-spotlight .eyebrow-small,
html:not([data-theme="dark"]) .local-search-popup .eyebrow-small,
html:not([data-theme="dark"]) .my-route-bar .eyebrow-small,
html:not([data-theme="dark"]) .monument-card-place,
html:not([data-theme="dark"]) .monument-detail-location,
html:not([data-theme="dark"]) .tradition-card-place,
html:not([data-theme="dark"]) .tradition-card-category,
html:not([data-theme="dark"]) .tradition-editorial-place,
html:not([data-theme="dark"]) .traditions-section-kicker,
html:not([data-theme="dark"]) .pg-fact-label,
html:not([data-theme="dark"]) .pg-map-label,
html:not([data-theme="dark"]) .pg-credits-title,
html:not([data-theme="dark"]) main#top > .culture-compass .culture-card-kicker {
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ch-meta) !important;
}

/* 5. Numeri e pastiglie di indice: un solo colore d'accento ------------- */
html:not([data-theme="dark"]) .monument-card-body .monument-card-place,
html:not([data-theme="dark"]) .tradition-story-dialog .traditions-section-kicker {
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ch-meta) !important;
  line-height: 1.4 !important;
}

html:not([data-theme="dark"]) .pg-num,
html:not([data-theme="dark"]) .pg-see-num,
html:not([data-theme="dark"]) .tradition-card-index,
html:not([data-theme="dark"]) .card-culture-note > span:first-child,
html:not([data-theme="dark"]) .route-card-icon {
  color: var(--ch-accent) !important;
  font-weight: 900 !important;
}

html:not([data-theme="dark"]) .card-meta span,
html:not([data-theme="dark"]) .card-culture-tag,
html:not([data-theme="dark"]) .route-card-days {
  border: 1px solid var(--ch-soft-line) !important;
  border-radius: 999px !important;
  background: var(--ch-soft) !important;
  color: var(--ch-meta) !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}

/* 6. Riquadri interni: stesso fondo, stesso filo ------------------------ */
html:not([data-theme="dark"]) .card-culture-note,
html:not([data-theme="dark"]) .monument-story-note,
html:not([data-theme="dark"]) .monument-story-block,
html:not([data-theme="dark"]) .pg-facts li,
html:not([data-theme="dark"]) .pg-tip,
html:not([data-theme="dark"]) .pg-credits,
html:not([data-theme="dark"]) .pg-gallery-block,
html:not([data-theme="dark"]) .overview-tile,
html:not([data-theme="dark"]) .fact-tile {
  border: 1px solid var(--ch-soft-line) !important;
  border-radius: 14px !important;
  background: var(--ch-soft) !important;
  color: var(--ch-text) !important;
}

html:not([data-theme="dark"]) .pg-tip,
html:not([data-theme="dark"]) .monument-story-note,
html:not([data-theme="dark"]) .monument-story-tip {
  border-left: 3px solid var(--ch-gold) !important;
}

html:not([data-theme="dark"]) .pg-fact-value {
  color: var(--ch-ink) !important;
  font-weight: 700 !important;
}

html:not([data-theme="dark"]) .pg-gallery figure {
  border: 1px solid var(--ch-soft-line) !important;
  border-radius: 14px !important;
  background: var(--ch-surface) !important;
}

/* 7. Bottoni e link dentro le schede: tutti terracotta ------------------ */
html:not([data-theme="dark"]) .card-route,
html:not([data-theme="dark"]) .card-open-hint,
html:not([data-theme="dark"]) .card-culture-action,
html:not([data-theme="dark"]) .card-actions .text-button,
html:not([data-theme="dark"]) .monument-source-links a,
html:not([data-theme="dark"]) .pg-link {
  color: var(--ch-accent) !important;
  font-weight: 800 !important;
}

html:not([data-theme="dark"]) .monument-card-actions a,
html:not([data-theme="dark"]) .tradition-story-button,
html:not([data-theme="dark"]) .tradition-editorial-actions button,
html:not([data-theme="dark"]) .card-actions .button-soft {
  border: 1px solid #dfb79a !important;
  background: #fdf4ea !important;
  color: var(--ch-accent-dark) !important;
  font-weight: 800 !important;
}

html:not([data-theme="dark"]) .monument-primary,
html:not([data-theme="dark"]) .tradition-place-button {
  border: 1px solid var(--ch-accent) !important;
  background: var(--ch-accent) !important;
  color: #fff8f2 !important;
  font-weight: 800 !important;
}

html:not([data-theme="dark"]) .card-actions .card-route-toggle.is-active,
html:not([data-theme="dark"]) .route-card.is-active {
  color: var(--ch-accent-dark) !important;
  border-color: var(--ch-accent) !important;
}

/* 8. Scheda luogo: la stessa tavolozza al posto del verde ---------------- */
html:not([data-theme="dark"]) .pg-shell {
  --pg-deep: #40291f;
  --pg-green: #7c4526;
  --pg-gold: #c39a44;
  --pg-carta: #fffdf8;
  --pg-surface: #fffdf8;
  --pg-ink: #2a2320;
  --pg-muted: #6d5c4d;
  --pg-line: rgba(64, 41, 31, .14);
}

html:not([data-theme="dark"]) .pg-shell .pg-banner h3,
html:not([data-theme="dark"]) .pg-shell .pg-banner .pg-lead {
  color: #fdf6ea !important;
}

html:not([data-theme="dark"]) .pg-shell .pg-banner .pg-eyebrow {
  color: #f0cf94 !important;
}

html:not([data-theme="dark"]) .pg-map-frame {
  background: linear-gradient(135deg, #f0e6d6 0%, #e2d3bd 100%) !important;
}

/* 9. Cultura in home: stesse schede delle altre sezioni ----------------- */
html:not([data-theme="dark"]) main#top > .culture-compass h2 {
  color: var(--ch-ink) !important;
}

html:not([data-theme="dark"]) main#top > .culture-compass .culture-compass-lead {
  color: var(--ch-text) !important;
}

html:not([data-theme="dark"]) main#top > .culture-compass .culture-card {
  border: 1px solid var(--ch-line) !important;
  border-top: 3px solid var(--ch-gold) !important;
  border-radius: 16px !important;
  background: var(--ch-surface) !important;
  color: var(--ch-ink) !important;
  box-shadow: 0 10px 22px rgba(70, 48, 30, .06) !important;
}

html:not([data-theme="dark"]) main#top > .culture-compass .culture-card:nth-child(2),
html:not([data-theme="dark"]) main#top > .culture-compass .culture-card:nth-child(3),
html:not([data-theme="dark"]) main#top > .culture-compass .culture-card:nth-child(4) {
  border-top-color: var(--ch-gold) !important;
}

html:not([data-theme="dark"]) main#top > .culture-compass .culture-card:hover {
  border-color: #dcbfa4 !important;
  background: #fffefb !important;
}

/* 10. Itinerari: stessa carta delle schede ------------------------------ */
html:not([data-theme="dark"]) .route-selected {
  border: 1px solid var(--ch-soft-line) !important;
  border-radius: 14px !important;
  background: var(--ch-soft) !important;
  color: var(--ch-text) !important;
}

html:not([data-theme="dark"]) .route-selected p {
  color: var(--ch-text) !important;
  line-height: 1.62 !important;
}

/* 11. Schede video: stessa carta, stessa voce --------------------------- */
html:not([data-theme="dark"]) .video-thumb-card {
  border: 1px solid var(--ch-line) !important;
  border-radius: 16px !important;
  background: var(--ch-surface) !important;
  box-shadow: 0 10px 22px rgba(70, 48, 30, .07) !important;
}

html:not([data-theme="dark"]) .video-thumb-card:hover,
html:not([data-theme="dark"]) .video-thumb-card.is-active {
  border-color: #dcbfa4 !important;
}

html:not([data-theme="dark"]) .video-thumb-copy strong {
  font-family: var(--ch-serif) !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--ch-ink) !important;
}

html:not([data-theme="dark"]) .video-thumb-copy small {
  color: var(--ch-meta) !important;
  font-size: .7rem !important;
  font-weight: 800 !important;
}

html:not([data-theme="dark"]) .video-thumb-play {
  color: var(--ch-accent) !important;
}

/* 12. Leggibilità ---------------------------------------------------------
   Alcuni fogli dell'app contengono varianti pensate per un sistema operativo
   in tema scuro (prefers-color-scheme: dark): quelle varianti accendono i
   testi mentre le schede restano chiare, e le scritte risultano slavate.
   Qui ogni testo interno torna al colore giusto per il tema chiaro. */
html:not([data-theme="dark"]) .pg-shell .pg-card-body p,
html:not([data-theme="dark"]) .pg-shell .pg-card-body li,
html:not([data-theme="dark"]) .pg-shell .pg-card-body span,
html:not([data-theme="dark"]) .pg-shell .pg-see-body span,
html:not([data-theme="dark"]) .pg-shell .pg-fact-label,
html:not([data-theme="dark"]) .pg-shell .pg-map-label,
html:not([data-theme="dark"]) .pg-shell .pg-credits,
html:not([data-theme="dark"]) .pg-shell .pg-credits p,
html:not([data-theme="dark"]) .pg-shell .pg-tip p {
  color: var(--ch-text) !important;
}

html:not([data-theme="dark"]) .pg-shell .pg-card-body strong,
html:not([data-theme="dark"]) .pg-shell .pg-see-body strong,
html:not([data-theme="dark"]) .pg-shell .pg-fact-value,
html:not([data-theme="dark"]) .pg-shell .pg-card-head h4,
html:not([data-theme="dark"]) .pg-shell .pg-tip h4,
html:not([data-theme="dark"]) .pg-shell .pg-credits-title {
  color: var(--ch-ink) !important;
}

html:not([data-theme="dark"]) .pg-shell .pg-card,
html:not([data-theme="dark"]) .pg-shell .pg-card-body,
html:not([data-theme="dark"]) .pg-shell .pg-sections {
  background: var(--ch-surface) !important;
  color: var(--ch-text) !important;
}

html:not([data-theme="dark"]) .pg-shell .pg-gallery img,
html:not([data-theme="dark"]) .pg-shell .pg-map-frame,
html:not([data-theme="dark"]) .pg-shell .pg-facts li,
html:not([data-theme="dark"]) .pg-shell .pg-tip {
  background: var(--ch-soft) !important;
  color: var(--ch-text) !important;
}

/* Testo sopra le fotografie: velo scuro più deciso e testo chiaro.
   Vale solo dove la foto resta visibile (sopra i 700px di larghezza). */
html:not([data-theme="dark"]) .monument-detail-hero::after {
  background: linear-gradient(180deg, rgba(18, 10, 6, .30) 0%, rgba(18, 10, 6, .06) 30%, rgba(18, 10, 6, .62) 68%, rgba(14, 8, 5, .92) 100%) !important;
}

html:not([data-theme="dark"]) .monument-detail-hero .monument-detail-hero-text h2 {
  color: #fffdf8 !important;
  text-shadow: 0 3px 18px rgba(10, 6, 3, .85) !important;
}

html:not([data-theme="dark"]) .monument-detail-hero .monument-card-place {
  color: #ffd79a !important;
  text-shadow: 0 2px 10px rgba(10, 6, 3, .8) !important;
}

html:not([data-theme="dark"]) .monument-detail-hero .monument-detail-location {
  color: #ffe8cd !important;
  text-shadow: 0 2px 12px rgba(10, 6, 3, .8) !important;
}

/* Griglia luoghi: ogni anteprima ha lo stesso respiro. Il testo lungo resta
   disponibile nella scheda completa; qui viene mostrato come abstract breve. */
#cards.cards-grid > .place-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#cards.cards-grid > .place-card .card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

#cards.cards-grid > .place-card .card-body h3 {
  min-height: 2.16em;
}

#cards.cards-grid > .place-card .card-meta {
  min-height: 2.9em;
  align-content: flex-start;
}

#cards.cards-grid > .place-card .card-culture-note {
  min-height: 3.55em;
}

#cards.cards-grid > .place-card .card-lead {
  display: -webkit-box;
  height: calc(1.62em * 5);
  min-height: calc(1.62em * 5);
  max-height: calc(1.62em * 5);
  margin-bottom: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

#cards.cards-grid > .place-card .card-actions {
  margin-top: auto;
}

@media (max-width: 700px) {
  #cards.cards-grid > .place-card .card-lead {
    height: calc(1.6em * 4);
    min-height: calc(1.6em * 4);
    max-height: calc(1.6em * 4);
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
}

@media (min-width: 701px) {
  html:not([data-theme="dark"]) .detail-hero::after {
    background: linear-gradient(180deg, rgba(18, 10, 6, .26) 0%, rgba(18, 10, 6, .05) 32%, rgba(18, 10, 6, .60) 70%, rgba(14, 8, 5, .9) 100%) !important;
  }

  html:not([data-theme="dark"]) .detail-hero .detail-hero-copy,
  html:not([data-theme="dark"]) .detail-hero .detail-hero-copy h2 {
    color: #fffdf8 !important;
    text-shadow: 0 3px 18px rgba(10, 6, 3, .8) !important;
  }

  html:not([data-theme="dark"]) .detail-hero .detail-hero-copy p,
  html:not([data-theme="dark"]) .detail-hero .detail-hero-copy .eyebrow-small {
    color: #f4d9a6 !important;
    opacity: 1 !important;
    text-shadow: 0 2px 10px rgba(10, 6, 3, .8) !important;
  }
}