/*
Theme Name: Today Casa Tuscany — Child
Theme URI: https://www.todaycasatuscany.com
Description: Tema child di Twenty Twenty-Five per Today Casa Tuscany. Palette derivata dal logo (crema + tricolore verde/rosso), header sticky bianco, forme essenziali. NON modificare il tema genitore.
Author: (il tuo nome / studio)
Template: twentytwentyfive
Version: 2.0.0
Text Domain: tct-child
*/

/* =========================================================================
   TODAY CASA TUSCANY — DESIGN SYSTEM v2
   Tipografia: Poppins (titoli) + Open Sans (testo).
   Colori dal logo: crema per i fondi; verde e rosso del tricolore come accenti.
   Forme: border-radius massimo 10px. Header sticky bianco tradizionale.
   ========================================================================= */

/*INIZIO CSS PERSONALIZZATO*/
/*nasconde il titolo della pagina*/
h1.wp-block-post-title { display: none !important; }

/*elimina margin sopra la sezione hero*/
.entry-content.alignfull.wp-block-post-content.has-global-padding.is-layout-constrained.wp-block-post-content-is-layout-constrained { margin-top: 0 !important; }

/*colora di bianco le scritte delle card*/
h4.tct-card__title { color: #FFF !important; } nav#tct-menu span { color: #FFF !important; }
/*FINE CSS PERSONALIZZATO*/



/* ---------- 1. TOKENS ---------- */
:root {
  /* Neutri / fondi — derivati dal crema del drappo del logo */
  --tct-cream:        #F4F1E8;
  --tct-cream-2:      #EDE9DC;
  --tct-cream-3:      #E4DFCE;
  --tct-white:        #FFFFFF;
  --tct-ink:          #232220;
  --tct-ink-soft:     #565249;
  --tct-ink-faint:    #8B8678;
  --tct-line:         rgba(35,34,32,0.12);
  --tct-line-strong:  rgba(35,34,32,0.20);

  /* Accenti — dal tricolore del logo */
  --tct-green:        #2F6B4F;
  --tct-green-deep:   #245540;
  --tct-green-bright: #10844D;
  --tct-green-tint:   #E6EEE8;
  --tct-red:          #9A2D38;
  --tct-red-deep:     #7E2530;
  --tct-red-tint:     #F3E6E7;

  /* Tipografia */
  --tct-head: "Urbanist", "Helvetica Neue", Arial, sans-serif;
  --tct-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Scala tipografica fluida (mobile-first) */
  --tct-step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
  --tct-step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --tct-step-1:  clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
  --tct-step-2:  clamp(1.45rem, 1.25rem + 0.95vw, 2.00rem);
  --tct-step-3:  clamp(1.85rem, 1.50rem + 1.70vw, 2.80rem);
  --tct-step-4:  clamp(2.30rem, 1.75rem + 2.70vw, 3.90rem);
  --tct-step-5:  clamp(2.80rem, 2.00rem + 4.20vw, 5.20rem);

  /* Spaziatura fluida — generosa */
  --tct-space-2xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.7rem);
  --tct-space-xs:  clamp(0.85rem, 0.7rem + 0.6vw, 1.15rem);
  --tct-space-s:   clamp(1.1rem, 0.9rem + 0.9vw, 1.6rem);
  --tct-space-m:   clamp(1.8rem, 1.4rem + 1.8vw, 2.8rem);
  --tct-space-l:   clamp(3.5rem, 2.6rem + 3.5vw, 5.5rem);
  --tct-space-xl:  clamp(6rem, 4.4rem + 6.5vw, 9.5rem);
  --tct-space-2xl: clamp(7.5rem, 5rem + 9vw, 12rem);

  /* Forme — border-radius MAX 10px */
  --tct-radius-s: 6px;
  --tct-radius-m: 10px;
  --tct-radius-l: 10px;
  --tct-radius-pill: 10px;

  /* Ombre — sobrie */
  --tct-shadow-soft: 0 1px 3px rgba(35,34,32,0.05), 0 8px 24px rgba(35,34,32,0.06);
  --tct-shadow-lift: 0 2px 8px rgba(35,34,32,0.07), 0 18px 40px rgba(35,34,32,0.10);

  /* Layout */
  --tct-wrap: 1240px;
  --tct-wrap-narrow: 760px;
  --tct-header-h: 76px;
  --tct-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- 2. RESET MIRATO ---------- */
.tct, .tct * { box-sizing: border-box; }

.tct {
  font-family: var(--tct-body);
  font-size: var(--tct-step-0);
  line-height: 1.7;
  color: var(--tct-ink);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.tct-site { background-color: var(--tct-cream); }

.tct h1, .tct h2, .tct h3, .tct h4 {
  font-family: var(--tct-head);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--tct-ink);
  margin: 0;
}
.tct h1 { font-weight: 600; }
.tct p { margin: 0; }
.tct a { color: inherit; text-decoration: none; }
.tct img { max-width: 100%; height: auto; display: block; }
.tct ul { margin: 0; padding: 0; list-style: none; }

/* ---------- 3. UTILITY DI LAYOUT ---------- */
.tct-wrap {
  width: 100%;
  max-width: var(--tct-wrap);
  margin-inline: auto;
  padding-inline: clamp(1.4rem, 0.8rem + 4vw, 3.5rem);
}
.tct-wrap--narrow { max-width: var(--tct-wrap-narrow); }

.tct-section { padding-block: var(--tct-space-xl); }
.tct-section--tight { padding-block: var(--tct-space-l); }
.tct-section--cream2 { background: var(--tct-cream-2); }

.tct-eyebrow {
  font-family: var(--tct-body);
  font-size: var(--tct-step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tct-green);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.tct-eyebrow::before {
  content: "";
  width: 24px; height: 2px;
  background: var(--tct-green);
  display: inline-block;
}
.tct-eyebrow--red { color: var(--tct-red); }
.tct-eyebrow--red::before { background: var(--tct-red); }

.tct-lead {
  font-size: var(--tct-step-1);
  line-height: 1.6;
  color: var(--tct-ink-soft);
  max-width: 58ch;
}

/* ---------- 4. BOTTONI (contrasto AA garantito) ---------- */
.tct-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--tct-body);
  font-size: var(--tct-step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.9em 1.6em;
  border-radius: 100vw;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .25s var(--tct-ease), color .25s var(--tct-ease),
              border-color .25s var(--tct-ease), transform .25s var(--tct-ease);
  line-height: 1;
}
.tct-btn .tct-btn__arrow { transition: transform .25s var(--tct-ease); }
.tct-btn:hover .tct-btn__arrow { transform: translateX(4px); }

/* Nota: .tct a { color:inherit } ha specificità (0,1,1); per batterla nei
   bottoni-link uso il doppio selettore .tct-btn.tct-btn--x (0,2,0). */
.tct-btn.tct-btn--primary { background: var(--tct-green); color: #fff; }
.tct-btn.tct-btn--primary:hover { background: var(--tct-green-deep); transform: translateY(-2px); }

.tct-btn.tct-btn--red { background: var(--tct-red); color: #fff; }
.tct-btn.tct-btn--red:hover { background: var(--tct-red-deep); transform: translateY(-2px); }

.tct-btn.tct-btn--ghost { background: transparent; color: var(--tct-ink); border-color: var(--tct-line-strong); }
.tct-btn.tct-btn--ghost:hover { border-color: var(--tct-ink); background: var(--tct-white); transform: translateY(-2px); }

.tct-btn.tct-btn--light { background: #fff; color: #232220; }
.tct-btn.tct-btn--light:hover { background: var(--tct-cream); transform: translateY(-2px); }

.tct a.tct-link {
  font-weight: 700;
  color: var(--tct-green);
  position: relative;
  display: inline-flex; gap: 0.4em; align-items: center;
}
.tct-link::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--tct-ease);
}
.tct-link:hover::after { transform: scaleX(1); }

/* Il wrapper .tct che avvolge l'header non deve creare un contenitore di
   contenimento per position:sticky: con display:contents "sparisce" dal
   layout e l'header diventa sticky rispetto al viewport/body. */
.tct-header-wrap { display: contents; }
.tct-footer-wrap { display: contents; }

/* ====================================================================
   WORDPRESS BLOCK-THEME OVERRIDES
   Twenty Twenty-Five wrappa le parti del modello in:
     <header class="wp-block-template-part">  oppure  <footer ...>
       <div class="wp-block-group alignfull ...">
         <div class="wp-block-group has-global-padding is-layout-constrained ...">
           ...il nostro HTML...
   Questi wrapper aggiungono padding laterale (~50px) e creano un
   "containing block" che impedisce a position:sticky di funzionare.
   Le regole sotto li rendono trasparenti al layout.
   ==================================================================== */

/* I template part di WP non devono limitare la larghezza né creare contesti */
.wp-block-template-part:has(.tct-header-wrap),
.wp-block-template-part:has(.tct-footer-wrap) {
  display: contents;
}

/* I gruppi WP dentro al template part devono "sparire" dal layout per non
   creare contesti di contenimento per position:sticky e non limitare la
   larghezza con max-width o padding. */
.wp-block-template-part:has(.tct-header-wrap) .wp-block-group,
.wp-block-template-part:has(.tct-footer-wrap) .wp-block-group {
  display: contents !important;
}

/* Fallback per browser senza :has() (Firefox < 121): seleziono tutti i gruppi
   diretti dentro a <header>/<footer> di template part. Sicuro perché
   l'header/footer del tema child sono sempre dentro <header>/<footer>. */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > footer.wp-block-template-part {
  display: contents;
}
.wp-site-blocks > header.wp-block-template-part .wp-block-group,
.wp-site-blocks > footer.wp-block-template-part .wp-block-group {
  display: contents !important;
}

/* ====================================================================
   5. HEADER — sticky tradizionale su fondo bianco
   ==================================================================== */
/* Salvaguardia: position:sticky si rompe se un antenato ha overflow
   diverso da visible. Forziamo i contenitori del tema a non clippare. */
html, body { overflow-x: clip; }
body.tct-site .wp-site-blocks,
body.tct-site .is-layout-flow,
body.tct-site main,
body.tct-site .wp-block-group { overflow: visible; }

.tct-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--tct-white);
  border-bottom: 1px solid var(--tct-line);
  transition: background-color .5s var(--tct-ease), border-color .5s var(--tct-ease);
}
/* Quando il menu è aperto: header nero, logo bianco (animazione delicata) */
body.tct-menu-open .tct-header { background: #232220; border-bottom-color: rgba(255,255,255,0.10); }
body.tct-menu-open .tct-logo,
body.tct-menu-open .tct-logo * { color: #fff; transition: color .5s var(--tct-ease); }
body.tct-menu-open .tct-logo small { color: var(--tct-green-bright); }
.tct-header__inner {
  max-width: var(--tct-wrap);
  margin-inline: auto;
  padding: 0 clamp(1.4rem, 0.8rem + 4vw, 3.5rem);
  min-height: var(--tct-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tct-space-s);
}
.tct-logo {
  font-family: var(--tct-head);
  font-weight: 700;
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.4rem);
  line-height: 1.05;
  color: var(--tct-ink);
  display: inline-flex;
  flex-direction: column;
  transition: color .5s var(--tct-ease);
}
.tct-logo small {
  font-family: var(--tct-body);
  font-size: 0.52em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tct-green);
  font-weight: 700;
  margin-top: 0.3em;
}
.tct-header__actions { display: flex; align-items: center; gap: 0.7rem; }

.tct a.tct-wa {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: var(--tct-green); color: #fff;
  padding: 0.65em 1.05em; border-radius: 100vw;
  font-size: var(--tct-step--1); font-weight: 700;
  transition: background-color .25s var(--tct-ease), transform .25s var(--tct-ease);
}
.tct-wa:hover { background: var(--tct-green-deep); transform: translateY(-1px); }
.tct-wa svg { width: 18px; height: 18px; fill: currentColor; }

.tct-burger {
  width: 46px; height: 46px; border-radius: 100vw;
  border: 1px solid #232220;
  background: #232220;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-direction: column; gap: 5px;
  transition: background-color .25s var(--tct-ease), border-color .25s var(--tct-ease);
}
.tct-burger:hover { background: #000; border-color: #000; }
.tct-burger span {
  display: block; width: 20px; height: 2px; background: #ffffff;
  transition: transform .3s var(--tct-ease), opacity .2s var(--tct-ease);
}
body.tct-menu-open .tct-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.tct-menu-open .tct-burger span:nth-child(2) { opacity: 0; }
body.tct-menu-open .tct-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 6. MENU OVERLAY (sotto l'header, sfondo nero) ---------- */
.tct-menu {
  position: fixed;
  inset: var(--tct-header-h) 0 0 0;
  z-index: 990;
  background: #232220;
  color: #fff;
  padding: clamp(1.8rem, 4vw, 3.5rem) clamp(1.4rem, 6vw, 6rem) 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tct-space-m);
  align-content: start;
  opacity: 0; visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .45s var(--tct-ease), visibility .45s var(--tct-ease), transform .45s var(--tct-ease);
  overflow-y: auto;
}
body.tct-menu-open .tct-menu { opacity: 1; visibility: visible; transform: none; }

.tct-menu__nav { display: grid; gap: 0.2rem; max-width: var(--tct-wrap); margin-inline: auto; width: 100%; }
.tct-menu__group {
  font-family: var(--tct-body); font-size: var(--tct-step--1); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55);
  margin-top: var(--tct-space-s); padding-bottom: 0.3rem;
}
.tct-menu__group:first-child { margin-top: 0; }
.tct-menu__link {
  font-family: var(--tct-head);
  font-weight: 600;
  font-size: clamp(1.4rem, 1rem + 2.2vw, 2.4rem);
  line-height: 1.18;
  color: #fff;
  padding: 0.1em 0;
  display: inline-flex; align-items: baseline; gap: 0.5em;
  width: fit-content;
  /* stato iniziale per l'animazione in entrata */
  opacity: 0; transform: translateY(14px);
  transition: transform .55s var(--tct-ease), opacity .55s var(--tct-ease);
}
/* Hover: nessun cambio di colore (resta bianco), solo lieve scorrimento */
.tct-menu__link:hover { color: #fff; transform: translateX(6px); }
.tct-menu__link .num {
  font-family: var(--tct-body); font-size: 0.4em; font-weight: 700;
  color: var(--tct-green-bright); letter-spacing: 0.08em;
}
/* Entrata staggered dei link quando il menu si apre */
body.tct-menu-open .tct-menu__link { opacity: 1; transform: none; }
body.tct-menu-open .tct-menu__nav a:nth-of-type(1) { transition-delay: .04s; }
body.tct-menu-open .tct-menu__nav a:nth-of-type(2) { transition-delay: .08s; }
body.tct-menu-open .tct-menu__nav a:nth-of-type(3) { transition-delay: .12s; }
body.tct-menu-open .tct-menu__nav a:nth-of-type(4) { transition-delay: .16s; }
body.tct-menu-open .tct-menu__nav a:nth-of-type(5) { transition-delay: .20s; }
body.tct-menu-open .tct-menu__nav a:nth-of-type(6) { transition-delay: .24s; }
body.tct-menu-open .tct-menu__nav a:nth-of-type(7) { transition-delay: .28s; }
body.tct-menu-open .tct-menu__nav a:nth-of-type(8) { transition-delay: .32s; }

.tct-menu__aside {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: var(--tct-space-s);
  display: grid; gap: 0.3rem;
  font-size: var(--tct-step--1);
  color: rgba(255,255,255,0.75);
  max-width: var(--tct-wrap); margin-inline: auto; width: 100%;
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--tct-ease) .3s, transform .6s var(--tct-ease) .3s;
}
body.tct-menu-open .tct-menu__aside { opacity: 1; transform: none; }
.tct-menu__aside strong { color: #fff; font-weight: 700; }
.tct-menu__aside a { color: rgba(255,255,255,0.75); }
.tct-menu__aside a:hover { color: #fff; }

/* ====================================================================
   7. HERO PRINCIPALE — full bleed (100% larghezza viewport)
   ==================================================================== */
.tct-hero {
  position: relative;
  width: 100%;
  min-height: clamp(540px, 86vh, 820px);
  display: flex;
  align-items: center;
  padding-block: var(--tct-space-xl);
  overflow: hidden;
  isolation: isolate;
}
.tct-hero__media { position: absolute; inset: 0; z-index: -2; }
.tct-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.tct-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(20,18,14,0.74) 0%, rgba(20,18,14,0.5) 45%, rgba(20,18,14,0.22) 100%);
}
/* Il wrap interno riallinea il testo alla griglia del sito */
.tct-hero__wrap {
  width: 100%;
  max-width: var(--tct-wrap);
  margin-inline: auto;
  padding-inline: clamp(1.4rem, 0.8rem + 4vw, 3.5rem);
}
.tct-hero__content { color: #fff; max-width: 640px; }
.tct-hero__content .tct-eyebrow { color: #fff; }
.tct-hero__content .tct-eyebrow::before { background: #fff; }
.tct-hero h1 {
  color: #fff;
  font-size: var(--tct-step-5);
  margin: 0.35em 0 0.4em;
  letter-spacing: -0.02em;
}
.tct-hero p { color: rgba(255,255,255,0.94); font-size: var(--tct-step-1); max-width: 46ch; }
.tct-hero__cta { margin-top: var(--tct-space-m); display: flex; gap: 0.8rem; flex-wrap: wrap; }

.tct-pagehero {
  position: relative;
  width: 100%;
  min-height: clamp(360px, 52vh, 520px);
  display: flex; align-items: center;
  padding-block: var(--tct-space-l);
  overflow: hidden; isolation: isolate;
}
.tct-pagehero__media { position: absolute; inset: 0; z-index: -2; }
.tct-pagehero__media img { width: 100%; height: 100%; object-fit: cover; }
.tct-pagehero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(20,18,14,0.78) 0%, rgba(20,18,14,0.5) 55%, rgba(20,18,14,0.25) 100%);
}
.tct-pagehero__content { color: #fff; }
.tct-pagehero h1 { color: #fff; font-size: var(--tct-step-4); margin-top: 0.25em; }
.tct-breadcrumb {
  font-size: var(--tct-step--1); color: rgba(255,255,255,0.85);
  display: flex; gap: 0.5em; align-items: center; flex-wrap: wrap;
}
.tct-breadcrumb a:hover { color: #fff; text-decoration: underline; }

/* ====================================================================
   8. MACRO-CATEGORIE
   ==================================================================== */
.tct-macro { display: grid; gap: var(--tct-space-l); }
.tct-macro__head { display: grid; gap: 0.6rem; margin-bottom: var(--tct-space-s); }
.tct-macro__head h3 { font-family: var(--tct-head); font-weight: 600; font-size: var(--tct-step-2); }
.tct-macro__head p { color: var(--tct-ink-soft); max-width: 60ch; }

.tct-cards { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 0.7rem + 1.5vw, 1.6rem); }
@media (min-width: 640px)  { .tct-cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px)  { .tct-cards--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 600px)  { .tct-cards--2-sm { grid-template-columns: repeat(2, 1fr); } }

.tct-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 280px;
  border-radius: var(--tct-radius-m);
  overflow: hidden; isolation: isolate;
  color: #fff;
  padding: var(--tct-space-m);
  background: var(--tct-cream-3);
}
.tct-card__media { position: absolute; inset: 0; z-index: -2; }
.tct-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--tct-ease); }
.tct-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,18,14,0.1) 0%, rgba(20,18,14,0.35) 55%, rgba(20,18,14,0.78) 100%);
}
.tct-card:hover .tct-card__media img { transform: scale(1.05); }
.tct-card__title { font-family: var(--tct-head); font-weight: 600; font-size: var(--tct-step-2); line-height: 1.1; color: #fff; }
.tct-card__more {
  margin-top: 0.7em;
  font-family: var(--tct-body); font-size: var(--tct-step--1); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.5em; color: #fff;
}
.tct-card__more::after { content: "→"; transition: transform .25s var(--tct-ease); }
.tct-card:hover .tct-card__more::after { transform: translateX(5px); }
.tct-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0; z-index: 1;
  background: none;
}
.tct-card--red::before { background: none; }
.tct-card--tall { min-height: 340px; }

/* ====================================================================
   9. BLOCCO IMMAGINE + TESTO
   ==================================================================== */
.tct-split { display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 1.2rem + 2.5vw, 3.2rem); align-items: center; }
@media (min-width: 900px) {
  .tct-split { grid-template-columns: 1fr 1fr; }
  .tct-split--rev .tct-split__media { order: 2; }
}
.tct-split__media { border-radius: var(--tct-radius-m); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--tct-shadow-soft); }
@media (min-width: 900px) { .tct-split__media { aspect-ratio: 5 / 4; } }
.tct-split__media img { width: 100%; height: 100%; object-fit: cover; }
.tct-split__body { display: grid; gap: var(--tct-space-s); }
.tct-split__body h2 { font-size: var(--tct-step-3); }
.tct-split__body .tct-cta { margin-top: 0.5rem; }

/* ====================================================================
   10. RECENSIONI
   ==================================================================== */
.tct-reviews { background: var(--tct-cream-2); }
.tct-reviews__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--tct-space-m); flex-wrap: wrap; margin-bottom: var(--tct-space-m); }
.tct-reviews__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 360px);
  gap: clamp(1rem, 0.7rem + 1vw, 1.5rem);
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin;
}
.tct-reviews__track::-webkit-scrollbar { height: 6px; }
.tct-reviews__track::-webkit-scrollbar-thumb { background: var(--tct-line-strong); border-radius: 10px; }
.tct-review { scroll-snap-align: start; background: var(--tct-white); border: 1px solid var(--tct-line); border-radius: var(--tct-radius-m); padding: var(--tct-space-m); display: grid; gap: var(--tct-space-s); }
.tct-review__stars { color: #E0A92B; letter-spacing: 0.1em; font-size: 1.05rem; }
.tct-review__text { color: var(--tct-ink-soft); font-size: var(--tct-step-0); }
.tct-review__author { display: flex; align-items: center; gap: 0.7rem; }
.tct-review__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--tct-green-tint); color: var(--tct-green-deep); display: grid; place-items: center; font-weight: 700; font-family: var(--tct-head); }
.tct-review__meta { display: grid; }
.tct-review__name { font-weight: 700; }
.tct-review__date { font-size: var(--tct-step--1); color: var(--tct-ink-faint); }

/* ====================================================================
   11. STRISCE RIUSABILI
   ==================================================================== */
.tct-introgrid { display: grid; grid-template-columns: 1fr; gap: var(--tct-space-m); }
@media (min-width: 900px) { .tct-introgrid { grid-template-columns: 0.85fr 1.15fr; gap: var(--tct-space-l); } }
.tct-introgrid h2 { font-size: var(--tct-step-3); }

.tct-features { display: grid; grid-template-columns: 1fr; gap: clamp(1rem,0.7rem+1.2vw,1.5rem); }
@media (min-width: 640px)  { .tct-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .tct-features--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .tct-features--4 { grid-template-columns: repeat(4, 1fr); } }
.tct-feature {
  background: var(--tct-white);
  border-radius: var(--tct-radius-m);
  padding: var(--tct-space-m);
  display: grid; gap: 0.55rem;
  border: 1px solid var(--tct-line);
  transition: transform .25s var(--tct-ease), box-shadow .25s var(--tct-ease);
}
.tct-feature:hover { transform: translateY(-4px); box-shadow: var(--tct-shadow-soft); }
.tct-feature--red { }
.tct-feature__num { display: none; }
/* Icona line-art sopra il titolo della feature */
.tct-feature__icon {
  width: 44px; height: 44px;
  color: var(--tct-green);
  margin-bottom: 0.4rem;
}
.tct-feature--red .tct-feature__icon { color: var(--tct-red); }
.tct-feature__icon svg { width: 100%; height: 100%; display: block; }
.tct-feature h3 { font-family: var(--tct-head); font-weight: 600; font-size: var(--tct-step-1); }
.tct-feature p { color: var(--tct-ink-soft); font-size: var(--tct-step-0); }

/* ---- GALLERIA ---- */
/* Sezione gallery: nessun padding inferiore, wrap a tutta larghezza,
   titolo centrato (richiesta cliente). */
.tct-gallery-section { padding-bottom: 0 !important; }
.tct-gallery-wrap { max-width: 100% !important; padding-inline: 0 !important; }
.tct-gallery-wrap > header {
  text-align: center;
  max-width: var(--tct-wrap);
  margin-inline: auto;
  padding-inline: clamp(1.4rem, 0.8rem + 4vw, 3.5rem);
}
.tct-gallery-wrap > header .tct-eyebrow { justify-content: center; }
.tct-gallery-wrap { position: relative; }

/* Mobile-first: immagini semplici, una colonna, 100% larghezza, nessuna
   interazione particolare (come richiesto). */
.tct-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.tct-gallery figure {
  margin: 0; overflow: hidden;
  border-radius: 0;            /* nessun border-radius sulle foto */
  aspect-ratio: 16 / 10;
}
.tct-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Desktop (>=900px): mosaico a tutta larghezza, foto cliccabili (→ slider) */
@media (min-width: 900px) {
  .tct-gallery {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .tct-gallery figure { aspect-ratio: 1 / 1; cursor: pointer; }
  .tct-gallery figure:nth-child(1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .tct-gallery img { transition: transform .6s var(--tct-ease); }
  .tct-gallery figure:hover img { transform: scale(1.04); }

  /* Modalità SLIDER: attivata via JS al click su una foto */
  .tct-gallery.is-slider {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .tct-gallery.is-slider::-webkit-scrollbar { display: none; }
  .tct-gallery.is-slider figure {
    flex: 0 0 100%;
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 16 / 8;
    scroll-snap-align: center;
    cursor: default;
  }
}

/* Frecce e chiudi dello slider (create da JS solo in modalità slider) */
.tct-gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 6; width: 54px; height: 54px;
  border: none; border-radius: 100vw; cursor: pointer;
  background: #232220; color: #fff; font-size: 1.9rem; line-height: 1;
  display: grid; place-items: center;
  transition: background-color .25s var(--tct-ease), transform .25s var(--tct-ease);
  font-family: var(--tct-head);
}
.tct-gallery-arrow:hover { background: #000; }
.tct-gallery-arrow--prev { left: 1rem; }
.tct-gallery-arrow--next { right: 1rem; }
.tct-gallery-close {
  top: 1rem; right: 1rem; transform: none;
  width: 44px; height: 44px; font-size: 1.4rem;
}

.tct-faq { display: grid; gap: 0.8rem; }
.tct-faq details { background: var(--tct-white); border: 1px solid var(--tct-line); border-radius: var(--tct-radius-m); padding: var(--tct-space-s) var(--tct-space-m); transition: border-color .25s var(--tct-ease); }
.tct-faq details[open] { border-color: var(--tct-green); }
.tct-faq summary { font-family: var(--tct-head); font-weight: 600; font-size: var(--tct-step-1); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.tct-faq summary::-webkit-details-marker { display: none; }
.tct-faq summary::after { content: "+"; font-family: var(--tct-head); color: var(--tct-green); font-size: 1.4em; transition: transform .25s var(--tct-ease); }
.tct-faq details[open] summary::after { transform: rotate(45deg); }
.tct-faq p { color: var(--tct-ink-soft); padding-top: var(--tct-space-s); }

.tct-ctaband {
  background: var(--tct-green);
  color: #fff;
  border-radius: var(--tct-radius-m);
  padding: clamp(3rem,2.4rem+4vw,5rem) clamp(1.5rem,1rem+4vw,4rem);
  display: grid; gap: var(--tct-space-s);
  text-align: center; justify-items: center;
}
/* Variante "attaccata": niente stacco con la sezione precedente e col footer,
   bordi superiori squadrati per saldarsi al contenuto sopra. */
.tct-ctaband--flush {
  border-radius: 0;
  padding-block: clamp(3.5rem, 2.8rem + 4vw, 6rem);
  padding-inline: 0;
}
.tct-section--flush { padding-block: 0; }
.tct-section--flush + .tct-footer,
.tct-ctaband--flush + * { margin-top: 0; }
.tct-ctaband--red { background: var(--tct-red); }
.tct-ctaband h2 { color: #fff; font-size: var(--tct-step-3); max-width: 20ch; }
.tct-ctaband p { color: rgba(255,255,255,0.92); max-width: 52ch; }
.tct-ctaband .tct-eyebrow { color: rgba(255,255,255,0.85); }
.tct-ctaband .tct-eyebrow::before { background: rgba(255,255,255,0.85); }

.tct-local { border-top: 1px solid var(--tct-line); padding-top: var(--tct-space-l); }
.tct-local h2 { font-size: var(--tct-step-2); margin-bottom: var(--tct-space-s); }
.tct-local__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--tct-space-s); }
.tct-tag { font-size: var(--tct-step--1); font-weight: 600; background: var(--tct-green-tint); color: var(--tct-green-deep); padding: 0.45em 0.9em; border-radius: var(--tct-radius-s); }

/* ====================================================================
   12. FOOTER
   ==================================================================== */
.tct-footer { background: var(--tct-ink); color: rgba(255,255,255,0.8); padding-block: var(--tct-space-xl) var(--tct-space-l); margin-top: 0; }
.tct-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--tct-space-l); }
@media (min-width: 760px) { .tct-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.tct-footer h4 { font-family: var(--tct-head); font-weight: 700; color: #fff; font-size: var(--tct-step--1); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--tct-space-s); }
.tct-footer__brand .tct-logo, .tct-footer__brand .tct-logo * { color: #fff; }
.tct-footer__brand .tct-logo small { color: var(--tct-green-bright); }
.tct-footer p, .tct-footer li { font-size: var(--tct-step-0); line-height: 1.8; }
.tct-footer a:hover { color: #fff; }
.tct-footer strong { color: #fff; }
.tct-footer__bottom { margin-top: var(--tct-space-l); padding-top: var(--tct-space-m); border-top: 1px solid rgba(255,255,255,0.14); display: flex; justify-content: space-between; gap: var(--tct-space-s); flex-wrap: wrap; font-size: var(--tct-step--1); color: rgba(255,255,255,0.55); }
.tct-footer__social { display: flex; gap: 0.7rem; }
.tct-footer__social a { width: 40px; height: 40px; border-radius: var(--tct-radius-s); border: 1px solid rgba(255,255,255,0.22); display: grid; place-items: center; transition: background-color .25s var(--tct-ease), border-color .25s var(--tct-ease); }
.tct-footer__social a:hover { background: var(--tct-green); border-color: var(--tct-green); }
.tct-footer__social svg { width: 18px; height: 18px; fill: #fff; }

/* ====================================================================
   13. ANIMAZIONI SCROLL-REVEAL
   ==================================================================== */
.tct-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--tct-ease), transform .7s var(--tct-ease); will-change: opacity, transform; }
.tct-reveal.is-in { opacity: 1; transform: none; }
.tct-reveal[data-stagger] > * { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--tct-ease), transform .6s var(--tct-ease); }
.tct-reveal[data-stagger].is-in > * { opacity: 1; transform: none; }
.tct-reveal[data-stagger].is-in > *:nth-child(1) { transition-delay: .04s; }
.tct-reveal[data-stagger].is-in > *:nth-child(2) { transition-delay: .09s; }
.tct-reveal[data-stagger].is-in > *:nth-child(3) { transition-delay: .14s; }
.tct-reveal[data-stagger].is-in > *:nth-child(4) { transition-delay: .19s; }
.tct-reveal[data-stagger].is-in > *:nth-child(5) { transition-delay: .24s; }
.tct-reveal[data-stagger].is-in > *:nth-child(6) { transition-delay: .29s; }

@media (prefers-reduced-motion: reduce) {
  .tct-reveal, .tct-reveal[data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tct *, .tct *::before, .tct *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ====================================================================
   14. INTEGRAZIONE COL TEMA GENITORE — full-bleed in WordPress
   ==================================================================== */
/* --------------------------------------------------------------------
   PROBLEMA: quando la home viene incollata come contenuto di una Pagina,
   WordPress avvolge il nostro <div class="tct"> in più livelli:
     <main has-global-padding is-layout-constrained style="margin-top:70px">
       <div alignfull has-global-padding ... style="padding:70px 0">
         <div class="entry-content wp-block-post-content is-layout-constrained">
           <div class="tct"> ...nostro contenuto... </div>
   Questi wrapper: (a) limitano la larghezza a 760px (is-layout-constrained),
   (b) aggiungono padding laterale (has-global-padding), (c) aggiungono
   margin-top e padding verticale (lo spazio sopra l'hero e sopra il footer).
   Le regole sotto li annullano, in modo robusto e indipendente dal modo
   in cui la pagina è stata incollata.
   -------------------------------------------------------------------- */

/* (a)+(b) Il contenitore .tct e i wrapper WP che lo avvolgono diventano
   full-width senza padding/max-width. Risale fino al post-content e al
   gruppo intermedio con has-global-padding. */
.entry-content:has(> .tct),
.wp-block-post-content:has(> .tct),
.wp-block-group:has(> .entry-content > .tct),
.wp-block-group:has(> .wp-block-post-content > .tct),
main:has(> .wp-block-group > .entry-content > .tct),
main:has(> .wp-block-group > .wp-block-post-content > .tct) {
  max-width: none !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Il nostro wrapper di contenuto occupa tutta la larghezza disponibile e
   non deve essere limitato dal max-width di is-layout-constrained di WP. */
.entry-content > .tct,
.wp-block-post-content > .tct,
.is-layout-constrained > .tct,
.tct {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* (a) Tutte le sezioni del tema, dentro a un layout "constrained" di WP,
   devono ignorare il max-width di 760px e restare full-width. */
.tct > .tct-section,
.tct > .tct-section--tight,
.tct > [class*="tct-section"],
.tct > .tct-hero,
.tct > .tct-pagehero {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* (c) Annulla lo spazio verticale che i wrapper WP aggiungono sopra l'hero
   e sopra il footer, quando contengono il nostro .tct. */
main:has(.tct),
.wp-block-group:has(> .entry-content > .tct),
.wp-block-group:has(> .wp-block-post-content > .tct) {
  margin-top: 0 !important;
}
.wp-block-group:has(> .entry-content > .tct),
.wp-block-group:has(> .wp-block-post-content > .tct) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --------------------------------------------------------------------
   FALLBACK per browser senza :has() (Firefox < 121, Safari < 15.4):
   tecnica viewport-width che funziona sempre, applicata alle sezioni
   full-bleed del tema. width:100vw + margin di centratura le fa uscire
   da qualsiasi contenitore con max-width o padding.
   NB: usiamo 100vw solo se :has() non è supportato, per evitare conflitti.
   -------------------------------------------------------------------- */
@supports not selector(:has(*)) {
  .tct-fullbleed,
  .tct .alignfull,
  .tct-hero,
  .tct-pagehero,
  .tct-section,
  .tct-section--tight,
  [class*="tct-section"] {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}

/* La classe .alignfull resta valida come ulteriore garanzia */
.tct .alignfull { max-width: none; }

/* ====================================================================
   LOGO IMMAGINE NELL'HEADER
   ==================================================================== */
.tct-logo--img { display: inline-flex; align-items: center; line-height: 0; }
.tct-header .tct-logo__img {
  height: 46px;          /* altezza nell'header */
  width: auto;           /* mantiene le proporzioni native (241x160) */
  display: block;
  object-fit: contain;
}
@media (max-width: 600px) {
  .tct-header .tct-logo__img { height: 40px; }
}
/* Menu aperto = header scuro: il logo ha sfondo bianco, gli diamo un
   cartiglio bianco arrotondato per non stonare sul nero. */
body.tct-menu-open .tct-logo__img {
  background: #fff;
  border-radius: 6px;
  padding: 4px 6px;
}

/* ====================================================================
   LOGO IMMAGINE NEL FOOTER
   Il footer ha sfondo scuro e il logo ha sfondo bianco: gli diamo un
   cartiglio bianco arrotondato così resta pulito e leggibile.
   ==================================================================== */
.tct-footer .tct-logo__img--footer {
  height: 64px;          /* un po' più grande dell'header, è l'area brand */
  width: auto;
  display: block;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  padding: 8px 10px;
}
@media (max-width: 600px) {
  .tct-footer .tct-logo__img--footer { height: 56px; }
}



/* ====================================================================
   VIDEO HERO — dimensionamento + switch desktop/tablet vs mobile
   Da AGGIUNGERE in fondo al foglio di stile. Non modifica regole esistenti.
   ==================================================================== */

/* Il video riempie l'hero esattamente come faceva l'immagine (object-fit:cover) */
.tct-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Di default (desktop e tablet) si vede l'ORIZZONTALE, il verticale è nascosto.
   La doppia classe ".tct-hero__media .tct-hero__video--mobile" serve ad avere
   priorità sufficiente sulla regola qui sopra. */
.tct-hero__media .tct-hero__video--mobile { display: none; }

/* Su MOBILE (telefoni, ≤600px) si inverte: orizzontale nascosto, verticale visibile.
   I tablet (≥601px, es. iPad 768px) restano sul video orizzontale, come richiesto. */
@media (max-width: 600px) {
  .tct-hero__media .tct-hero__video--desktop { display: none; }
  .tct-hero__media .tct-hero__video--mobile  { display: block; }
}