/* components.css — componenti del verticale local_installer (installatore/posatore locale). Base neutra calda
   + accento rosso di marca (il cerchio del logo). I valori-colore vengono SOLO dai token (tokens.css); qui la
   struttura. AA verificato: bianco su --brand 5.9:1, --ink-muted su paper 6.6:1, --accent-text su paper 6.5:1. */

/* ============ BOTTONI (pill) ============ */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-head); font-weight:600;
  font-size:.98rem; line-height:1; padding:.85rem 1.5rem; border-radius:var(--radius-pill); text-decoration:none;
  border:1.5px solid transparent; transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.btn--accent { background:var(--brand); color:var(--on-dark); }
.btn--accent:hover { background:var(--brand-dark); transform:translateY(-2px); }
.btn--ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover { border-color:var(--ink); transform:translateY(-2px); }
.btn--light { background:#fff; color:var(--ink); }
.btn--light:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn--outline-light { background:transparent; color:var(--on-dark); border-color:rgba(255,255,255,.55); }
.btn--outline-light:hover { background:rgba(255,255,255,.12); transform:translateY(-2px); }

/* ============ BANDE ============ */
.band--dark { background:var(--night); color:var(--on-dark); }
.band--brand { background:var(--brand); color:var(--on-dark); }
.band--brand h2 { color:var(--on-dark); }

/* ============ HEADER ============ */
.site-header { position:sticky; top:0; z-index:40; background:rgba(251,250,248,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.site-header__row { display:flex; align-items:center; gap:1.3rem; min-height:74px; }
.site-header__row > * { align-self:center; margin-block:0; }
.wordmark { display:flex; align-items:center; gap:.55rem; font-family:var(--font-head); font-weight:700;
  font-size:1.22rem; letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
.wordmark__dot { width:.72rem; height:.72rem; border-radius:50%; background:var(--brand); flex:none; }
.wordmark__mark { width:34px; height:34px; flex:none; }
.wordmark__txt { display:flex; flex-direction:column; line-height:1.05; }
.wordmark__txt small { font-weight:500; font-size:.62em; color:var(--ink-muted); letter-spacing:.02em; text-transform:uppercase; }
/* wp:navigation (nav seedata) */
.site-nav { margin-left:auto; }
.site-nav .wp-block-navigation__container { gap:1.5rem; }
.site-nav a, .site-nav .wp-block-navigation-item__content { font-family:var(--font-head); font-weight:600;
  font-size:.96rem; color:var(--ink); text-decoration:none; }
.site-nav a:hover { color:var(--accent-text); }
.site-header__tel { font-family:var(--font-head); font-weight:600; font-size:.92rem; color:var(--ink); text-decoration:none; white-space:nowrap; }
.site-header__cta { padding:.6rem 1.15rem; font-size:.9rem; }
@media (max-width:900px){ .site-header__tel { display:none; } }
@media (max-width:560px){ .site-header__cta { display:none; } }
/* Overlay mobile a schermo pieno: se l'header ha backdrop-filter l'overlay fixed si confina all'header. */
.wp-block-navigation__responsive-container.is-menu-open { height:100vh; overflow-y:auto; background:var(--paper); padding-top:5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap:.5rem; }
.wp-block-navigation__responsive-container.is-menu-open a { width:100%; font-size:1.3rem; padding:.4rem 0; }

/* ============ HERO SPLIT ============ */
.hero { padding-top:clamp(2.4rem,1.6rem + 2.4vw,3.6rem); }
.hero__inner { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.6rem,1rem + 2.6vw,3.4rem); align-items:center; }
.hero__text > * + * { margin-top:1.15rem; }
.hero h1 { margin:0; }
.hero__actions { display:flex; flex-wrap:wrap; gap:.8rem; }
.hero__meta { display:flex; flex-wrap:wrap; gap:1.3rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.hero__meta span { font-family:var(--font-head); font-weight:600; font-size:.85rem; color:var(--ink-muted); display:flex; align-items:center; gap:.5rem; }
.hero__meta span::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--brand); flex:none; }
.hero__media { position:relative; }
.hero__tile { position:relative; margin:0; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:5/6; box-shadow:var(--shadow-tile); }
.hero__tile img { width:100%; height:100%; object-fit:cover; }
.hero__badge { position:absolute; left:-14px; bottom:26px; background:var(--brand); color:var(--on-dark);
  font-family:var(--font-head); font-weight:700; font-size:.82rem; padding:.7rem 1.1rem; border-radius:10px;
  box-shadow:0 12px 30px -10px rgba(158,39,35,.6); max-width:210px; line-height:1.25; }
.hero__ring { position:absolute; top:-26px; right:-26px; width:120px; height:120px; border-radius:50%; border:14px solid var(--brand); opacity:.12; }
@media (max-width:840px){ .hero__inner { grid-template-columns:1fr; gap:2rem; } .hero__media { order:-1; max-width:440px; } .hero__tile { aspect-ratio:4/3; } }

/* ============ SECTION INTRO ============ */
/* La misura di lettura sta sul PARAGRAFO, mai sul contenitore: un max-width in ch sul wrapper è calcolato
   sul font del corpo (17px) e strozzerebbe il titolo display (40px) a poche parole per riga. */
.section-intro { margin-bottom:2.2rem; }
.section-intro h2 { margin:0; max-width:30ch; }
.section-intro .lead { max-width:60ch; }

/* ============ DUE PERCORSI ============ */
.paths { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.path { position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:clamp(1.6rem,1.1rem + 1.6vw,2.6rem);
  color:var(--on-dark); min-height:280px; display:flex; flex-direction:column; }
.path--priv { background:var(--brand); }
.path--az { background:var(--ink); }
.path__tag { font-family:var(--font-head); font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; margin:0 0 1rem; color:var(--on-dark); }
.path h3 { color:var(--on-dark); font-size:1.5rem; margin:0 0 .7rem; }
.path__text { color:var(--on-dark); font-size:1rem; margin:0 0 1.4rem; opacity:.94; }
.path .btn { margin-top:auto; align-self:flex-start; }
.path__ring { position:absolute; right:-50px; bottom:-50px; width:180px; height:180px; border-radius:50%; border:20px solid #fff; opacity:.08; }
@media (max-width:760px){ .paths { grid-template-columns:1fr; } }

/* ============ FIDUCIA (facts) ============ */
.trust .eyebrow { margin-bottom:1.8rem; }
.trust__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem 2rem; }
.fact { display:flex; flex-direction:column; gap:.25rem; }
.fact b { font-family:var(--font-head); font-weight:800; font-size:1.5rem; color:var(--ink); letter-spacing:-.02em; }
.fact span { font-size:.94rem; color:var(--ink-muted); line-height:1.45; }
@media (max-width:640px){ .trust__grid { grid-template-columns:1fr 1fr; gap:1.4rem; } }

/* ============ SPLIT (come lavoriamo / struttura) ============ */
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,1rem + 2.4vw,3.4rem); align-items:center; }
.split__txt h2 { margin:0; }
.split__fig { margin:0; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/11; box-shadow:var(--shadow-md); }
.split__fig img { width:100%; height:100%; object-fit:cover; }
.split__checks { display:flex; flex-direction:column; gap:.55rem; margin:.4rem 0 0; }
.split__checks li { display:flex; gap:.7rem; font-size:.98rem; color:var(--ink); }
.split__checks li::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--brand); flex:none; margin-top:.55rem; }
.split--rev .split__txt { order:2; }
@media (max-width:760px){ .split { grid-template-columns:1fr; gap:1.6rem; } .split--rev .split__txt { order:0; } }

/* ============ PAGINA SERVIZI (schede) ============ */
.page-head { padding-block:clamp(3rem,2rem + 2.4vw,4.5rem) clamp(1.5rem,1rem + 1.2vw,2.4rem); }
.page-head h1 { margin:0; font-size:var(--text-2xl); max-width:22ch; }
/* Testata e storia allineate al bordo del contenuto: un container--narrow è CENTRATO e rientrerebbe
   rispetto alle griglie a piena larghezza. La misura di lettura torna sui singoli blocchi di testo. */
.page-head .container--narrow, .svc-story .container--narrow { max-width:var(--container); }
.page-head .lead { max-width:62ch; }
.svc__grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
/* Scheda servizio con foto in testa: il padding sta sul corpo, non sulla card (sennò l'immagine rientra). */
.svc-card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); display:flex; flex-direction:column; }
.svc-card__fig { margin:0; }
.svc-card__fig img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.svc-card__body { padding:1.5rem 1.7rem 1.8rem; }
.svc-card__num { font-family:var(--font-head); font-weight:800; font-size:.9rem; color:var(--brand); letter-spacing:.08em; }
.svc-card h3 { margin:.5rem 0 .5rem; }
.svc-card p { margin:0; color:var(--ink-muted); }
@media (max-width:680px){ .svc__grid { grid-template-columns:1fr; } }

/* ============ DENTRO LA NOSTRA STRUTTURA (foto reali del cliente) ============ */
.struttura .eyebrow { margin-bottom:1.8rem; }
.struttura__grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--tile-gap); }
.struttura__item { margin:0; }
/* Stesso rapporto per tutte le tessere: con aspetti misti le didascalie cadono a quote diverse e la griglia
   si legge sfilacciata. */
.struttura__item img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-sm); }
/* Didascalia SOTTO l'immagine: mai testo sopra una foto (il contrasto dipenderebbe dal fotogramma). */
.struttura__item figcaption { font-family:var(--font-head); font-weight:600; font-size:.86rem; color:var(--ink-muted); margin-top:.55rem; }
@media (max-width:680px){ .struttura__grid { grid-template-columns:1fr; } }

/* ============ STORIA (pagina Servizi) ============ */
.svc-story__body { font-size:var(--text-md); line-height:1.6; color:var(--ink); max-width:72ch; }

/* ============ CTA BAND ============ */
.cta-band__inner { text-align:center; max-width:52ch; margin-inline:auto; }
.cta-band__inner h2 { color:var(--on-dark); font-size:var(--text-2xl); }
.cta-band__inner .lead { color:var(--on-dark); opacity:.94; }
.cta-band__actions { display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:.4rem; }

/* ============ FOOTER ============ */
.site-footer { padding-block:3.4rem 2rem; }
.site-footer__grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2rem; }
.wordmark--footer { color:var(--on-dark); margin-bottom:1rem; }
.wordmark--footer .wordmark__txt { color:var(--on-dark); }
.site-footer__desc { color:var(--muted-on-dark); font-size:.94rem; line-height:1.7; margin:0; }
.site-footer__col h4 { font-family:var(--font-head); font-weight:700; color:var(--on-dark); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin:0 0 .9rem; }
.site-footer__col p { color:var(--muted-on-dark); font-size:.94rem; line-height:1.7; margin:0; }
.site-footer__col a { color:var(--muted-on-dark); text-decoration:none; }
.site-footer__col a:hover { color:var(--on-dark); }
.site-footer__legal { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem;
  margin-top:2.6rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12); font-size:.84rem; color:var(--muted-on-dark); }
.site-footer__legal .legal-c { justify-self:center; }
.site-footer__legal .legal-r { justify-self:end; }
.site-footer__legal a { color:var(--muted-on-dark); text-decoration:none; }
.site-footer__legal a:hover { color:var(--on-dark); }
.site-footer__dgitaly { display:inline-flex; align-items:center; gap:.4rem; }
.site-footer__dgitaly img { display:inline-block; }
.site-footer__dgitaly span { color:var(--on-dark); font-weight:600; }
@media (max-width:760px){ .site-footer__grid { grid-template-columns:1fr; gap:1.6rem; } .site-footer__legal { grid-template-columns:1fr; text-align:center; gap:.6rem; } .site-footer__legal .legal-c, .site-footer__legal .legal-r { justify-self:center; } }

/* ============ CTA-BAR MOBILE (sticky) ============ */
.cta-bar { display:none; }
@media (max-width:560px){
  .cta-bar { position:fixed; bottom:0; left:0; right:0; z-index:50; display:flex; gap:.6rem; align-items:center;
    padding:.6rem .9rem; background:rgba(251,250,248,.96); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(28,28,30,.08); }
  .cta-bar__call { font-family:var(--font-head); font-weight:700; color:var(--ink); text-decoration:none; padding:.7rem 1rem; }
  .cta-bar__quote { flex:1; justify-content:center; }
  body { padding-bottom:4.5rem; }
}

/* ============ CONTATTI (pagina per-progetto) ============ */
.contact-cols { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.6rem,1rem + 2.4vw,3.4rem); align-items:start; }
.contact-form { display:flex; flex-direction:column; gap:1rem; }
.contact-form .field { display:flex; flex-direction:column; gap:.35rem; }
.contact-form label { font-family:var(--font-head); font-weight:600; font-size:.86rem; color:var(--ink); }
.contact-form input, .contact-form textarea { font:inherit; padding:.75rem .9rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); color:var(--ink); }
.contact-form input:focus, .contact-form textarea:focus { outline:2px solid var(--focus); outline-offset:1px; }
.contact-info { background:var(--surface); border-radius:var(--radius-lg); padding:1.8rem; }
.contact-info h3 { margin:0 0 .8rem; }
.contact-info p { color:var(--ink-muted); margin:0 0 .6rem; }
.contact-info a { color:var(--accent-text); text-decoration:none; }
@media (max-width:760px){ .contact-cols { grid-template-columns:1fr; } }

@media (max-width:640px){ .hero__ring, .path__ring { display:none; } }