/*
 * Theme Name:  TIA Site
 * Theme URI:   https://tripinartitaly.com
 * Description: Trip in Art — licensed Rome tour agency. Child theme of Fenice Base, TIA brand tokens (Navy #152B5A · Orange #FF9C34 · Lato). Built by Fenice Digital. Client logo used as-is, never altered.
 * Author:      Fenice Digital
 * Author URI:  https://fenice.digital
 * Template:    fenice-base
 * Version:     1.15.4
 * License:     Proprietary
 * Text Domain: tia-site
 * Requires at least: 6.0
 * Requires PHP: 7.4
*/

/* Chrome tweaks not expressible in theme.json — tokens live in theme.json */

/* ── Sticky header (wrapper is the direct child of .wp-site-blocks) ── */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header {
  /* NB: niente backdrop-filter qui — crea un containing block e rompe
     l'overlay mobile del menu (position:fixed si ancora all'header). */
  background: #ffffff;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.site-header .wp-block-navigation a {
  padding: 0.35rem 0;
  position: relative;
  color: var(--wp--preset--color--primary);
}
.site-header .wp-block-navigation a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--wp--preset--color--accent);
  transition: right 0.25s ease;
}
.site-header .wp-block-navigation a:hover::after { right: 0; }
.site-header .wp-block-navigation a:hover { color: var(--wp--preset--color--primary); }
.tia-btn-book .wp-block-button__link {
  border-radius: 999px;
  padding: 0.6em 1.5em;
  box-shadow: 0 6px 16px -8px rgba(224, 126, 18, 0.6);
}
.site-header .wp-block-site-logo { margin-right: 1.5rem; }
.tia-header-cta { margin-left: 1.5rem; }

/* ── Nav dropdown (submenu Tours — pattern citywalkers, Step 2 v1) ── */
.site-header .wp-block-navigation__submenu-container {
  background: #ffffff !important;
  border: 1px solid var(--wp--preset--color--border) !important;
  border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgba(14, 29, 61, 0.35);
  padding: 0.5rem !important;
  min-width: 240px;
}
.site-header .wp-block-navigation__submenu-container a {
  padding: 0.55rem 0.8rem !important;
  border-radius: 8px;
  white-space: nowrap;
}
.site-header .wp-block-navigation__submenu-container a::after { display: none; }
.site-header .wp-block-navigation__submenu-container a:hover {
  background: var(--wp--preset--color--bg-alt);
  color: var(--wp--preset--color--accent-dark);
}
.site-header .wp-block-navigation__submenu-icon { color: var(--wp--preset--color--primary); }
/* nell'overlay mobile il submenu si apre in colonna, voci figlie indentate */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  border: 0 !important; box-shadow: none; padding: 0 0 0 1rem !important; min-width: 0;
}

/* ── Gutter di pagina: contenuti e header respirano dai bordi viewport ──
   (fluido: 1.25rem su mobile → 4.5rem su desktop largo, stile competitor) */
:root { --tia-gutter: clamp(1.25rem, 4.5vw, 4.5rem); }

/* ── Gutter: one rule instead of a list to maintain ──
   Previously an explicit list of classes: adding a section meant
   remembering to add it here too, and a missed entry produced a section
   flush against the viewport edge. Now it applies to every direct child
   of main. */
.site-header,
main.wp-block-group > div,
.site-footer {
  padding-left: var(--tia-gutter) !important;
  padding-right: var(--tia-gutter) !important;
}

/* ── Niente strisce bianche tra le sezioni: azzera il block-gap ai
   livelli root e main (ogni sezione porta già il suo padding) ── */
.wp-site-blocks > * { margin-block-start: 0 !important; }
main.wp-block-group > * { margin-block-start: 0 !important; }
html { scroll-behavior: smooth; }

/* ── BAND RHYTHM — ONE rule, ONE place ────────────────────────────────
   Bands alternate ON THEIR OWN based on order in the page. Adding a
   section does NOT require choosing a background: that's what stops the
   rhythm from breaking again on the next addition.
   ⛔ Exactly TWO exceptions are allowed, and they're right below. A third
      one fails `tia-home-bands-guard.py`, which runs at checkpoint.
   ⛔ NAVY MEANS "FINAL ACTION": once per page. If it's needed twice, one
      of the two isn't an action.
   ⚠️ :where() on the even-row rule is NOT decorative. Without it, its
      specificity (0,2,2) beats the two exceptions below (0,2,1) any time
      one of them lands on an even position: the alternation would win
      SILENTLY over the exception (harmless today only because of position
      — hero is 1st, cta is 9th, both odd; one extra block before the cta
      moves it to an even position and breaks it). :where() zeroes out
      :nth-child's contribution, the alternation drops to (0,1,2), and the
      exceptions win ALWAYS, at any position. Do not remove it —
      `tia-home-bands-guard.py` checks for it (rule 5) and fails if it's
      gone. */
main.wp-block-group > div                        { background: var(--wp--preset--color--background); }
main.wp-block-group > div:where(:nth-child(even)) { background: var(--wp--preset--color--bg-alt); }

/* Band exception 1 of 2 — hero.
   DESCENDANT combinator (space), not child (`>`): outside the front page the
   core Post Content block nests these bands one level down, inside
   div.entry-content, where a child combinator would not match at all.
   Specificity stays (0,2,1) — combinators do not count — so it still wins
   over the even-band alternation above, which is (0,1,2). Do not change the
   space back to `>`. */
main.wp-block-group .tia-hero {
  background:
    radial-gradient(560px 380px at 88% 12%, rgba(255, 156, 52, 0.12), transparent 65%),
    radial-gradient(640px 420px at 4% 92%, rgba(21, 43, 90, 0.07), transparent 65%),
    linear-gradient(180deg, var(--wp--preset--color--background) 0%, var(--wp--preset--color--bg-alt) 100%);
}

/* eccezione 2 di 2 — l'UNICA fascia navy della pagina: l'azione finale.
   Stesso motivo del combinatore discendente di .tia-hero sopra — ed è
   QUESTA la fascia che stava esplodendo: fuori dalla home il fondale
   `> .tia-sec-cta` non agganciava (nessuna pagina annidata è figlia
   diretta di main), il colore di primo piano restava globale (titolo
   bianco, sottotitolo #D8DFEE, `.tia-btn-outline-white` bianco su bordo
   bianco) e il risultato era bianco-su-bianco su TUTTE le pagine tranne
   la home — misurato su 92 rotte. Specificità invariata, (0,2,1). */
main.wp-block-group .tia-sec-cta {
  background:
    radial-gradient(620px 380px at 85% 15%, rgba(255, 156, 52, 0.14), transparent 60%),
    radial-gradient(520px 340px at 8% 90%, rgba(255, 255, 255, 0.05), transparent 60%),
    var(--wp--preset--color--primary);
}
.tia-cta-sub { color: #D8DFEE; font-size: var(--wp--preset--font-size--md); }

/* ── Illustrated dividers: separate without shouting ──
   NB: this band does NOT declare its own background — it takes it from the
   alternation, like every other band. The guard allows 2 exceptions
   (tia-hero, tia-sec-cta) and these aren't one of them: two DISTINCT
   classes (not one shared "tia-divider") so home_bands() counts them as 2
   bands, not 1 — tia-home-bands-guard.py checks for 12 bands after this
   was added, not 11. */
.tia-divider-pines, .tia-divider-arches { padding-left: 0 !important; padding-right: 0 !important; }
.tia-divider-img { display: block; width: 100%; height: auto; max-height: 160px; object-fit: cover; }
@media (max-width: 600px) { .tia-divider-img { max-height: 96px; } }

/* ── Motion: scroll reveal (classi applicate da tia-motion.js) ── */
.tia-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.tia-reveal.in-view { opacity: 1; transform: none; }
/* `opacity: 0` hides an element from sight, not from the pointer and not from the
   keyboard. Measured on a cold load: 18 of 30 revealable elements sit at
   `opacity: 0`, and 7 of those carry a reachable control (4 theme cards, 3 tour
   cards), all with `pointer-events: auto`. This closes the pointer half.
   NOTE: `pointer-events` does NOT take an element out of the tab order — the
   keyboard half is closed in tia-motion.js, which reveals an element as it is
   about to receive focus. The two are complementary, not alternatives.
   RULE for anyone editing this file: every place that forces `.tia-reveal` back
   to `opacity: 1` outside the normal cycle must restore `pointer-events` too,
   or the defect flips into visible-but-not-clickable. Today those places are the
   `prefers-reduced-motion` block below and `.tia-car-track .tia-reveal`. */
.tia-reveal { pointer-events: none; }
.tia-reveal.in-view { pointer-events: auto; }

/* Il bottone "Enlarge" della lightbox e' del CORE di WordPress — `lightbox-trigger`
   ha 0 occorrenze in questo tema — e sulla home ce ne sono 2 (foto dell'hero e
   marchio del footer). Sta a `opacity: 0` a riposo ed e' la 14ª fermata di un giro
   di Tab dall'alto.
   ⚠️ CORREZIONE A UNA PREMESSA, misurata rimuovendo a runtime queste due regole:
   NON e' vero che resta invisibile mentre lo si tiene focalizzato. Il core ha gia'
   `.wp-lightbox-container button:focus { opacity: 1 }` — ma con una dissolvenza:
   0 a t=0 · 0 a t=50ms · 0,98 a t=200ms · 1 a t=600ms. Chi misura NELL'ISTANTE del
   focus (`focusin`, o la lettura subito dopo `.focus()`) legge 0 e conclude che il
   bottone e' muto: e' il tempo, non lo stato. Resta comunque un difetto piccolo e
   vero — un anello di focus che arriva dopo che ci sei arrivato non dice dove sei
   — e l'anello di sistema (`3px auto rgb(0,95,204)`) su una foto scura si legge
   male. Qui: nessuna attesa e l'arancione del brand. Col mouse non cambia niente,
   `:focus-visible` non scatta sul click. */
.wp-lightbox-container .lightbox-trigger:focus-visible {
  opacity: 1;
  transition: none;
  outline: 3px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

/* ── Motion: hero — blob fluttuanti + foto che respira ────────── */
.tia-hero { position: relative; overflow: hidden; }
.tia-hero > * { position: relative; z-index: 1; }
.tia-hero::before,
.tia-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
}
.tia-hero::before {
  width: 440px; height: 440px;
  background: rgba(255, 156, 52, 0.20);
  top: -140px; right: -90px;
  animation: tia-drift-a 16s ease-in-out infinite alternate;
}
.tia-hero::after {
  width: 380px; height: 380px;
  background: rgba(21, 43, 90, 0.12);
  bottom: -160px; left: -110px;
  animation: tia-drift-b 21s ease-in-out infinite alternate;
}
@keyframes tia-drift-a { to { transform: translate(-70px, 50px) scale(1.18); } }
@keyframes tia-drift-b { to { transform: translate(80px, -40px) scale(1.12); } }

.tia-hero-photo { animation: tia-float 8s ease-in-out infinite alternate; }
@keyframes tia-float { to { transform: translateY(-12px); } }

@media (prefers-reduced-motion: reduce) {
  /* `pointer-events: auto` non e' decorativo: qui l'animazione non esiste, quindi
     nessuno aggiungerebbe mai `.in-view` e senza questa riga le card resterebbero
     visibili e non cliccabili. */
  .tia-reveal { opacity: 1; transform: none; transition: none; pointer-events: auto; }
  .tia-hero::before, .tia-hero::after, .tia-hero-photo { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ── Hero ─────────────────────────────────────────────────────── */
.tia-hero h1 { max-width: 14ch; }
.tia-hero .tia-accent { color: #DC7A0E; } /* contrast 3.07:1 on white — large text, WCAG AA needs 3.0 */
.tia-stars { color: var(--wp--preset--color--accent-dark); letter-spacing: 2px; } /* accent #FF9C34 is 2.09:1 on white — below the 4.5 needed for small text */

.tia-hero-media { position: relative; }
.tia-hero-photo { position: relative; margin: 0; }
.tia-hero-photo img {
  border-radius: 18px;
  box-shadow: 0 24px 60px -24px rgba(14, 29, 61, 0.45);
  display: block;
}
.tia-hero-photo::after {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border-radius: 18px;
  background: var(--wp--preset--color--accent);
  opacity: 0.9;
  z-index: -1;
}

/* ── Bokun widget: contieni lo spazio bianco dell'iframe ─────── */
/* Bokun auto-resizes the iframe to content height (postMessage). NEVER cap it —
   a max-height clips the expanded booking summary + hides the "Book" button. */
.bokunWidget, .bokunWidget iframe { max-height: none; overflow: visible; }
.bokunWidget iframe { width: 100%; border: 0; display: block; }

/* ── Tour cards statiche (dati reali Bokun) ───────────────────── */
.tia-tour-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.tia-tour-card {
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tia-tour-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -22px rgba(14, 29, 61, 0.35);
}
.tia-tc-img {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.tia-tc-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.tia-tour-card:hover .tia-tc-img img { transform: scale(1.05); }
.tia-tc-badge {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--primary-dark);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  padding: 0.25em 0.8em;
  border-radius: 999px;
}
.tia-tc-badge-alt { background: var(--wp--preset--color--white); color: var(--wp--preset--color--primary); }
.tia-tc-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.1rem 1.2rem 1.2rem;
  flex: 1;
}
.tia-tc-title {
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--md);
  line-height: 1.35;
}
.tia-tc-meta {
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--sm);
}
.tia-tc-stars { color: #0A7A45; font-weight: 700; }
.tia-tc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--wp--preset--color--border);
}
.tia-tc-price { color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--sm); }
.tia-tc-price strong { color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--lg); }
.tia-tc-cta { color: var(--wp--preset--color--accent-dark); font-weight: 700; font-size: var(--wp--preset--font-size--sm); }
.tia-tour-card:hover .tia-tc-cta { text-decoration: underline; }

/* ── Buttons: outline variants ────────────────────────────────── */
/* WP core's default .is-style-outline rule ships its own padding
   (0.667em, from wp-includes/blocks/button/style.css) instead of the
   theme.json button padding (0.75em) the solid button uses. Adding a
   2px border on top of that shorter padding makes the outline button
   ~1-2px taller than its solid sibling in the same row. Reassert the
   theme padding here, minus the border width, so both buttons render
   at the same height. */
.tia-btn-outline-navy .wp-block-button__link {
  color: var(--wp--preset--color--primary);
  border: 2px solid var(--wp--preset--color--primary);
  background: transparent;
  padding: calc(0.75em - 2px) 1.6em;
}
.tia-btn-outline-navy .wp-block-button__link:hover {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}
.tia-btn-outline-white .wp-block-button__link {
  color: var(--wp--preset--color--white);
  border: 2px solid rgba(255, 255, 255, 0.7);
  background: transparent;
  padding: calc(0.75em - 2px) 1.6em;
}
.tia-btn-outline-white .wp-block-button__link:hover {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--primary);
}

/* ── Theme cards (Find your Rome) ─────────────────────────────── */
.tia-theme-link { display: block; text-decoration: none; }
.tia-theme-img {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 16px 36px -20px rgba(14, 29, 61, 0.35);
}
.tia-theme-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.tia-theme-link:hover .tia-theme-img img { transform: scale(1.05); }
.tia-theme-label {
  display: block;
  margin-top: 0.9rem;
  font-weight: 900;
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.25;
}
.tia-theme-link:hover .tia-theme-label { color: var(--wp--preset--color--accent-dark); }
.tia-theme-sub {
  display: block;
  margin-top: 0.2rem;
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--sm);
}

/* ── Why cards ────────────────────────────────────────────────── */
.tia-why-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  padding: 2rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tia-why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -20px rgba(14, 29, 61, 0.3);
}
.tia-why-num {
  font-weight: 900;
  color: #DC7A0E;
  font-size: var(--wp--preset--font-size--xxl);
  line-height: 1;
  margin: 0 0 0.5rem;
} /* accent #FF9C34 is 2.09:1 on white — 28px needs 3.0 */

/* ── Newsletter form + map note — mounted inside the CTA band ──
   The FC widget mounts the real form inside #tia-newsletter: this hides
   its badge+title (they'd duplicate the section H2) and aligns the font
   (Lato). ID selectors: they work no matter where #tia-newsletter ends up
   on the page. */
#tia-newsletter .tia-nl-badge,
#tia-newsletter h3 { display: none; }
#tia-newsletter, #tia-newsletter * { font-family: inherit !important; }
#tia-newsletter { margin-top: 1.25rem; }

.tia-lm-form form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.tia-lm-form input[type="email"] {
  flex: 1 1 260px;
  padding: 0.85em 1.1em;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
}
.tia-lm-form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.55); }

/* ── Map note — condensata da riquadro a riga unica sotto al form ── */
.tia-cta-guide { margin-top: var(--wp--preset--spacing--6); }
.tia-cta-map {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  color: #D8DFEE;
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.7;
}
.tia-cta-map strong { color: #fff; }
.tia-cta-map a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--wp--preset--color--accent); padding-bottom: 2px; }
.tia-cta-map a:hover { color: var(--wp--preset--color--accent); }

/* ── Blog preview ─────────────────────────────────────────────── */
.tia-blog-card .wp-block-post-featured-image img { border-radius: 12px; }
.tia-blog-card .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--primary); }
.tia-blog-card .wp-block-post-title a:hover { color: var(--wp--preset--color--accent-dark); }

/* ── Footer ───────────────────────────────────────────────────── */
.tia-footer-brand {
  color: var(--wp--preset--color--white) !important;
  font-size: var(--wp--preset--font-size--xl) !important;
  letter-spacing: 0.04em;
  margin-top: 0.5rem;
}
.tia-footer-title {
  color: var(--wp--preset--color--accent) !important;
  font-size: var(--wp--preset--font-size--sm) !important;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700 !important;
}
.tia-footer-text,
.tia-footer-text a,
.tia-footer-links li,
.tia-footer-links a {
  color: #C9D2E4;
  font-size: var(--wp--preset--font-size--sm);
  text-decoration: none;
  line-height: 1.9;
}
.tia-footer-links { list-style: none; padding-left: 0; margin: 0; }
.tia-footer-text a:hover,
.tia-footer-links a:hover { color: var(--wp--preset--color--accent); }
.tia-footer-sep {
  background: rgba(255, 255, 255, 0.14) !important;
  border: none;
  height: 1px !important;
  margin: 2.5rem 0 1.25rem;
}
/* ── Metodi di pagamento (dentro la colonna Contact del footer) ─────────────
   Vive nella colonna piu' corta della griglia: il footer e' alto quanto la
   colonna piu' alta, quindi da qui non lo allunga di un pixel. Messo in fondo
   come fascia a se' costava 59px di altezza in piu' su ogni pagina del sito.
   I marchi sono SVG inline (nessun asset, nessuna richiesta di rete): il
   quadratino bianco `.c` e' il fondo su cui i loghi sono leggibili, perche' il
   footer e' navy e i marchi sono nati per fondo chiaro.                        */
.tia-pay {
  list-style: none;
  margin: .55rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.tia-pay li { display: block; line-height: 0; }
.tia-pay svg { display: block; width: 38px; height: 24px; }
.tia-pay svg .c { fill: #ffffff; }
/* La nota vive nella stessa riga dei loghi e si prende lo spazio che avanza
   accanto all'ultimo. `flex:1` glielo assegna; `min-width` le impedisce di
   essere schiacciata a filo quando la colonna si stringe — sotto quella soglia
   scende su una riga sua, che e' il comportamento giusto, invece di spezzarsi
   in una colonna di parole singole. */
/* `.tia-pay li` azzera il line-height per togliere lo spazio fantasma sotto gli
   SVG inline. La nota pero' e' anch'essa un <li> e lo ereditava: risultava alta
   ZERO e finiva schiacciata fuori dalla riga dei loghi. Serve un selettore piu'
   specifico di `.tia-pay li`, non basta la sola classe. */
.tia-pay li.tia-pay-note {
  flex: 1 1 auto;
  min-width: 120px;
  align-self: center;
  color: #8D99B5;
  font-size: var(--wp--preset--font-size--xs);
  line-height: 1.35;
  margin: 0;
  padding-left: .15rem;
}

.tia-footer-legal { color: #8D99B5; font-size: var(--wp--preset--font-size--xs); margin-bottom: 0.35rem; }
.tia-footer-fenice { color: #8D99B5; font-size: var(--wp--preset--font-size--xs); }
.tia-footer-fenice a { color: #C9D2E4; text-decoration: none; font-weight: 700; }
.tia-footer-fenice a:hover { color: var(--wp--preset--color--accent); }
.tia-footer-mark img { border-radius: 8px; }

/* ── B2B Audio Guide Solutions ────────────────────────────────── */
.tia-b2b-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}
.tia-b2b-list li {
  color: #D8DFEE;
  font-size: var(--wp--preset--font-size--md);
  padding: 0.45rem 0;
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
}
.tia-b2b-list li span { color: var(--wp--preset--color--accent); font-weight: 900; }
/* variante per sfondi chiari (headsets/b2b) */
.tia-b2b-list.tia-b2b-list-dark li { color: var(--wp--preset--color--text); }
.tia-b2b-list.tia-b2b-list-dark li span { color: var(--wp--preset--color--accent-dark); }
.tia-b2b-photo { margin: 0; }
.tia-b2b-photo img {
  border-radius: 16px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
  display: block;
}

/* ── Mobile & tablet ──────────────────────────────────────────── */

/* ── Menu mobile: un PANNELLO, non una schermata ───────────────────────────
   Prima era `inset: 0` bianco pieno con le voci a 1.35rem. Misurato a 440x956
   (iPhone 16 Pro Max): 16 voci per 976px di contenuto in 956px di viewport —
   e quello e' il viewport TEORICO, senza la barra indirizzi e la barra schede di
   Safari. Sul telefono vero si scrollava per arrivare a "Contacts", e la barra
   webapp (z-index 280 contro i 200 di qui) copriva proprio le ultime voci.
   Due errori dentro un errore solo: la schermata bianca piena fa credere di aver
   cambiato pagina, e non lasciava spazio a 16 voci.
   Ora: fondo scurito sotto l'header (il sito resta visibile = e' un menu, non una
   pagina), pannello bianco ancorato all'header, righe alte quanto basta per il
   dito (44px) e non piu'. L'header non viene coperto, quindi la X sta dov'era
   l'hamburger e chiudere e' lo stesso gesto di aprire. */
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important;
  inset: var(--tia-header-h, 88px) 0 0 0 !important;
  z-index: 260;
  padding: 0 !important;
  background-color: rgba(10, 22, 48, 0.45) !important;
  /* ⚠️ NIENTE `backdrop-filter` qui: e' la trappola gia' scritta in cima al file
     per `.site-header` — chi ce l'ha diventa containing block per i discendenti
     `position: fixed`. Il fondo scurito da solo basta a dire "menu, non pagina".
     (Stessa ragione per cui la X qui sotto e' `absolute` e non `fixed`.) */
  /* ⚠️ WP core mette `overflow: auto` qui. Un contenitore che scorre RITAGLIA
     quello che gli esce fuori, e la X deve risalire nella fascia dell'header,
     cioe' proprio fuori. Misurata alla coordinata giusta (y=31.5, `visibility`
     visible, `opacity` 1) e comunque invisibile: `elementFromPoint` sul suo
     centro restituiva l'header sotto, non lei. Lo scroll non serve piu' qui —
     ce l'ha il pannello — quindi si toglie invece di aggirarlo. */
  overflow: visible !important;
}
/* L'hamburger sparisce quando il menu e' aperto: l'header qui resta scoperto,
   quindi senza questa riga si vedono ICONA e X insieme (prima non si notava
   perche' l'overlay bianco copriva l'header). `has-modal-open` lo mette WP core
   su <html> — non serve una classe nostra. */
html.has-modal-open .site-header .wp-block-navigation__responsive-container-open {
  display: none !important;
}
/* ...e il logo smette di essere toccabile finche' il menu e' aperto.
   Il menu si dichiara `aria-modal`, e un modale promette che dietro non si
   interagisce: prima la promessa la manteneva l'overlay bianco che copriva tutto,
   ora che l'header resta scoperto va dichiarata. Il lato TASTIERA e' gia' coperto
   dal focus-trap di WP core (dall'ultima voce il Tab torna sulla X), quindi qui
   serve solo il puntatore. Il logo resta visibile: nasconderlo toglierebbe
   all'utente il riferimento di dove si trova. */
html.has-modal-open .site-header .wp-block-site-logo { pointer-events: none; }
/* Il pannello bianco e' il CONTENT, non il dialog che lo contiene.
   ⚠️ Non e' un dettaglio di gusto: il pannello e' anche lo scroller, e uno
   scroller ritaglia tutto cio' che gli esce fuori. Con lo scroll sul dialog, la
   X — che deve risalire NELLA fascia dell'header, cioe' fuori dal riquadro —
   veniva ritagliata: era alla coordinata giusta (misurata: y=31.5) e
   semplicemente non si vedeva. Spostando lo scroller sul figlio, il dialog resta
   un contenitore senza ritaglio e la X puo' uscire.
   `overscroll-behavior: contain` = arrivato in fondo al menu il gesto non
   prosegue trascinando la pagina dietro (su iOS senza questo continua sul body).
   `dvh` e non `vh` perche' su iOS l'altezza utile cambia quando la barra di
   Safari si apre e si chiude: con `vh` il fondo del menu finirebbe sotto la
   barra proprio mentre l'utente ci arriva. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-height: calc(100svh - var(--tia-header-h, 88px));
  max-height: calc(100dvh - var(--tia-header-h, 88px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--wp--preset--color--white);
  border-radius: 0 0 18px 18px;
  box-shadow: 0 26px 50px -22px rgba(14, 29, 61, 0.5);
  padding: 0.35rem var(--tia-gutter) 1rem;
}
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child { border-bottom: 0; }
/* 1.02rem con padding 0.62rem = riga da ~44px: il minimo che si tocca senza
   sbagliare bersaglio (ACC), non un pixel di piu'.
   ⚠️ `...-container-content` DEVE stare nel selettore. WP core ha
   `.…-container.is-menu-open .…-container-content .wp-block-navigation-item__content
   { padding: 0 }` — quattro classi. La stessa regola senza `-container-content`
   ne ha tre e PERDE: misurato, le voci di primo livello restavano alte 21,2px
   (solo line-height, zero padding) mentre le sottovoci — che hanno un selettore
   piu' specifico — erano a 37,1px. Il menu sembrava scritto male, ed era invece
   una regola che non arrivava mai. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item a {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  padding: 0.62rem 0;
  display: block;
  width: 100%;
  line-height: 1.3;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a::after { display: none; }
/* Sottovoci: rientrate, piu' leggere, righe piu' basse. Sono figlie di "Tours" e
   "Services" — se pesano come i genitori il menu diventa un muro di 16 titoli
   uguali e non si legge la gerarchia. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0 0.3rem !important;
  background: transparent !important;
  min-width: 0 !important;
  width: 100% !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
  border-bottom: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container a {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--wp--preset--color--text);
  padding: 0.42rem 0 0.42rem 0.95rem;
}
/* La X torna dov'era l'hamburger: stesso punto, stesso gesto.
   ⚠️ ANCORATA AL CONTENITORE (`absolute`), non al viewport (`fixed`), e non e'
   un dettaglio: `fixed` qui NON funziona. Il contenitore ha un'animazione WP
   (`overlay-menu__fade-in-animation`) che tocca `transform`, e finche' c'e'
   Chrome tiene il containing block anche dopo che `transform` e' tornato a
   `none` — misurato: la X chiesta a 31.5px veniva resa a y=122.5, cioe' 91px
   piu' giu', l'altezza esatta dell'header. `absolute` invece si risolve sul
   contenitore in ENTRAMBI i casi (il contenitore e' `fixed`, quindi e' sempre
   un antenato posizionato): un solo comportamento, non due.
   Il contenitore parte dal bordo basso dell'header, quindi per risalire nella
   fascia dell'header l'offset e' negativo. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  position: absolute;
  top: calc((var(--tia-header-h, 88px) - 28px) / 2 - var(--tia-header-h, 88px));
  right: var(--tia-gutter);
  z-index: 300;
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--primary);
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
  width: 28px; height: 28px;
}

@media (max-width: 999px) and (min-width: 782px) {
  /* tablet: theme grid 2x2 (specificità > .wp-block-columns.is-not-stacked-on-mobile) */
  .wp-block-columns.tia-theme-grid { flex-wrap: wrap !important; }
  .wp-block-columns.tia-theme-grid > .wp-block-column { flex-basis: calc(50% - 0.75rem) !important; flex-grow: 0 !important; }
  /* tour cards: 2 colonne su tablet */
  .tia-tour-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 899px) {
  /* tablet stretto + mobile: hamburger (il breakpoint nativo WP a 600px lascia
     la nav inline sui tablet → header affollato) */
  .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
  .site-header .wp-block-navigation__responsive-container-open { display: flex !important; }
}

@media (max-width: 781px) {
  .tia-hero h1 { font-size: var(--wp--preset--font-size--mega) !important; max-width: none; }
  .tia-hero-photo::after { inset: 12px -10px -10px 12px; }
  .tia-why-card { padding: 1.5rem; }

  /* header mobile: logo + Book now compatto + hamburger */
  .tia-btn-book .wp-block-button__link { padding: 0.5em 1.1em; font-size: 0.85rem !important; }

  /* theme grid: 2 colonne su mobile (niente scroll orizzontale) —
     specificità > .wp-block-columns.is-not-stacked-on-mobile di WP */
  .wp-block-columns.tia-theme-grid { flex-wrap: wrap !important; gap: 1rem !important; }
  .wp-block-columns.tia-theme-grid > .wp-block-column { flex-basis: calc(50% - 0.5rem) !important; flex-grow: 0 !important; }
  .tia-theme-label { font-size: var(--wp--preset--font-size--md); }
  .tia-theme-sub { font-size: var(--wp--preset--font-size--xs); }

  /* blog preview: nessun override — la home usa ora la stessa griglia
     `.tia-post-grid` di /blog/ e degli archivi (2 col ≤900, 1 col ≤560).
     L'override forzava 1 colonna sotto 781px e faceva divergere la home
     dall'archivio fra 561 e 781px (U13). */

  /* tour cards: 1 colonna su mobile */
  .tia-tour-grid { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* ══════════════════════════════════════════════════════════════
   PAGINE INTERNE (about, contacts, faq, headsets, ...)
   ══════════════════════════════════════════════════════════════ */

/* Page hero — banda navy centrata, in cima a ogni pagina interna */
.tia-page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(620px 380px at 88% 10%, rgba(255, 156, 52, 0.16), transparent 60%),
    radial-gradient(560px 340px at 6% 100%, rgba(255, 255, 255, 0.05), transparent 60%),
    var(--wp--preset--color--primary);
}
.tia-page-hero .tia-eyebrow { color: var(--wp--preset--color--accent); }
.tia-page-hero h1 { color: #fff; }
.tia-page-hero .tia-page-sub { color: #D8DFEE; }
.tia-eyebrow {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Prosa leggibile (colonna stretta, ariosa) */
.tia-prose p { color: var(--wp--preset--color--text); line-height: 1.8; }
.tia-prose h2 { margin-top: 2.5rem; }
.tia-prose h3 { margin-top: 2rem; color: var(--wp--preset--color--primary); }
.tia-prose a { color: var(--wp--preset--color--accent-dark); font-weight: 600; }

/* Blocco Q&A AI-readable (about) */
.tia-qa { border-top: 1px solid var(--wp--preset--color--border); }
.tia-qa h3 {
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--lg);
  margin: 0 0 0.5rem;
}
.tia-qa p { color: var(--wp--preset--color--text-muted); line-height: 1.75; margin: 0; }

/* FAQ accordion nativo <details> */
.tia-faq details {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  background: var(--wp--preset--color--white);
  margin-bottom: 0.9rem;
  overflow: hidden;
}
.tia-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 1.3rem;
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.tia-faq summary::-webkit-details-marker { display: none; }
.tia-faq summary::after {
  content: "+";
  color: var(--wp--preset--color--accent-dark);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.2s ease;
}
.tia-faq details[open] summary::after { transform: rotate(45deg); }
.tia-faq .tia-faq-a {
  padding: 0 1.3rem 1.2rem;
  color: var(--wp--preset--color--text-muted);
  line-height: 1.75;
}

/* ── FAQ in home: generated from the same source as /faq/ ──
   The generated wrapper ALSO carries class="tia-faq" (rules above: bordered
   box, rotating "+", etc.) — .tia-faq-item only adds vertical spacing
   between items; it isn't a separate accordion. */
.tia-faq-item {
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding: var(--wp--preset--spacing--3) 0;
}
.tia-faq-item summary { cursor: pointer; font-weight: 600; }
.tia-faq-a { color: var(--wp--preset--color--text-muted); padding-top: .5rem; }

/* Contact cards */
.tia-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.tia-contact-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  padding: 1.75rem;
  text-align: center;
}
.tia-contact-card .tia-cc-ico { font-size: 1.8rem; line-height: 1; }
.tia-contact-card h3 {
  font-size: var(--wp--preset--font-size--md);
  color: var(--wp--preset--color--primary);
  margin: 0.7rem 0 0.35rem;
}
.tia-contact-card a, .tia-contact-card p { color: var(--wp--preset--color--text-muted); text-decoration: none; }
.tia-contact-card a:hover { color: var(--wp--preset--color--accent-dark); }

@media (max-width: 781px) {
  .tia-contact-grid { grid-template-columns: 1fr; }
}

/* ── Guide / Maps pages (QR brochure) ─────────────────────────── */
/* Download card (free guide / free map) */
.tia-dl-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  box-shadow: 0 18px 50px -28px rgba(21, 43, 90, 0.35);
  padding: 1.9rem 1.7rem;
}
.tia-dl-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.1rem; }
.tia-dl-ico {
  flex: 0 0 52px; height: 66px;
  background: var(--wp--preset--color--primary);
  border-radius: 6px; position: relative;
  box-shadow: 4px 4px 0 var(--wp--preset--color--accent);
}
.tia-dl-ico::after {
  content: "PDF"; position: absolute; inset: auto 0 8px 0;
  text-align: center; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: 0.06em;
}
.tia-dl-badge {
  display: inline-block; background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--primary-dark);
  font-size: var(--wp--preset--font-size--xs); font-weight: 900;
  letter-spacing: 0.1em; text-transform: uppercase; border-radius: 99px; padding: 3px 11px; margin-bottom: 7px;
}
.tia-dl-card h2 { font-size: var(--wp--preset--font-size--xl); color: var(--wp--preset--color--primary); margin: 0 0 6px; }
.tia-dl-card > p { color: var(--wp--preset--color--text-muted); margin: 0; }
/* form (guide signup) */
.tia-guide-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.6rem; margin-top: 1.2rem; }
.tia-guide-form input[type=text], .tia-guide-form input[type=email] {
  border: 1.5px solid var(--wp--preset--color--border); border-radius: 8px;
  padding: 0.75em 0.9em; font: inherit; font-size: 0.95rem; width: 100%; box-sizing: border-box;
}
.tia-guide-form input:focus { outline: 2px solid var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }
.tia-guide-btn {
  background: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary-dark);
  border: 0; border-radius: 8px; font: inherit; font-weight: 900; font-size: 0.95rem;
  padding: 0.75em 1.4em; cursor: pointer; white-space: nowrap; transition: background 0.15s;
}
.tia-guide-btn:hover { background: var(--wp--preset--color--accent-dark); color: #fff; }
/* ── Riga di consenso — UNICO stile per TUTTI i form del sito (U10) ──────────
   Minimal e in linea con l'estetica del form: nessuna cornice, una sola riga.
   L'intera riga è l'area cliccabile e non scende MAI sotto i 44px (tap target
   iOS/WCAG): prima il bersaglio era il solo quadratino da ~13px. */
.tia-guide-consent {
  grid-column: 1/-1; font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
  display: flex; gap: 0.6rem; align-items: center;
  min-height: 44px; padding: 0.35rem 0; cursor: pointer; line-height: 1.5;
}
.tia-guide-consent input[type="checkbox"] {
  flex: 0 0 20px; width: 20px; height: 20px; margin: 0; cursor: pointer;
  accent-color: var(--wp--preset--color--primary);
}
.tia-guide-consent:focus-within { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; border-radius: 6px; }
.tia-guide-consent a { color: var(--wp--preset--color--accent-dark); }
/* Nota informativa (non è un consenso: nessuna casella da spuntare) */
.tia-form-notice {
  grid-column: 1/-1; font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted); line-height: 1.5; margin: 0.2rem 0 0;
}
.tia-form-notice a { color: var(--wp--preset--color--accent-dark); }
.tia-guide-hp { position: absolute; left: -9999px; opacity: 0; height: 0; }
.tia-guide-success { display: none; background: #f0f7f1; border: 1px solid #bcd9c2; color: #1d5c2e; border-radius: 8px; padding: 0.9rem 1rem; font-weight: 700; margin-top: 1rem; }

/* TOC pill nav */
.tia-toc { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 2rem 0 0; }
.tia-toc a { font-size: var(--wp--preset--font-size--sm); font-weight: 700; color: var(--wp--preset--color--primary); background: var(--wp--preset--color--bg-alt); border-radius: 99px; padding: 0.45rem 1rem; text-decoration: none; }
.tia-toc a:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary-dark); }

/* Numbered guide list */
.tia-guide-list { list-style: none; counter-reset: gl; margin: 0; padding: 0; }
.tia-guide-list li { counter-increment: gl; display: flex; gap: 0.9rem; padding: 0.85rem 0; border-bottom: 1px solid var(--wp--preset--color--border); color: var(--wp--preset--color--text); line-height: 1.6; }
.tia-guide-list li::before { content: counter(gl, decimal-leading-zero); font-weight: 900; color: var(--wp--preset--color--accent-dark); flex: 0 0 30px; }
.tia-guide-list b { color: var(--wp--preset--color--primary); }
.tia-guide-list a { color: var(--wp--preset--color--primary); text-decoration: underline; text-decoration-color: var(--wp--preset--color--border); text-underline-offset: 3px; }
.tia-guide-list a:hover { color: var(--wp--preset--color--accent-dark); }

@media (max-width: 781px) {
  .tia-guide-form { grid-template-columns: 1fr; }
}

/* ── Map viewer (illustrated map, tap-to-zoom) ────────────────── */
.tia-map-viewer { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px -26px rgba(21, 43, 90, 0.4); border: 1px solid var(--wp--preset--color--border); }
.tia-map-link { display: block; position: relative; }
.tia-map-link img { display: block; width: 100%; height: auto; }
.tia-map-zoom {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(21, 43, 90, 0.9); color: #fff;
  font-size: var(--wp--preset--font-size--xs); font-weight: 700;
  padding: 0.4em 0.85em; border-radius: 99px; pointer-events: none;
  backdrop-filter: blur(2px);
}
/* Legend — 2 col desktop, 1 col mobile */
.tia-map-legend {
  list-style: none; padding: 0; margin: 0;
  columns: 2; column-gap: 2.5rem;
}
.tia-map-legend li {
  break-inside: avoid;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--wp--preset--color--border);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text);
}
.tia-map-legend b {
  display: inline-block; min-width: 1.9em;
  color: var(--wp--preset--color--accent-dark); font-weight: 900;
}
@media (max-width: 640px) {
  .tia-map-legend { columns: 1; }
}

/* ── Value cards with icon (About: what/why) ──────────────────── */
.tia-value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.tia-value-grid.tia-value-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 781px) { .tia-value-grid.tia-value-grid-3 { grid-template-columns: 1fr; } }
.tia-value-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px; padding: 1.75rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tia-value-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(14, 29, 61, 0.3); }
.tia-value-ico { font-size: 1.7rem; line-height: 1; }
.tia-value-card h3 { color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--lg); margin: 0.7rem 0 0.4rem; }
.tia-value-card p { color: var(--wp--preset--color--text-muted); margin: 0; line-height: 1.65; }

/* ── Story split (text + list) ────────────────────────────────── */
.tia-story-steps { list-style: none; padding: 0; margin: 1.25rem 0 0; counter-reset: st; }
.tia-story-steps li { counter-increment: st; display: flex; gap: 1rem; padding: 0.8rem 0; align-items: flex-start; }
.tia-story-steps li::before {
  content: counter(st); flex: 0 0 32px; height: 32px; border-radius: 50%;
  background: var(--wp--preset--color--primary); color: #fff; font-weight: 900;
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
.tia-story-steps b { color: var(--wp--preset--color--primary); }
.tia-story-steps span { color: var(--wp--preset--color--text-muted); line-height: 1.6; }

/* ── Testimonials ─────────────────────────────────────────────── */
.tia-review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.tia-review-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px; padding: 1.6rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.tia-review-stars { color: var(--wp--preset--color--accent-dark); letter-spacing: 1px; font-size: 0.95rem; }
.tia-review-card blockquote { margin: 0; color: var(--wp--preset--color--text); line-height: 1.6; font-size: var(--wp--preset--font-size--sm); }
.tia-review-author { margin-top: auto; font-size: var(--wp--preset--font-size--sm); }
.tia-review-author b { color: var(--wp--preset--color--primary); }
.tia-review-author span { color: var(--wp--preset--color--text-muted); }

@media (max-width: 781px) {
  .tia-value-grid { grid-template-columns: 1fr; }
  .tia-review-grid { grid-template-columns: 1fr; }
}

/* ── Story cards (About: replaces plain numbered list) ────────── */
/* U8: la sezione "Our story" ora vive nel content-width delle sezioni sotto (960px).
   Il testo introduttivo resta stretto (misura di lettura), i box usano tutta la
   larghezza → i 4 container sono allineati al resto della pagina. */
.tia-story-intro { max-width: 760px; margin-inline: auto; }
.tia-story-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 1.75rem; }
.tia-story-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px; padding: 1.5rem 1.35rem;
  position: relative;
}
.tia-story-card .tia-sc-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--wp--preset--color--primary); color: #fff;
  font-weight: 900; font-size: 1rem; margin-bottom: 0.85rem;
}
.tia-story-card h3 { color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--md); margin: 0 0 0.4rem; }
.tia-story-card p { color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--sm); line-height: 1.6; margin: 0; }
@media (max-width: 900px) { .tia-story-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tia-story-grid { grid-template-columns: 1fr; } }

/* ── FAQ 2-column by theme ────────────────────────────────────── */
.tia-faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 2.5rem; align-items: start; }
.tia-faq-cols .tia-faq-group h2 {
  font-size: var(--wp--preset--font-size--lg) !important;
  color: var(--wp--preset--color--primary);
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--wp--preset--color--accent);
}
@media (max-width: 781px) { .tia-faq-cols { grid-template-columns: 1fr; } }

/* ── Contact map + form ───────────────────────────────────────── */
.tia-map-embed {
  position: relative; border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 50px -28px rgba(21, 43, 90, 0.4);
  border: 1px solid var(--wp--preset--color--border);
  aspect-ratio: 16 / 8;
}
.tia-map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 640px) { .tia-map-embed { aspect-ratio: 4 / 3; } }

.tia-cform { display: flex; flex-direction: column; gap: 0.9rem; }
.tia-cform label { font-size: var(--wp--preset--font-size--sm); font-weight: 700; color: var(--wp--preset--color--primary); display: block; margin-bottom: 0.3rem; }
.tia-cform input, .tia-cform textarea {
  width: 100%; box-sizing: border-box; border: 1.5px solid var(--wp--preset--color--border); border-radius: 9px;
  padding: 0.8em 1em; font: inherit; font-size: 0.98rem; background: var(--wp--preset--color--white);
}
.tia-cform input:focus, .tia-cform textarea:focus { outline: 2px solid var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }
.tia-cform textarea { resize: vertical; min-height: 130px; }
.tia-cform-hp { position: absolute; left: -9999px; opacity: 0; height: 0; }
.tia-cform-btn {
  background: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary-dark);
  border: 0; border-radius: 9px; font: inherit; font-weight: 900; font-size: 1rem;
  padding: 0.85em 1.6em; cursor: pointer; transition: background 0.15s; align-self: flex-start;
}
.tia-cform-btn:hover { background: var(--wp--preset--color--accent-dark); color: #fff; }
.tia-cform-success { display: none; background: #f0f7f1; border: 1px solid #bcd9c2; color: #1d5c2e; border-radius: 9px; padding: 0.95rem 1.1rem; font-weight: 700; }
/* `.tia-cform label` è display:block, grassetto e navy: vincerebbe sulla riga di consenso
   e la farebbe sembrare un'etichetta di campo. Qui torna minimal (U10). */
.tia-cform label.tia-guide-consent {
  display: flex; margin-bottom: 0;
  font-weight: 400; color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--xs);
}
.tia-cform select {
  width: 100%; box-sizing: border-box; border: 1.5px solid var(--wp--preset--color--border); border-radius: 9px;
  padding: 0.8em 1em; font: inherit; font-size: 0.98rem; background: var(--wp--preset--color--white);
}
.tia-cform select:focus { outline: 2px solid var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }
/* Messaggio di errore reso da fenice-shield.js */
.fenice-shield-error { color: #b91c1c; font-size: 0.92rem; margin: 0.6rem 0 0; font-weight: 700; }

/* ── B2B quote form — card chiara dentro la sezione CTA scura ── */
.tia-qform-card {
  background: var(--wp--preset--color--white); border-radius: 14px;
  padding: 1.7rem 1.5rem; margin-top: 2.2rem; text-align: left;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.tia-qform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.tia-qform-opt { font-weight: 400; color: var(--wp--preset--color--text-muted); }
@media (max-width: 640px) {
  .tia-qform-row { grid-template-columns: 1fr; }
  .tia-qform-card { padding: 1.3rem 1.1rem; }
}

/* ── Footer: free map/guide band (global, hidden on maps & guide pages) ── */
.tia-footer-mapband {
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px; padding: 1.6rem 1.8rem; margin-bottom: 2.5rem;
}
.tia-footer-mapband .tia-fmb-badge {
  display: inline-block; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary-dark);
  font-size: var(--wp--preset--font-size--xs); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 99px; padding: 3px 11px; margin-bottom: 8px;
}
.tia-footer-mapband h3 { color: #fff; font-size: var(--wp--preset--font-size--lg); margin: 0 0 4px; }
.tia-footer-mapband .tia-fmb-text p { color: #C9D2E4; font-size: var(--wp--preset--font-size--sm); margin: 0; max-width: 46ch; line-height: 1.55; }
.tia-footer-mapband .tia-fmb-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.tia-fmb-btn {
  display: inline-block; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary-dark);
  font-weight: 800; text-decoration: none; border-radius: 9px; padding: 0.7em 1.4em; white-space: nowrap; transition: background 0.15s;
}
.tia-fmb-btn:hover { background: var(--wp--preset--color--accent-dark); color: #fff; }
.tia-fmb-btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.55); padding: calc(0.7em - 2px) calc(1.4em - 2px); }
.tia-fmb-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
/* ── REGOLA "UNA SUPERFICIE LEAD PER PAGINA" ─────
   La banda mappa/guida pre-footer NON si ripete su ogni pagina:
   visibile SOLO nel contesto blog (chi legge contenuto → guida gratis).
   Ovunque altro la pagina ha già la sua CTA contestuale (booking/quote/form). */
/* The guide/map band and the newsletter widget aren't needed on blog pages
   (those links already live in the footer) → they stay dormant everywhere
   by default (display:none). The newsletter widget only shows where
   marked .tia-lm-form — today that's the div inside .tia-cta-guide, in the
   home's final CTA. */
.tia-footer-mapband { display: none; }
#tia-newsletter:not(.tia-lm-form) { display: none; }
@media (max-width: 700px) {
  .tia-footer-mapband { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ══════════════════════════════════════════════════════════════
   B2 batch 2b — headsets · b2b · reviews · transfers · legal
   ══════════════════════════════════════════════════════════════ */

/* ── Tour grid: variante 2 card centrate (transfers) ──────────── */
.tia-tour-grid.tia-tour-grid-2 { grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; }
@media (max-width: 781px) { .tia-tour-grid.tia-tour-grid-2 { grid-template-columns: 1fr; } }

/* ── Pricing cards (headsets 3-tier · b2b packs) ──────────────── */
.tia-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
.tia-price-grid.tia-price-grid-2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.tia-price-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  padding: 2rem 1.8rem 1.8rem;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tia-price-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -22px rgba(14, 29, 61, 0.35); }
.tia-price-card.tia-price-popular {
  border: 2px solid var(--wp--preset--color--accent);
  box-shadow: 0 18px 44px -24px rgba(255, 156, 52, 0.55);
}
.tia-price-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary-dark);
  font-size: var(--wp--preset--font-size--xs); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 99px; padding: 4px 14px; white-space: nowrap;
}
.tia-price-name { font-weight: 900; color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--lg); }
.tia-price-sub { color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--sm); margin-top: 2px; }
.tia-price-value { margin: 1.1rem 0 0.2rem; color: var(--wp--preset--color--primary); }
.tia-price-value strong { font-size: var(--wp--preset--font-size--giga); font-weight: 900; line-height: 1; }
.tia-price-value span { color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--sm); }
.tia-price-list { list-style: none; margin: 1.2rem 0 1.4rem; padding: 0; text-align: left; }
.tia-price-list li {
  display: flex; gap: 0.6rem; align-items: baseline;
  padding: 0.45rem 0; color: var(--wp--preset--color--text);
  border-bottom: 1px dashed var(--wp--preset--color--border);
  font-size: var(--wp--preset--font-size--sm); line-height: 1.5;
}
.tia-price-list li:last-child { border-bottom: 0; }
.tia-price-list li span { color: var(--wp--preset--color--accent-dark); font-weight: 900; }
.tia-price-cta {
  margin-top: auto; display: inline-block;
  background: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary-dark);
  font-weight: 800; text-decoration: none; border-radius: 9px; padding: 0.75em 1.5em; transition: background 0.15s;
}
.tia-price-cta:hover { background: var(--wp--preset--color--accent-dark); color: #fff; }
.tia-price-note { color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--xs); margin-top: 0.7rem; }
@media (max-width: 999px) and (min-width: 782px) { .tia-price-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (max-width: 781px) {
  .tia-price-grid, .tia-price-grid.tia-price-grid-2 { grid-template-columns: 1fr; gap: 1.4rem; }
  .tia-price-card.tia-price-popular { order: -1; }
}

/* ── Reviews: the page's real argument, given typographic weight ──
   Was a plain muted paragraph, visually identical to any other subhead.
   Text is untouched (only a <strong> around the closing clause was added,
   inline — same words, same length); what changes is presentation: a
   tinted panel, an accent rule instead of the sitewide blockquote's
   border-left-only treatment (kept distinct from `.tia-single-body
   blockquote` on purpose — this is a page thesis, not an inline quote),
   a bigger type size, and an oversized quote-mark watermark.
   NOT named `.tia-proof`: that class already exists on the home page
   (front-page.html, the "39 tours / 1,400+ reviews" stat strip) and is
   one of the home band-rhythm's alternating rows — giving it its own
   background here would make it a THIRD band that declares its own
   fill, which tia-home-bands-guard.py rejects (it allows exactly two:
   .tia-hero and .tia-sec-cta). This page needed its own class. */
.tia-rev-quote {
  position: relative;
  overflow: hidden;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 2.5rem 2.75rem;
  background: var(--wp--preset--color--bg-alt);
  border-left: 5px solid var(--wp--preset--color--accent);
  border-radius: 4px 20px 20px 4px;
}
.tia-rev-quote::before {
  content: "\201C";
  position: absolute;
  top: -1.1rem;
  left: 0.5rem;
  font-size: 7rem;
  font-weight: 900;
  line-height: 1;
  color: var(--wp--preset--color--accent);
  opacity: 0.14;
}
.tia-rev-quote p {
  position: relative;
  margin: 0;
  color: var(--wp--preset--color--text);
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.75;
}
.tia-rev-quote strong { color: var(--wp--preset--color--primary); font-weight: 800; }
@media (max-width: 781px) {
  .tia-rev-quote { padding: 2.1rem 1.5rem 2rem 1.75rem; border-radius: 4px 16px 16px 4px; }
  .tia-rev-quote::before { font-size: 5.5rem; top: -0.8rem; }
}

/* ── Reviews: platform cards (Google / GetYourGuide / Tripadvisor) — read and write ──
   The card is not a link: it holds two. No hover-lift on the card itself — lifting a
   non-clickable block promises a click that isn't there; the affordance is on the buttons.
   This WAS `display:grid` + `.tia-plat-card{height:100%}`. Measured on the real
   page: the grid row auto-sized to 349px while the cards (identical markup, identical CSS)
   painted 408.8px — a ~60px overflow that let the next row bleed into "Write a review"
   (unclickable on mobile's single column) and, on desktop, into the paragraph below the
   grid. Root cause: a CSS Grid row that auto-sizes from content, combined with a
   percentage `height` on the grid item (100% of that same row) and a flex-grow
   descendant (`.tia-plat-sub`), is a circular reference — Chrome resolves the row's
   *intrinsic* size one way and the *stretched* item a different, smaller way, so the
   item's own flex layout runs against a height it then ignores. Swapping to `display:flex`
   removes the percentage entirely: a flex line's cross-size is the max of its items'
   *actual* hypothetical sizes (no circularity), then every item is stretched to that,
   which is the well-defined, no-quirk version of the same "equal-height cards" outcome.
   `height:auto` alone (i.e. same grid, just dropping the percentage) also passed every
   check below — but it depends on the exact same auto-track algorithm that produced the
   349/408.8 mismatch in the first place, so it's not the fix to keep: it happened to work
   here, not because the circularity was removed. */
.tia-plat-grid { display: flex; gap: 1.5rem; align-items: stretch; }
.tia-plat-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px; padding: 1.8rem 1.4rem; text-align: center; text-decoration: none;
  flex: 1 1 0; min-width: 0;
}
.tia-plat-ico { font-size: 2rem; line-height: 1; }
.tia-plat-name { font-weight: 900; color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--md); }
/* Rating + count PER PLATFORM (Google/GYG/Tripadvisor never merge into one
   number: they carry different weight, and the hero badge above shows only
   the review COUNT, never a score). The source line says where the number
   comes from: GetYourGuide has no official supplier-wide rating, so this is
   a sum across our own tours — that has to be said, or it reads like a
   figure GYG itself published. */
.tia-plat-rating { display: flex; flex-direction: column; gap: 0.15rem; margin: 0.1rem 0 0.5rem; }
.tia-plat-rating-value { font-weight: 800; color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--md); }
.tia-plat-rating-sep { color: var(--wp--preset--color--text-muted); font-weight: 600; }
.tia-plat-rating-src { color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--xs); line-height: 1.4; }
/* flex:1 on the description: it absorbs the length differences, so the first button
   starts at the same height in all three cards. With margin-top:auto on the actions the
   opposite happened — equal card heights, but a one-button card sat ~25px lower. */
.tia-plat-sub { color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--sm); line-height: 1.5; flex: 1 1 auto; }
.tia-plat-actions {
  padding-top: 1.1rem; width: 100%;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.tia-plat-btn {
  /* border-box, or min-height applies to the content box only and the button ends up
     73px tall (padding and border added on top of the minimum). */
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.7rem 1.1rem; border-radius: 999px;
  font-weight: 700; font-size: var(--wp--preset--font-size--sm); line-height: 1.25;
  text-decoration: none; text-align: center;
  /* Colours follow the theme's existing button language (orange with navy text = 7.97
     contrast). Orange as TEXT on white scores 2.93 — below WCAG even for large text. */
  border: 1.5px solid var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary); background: transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.tia-plat-btn:hover, .tia-plat-btn:focus-visible {
  background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white);
}
.tia-plat-btn-write {
  background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--primary);
}
.tia-plat-btn-write:hover, .tia-plat-btn-write:focus-visible {
  background: var(--wp--preset--color--accent-dark); border-color: var(--wp--preset--color--accent-dark);
  /* white on accent-dark = 5.22:1; navy on accent-dark would be 2.64:1 */
  color: var(--wp--preset--color--white);
}
/* GetYourGuide note: sits below the single button, where the eye looks for a second one */
.tia-plat-note {
  margin: 0.7rem 0 0; color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--sm); line-height: 1.5;
  /* Reads as an intentional annotation, not a missing second button —
     the asymmetry (GetYourGuide has one action, the other two have two)
     is by design and stays; this only makes the explanation look chosen
     rather than accidental. */
  background: var(--wp--preset--color--bg-alt);
  border-left: 3px solid var(--wp--preset--color--accent);
  border-radius: 0 8px 8px 0;
  padding: 0.65rem 0.9rem;
  text-align: left;
}
@media (max-width: 781px) { .tia-plat-grid { flex-direction: column; gap: 1.1rem; } }

/* ── Reviews: platform card identity + elevation ──
   Adds paint only (shadow, one accent border edge, an icon tint, two
   type-scale bumps) on top of the flex fix above. Nothing here touches
   display/flex-basis/height/width/min-width, so the equal-height and
   hit-test guarantees documented above are unaffected — verified after
   this change, not assumed. */
.tia-plat-card { box-shadow: 0 16px 34px -26px rgba(14, 29, 61, 0.35); }
.tia-plat-card.tia-plat-card-google      { border-top: 4px solid var(--wp--preset--color--primary); }
.tia-plat-card.tia-plat-card-gyg         { border-top: 4px solid var(--wp--preset--color--accent); }
.tia-plat-card.tia-plat-card-tripadvisor { border-top: 4px solid #0A7A45; }
.tia-plat-ico {
  display: flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%; background: var(--wp--preset--color--bg-alt);
  font-size: 1.8rem; line-height: 1;
}
.tia-plat-card-google .tia-plat-ico      { background: rgba(21, 43, 90, 0.09); }
.tia-plat-card-gyg .tia-plat-ico         { background: rgba(255, 156, 52, 0.16); }
.tia-plat-card-tripadvisor .tia-plat-ico { background: rgba(10, 122, 69, 0.12); }
.tia-plat-name { font-size: var(--wp--preset--font-size--lg); letter-spacing: -0.01em; }
.tia-plat-rating-value { font-size: var(--wp--preset--font-size--xl); }
/* Same green the rest of the site already uses for a verified rating
   (.tia-mini-stars, .tia-tc-stars) — this page used a plain glyph
   before, out of step with that convention. */
.tia-plat-star { color: #0A7A45; font-size: 0.9em; }

/* ── Reviews: mini-card prodotto (foto + stelle, feed Bokun/TA) ── */
.tia-mini-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.tia-mini-card {
  display: flex; flex-direction: column;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px; overflow: hidden; text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tia-mini-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -18px rgba(14, 29, 61, 0.35); }
.tia-mini-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.tia-mini-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.tia-mini-card:hover .tia-mini-img img { transform: scale(1.05); }
.tia-mini-rank {
  position: absolute; top: 0.5rem; left: 0.5rem;
  background: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary-dark);
  font-size: var(--wp--preset--font-size--xs); font-weight: 900;
  border-radius: 999px; padding: 2px 9px;
}
.tia-mini-body { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0.8rem 0.85rem; flex: 1; }
.tia-mini-stars { color: #0A7A45; font-weight: 800; font-size: var(--wp--preset--font-size--xs); }
.tia-mini-stars span { color: var(--wp--preset--color--text-muted); font-weight: 600; }
.tia-mini-title { color: var(--wp--preset--color--primary); font-weight: 700; font-size: var(--wp--preset--font-size--xs); line-height: 1.35; }
.tia-mini-cta { margin-top: auto; padding-top: 0.35rem; color: var(--wp--preset--color--accent-dark); font-weight: 700; font-size: var(--wp--preset--font-size--xs); }
.tia-mini-card:hover .tia-mini-cta { text-decoration: underline; }
@media (max-width: 999px) and (min-width: 782px) { .tia-mini-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 781px) { .tia-mini-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; } }

/* ── Reviews: per-tour rating rows (feed Bokun/Tripadvisor) ───── */
.tia-rating-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--wp--preset--color--border); border-radius: 14px; overflow: hidden; background: var(--wp--preset--color--white); }
.tia-rating-row {
  display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 0.95rem 1.3rem; text-decoration: none;
  border-bottom: 1px solid var(--wp--preset--color--border);
  transition: background 0.15s;
}
.tia-rating-row:last-child { border-bottom: 0; }
.tia-rating-row:hover { background: var(--wp--preset--color--bg-alt); }
.tia-rating-title { color: var(--wp--preset--color--primary); font-weight: 700; font-size: var(--wp--preset--font-size--sm); line-height: 1.4; }
.tia-rating-score { white-space: nowrap; color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--sm); }
.tia-rating-score b { color: #0A7A45; font-weight: 900; }
@media (max-width: 640px) {
  .tia-rating-row { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}

/* ── B3: pagine prodotto (generate da tia-tour-page-gen.py) ───── */
.tia-prod-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.1rem; }
.tia-chip {
  display: inline-block; background: rgba(255, 255, 255, 0.1); color: #D8DFEE;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px;
  font-size: var(--wp--preset--font-size--sm); font-weight: 600; padding: 0.35em 1em; white-space: nowrap;
}
.tia-chip b { color: #fff; }
/* chip come link (hub /tours/: salto alle sezioni) */
a.tia-chip { text-decoration: none; transition: background 0.15s; }
a.tia-chip:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.tia-chip-rating { color: #7CE3AE; }
.tia-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.tia-gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: 12px; border: 1px solid var(--wp--preset--color--border);
}
.tia-incl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.tia-incl-card {
  background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px; padding: 1.6rem 1.7rem;
}
.tia-incl-card h3 { margin: 0 0 0.6rem; color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--lg); }
.tia-incl-card ul { list-style: none; margin: 0; padding: 0; }
.tia-incl-card li {
  display: flex; gap: 0.6rem; align-items: baseline; padding: 0.4rem 0;
  color: var(--wp--preset--color--text); font-size: var(--wp--preset--font-size--sm); line-height: 1.55;
}
.tia-incl-card li::before { content: "✓"; color: #0A7A45; font-weight: 900; }
.tia-incl-card.tia-incl-no li::before { content: "✕"; color: var(--wp--preset--color--text-muted); }
/* prodotto senza "excluded": la card unica si centra a piena riga */
.tia-incl-grid .tia-incl-card:only-child { grid-column: 1 / -1; max-width: 640px; margin: 0 auto; width: 100%; }
.tia-fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.tia-fact {
  background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px; padding: 1rem 1.2rem;
}
.tia-fact-label { font-size: var(--wp--preset--font-size--xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--text-muted); }
.tia-fact-value { color: var(--wp--preset--color--primary); font-weight: 700; margin-top: 2px; font-size: var(--wp--preset--font-size--sm); line-height: 1.45; }
.tia-fact-value a { color: var(--wp--preset--color--accent-dark); }
@media (max-width: 999px) { .tia-fact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 781px) {
  .tia-gallery { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .tia-incl-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .tia-fact-grid { grid-template-columns: 1fr; }
}

/* ── Booking in-page (widget Bokun inline nelle pagine prodotto) ── */
.tia-book-widget {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  overflow: hidden;
  min-height: 480px;
}
.tia-book-widget .bokunWidget { min-height: 480px; }

/* ── Step 1 buildplan-fase2: layout prodotto a 2 colonne + side panel sticky ──
   Desktop: contenuto a sinistra, booking panel fisso a destra da "The experience"
   fino alla CTA finale. Mobile/tablet (<1000px): barra fissa in basso che alza il
   calendario come bottom sheet (pattern webapp travel). */
.tia-prod-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 3rem;
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
  padding: 3.5rem var(--tia-gutter) 3rem;
}
.tia-prod-main { min-width: 0; }
.tia-ps { margin-bottom: 3rem; }
.tia-ps:last-child { margin-bottom: 0; }
.tia-ps > h2 { margin: 0 0 1.1rem; }
.tia-ps-alt {
  background: var(--wp--preset--color--bg-alt);
  border-radius: 16px;
  padding: 1.8rem;
}
.tia-ps-photo { margin: 1.4rem 0 0; }
.tia-ps-photo img {
  width: 100%; display: block;
  border-radius: 16px;
  box-shadow: 0 20px 50px -26px rgba(21, 43, 90, 0.4);
}
.tia-prod-main .tia-fact-grid { grid-template-columns: repeat(2, 1fr); }
.tia-prod-main .tia-incl-grid { grid-template-columns: 1fr 1fr; }
.tia-prod-main .tia-gallery { grid-template-columns: repeat(2, 1fr); }
.tia-prod-reviews { color: var(--wp--preset--color--text-muted); }

/* panel */
.tia-prod-side {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
}
.tia-book-panel {
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 18px;
  box-shadow: 0 24px 60px -30px rgba(14, 29, 61, 0.45);
}
.tia-bp-head {
  background:
    radial-gradient(420px 220px at 90% 0%, rgba(255, 156, 52, 0.18), transparent 60%),
    var(--wp--preset--color--primary);
  color: #fff;
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.tia-bp-price { font-size: var(--wp--preset--font-size--sm); color: #D8DFEE; }
.tia-bp-price strong { display: block; color: #fff; font-size: var(--wp--preset--font-size--xl); font-weight: 900; line-height: 1.1; }
.tia-bp-note { font-size: var(--wp--preset--font-size--xs); color: #D8DFEE; text-align: right; line-height: 1.4; }
/* Departure window notice. Rendered only for products whose calendar does not
   start (or ends) within the usual booking horizon; the markup is omitted
   entirely when there is nothing to state, so no empty state is needed here.
   Full-width row under price and note, in the brand accent. */
.tia-bp-window {
	flex: 1 0 100%;
	margin-top: .5rem;
	padding: .35rem .6rem;
	border-radius: 6px;
	background: rgba(255, 156, 52, .14);
	border: 1px solid rgba(255, 156, 52, .45);
	color: #FFD9AC;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
}
.tia-bp-close { display: none; }
/* iframe: altezza naturale, mai un contenitore che scrolla (l'iframe cattura wheel/touch) */
.tia-book-panel .bokunWidget { min-height: 420px; flex: none; overflow: visible; }
.tia-bp-head { border-radius: 18px 18px 0 0; }
.tia-bp-foot {
  border-top: 1px solid var(--wp--preset--color--border);
  padding: 0.7rem 1.2rem;
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
  text-align: center;
}
.tia-bp-foot a { color: var(--wp--preset--color--accent-dark); font-weight: 700; }

/* barra mobile + sheet */
.tia-book-bar { display: none; }
.tia-sheet-backdrop { display: none; }

@media (max-width: 999px) {
  .tia-prod-layout { grid-template-columns: 1fr; padding-top: 2.5rem; gap: 0; }
  .tia-prod-main .tia-fact-grid { grid-template-columns: 1fr; }
  .tia-prod-main .tia-incl-grid { grid-template-columns: 1fr; }

  /* Booking = MODALE FULL-SCREEN su mobile:
     il pannello viene promosso a UN UNICO scroller full-viewport (100dvh) con header
     STICKY. Struttura = scroll di root, l'unica che scorre in modo affidabile sopra un
     iframe cross-origin che cattura wheel/touch. L'iframe resta ad altezza NATURALE
     (mai cappato: Bokun lo ridimensiona quando espande il riepilogo → il bottone Book
     resta sempre raggiungibile). Chiuso = pannello nel flusso (SSR-safe, JS-off-safe). */
  .tia-prod-side { position: static; }
  .tia-book-panel {
    overflow: visible;
    border-radius: 16px;
    margin-bottom: 5.5rem;          /* spazio per la barra fissa (stato chiuso) */
  }
  .tia-book-panel .bokunWidget { min-height: 0; flex: none; overflow: visible; }
  .tia-bp-close { display: none; }

  /* ── APERTA: lo STESSO pannello diventa lo scroller full-screen ── */
  body.tia-book-open .tia-book-panel {
    position: fixed; inset: 0; z-index: 320;
    height: 100svh; height: 100dvh;
    margin: 0; border: 0; border-radius: 0; box-shadow: none;
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--wp--preset--color--white);
  }
  body.tia-book-open .tia-bp-head { position: sticky; top: 0; z-index: 2; border-radius: 0; }
  body.tia-book-open .tia-bp-foot { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  body.tia-book-open .tia-bp-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 1.15rem; line-height: 1;
    cursor: pointer; flex-shrink: 0;
  }
  body.tia-book-open .tia-book-bar { display: none; }

  .tia-sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 310;
    background: rgba(10, 18, 34, 0.55);
    opacity: 0; pointer-events: none; transition: opacity 0.28s;
  }
  body.tia-book-open .tia-sheet-backdrop { opacity: 1; pointer-events: auto; }

  .tia-book-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 300;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--wp--preset--color--primary-dark);
    color: #fff;
    padding: 0.75rem var(--tia-gutter) calc(0.75rem + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }
  .tia-bar-price { font-size: var(--wp--preset--font-size--xs); color: #C9D2E4; }
  .tia-bar-price strong { display: block; color: #fff; font-size: var(--wp--preset--font-size--md); font-weight: 900; }
  .tia-bar-btn {
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--primary-dark);
    border: 0; border-radius: 10px;
    font: inherit; font-weight: 900; font-size: 0.95rem;
    padding: 0.7em 1.4em;
    cursor: pointer;
    white-space: nowrap;
  }
  /* la barra non deve coprire il footer: spazio extra a fine pagina */
  body.tia-has-bookbar .site-footer { padding-bottom: 6.5rem !important; }

  /* Aria chat: la bolla sale SOPRA la barra booking (non si sovrappongono) */
  /* v2: il pannello mobile è full-screen (gestito dal widget) — qui
     si sposta solo la BOLLA sopra la barra booking (il teaser segue via JS). */
  body.tia-has-bookbar #aria-tia-btn { bottom: calc(110px + env(safe-area-inset-bottom)) !important; }
  /* modale booking aperta: Aria si toglie di mezzo (il booking ha il focus) */
  body.tia-book-open #aria-tia-btn,
  body.tia-book-open #aria-tia-teaser,
  body.tia-book-open #aria-tia-panel { display: none !important; }
}
/* Background scroll-lock iOS-safe (il JS registra scrollY e lo ripristina alla chiusura;
   body{overflow:hidden} è ignorato da iOS Safari e faceva parte del bug precedente). */
body.tia-book-open { position: fixed; left: 0; right: 0; width: 100%; }

/* ── Webapp shell: bottom-nav app-style (Step 3 buildplan-fase2) ──
   Solo mobile/tablet. Sulle pagine prodotto vince la barra booking. */
.tia-bottom-nav { display: none; }
@media (max-width: 999px) {
  .tia-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 280;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--wp--preset--color--border);
    padding: 0.35rem 0 calc(0.35rem + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 28px -20px rgba(14, 29, 61, 0.5);
  }
  .tia-bottom-nav a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-decoration: none;
    color: var(--wp--preset--color--text-muted);
    font-size: 0.66rem; font-weight: 700;
    padding: 4px 0;
  }
  .tia-bn-ico { font-size: 1.3rem; line-height: 1.15; }
  .tia-bottom-nav a.is-active { color: var(--wp--preset--color--primary); }
  .tia-bottom-nav a.is-active::after {
    content: ""; width: 16px; height: 3px; border-radius: 2px; margin-top: 1px;
    background: var(--wp--preset--color--accent);
  }
  /* pagine prodotto: la barra booking ha priorita' */
  body.tia-has-bookbar .tia-bottom-nav { display: none; }
  /* spazio a fine pagina + Aria sopra la nav */
  body.tia-has-bottomnav:not(.tia-has-bookbar) .site-footer { padding-bottom: 6rem !important; }
  /* v2: pannello mobile full-screen → override solo sulla bolla */
  body.tia-has-bottomnav:not(.tia-has-bookbar) #aria-tia-btn { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
}

/* ── Fenice Consent ─────────────────────────────────
   Il banner vive in Shadow DOM (nessun CSS da stilare qui). Serve solo la
   convivenza: su mobile il banner occupa la fascia bassa, quindi la bolla di
   Aria e il suo teaser si tolgono di mezzo finché l'utente non ha scelto.
   Su desktop il banner è una card a sinistra (max 560px) → nessuna collisione.
   L'offset dalla bottom-nav lo calcola il widget (`bottom_offset_selector`). */
@media (max-width: 640px) {
  html[data-fenice-consent="open"] #aria-tia-btn,
  html[data-fenice-consent="open"] #aria-tia-teaser { display: none !important; }
}

/* ── Legal pages: prose + meta ────────────────────────────────── */
.tia-legal h2 { font-size: var(--wp--preset--font-size--xl); margin-top: 2.6rem; }
.tia-legal h3 { font-size: var(--wp--preset--font-size--lg); }
.tia-legal p, .tia-legal li { color: var(--wp--preset--color--text); line-height: 1.8; }
.tia-legal table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: var(--wp--preset--font-size--sm); }
/* Tabelle larghe (elenco cookie): scorrono nel PROPRIO contenitore, mai la pagina. */
.tia-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.2rem 0; }
.tia-table-scroll table { min-width: 560px; margin: 0; }
.tia-legal table th, .tia-legal table td { border: 1px solid var(--wp--preset--color--border); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; }
.tia-legal table th { background: var(--wp--preset--color--bg-alt); color: var(--wp--preset--color--primary); }
.tia-legal-updated { color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--sm); font-style: italic; }
/* tabelle legali: su mobile scrollano nel proprio contenitore, mai la pagina */
.tia-legal-tablewrap { overflow-x: auto; }

/* ══════════════════════════════════════════════════════════════
   CURATED ROME (Step 6 buildplan-fase2 — TIA × Roman Guides)
   ══════════════════════════════════════════════════════════════ */

/* Centered section lead (eyebrow + h2 + this) */
.tia-sec-lead { color: var(--wp--preset--color--text-muted); max-width: 62ch; margin: 0.6rem auto 0; line-height: 1.65; }

/* Collaboration credit — discreet, page footer */
.tia-collab-foot { display: flex; gap: 0.7rem; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; }
.tia-collab-badge { flex: 0 0 auto; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary-dark); font-size: var(--wp--preset--font-size--xs); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 99px; padding: 4px 11px; white-space: nowrap; }
.tia-collab-foot p { margin: 0; color: var(--wp--preset--color--text-muted); line-height: 1.6; }
.tia-collab-foot a { color: var(--wp--preset--color--accent-dark); font-weight: 700; }

/* Concierge quick-links (3 navy cards) */
.tia-concierge { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.4rem; }
.tia-cg-card { display: flex; flex-direction: column; gap: 0.28rem; text-decoration: none; background: var(--wp--preset--color--primary); color: #fff; border-radius: 14px; padding: 1.2rem 1.25rem; transition: transform 0.15s, box-shadow 0.15s; }
.tia-cg-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -20px rgba(21, 43, 90, 0.7); }
.tia-cg-ico { font-size: 1.5rem; line-height: 1.1; }
.tia-cg-t { font-weight: 900; font-size: var(--wp--preset--font-size--md); }
.tia-cg-s { color: #C9D2E4; font-size: var(--wp--preset--font-size--sm); line-height: 1.45; }

/* Place cards (hidden-gem photo cards + food cards) */
.tia-place-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.tia-place-grid-food { grid-template-columns: repeat(2, 1fr); }
.tia-place-card { display: flex; flex-direction: column; text-decoration: none; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--border); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px -22px rgba(21, 43, 90, 0.4); transition: transform 0.15s, box-shadow 0.15s; }
.tia-place-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(21, 43, 90, 0.5); }
.tia-pc-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--wp--preset--color--bg-alt); }
.tia-pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.tia-place-card:hover .tia-pc-img img { transform: scale(1.05); }
.tia-pc-body { padding: 1.1rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: 0.32rem; flex: 1; }
.tia-pc-ico { font-size: 1.7rem; line-height: 1; }
.tia-pc-name { font-weight: 900; color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--lg); line-height: 1.25; }
.tia-pc-area { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--accent-dark); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.tia-pc-desc { margin: 0.1rem 0 0; color: var(--wp--preset--color--text-muted); line-height: 1.6; font-size: var(--wp--preset--font-size--sm); flex: 1; }
.tia-pc-cta { margin-top: 0.7rem; color: var(--wp--preset--color--accent-dark); font-weight: 800; font-size: var(--wp--preset--font-size--sm); }
.tia-place-card:hover .tia-pc-cta { text-decoration: underline; }

/* Directory — collapsible category accordions (native <details>) */
.tia-voy-acc { border: 1px solid var(--wp--preset--color--border); border-radius: 14px; overflow: hidden; margin-bottom: 0.8rem; background: var(--wp--preset--color--white); }
.tia-voy-acc[open] { box-shadow: 0 14px 34px -26px rgba(21, 43, 90, 0.4); }
.tia-voy-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.7rem; padding: 1.05rem 1.2rem; font-weight: 800; color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--lg); }
.tia-voy-sum::-webkit-details-marker { display: none; }
.tia-voy-sum::after { content: "+"; color: var(--wp--preset--color--accent-dark); font-weight: 900; font-size: 1.5rem; line-height: 1; transition: transform 0.2s ease; }
.tia-voy-acc[open] .tia-voy-sum::after { transform: rotate(45deg); }
.tia-voy-ico { font-size: 1.15em; line-height: 1; }
.tia-voy-sumlabel { flex: 1; }
.tia-voy-count { font-size: var(--wp--preset--font-size--xs); font-weight: 800; color: var(--wp--preset--color--accent-dark); background: var(--wp--preset--color--bg-alt); border-radius: 99px; padding: 2px 10px; }
.tia-voy-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; padding: 0.15rem 1rem 1.15rem; background: var(--wp--preset--color--bg-alt); }
/* Mini photo-card row */
.tia-voy-row { display: flex; gap: 0.8rem; align-items: center; text-decoration: none; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--border); border-radius: 12px; padding: 0.55rem 0.7rem; transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s; }
.tia-voy-row:hover { border-color: var(--wp--preset--color--accent); transform: translateY(-2px); box-shadow: 0 12px 26px -20px rgba(21, 43, 90, 0.5); }
.tia-voy-thumb { flex: 0 0 62px; width: 62px; height: 62px; border-radius: 9px; overflow: hidden; background: var(--wp--preset--color--bg-alt); display: flex; align-items: center; justify-content: center; }
.tia-voy-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tia-voy-thumb-ph { font-size: 1.7rem; color: #fff; background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-dark)); }
.tia-voy-txt { min-width: 0; }
.tia-voy-row b { display: block; color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--md); line-height: 1.3; }
.tia-voy-row:hover b { color: var(--wp--preset--color--accent-dark); }
.tia-voy-row p { margin: 0.15rem 0 0; color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--sm); line-height: 1.45; }
.tia-voy-photocredit { margin: 1.4rem 0 0; text-align: center; color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--xs); }
/* Merged Curated Rome page: guide-download 'prefer paper' link + food lists */
.tia-dl-more { text-align: center; margin: 1.1rem 0 0; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--text-muted); }
.tia-dl-more a { color: var(--wp--preset--color--accent-dark); font-weight: 700; }
.tia-food > div + div { margin-top: 2.4rem; }
.tia-food h3 { color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--xl); margin: 0 0 0.15rem; }
.tia-food-sub { color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--sm); margin: 0 0 1rem; }

@media (max-width: 900px) {
  .tia-concierge { grid-template-columns: 1fr; }
}
@media (max-width: 781px) {
  .tia-place-grid { grid-template-columns: repeat(2, 1fr); }
  .tia-voy-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tia-place-grid, .tia-place-grid-food { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   BLOG (Step 7 / B4) — post cards, single prose, nav
   ══════════════════════════════════════════════════════════════ */
/* Post-card grid (WP post-template grid → responsive) */
.wp-block-post-template.tia-post-grid { gap: 1.6rem !important; }
.tia-post-card { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--border); border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px -22px rgba(21, 43, 90, 0.4); transition: transform 0.15s, box-shadow 0.15s; display: flex; flex-direction: column; }
.tia-post-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(21, 43, 90, 0.5); }
.tia-pc-thumb { margin: 0 !important; }
.tia-pc-thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.tia-pc-cat { margin: 0 !important; padding: 1rem 1.1rem 0; font-size: var(--wp--preset--font-size--xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.tia-pc-cat a { color: var(--wp--preset--color--accent-dark); text-decoration: none; }
.tia-pc-title { margin: 0 !important; padding: 0.3rem 1.1rem 0; font-size: var(--wp--preset--font-size--lg); line-height: 1.25; }
.tia-pc-title a { color: var(--wp--preset--color--primary); text-decoration: none; }
.tia-post-card:hover .tia-pc-title a { color: var(--wp--preset--color--accent-dark); }
.tia-pc-ex { margin: 0 !important; padding: 0.45rem 1.1rem 0; color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--sm); line-height: 1.55; flex: 1; }
.tia-pc-date { margin: 0 !important; padding: 0.8rem 1.1rem 1.2rem; color: var(--wp--preset--color--text-muted); }
@media (max-width: 900px) { .wp-block-post-template.tia-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { .wp-block-post-template.tia-post-grid { grid-template-columns: 1fr !important; } }

/* Single post — fluid gutter (margini rispettati anche in webapp mobile) */
.tia-single { padding: var(--wp--preset--spacing--8) var(--tia-gutter) var(--wp--preset--spacing--8); }
/* Two-column: article (left) + sidebar (right) — matches the live layout.
   Columns stack below 782px (WP core). Sidebar is sticky on desktop. */
.tia-single-cols { gap: clamp(1.6rem, 3vw, 3rem); align-items: flex-start; }
.tia-single-main { min-width: 0; }
.tia-single-aside { position: sticky; top: 84px; align-self: flex-start; }
.tia-aside-card { background: #fff; border: 1px solid var(--wp--preset--color--border); border-radius: 14px; padding: 1.25rem 1.35rem; margin-bottom: 1.3rem; box-shadow: 0 16px 44px -32px rgba(21, 43, 90, 0.45); }
.tia-aside-h { margin: 0 0 1rem; font-size: var(--wp--preset--font-size--lg); color: var(--wp--preset--color--primary); }
/* Recent posts */
.tia-aside-recent { list-style: none; margin: 0; padding: 0; }
.tia-aside-recent li { display: grid; grid-template-columns: 62px 1fr; column-gap: 0.75rem; row-gap: 0.2rem; align-items: start; padding: 0.7rem 0; border-top: 1px solid var(--wp--preset--color--border); }
.tia-aside-recent li:first-child { padding-top: 0; border-top: 0; }
.tia-aside-recent .wp-block-latest-posts__featured-image { grid-row: 1 / span 2; margin: 0; }
.tia-aside-recent .wp-block-latest-posts__featured-image img { width: 62px; height: 62px; object-fit: cover; border-radius: 8px; display: block; }
.tia-aside-recent .wp-block-latest-posts__post-title { grid-column: 2; align-self: end; font-weight: 700; color: var(--wp--preset--color--primary); text-decoration: none; line-height: 1.3; font-size: 0.92rem; }
.tia-aside-recent .wp-block-latest-posts__post-title:hover { color: var(--wp--preset--color--accent-dark); }
.tia-aside-recent .wp-block-latest-posts__post-date { grid-column: 2; align-self: start; color: var(--wp--preset--color--text-muted); font-size: 0.72rem; }
/* Categories */
.tia-aside-cats { list-style: none; margin: 0; padding: 0; }
.tia-aside-cats li { padding: 0.4rem 0; border-top: 1px solid var(--wp--preset--color--border); }
.tia-aside-cats li:first-child { border-top: 0; padding-top: 0; }
.tia-aside-cats a { color: var(--wp--preset--color--primary); text-decoration: none; font-weight: 600; }
.tia-aside-cats a::before { content: "→ "; color: var(--wp--preset--color--accent); }
.tia-aside-cats a:hover { color: var(--wp--preset--color--accent-dark); }
/* Contact card — navy, like the live site */
.tia-aside-contact { background: var(--wp--preset--color--primary); border-color: transparent; }
.tia-aside-contact .tia-aside-h { color: #fff; }
.tia-contact-lead { color: #D8DFEE; font-size: 0.9rem; margin: 0 0 1rem; line-height: 1.6; }
.tia-contact-list { list-style: none; margin: 0; padding: 0; }
.tia-contact-list li { padding: 0.35rem 0; }
.tia-contact-list a { color: #fff; text-decoration: none; font-weight: 600; }
.tia-contact-list a:hover { color: var(--wp--preset--color--accent); }
@media (max-width: 781px) {
  .tia-single-aside { position: static; }
}
.tia-single-cat { margin: 0; }
.tia-single-cat a { color: var(--wp--preset--color--accent-dark); font-weight: 800; text-transform: uppercase; font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.09em; text-decoration: none; }
.tia-single-title { color: var(--wp--preset--color--primary); line-height: 1.12; letter-spacing: -0.01em; }
/* meta row: date + share, separati */
.tia-single-meta { gap: 0.9rem 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--wp--preset--color--border); }
.tia-single-date { color: var(--wp--preset--color--text-muted); margin: 0; }
.tia-single-hero img { width: 100%; border-radius: 16px; display: block; box-shadow: 0 24px 60px -34px rgba(21, 43, 90, 0.5); }
.tia-single-body { font-size: 1.075rem; }
.tia-single-body > p:first-of-type { font-size: 1.18rem; line-height: 1.72; color: var(--wp--preset--color--primary-dark); }
.tia-single-body p, .tia-single-body li { line-height: 1.85; color: var(--wp--preset--color--text); }
.tia-single-body p { margin: 0 0 1.25rem; }
.tia-single-body ul, .tia-single-body ol { margin: 0 0 1.35rem; padding-left: 1.3rem; }
.tia-single-body li { margin-bottom: 0.5rem; }
.tia-single-body h2 { color: var(--wp--preset--color--primary); margin: 2.6rem 0 0.9rem; font-size: var(--wp--preset--font-size--xxl); line-height: 1.25; }
.tia-single-body h3 { color: var(--wp--preset--color--primary); margin: 2rem 0 0.7rem; font-size: var(--wp--preset--font-size--xl); }
.tia-single-body a { color: var(--wp--preset--color--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.tia-single-body img { max-width: 100%; height: auto; border-radius: 12px; display: block; }
.tia-single-body figure { margin: 1.8rem 0; }
.tia-single-body figure img { width: 100%; }
.tia-single-body figcaption { text-align: center; color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--sm); margin-top: 0.5rem; }
.tia-single-body blockquote { border-left: 4px solid var(--wp--preset--color--accent); margin: 1.8rem 0; padding: 0.4rem 0 0.4rem 1.3rem; color: var(--wp--preset--color--primary-dark); font-style: italic; }
.tia-single-body table { width: 100%; display: block; overflow-x: auto; border-collapse: collapse; }
/* footer row: tags + share */
.tia-single-foot { gap: 1rem 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--wp--preset--color--border); }
.tia-single-tags { margin: 0; color: var(--wp--preset--color--text-muted); }
.tia-single-tags a { color: var(--wp--preset--color--accent-dark); }
/* Share buttons */
.tia-share { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.tia-share-label { font-size: var(--wp--preset--font-size--xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--text-muted); margin-right: 0.2rem; }
.tia-share-btn { font: inherit; font-size: var(--wp--preset--font-size--xs); font-weight: 700; color: var(--wp--preset--color--primary); background: var(--wp--preset--color--bg-alt); border: 1px solid var(--wp--preset--color--border); border-radius: 99px; padding: 0.35rem 0.85rem; text-decoration: none; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.tia-share-btn:hover { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary-dark); }
.tia-share-top { margin-left: auto; }
/* Article close: classic prev/next nav on the article's own light bg, then a
   simple elegant tours CTA card. Flow: article (white) → nav (white) → CTA (cream) → footer (navy). */
.tia-post-nav { margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.4rem, 3vw, 1.9rem); border-top: 1px solid var(--wp--preset--color--border); }
.tia-post-nav-row { gap: 1rem 1.4rem; align-items: stretch; }
.tia-post-nav-row .wp-block-post-navigation-link { flex: 1 1 46%; min-width: 220px; }
.tia-post-nav-row .wp-block-post-navigation-link a { display: block; color: var(--wp--preset--color--primary); font-weight: 700; text-decoration: none; line-height: 1.35; }
.tia-post-nav-row .wp-block-post-navigation-link a:hover { color: var(--wp--preset--color--accent-dark); }
.tia-post-nav-row .wp-block-post-navigation-link a::before { display: block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wp--preset--color--text-muted); margin-bottom: 0.25rem; }
.tia-post-nav-row .post-navigation-link-previous a::before { content: "← Previous"; }
.tia-post-nav-row .post-navigation-link-next a::before { content: "Next →"; }
.tia-post-nav-row .post-navigation-link-next { text-align: right; }
/* Simple elegant tours CTA — light card within the page structure */
.tia-article-cta {
  max-width: 720px;
  margin: clamp(2rem, 4vw, 2.8rem) auto clamp(2.4rem, 5vw, 3.6rem);
  padding: clamp(2rem, 4vw, 2.7rem) clamp(1.4rem, 4vw, 2.2rem);
  background: var(--wp--preset--color--bg-alt);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  text-align: center;
}
.tia-cta-eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 800; color: var(--wp--preset--color--accent-dark); margin: 0 0 0.5rem; }
.tia-article-cta h2 { margin: 0 0 0.5rem; color: var(--wp--preset--color--primary); }
.tia-article-cta .tia-cta-sub { color: var(--wp--preset--color--text-muted); max-width: 48ch; margin: 0 auto 1.3rem; }
.tia-article-cta .wp-block-button__link { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary-dark); font-weight: 800; }
.tia-article-cta .wp-block-button__link:hover { background: var(--wp--preset--color--accent-dark); color: #fff; }
@media (max-width: 640px) {
  .tia-post-nav-row .wp-block-post-navigation-link { flex-basis: 100%; }
  .tia-post-nav-row .post-navigation-link-next { text-align: left; }
}

@media (max-width: 781px) {
  .tia-single-meta { flex-direction: column; align-items: flex-start; }
  .tia-share-top { margin-left: 0; }
  .tia-single-body { font-size: 1.03rem; }
  .tia-single-body > p:first-of-type { font-size: 1.1rem; }
}

/* ── Footer "Join Trip in Art" — minimal newsletter CTA ── */
.tia-footer-cta { display: flex; gap: 1.4rem 2.6rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.tia-fcta-text h3 { color: #fff; font-size: var(--wp--preset--font-size--xl); margin: 0 0 0.3rem; }
.tia-fcta-text p { color: #C9D2E4; font-size: var(--wp--preset--font-size--sm); margin: 0; max-width: 46ch; line-height: 1.5; }
.tia-fcta-form { flex: 1 1 300px; max-width: 460px; }
.tia-fcta-row { display: flex; gap: 0.6rem; }
.tia-fcta-row input[type=email] { flex: 1; min-width: 0; border: 1.5px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.08); color: #fff; border-radius: 8px; padding: 0.7em 0.9em; font: inherit; font-size: 0.95rem; }
.tia-fcta-row input[type=email]::placeholder { color: #8fa0bd; }
.tia-fcta-row input[type=email]:focus { outline: 2px solid var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); background: rgba(255, 255, 255, 0.12); }
.tia-fcta-row button { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary-dark); border: 0; border-radius: 8px; font: inherit; font-weight: 900; font-size: 0.95rem; padding: 0.7em 1.35em; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.tia-fcta-row button:hover { background: var(--wp--preset--color--accent-dark); color: #fff; }
/* Stessa riga di consenso degli altri form (U10), in versione scura per il footer:
   riga intera cliccabile, mai sotto i 44px. */
.tia-fcta-consent { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; margin-top: 0.4rem; padding: 0.35rem 0; font-size: var(--wp--preset--font-size--xs); color: #9fb0cd; line-height: 1.45; cursor: pointer; }
/* 24px minimum: WCAG 2.5.8 target size (AA). Native checkbox rendering
   ignores padding, so the hit box has to grow with width/height. */
.tia-fcta-consent input[type="checkbox"] { flex: 0 0 24px; width: 24px; height: 24px; margin: 0; cursor: pointer; accent-color: var(--wp--preset--color--accent); }
.tia-fcta-consent:focus-within { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; border-radius: 6px; }
.tia-fcta-consent a { color: var(--wp--preset--color--accent); }
.tia-fcta-done { display: none; color: #fff; font-weight: 700; background: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 0.8rem 1rem; }
@media (max-width: 781px) { .tia-footer-cta { flex-direction: column; align-items: flex-start; } .tia-fcta-form { width: 100%; max-width: none; flex-basis: auto; } }

/* ── Blog image credit caption ── */
.tia-single-body figure.tia-figcredit figcaption,
.tia-single-body figcaption.tia-imgcredit { text-align: center; color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--xs); margin-top: 0.5rem; line-height: 1.4; }
.tia-single-body figcaption .tia-credit-src { opacity: 0.85; }

/* ── Blog article visual material: foto reali miste, dimensioni variate ── */
.tia-single-body .tia-art-photo { margin: 1.9rem 0; }
.tia-single-body .tia-art-photo img { width: 100%; border-radius: 14px; box-shadow: 0 20px 50px -30px rgba(21, 43, 90, 0.4); }
.tia-art-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.9rem 0; align-items: start; }
.tia-art-duo figure { margin: 0; }
.tia-art-duo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; }
@media (max-width: 640px) { .tia-art-duo { grid-template-columns: 1fr; } .tia-art-duo img { aspect-ratio: 16 / 10; } }

/* ══ · U3/U4/U13 — card uniformi + carosello home ═══════════════
   Il difetto U3 non era estetico: card di altezza diversa nella stessa griglia
   fanno saltare la riga sotto e rendono il listino illeggibile. Le altezze si
   fissano QUI, una volta, per la card unica di tia_cards.py — non nei singoli
   generatori. Ogni slot ha un'altezza propria e la mantiene anche quando il dato
   manca (rating assente → riga meta con un fatto neutro, mai riga vuota). */

/* Titolo: sempre 2 righe di spazio, testo troncato pulito alla seconda. */
.tia-tc-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(2 * 1.35em);
}
/* Meta: esattamente una riga. */
.tia-tc-meta {
  min-height: 1.4em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ── Fatti della card ───────────────────────────────────
   Il: le schede erano "povere" — una riga sola contro le 3-4 di GYG/Viator.
   I chip arrivano da `tia_cards.facts` (campi strutturati Bokun) e sono SEMPRE
   3. L'altezza del blocco e' FISSA a due righe di chip: cosi' resta identica sia
   che i tre chip stiano su una riga (desktop largo) sia che vadano a capo (375px),
   ed e' la fissita' — non la fortuna del testo che ci sta — a tenere allineate le
   card della griglia. `overflow:hidden` e' la rete: se un domani un fatto diventa
   piu' lungo, la card non cresce, taglia. */
.tia-tc-facts {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.3rem;
  height: calc(2 * 1.75em + 0.3rem);
  overflow: hidden;
  font-size: var(--wp--preset--font-size--xs);
  margin-top: 0.1rem;
}
.tia-tc-fact {
  display: inline-block;
  line-height: 1.75em;
  padding: 0 0.6em;
  border-radius: 999px;
  background: var(--wp--preset--color--bg-alt);
  color: var(--wp--preset--color--text-muted);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ── Card stile OTA ─────────────────────────────────
   Gerarchia GYG/Viator: foto 4:3 → titolo → voto → formato/durata → fatti → prezzo.
   Ogni slot ha un'altezza PROPRIA e la tiene anche quando il dato manca: e' cosi'
   che le card restano allineate senza dover sperare che i testi siano lunghi uguale. */
.tia-tc-img { aspect-ratio: 4 / 3; }
/* Riga voto: sempre presente. 7 prodotti partner non hanno alcun rating e li' la riga
   resta vuota — ma occupa, altrimenti le loro card salirebbero di 20px rispetto alle
   vicine ed e' esattamente il difetto U3 che abbiamo appena chiuso. */
.tia-tc-rating {
  display: block;
  min-height: 1.45em;
  line-height: 1.45em;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tia-tc-rcount { color: var(--wp--preset--color--text-muted); }
/* Riga di prosa: esattamente UNA riga, sempre. Dove il testo manca resta vuota — ma
   occupa, altrimenti quelle card salirebbero rispetto alle vicine nella stessa
   griglia. Il limite di 44 caratteri della riga e' misurato, non stimato: sonda sul
   preview con il font reale alla card piu' stretta. */
.tia-tc-blurb {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  overflow: hidden;
  min-height: 1.45em;
  line-height: 1.45em;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-muted);
}
/* La dicitura che rende vera la riga: il voto e' dell'operatore, non del tour.
   Non e' un dettaglio decorativo — senza, la card afferma una cosa falsa. */
.tia-tc-rnote { color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--xs); }
/* Prezzo: "from" piccolo, cifra grande, in fondo a sinistra. Senza CTA accanto puo'
   prendersi tutta la riga. */
.tia-tc-from { color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--sm); }
.tia-tc-price strong { font-size: var(--wp--preset--font-size--xl); line-height: 1.1; }
.tia-tc-badge { max-width: calc(100% - 1.5rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Il badge partner e' informativo, non promozionale: non deve gridare come
   "Best seller" — stessa forma, peso diverso. */
.tia-tc-badge-alt {
  background: rgba(255, 255, 255, 0.94);
  color: var(--wp--preset--color--primary);
  font-weight: 600;
}

/* ── Card compatta su mobile ───────────────────────────────────────────────
   Su telefono la card e' l'unica cosa a schermo e va vista INTERA: se il prezzo
   resta sotto la piega, la card ha raccontato il tour senza mai dire quanto
   costa. Qui non si toglie nessuna informazione — restano foto 4:3, voto con la
   sua dicitura, riga di prosa, formato/durata, i 3 fatti e il prezzo: si
   stringono solo i vuoti.
   ⚠️ Le altezze restano FISSE, solo piu' piccole. Renderle variabili farebbe
   tornare card di altezza diversa nella stessa griglia, e li' la riga sotto
   salta — la fissita' e' il meccanismo, non un valore. */
@media (max-width: 640px) {
  .tia-tc-body {
    gap: 0.3rem;
    padding: 0.85rem 0.95rem 0.95rem;
  }
  /* Sempre 2 righe di chip, ma righe piu' basse: i 3 fatti restano tutti e 3. */
  .tia-tc-facts {
    height: calc(2 * 1.6em + 0.25rem);
    gap: 0.25rem;
  }
  .tia-tc-fact { line-height: 1.6em; }
  .tia-tc-foot { padding-top: 0.45rem; }
}
/* Chip "Operated by X" nell'hero della pagina prodotto (regola vendor). */
.tia-chip-partner { background: rgba(255, 255, 255, 0.14); }

/* ── Carosello home (U4) ────────────────────────────────────────────────────
   Scroll-snap nativo: lo scorrimento e' quello del browser (inerzia, trackpad,
   swipe, tastiera) — il JS aggiunge solo frecce, puntini e il loop. Se il JS non
   parte, resta una fila scorrevole funzionante: la home non si rompe mai. */
.tia-carousel { position: relative; margin-bottom: 1.5rem; }
.tia-car-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3rem) / 3);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* ⚠️ LA CAUSA di "la pagina non scorre col dito/rotella sopra le schede".
     Non era il touch: era che il track diventava un contenitore di scroll VERTICALE.
     `overflow-x: auto` da solo fa calcolare `overflow-y` ad `auto` (regola CSS: se un
     asse non e' `visible`, l'altro non puo' restarlo), e bastano pochi px di overflow
     verticale perche' rotella e dito vengano consumati dal track invece che dalla
     pagina. Quei px arrivavano da `.tia-reveal` (translateY(26px), animazione di
     comparsa): finche' la card non e' "in-view" — cioe' ESATTAMENTE mentre scorri
     verso il carosello — sporge di 26px e il track diventa scrollabile in verticale.
     Misurato: `scrollHeight` 548 vs `clientHeight` 526, `scrollTop` massimo 22.
     Due rimedi, perche' uno solo lascerebbe il difetto pronto a tornare:
     1. `overflow-y: hidden` → il track e' orizzontale PER COSTRUZIONE, e nessuna
        animazione futura potra' piu' rubarsi il gesto verticale;
     2. il padding verticale ripaga cio' che `hidden` taglierebbe (il sollevamento
        di 4px al passaggio del mouse e la sua ombra), e il margine negativo lo
        toglie dal layout: nessuno spazio bianco in piu' sotto il carosello. */
  overflow-y: hidden;
  padding-top: 6px;
  padding-bottom: 26px;
  margin-bottom: -20px;
  /* Nessun `touch-action` qui, ed e' voluto: `pan-x` non significa "gestisco
     l'orizzontale e lascio il verticale alla pagina", significa che in questa regione
     il browser puo' fare SOLO le gesture elencate — quindi vieterebbe il pan
     verticale, e col dito sulle schede la pagina non scorrerebbe affatto. Con
     `overflow-y: hidden` il track non e' un contenitore di scroll verticale, quindi
     il browser instrada da se' l'orizzontale al track e il verticale alla pagina.
     `overscroll-behavior-x` resta: agisce solo sull'asse orizzontale ed evita che a
     fine corsa lo scorrimento diventi la gesture "indietro" di iOS. */
  overscroll-behavior-x: contain;
}
/* L'effetto di sollevamento e lo zoom della foto valgono solo dove esiste un
   puntatore che puo' davvero stare "sopra". Sui touch il `:hover` resta appiccicato
   al primo contatto: trascinando il dito per scorrere, la card si sollevava e la foto
   ingrandiva — sembrava che il tocco avesse "preso" qualcosa invece di scorrere. */
@media (hover: none), (pointer: coarse) {
  .tia-tour-card:hover { transform: none; box-shadow: none; }
  .tia-tour-card:hover .tia-tc-img img { transform: none; }
}
/* Le card del carosello non fanno la comparsa una per una: il loro transform e'
   proprio cio' che rendeva il track scrollabile in verticale. La sezione compare
   comunque — l'animazione resta su tutto il resto della pagina. */
/* `pointer-events: auto` per lo stesso motivo del blocco reduced-motion: qui la
   card e' visibile SUBITO ma resta `.in-view` solo quando l'osservatore la marca,
   e nel frattempo sarebbe cliccabile a occhio e non col dito. */
.tia-car-track .tia-reveal { opacity: 1; transform: none; transition: none; will-change: auto; pointer-events: auto; }
.tia-car-track::-webkit-scrollbar { display: none; }
.tia-car-track > .tia-tour-card { scroll-snap-align: start; }
.tia-car-track:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 4px; border-radius: 14px; }

/* WCAG 2.4.7 (focus visible). The core search block ships
   `:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper)
   .wp-block-search__input:focus { outline: none }` and puts nothing back: the
   field has border-width 0, no box-shadow and no outline, so on focus its
   computed style is identical to the unfocused one. The block is rendered on
   the 404 template, so a keyboard user who lands there cannot see where they
   are. `:where()` carries no specificity, but the core rule still scores 0,2,0
   like a plain `.class:focus`, so this selector is deliberately heavier
   (0,3,1) instead of relying on source order. */
.wp-block-search__inside-wrapper input.wp-block-search__input:focus {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}
.tia-car-nav {
  position: absolute; top: 38%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--primary);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  box-shadow: 0 10px 26px -14px rgba(14, 29, 61, 0.5);
  z-index: 2;
}
.tia-car-nav:hover { background: var(--wp--preset--color--bg-alt); }
.tia-car-prev { left: -18px; }
.tia-car-next { right: -18px; }
.tia-car-dots { display: flex; justify-content: center; gap: 0.45rem; margin-top: 0.9rem; }
/* WCAG 2.5.8 (target size, min 24x24): the visible dot stays 8px, but the
   BUTTON is 24x24 so the touch target is real. Negative vertical margins keep
   the row's contribution to layout at the previous 8px, so nothing below moves.
   On narrow screens the 44x44 arrows are display:none, so these dots are the
   only pager control there — the "equivalent alternative" exception does not
   apply and the target has to be big enough on its own. */
.tia-car-dot {
  width: 24px; height: 24px; min-width: 24px; margin: -8px 0;
  padding: 0; cursor: pointer; border: 0; background: none;
  position: relative; border-radius: 50%;
}
.tia-car-dot::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--wp--preset--color--border);
  transition: width 0.2s ease, background 0.2s ease;
}
.tia-car-dot[aria-selected="true"]::before { width: 22px; border-radius: 999px; background: var(--wp--preset--color--accent-dark); }

/* Stessi punti di rottura della griglia dell'hub (999/781): home e /tours/
   devono cambiare colonne insieme, altrimenti a 1000px sono due layout diversi. */
@media (max-width: 999px) { .tia-car-track { grid-auto-columns: calc((100% - 1.5rem) / 2); } }
@media (max-width: 781px) {
  /* Mobile: niente lista infinita — una card per schermata, con un margine di
     peek che dice "ce n'e' un'altra", e i puntini che dicono quante. */
  .tia-car-track { grid-auto-columns: 86%; gap: 1rem; }
  .tia-car-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tia-car-track { scroll-behavior: auto; }
  .tia-tour-card, .tia-tc-img img { transition: none; }
}

/* ── Card articolo (U13) ────────────────────────────────────────────────────
   Il sistema `.tia-post-card` esiste gia' (usato da index/home/archive): qui NON
   si duplica, si aggiungono i soli vincoli di altezza. Duplicare le classi
   avrebbe ricreato il difetto U3 sul blog — due definizioni della stessa card.
   La home usa lo STESSO markup (front-page.html): prima aveva `tia-blog-card`
   con excerpt a 18 parole contro le 20 dell'archivio = due card diverse. */
/* `display` con !important: WordPress applica `display:flow-root` ai blocchi
   (wp-block-post-title / -post-excerpt) dai global styles iniettati DOPO il
   foglio del tema, e senza questo il clamp non si attiva — i titoli lunghi
   andavano a 3 righe e la griglia si sfalsava (misurato: 450 vs 474px). */
.tia-post-card .tia-pc-title {
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2;
  overflow: hidden; min-height: calc(2 * 1.25em);
}
/* WordPress rende il link del titolo `display:inline-block`. Dentro un
   `-webkit-box` un inline-block conta come UNA riga sola: il clamp non vedeva mai
   la seconda e i titoli lunghi restavano a 3 righe (card 474 contro 450px).
   Riportarlo a `inline` fa tornare le righe di testo righe vere. */
.tia-post-card .tia-pc-title a { display: inline !important; }
.tia-post-card .tia-pc-ex {
  display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-clamp: 3;
  overflow: hidden; min-height: calc(3 * 1.55em);
}
/* ⚠️ La card NON puo' essere un flex container: CSS "blockifica" i figli di un
   flex container, quindi `display:-webkit-box` diventa `flow-root` e il clamp qui
   sopra non parte (misurato: titoli a 3 righe, card 450 contro 474px — nemmeno
   `!important` aiuta, la blockificazione avviene sul valore calcolato).
   La regola originale la dichiarava `flex column`; qui si torna a blocco. Non
   serve piu': ogni slot ha altezza fissa (immagine ad aspect-ratio · categoria 1
   riga · titolo 2 · excerpt 3 · data 1), quindi la somma e' costante da sola. */
.tia-post-card { display: block; }

/* ── Reviews — badge shows a TOTAL, never a single score ─────────────────
   This badge used to show one platform's rating as if it were the whole
   site's number. It now shows only the combined review COUNT across all
   platforms, rounded down, deliberately without a star: each platform's
   rating carries a different weight, so averaging them would print a
   figure that doesn't exist anywhere. The real per-platform ratings live
   in the cards below (.tia-plat-rating), each with its own source and date. */
.tia-rating-badge {
  display: flex; align-items: center; justify-content: center;
  gap: 1.1rem; flex-wrap: wrap; text-align: left;
  max-width: 620px; margin: 2rem auto 0; padding: 1.1rem 1.4rem;
  background: var(--wp--preset--color--white, #fff);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px; box-shadow: 0 10px 30px -22px rgba(21,43,90,.5);
}
.tia-rating-score {
  font-family: var(--wp--preset--font-family--heading, inherit);
  font-size: 2.6rem; font-weight: 800; line-height: 1;
  color: var(--wp--preset--color--primary);
}
.tia-rating-score span { font-size: 1rem; font-weight: 600; color: var(--wp--preset--color--text-muted); }
.tia-rating-meta p { margin: .25rem 0 0; font-size: var(--wp--preset--font-size--sm); line-height: 1.55; }
.tia-rating-meta p span { color: var(--wp--preset--color--text-muted); }
@media (max-width: 480px) {
  .tia-rating-badge { flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1rem; }
}

/* Segnaposto legale non ancora compilato dal cliente — deve essere
   impossibile pubblicarlo per distrazione: si vede. Va rimosso al go-live. */
.tia-legal-todo {
  display: inline-block; padding: .1em .5em; border-radius: 6px;
  background: #fff3cd; color: #7a5b00; border: 1px dashed #d9a400;
  font-weight: 700; font-size: .95em;
}

/* ── Prova sociale sotto l'hero: cifre verificabili, niente decorazione ── */
.tia-proof-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1rem, 4vw, 3rem);
}
.tia-proof-list li { text-align: center; }
.tia-proof-list b {
  display: block; font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--primary);
}
.tia-proof-list span {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-muted);
}
/* Il 4.9★/159 e' il voto AZIENDALE (Tripadvisor), non del singolo tour — stessa
   dicitura e stesso trattamento tipografico di .tia-tc-rnote sulle card, cosi'
   il lettore non compone da solo "39 tour votati 4.9 da 159 persone". Il colore
   resta quello ereditato da .tia-proof-list span (text-muted, gia' sopra). */
.tia-proof-list small {
  font-size: var(--wp--preset--font-size--xs);
}

/* ── How it works: 3 steps, no decorative icons ── */
.tia-how-steps {
  list-style: none; margin: var(--wp--preset--spacing--6) 0 0; padding: 0;
  display: grid; gap: var(--wp--preset--spacing--5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.tia-how-steps b {
  display: block; margin-bottom: .35rem;
  color: var(--wp--preset--color--primary);
}
.tia-how-steps span { color: var(--wp--preset--color--text-muted); }