/* SgomberoCantine.it — pagine interne. Estende sc-landing.css (stesse variabili e classi). */

/* ---- Hero pagina: compatto, senza illustrazione, hook in evidenza ---- */
.sc-page .hero-page{padding:44px 0 40px;background:linear-gradient(180deg,var(--paper-2),var(--paper))}
.sc-page .hero-page h1{font-size:clamp(29px,4.2vw,46px);margin:14px 0 0;max-width:22ch}
.sc-page .hero-page .sub{margin-top:18px;font-size:18.5px;color:var(--muted);max-width:62ch}
.sc-page .hero-page .cta{margin-top:26px}
.sc-page .hero-page .chips{margin-top:22px}

/* ---- Hero pagina CON immagine in evidenza (opt-in: solo se il post ha un featured image) ----
   Il default sopra resta "senza illustrazione" per tutte le altre pagine interne; qui si passa
   a due colonne solo quando .has-media e' presente, stesso pattern della .hero-grid della home. */
.sc-page .hero-page.has-media .wrap{display:grid;grid-template-columns:1.06fr .94fr;gap:44px;align-items:center}
.sc-page .hero-page.has-media .sub{max-width:none}
.sc-page .hero-page .hero-media{display:flex;justify-content:center}
.sc-page .hero-page .hero-media-img{width:100%;height:100%;max-width:460px;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius-sm);box-shadow:var(--shadow);border:1px solid var(--line)}
@media(max-width:960px){
  .sc-page .hero-page.has-media .wrap{grid-template-columns:1fr;gap:24px}
  .sc-page .hero-page .hero-media{order:-1}
  .sc-page .hero-page .hero-media-img{max-width:100%}
}

/* ---- Statistiche rapide dell'hero (opt-in, solo se il post imposta _sc_hero_stats) ----
   Numeri d'impatto subito dopo la CTA principale: rinforzano la promessa senza
   dover leggere il resto della pagina — pensati per l'atterraggio da campagna Ads. */
.sc-page .hero-page .hero-stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.sc-page .hero-page .hstat{display:flex;flex-direction:column;gap:2px}
.sc-page .hero-page .hstat-v{font-size:22px;font-weight:900;color:var(--ink);letter-spacing:-.01em}
.sc-page .hero-page .hstat-l{font-size:13px;color:var(--muted);font-weight:600}
@media(max-width:640px){
  .sc-page .hero-page .hero-stats{gap:20px;margin-top:22px;padding-top:18px}
  .sc-page .hero-page .hstat-v{font-size:19px}
}

/* Breadcrumb */
.sc-page .crumb{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);margin-bottom:18px;flex-wrap:wrap}
.sc-page .crumb a{color:var(--accent-ink);font-weight:700}
.sc-page .crumb a:hover{text-decoration:underline}
.sc-page .crumb span[aria-hidden]{color:#B9AE9D}

/* ---- Corpo del contenuto ---- */
.sc-page .page-sec{padding:56px 0 66px}
.sc-page .page-body{font-size:17.5px;line-height:1.72;color:var(--ink-soft)}

/* misura di lettura sui blocchi di testo, la CTA resta a piena larghezza */
.sc-page .page-body > p,
.sc-page .page-body > ul,
.sc-page .page-body > ol,
.sc-page .page-body > h2,
.sc-page .page-body > h3,
.sc-page .page-body > h4,
.sc-page .page-body > blockquote,
.sc-page .page-body > figure,
.sc-page .page-body > table{max-width:74ch;margin-left:auto;margin-right:auto}

.sc-page .page-body > h2{font-size:clamp(24px,3vw,32px);color:var(--ink);margin:44px auto 0;letter-spacing:-.02em;line-height:1.18}
.sc-page .page-body > h2:first-child{margin-top:0}
.sc-page .page-body > h3{font-size:21px;color:var(--ink);margin:32px auto 0;line-height:1.25;
  display:flex;align-items:center;gap:12px}
/* Icona arancio per titolo (solo H3 diretti, es. le domande delle FAQ): stesso badge
   arancio-tenue gia' usato in .tile-ico sulla home.
   L'SVG NON puo' stare nel post_content: wp_kses lo elimina in salvataggio (stesso
   difetto gia' visto sugli script JSON-LD) e il badge resta vuoto senza errore visibile.
   L'icona vive quindi qui, come background-image data-URI per variante (.ico-*):
   il post_content porta solo lo span con la classe, mai markup SVG. */
.sc-page .page-body > h3 .h-ico{width:34px;height:34px;flex:none;border-radius:10px;
  background-color:var(--accent-tint);background-repeat:no-repeat;background-position:center;
  background-size:18px 18px}
.sc-page .page-body > h3 .h-ico.ico-tag{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BC5F1C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h11l5 5v11H4z'/%3E%3Cpath d='M8 4v5h7'/%3E%3C/svg%3E")}
.sc-page .page-body > h3 .h-ico.ico-box{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BC5F1C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E")}
.sc-page .page-body > h3 .h-ico.ico-pin{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BC5F1C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-7.5 7-12a7 7 0 10-14 0c0 4.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E")}
.sc-page .page-body > h3 .h-ico.ico-calendar{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BC5F1C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E")}
.sc-page .page-body > h3 .h-ico.ico-clock{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BC5F1C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E")}
.sc-page .page-body > h3 .h-ico.ico-gem{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BC5F1C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9z'/%3E%3Cpath d='M2 9h20M9 3l-3 6 6 12 6-12-3-6'/%3E%3C/svg%3E")}
.sc-page .page-body > h3 .h-ico.ico-building{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BC5F1C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V7l8-4 8 4v14'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3Cpath d='M9 11h.01M15 11h.01'/%3E%3C/svg%3E")}
.sc-page .page-body > h4{font-size:18px;color:var(--ink);margin:26px auto 0}
.sc-page .page-body p{margin:16px auto 0}
.sc-page .page-body a{color:var(--accent-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.sc-page .page-body a:hover{color:var(--accent-ink)}
.sc-page .page-body strong{color:var(--ink);font-weight:800}

/* Liste: bullet in accento */
.sc-page .page-body ul,
.sc-page .page-body ol{margin:16px auto 0;padding-left:22px}
.sc-page .page-body li{margin-top:9px}
.sc-page .page-body ul{list-style:none;padding-left:0}
.sc-page .page-body ul > li{position:relative;padding-left:28px}
.sc-page .page-body ul > li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
.sc-page .page-body ol > li::marker{color:var(--accent-600);font-weight:800}

/* Citazioni e tabelle */
.sc-page .page-body blockquote{margin:26px auto;padding:18px 22px;background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--ink-2)}
.sc-page .page-body table{width:100%;border-collapse:collapse;margin:26px auto;font-size:16px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.sc-page .page-body th,.sc-page .page-body td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.sc-page .page-body th{background:var(--paper-2);color:var(--ink);font-weight:800;font-size:14.5px}
.sc-page .page-body tr:last-child td{border-bottom:none}
.sc-page .page-body img{border-radius:var(--radius-sm);margin:26px auto}

/* Non far ereditare gli stili di prosa allo schema JSON-LD eventualmente inline */
.sc-page .page-body script{display:none}

/* ---- Riga testo + immagine affiancati (feature-row) ----
   Alternativa alla figure a piena larghezza dentro il testo: qui titolo, paragrafo e
   immagine condividono la stessa riga, come nella hero-grid della home. Si rompe
   volutamente la colonna di lettura a 74ch (max-width:none) per usare tutta la larghezza
   del contenuto. .reverse inverte l'ordine (immagine a sinistra) per alternare il ritmo
   quando ci sono più blocchi in sequenza. */
.sc-page .page-body .feature-row{max-width:none;display:grid;grid-template-columns:1.08fr .92fr;gap:48px;
  align-items:center;margin:52px auto 0}
.sc-page .page-body .feature-row.reverse{grid-template-columns:.92fr 1.08fr}
.sc-page .page-body .feature-row.reverse .feature-media{order:-1}
.sc-page .page-body .feature-copy{max-width:52ch}
/* Gli H2/H3 qui dentro non sono figli diretti di .page-body: il selettore ">" sopra
   non li raggiunge, quindi li ristiliamo esplicitamente uguali (stesso peso visivo). */
.sc-page .page-body .feature-copy h2{font-size:clamp(24px,3vw,32px);color:var(--ink);margin:0;
  letter-spacing:-.02em;line-height:1.18}
.sc-page .page-body .feature-copy h3{font-size:21px;color:var(--ink);margin:0;line-height:1.25}
.sc-page .page-body .feature-copy p{margin-top:14px}
.sc-page .page-body .feature-media{margin:0}
.sc-page .page-body .feature-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;margin:0;
  border-radius:var(--radius-sm);box-shadow:var(--shadow);border:1px solid var(--line)}
.sc-page .page-body .feature-media figcaption{font-size:13px;color:var(--muted);margin-top:8px;text-align:center}
@media(max-width:860px){
  .sc-page .page-body .feature-row,
  .sc-page .page-body .feature-row.reverse{grid-template-columns:1fr;gap:20px;margin-top:40px}
  .sc-page .page-body .feature-row.reverse .feature-media{order:0}
  .sc-page .page-body .feature-copy{max-width:none}
}

/* ---- CTA mid-body (band della home, in linea nel contenuto) ---- */
.sc-page .cta-inline{margin:52px 0;max-width:none}
.sc-page .cta-inline .band{padding:34px}
.sc-page .cta-inline .band h2{font-size:clamp(22px,2.6vw,30px)}

/* ---- Sezione richiedi su pagina interna ---- */
.sc-page #richiedi{padding:70px 0}

/* ---- Landing pubblicitaria: header ridotto a logo + telefono, centrato ----
   Senza .nav-links (rimosso per le landing) non resta nulla a riempire lo spazio: il
   gruppo va centrato invece di restare ammassato a sinistra. Il telefono sale alla
   dimensione del logo (19px, la stessa di .brand) perche' qui e' l'unico altro
   elemento di testo dell'header e deve avere lo stesso peso visivo, non sembrare
   un dettaglio minore. */
.sc-page .sch .nav-landing{justify-content:center;gap:28px}
.sc-page .sch .nav-landing .nav-tel{font-size:19px}
@media(max-width:640px){
  .sc-page .sch .nav-landing{gap:18px}
  .sc-page .sch .nav-landing .nav-tel{font-size:16px}
}

/* ---- Landing pubblicitaria: header/breadcrumb/footer senza link verso altre pagine ----
   Sulle pagine normali .f-grid resta 1.6fr 1fr 1fr (brand, contatti, servizio); qui manca
   la terza colonna (nessun link al resto del sito), quindi solo due. */
.sc-page .f-grid-landing{grid-template-columns:1.6fr 1fr}
@media(max-width:960px){.sc-page .f-grid-landing{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.sc-page .f-grid-landing{grid-template-columns:1fr}}

/* ---- Responsive ---- */
@media(max-width:960px){
  /* Header: fino a 960 resta la nav desktop su una riga nowrap (brand + 5 voci + telefono +
     bottone) e sfora il viewport sui tablet (scrollWidth 932 su 768). Le riduzioni di
     sc-landing.css partono solo da 640. Qui compattiamo: il numero resta raggiungibile
     dalla CTA dell'hero, dalla sezione richiedi e dal footer. */
  .sc-page .sch .wrap{padding:0 16px}
  .sc-page .sch .nav{gap:14px}
  .sc-page .brand{font-size:17px}
  /* Contrasto del logo sotto i 960px. Qui .brand scende a 17px (e a 16px sotto i 640):
     sotto i 18.66px in grassetto il testo NON e' piu' "large text", quindi la soglia WCAG AA
     passa da 3.0:1 a 4.5:1. #CF6E26 (scelto quando il logo era 19px) da' 3.27:1 su --paper
     = FAIL. --accent-cta (#A85A16, token gia' in palette per l'accent che deve reggere AA)
     da' 4.67:1 su --paper e 4.63:1 sul fondo reale dell'header sticky sopra le sezioni .soft.
     Solo l'header: nel footer il logo sta su --ink, dove #CF6E26 vale 4.63:1 (gia' >= 4.5). */
  .sc-page .sch .brand .bname span{color:var(--accent-cta)}
  .sc-page .nav-links{gap:14px;margin-left:0}
  .sc-page .nav-links a{font-size:14px}
  .sc-page .nav-tel{display:none}
  .sc-page .sch .btn-primary{padding:9px 14px;font-size:14px}
  /* .brand scende a 17px qui sotto (sc-landing.css): il telefono della landing la segue,
     restando uniforme al logo anche in questo intervallo, non solo su desktop. */
  .sc-page .sch .nav-landing .nav-tel{font-size:17px}
  .sc-page .cta-inline .band{padding:26px}
  /* La regola `.request{grid-template-columns:.78fr 1.22fr}` di sc-landing.css sta fuori da
     ogni media query e scavalca ANCHE il breakpoint 960: senza questo la sezione resta a due
     colonne sui tablet (768px). Riportiamola a colonna singola da qui in giu'. */
  .sc-page #richiedi .request{grid-template-columns:1fr;gap:22px}
  .sc-page #richiedi .req-copy{position:static}
}
@media(max-width:640px){
  /* Header: sotto i 640px restano brand + bottone, che insieme sforavano i 390px
     (stesso difetto della home: scrollWidth 482). Riduciamo per stare nel viewport. */
  .sc-page .sch .wrap{padding:0 14px}
  .sc-page .sch .nav{gap:10px}
  .sc-page .brand{font-size:16px}
  .sc-page .brand .bmark{width:19px;height:19px}
  .sc-page .sch .btn-primary{padding:9px 13px;font-size:13.5px}
  /* Overflow orizzontale (scrollWidth 482 su viewport 390).
     Causa reale: in sc-landing.css la regola `.request{grid-template-columns:.78fr 1.22fr}`
     sta FUORI da media query e viene DOPO `@media(max-width:960px){.request{...:1fr}}`,
     quindi vince anche su mobile: la griglia resta a 2 colonne e `.req-card` sfora.
     Qui la riportiamo a colonna singola solo per le pagine interne (scope .sc-page).
     NB: la home ha lo stesso difetto, ma vive in sc-landing.css e non lo tocchiamo. */
  .sc-page #richiedi .request{grid-template-columns:1fr;gap:22px}
  .sc-page #richiedi .req-copy{position:static}
  .sc-page #richiedi .req-form :is(input,select,textarea){max-width:100%}
  .sc-page .hero-page{padding:32px 0 30px}
  .sc-page .page-sec{padding:40px 0 48px}
  .sc-page .page-body{font-size:16.5px}
  .sc-page .cta-inline{margin:38px 0}
  .sc-page .page-body > h2{margin-top:34px}
}