/* Stili delle sezioni Consigli ed Eventi (articoli, hub) e della pagina 404.
   Font, colori, reset, pulsanti, header, menu e footer NON stanno qui:
   sono in /assets/sito.css, comune a tutto il sito e caricato prima di questo file. */

a{color:var(--nero);text-decoration-color:var(--salvia);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--nero)}
img{height:auto}
.stretto{max-width:780px}

/* breadcrumb */
.briciole{font-size:13.5px;color:var(--grigio);padding-top:32px}
.briciole ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.briciole li+li::before{content:'/';margin-right:6px;color:var(--bordo-forte)}
.briciole a{color:var(--grigio);text-decoration:none}
.briciole a:hover{color:var(--nero);text-decoration:underline}

/* testata articolo */
.tag{
  display:inline-block;margin:36px 0 14px;
  font-size:13.5px;font-weight:600;letter-spacing:0;color:var(--salvia);
}
.articolo h1{font-size:clamp(32px,5.2vw,50px);font-weight:600;line-height:1.06;letter-spacing:-.03em}
.sommario{margin-top:20px;font-size:clamp(18px,2.2vw,20px);line-height:1.5;color:var(--grigio);max-width:60ch}
.firma{
  margin-top:24px;padding-top:18px;border-top:1px solid var(--bordo);
  font-size:14px;color:var(--grigio);display:flex;flex-wrap:wrap;gap:4px 22px;
}
.firma span:first-child{color:var(--nero);font-weight:500}
.copertina{margin:34px 0 10px}
.copertina img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-m);background:var(--salvia-chiara)}
.copertina figcaption,.immagine figcaption{margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--grigio)}
.copertina figcaption a,.immagine figcaption a{color:inherit}
.immagine{margin:32px 0}
.immagine img{display:block;width:100%;height:auto;border-radius:var(--r-m);background:var(--salvia-chiara)}

/* indice */
.indice{
  margin:36px 0 40px;padding:22px 26px;
  background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--r-m);
}
.indice strong{display:block;font-size:14px;font-weight:600;margin-bottom:10px}
.indice ol{list-style:none;counter-reset:voce;font-size:15.5px;display:grid;gap:2px}
.indice li{counter-increment:voce;display:flex;gap:12px;line-height:1.45;padding:5px 0}
.indice li::before{content:counter(voce,decimal-leading-zero);font-size:13px;color:var(--salvia);font-variant-numeric:tabular-nums;padding-top:2px;flex:0 0 auto}
.indice a{text-decoration:none}
.indice a:hover{text-decoration:underline}

/* corpo */
.corpo{font-size:18px;line-height:1.72}
.corpo h2{font-size:clamp(25px,3.6vw,32px);line-height:1.15;margin:60px 0 18px;scroll-margin-top:90px}
.corpo h3{font-size:21px;line-height:1.3;letter-spacing:-.015em;margin:36px 0 10px;scroll-margin-top:90px}
.corpo p{margin:0 0 20px}
.corpo ul,.corpo ol{margin:0 0 22px 22px}
.corpo li{margin:7px 0;padding-left:4px}
.corpo li::marker{color:var(--salvia)}
.corpo strong{font-weight:600}
.corpo table{
  width:100%;border-collapse:collapse;margin:8px 0 26px;font-size:15px;line-height:1.5;
  font-variant-numeric:tabular-nums;
}
.corpo th,.corpo td{padding:12px 14px 12px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--bordo)}
.corpo th{font-size:13.5px;font-weight:600;color:var(--grigio);border-bottom:1.5px solid var(--nero)}
.corpo td:first-child{font-weight:500}
.tabella{overflow-x:auto;-webkit-overflow-scrolling:touch}
.corpo figure{margin:32px 0}
.corpo figure img{border-radius:var(--r-m)}
.corpo figcaption{font-size:13.5px;color:var(--grigio);margin-top:8px}
.nota{background:var(--salvia-chiara);border-radius:var(--r-m);padding:20px 24px;margin:28px 0;font-size:16.5px;line-height:1.65}
.nota-host{
  position:relative;margin:32px 0;padding:22px 26px 22px 26px;
  background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--r-m);
  font-size:17px;line-height:1.68;
}
.nota-host::before{content:'';position:absolute;left:0;top:22px;bottom:22px;width:3px;border-radius:0 3px 3px 0;background:var(--salvia)}
.nota-host strong{display:block;font-size:14px;font-weight:600;color:var(--salvia);margin-bottom:6px}

/* box commerciale: una foto della casa a lato, solo decorativa */
.cta-box{
  position:relative;overflow:hidden;isolation:isolate;
  margin:56px 0;padding:clamp(28px,5vw,44px);
  padding-right:calc(38% + clamp(28px,5vw,44px));
  background:var(--salvia-chiara);border-radius:var(--r-l);
}
.cta-box::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:38%;z-index:-1;
  background:url(/foto/web/soggiorno-spazioso-appartamento-vacanze-vicino-torino-stazio-800.webp) center/cover no-repeat;
}
.cta-box h2{margin:0 0 12px;font-size:clamp(23px,3.2vw,30px);line-height:1.15}
.cta-box p{color:var(--grigio);max-width:46ch;margin:0 0 24px;font-size:16.5px}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
.cta-box .btn{white-space:normal;text-align:center}
/* un solo pulsante pieno per riquadro: «Scegli le date e prenota» (.btn-scuro verso /prenota/,
   stile di sito.css); WhatsApp secondario, a contorno con testo scuro e icona verde (2026-10-21) */
.cta-box .btn-wa{background:transparent;color:var(--nero);border-color:var(--bordo-forte)}

/* FAQ */
.faq{margin:10px 0 36px;border-top:1px solid var(--bordo)}
.faq-voce{border-bottom:1px solid var(--bordo)}
.faq-voce summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;
  padding:20px 0;font-weight:600;font-size:17px;line-height:1.4;letter-spacing:-.01em;
  -webkit-tap-highlight-color:transparent;
}
.faq-voce summary::-webkit-details-marker{display:none}
.faq-voce summary::after{
  content:'';flex:0 0 auto;margin-left:auto;margin-top:2px;width:22px;height:22px;
  background:var(--salvia);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M222,128a6,6,0,0,1-6,6H134v82a6,6,0,0,1-12,0V134H40a6,6,0,0,1,0-12h82V40a6,6,0,0,1,12,0v82h82A6,6,0,0,1,222,128Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M222,128a6,6,0,0,1-6,6H134v82a6,6,0,0,1-12,0V134H40a6,6,0,0,1,0-12h82V40a6,6,0,0,1,12,0v82h82A6,6,0,0,1,222,128Z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s var(--curva);
}
.faq-voce[open] summary::after{transform:rotate(45deg)}
.faq-risposta{padding:0 38px 22px 0;color:var(--grigio);font-size:16.5px;line-height:1.68}
@media (prefers-reduced-motion:reduce){.faq-voce summary::after{transition:none}}

/* correlati e hub */
.correlati{border-top:1px solid var(--bordo);margin-top:48px;padding:40px 0 20px}
.correlati h2{font-size:24px;margin-bottom:20px}
.schede{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.scheda{
  display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px;
  background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--r-m);
  text-decoration:none;color:var(--nero);
  transition:border-color .2s ease,transform 200ms var(--ease-out),box-shadow .2s ease;
}
.scheda:active{transform:scale(.985)}
.scheda .tag,.scheda .scheda-tag{margin:0;font-size:12.5px;font-weight:600;color:var(--salvia)}
.scheda h3{font-size:18px;line-height:1.3;letter-spacing:-.015em}
.scheda p{font-size:14.5px;color:var(--grigio);line-height:1.55}

.hub-testa{padding:8px 0 20px;max-width:820px}
.hub-testa .tag{margin-top:36px}
.hub-testa h1{font-size:clamp(36px,6vw,60px);font-weight:600;letter-spacing:-.035em;line-height:1.02}
.hub-testa p{margin-top:20px;color:var(--grigio);font-size:18.5px;line-height:1.55;max-width:60ch}
.hub-lista{padding:26px 0 60px;grid-template-columns:repeat(2,1fr);gap:18px}
/* schede dell'hub con anteprima della copertina */
.hub-lista .scheda{padding:0;overflow:hidden;gap:0}
.hub-lista .scheda img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--salvia-chiara);transition:transform .5s var(--curva)}
.hub-lista .scheda .testo{display:flex;flex-direction:column;gap:8px;padding:22px 24px 26px}
.hub-lista .scheda h3{font-size:clamp(19px,2vw,22px)}
.hub-lista .scheda:first-child{grid-column:1 / -1;display:grid;grid-template-columns:1.25fr 1fr}
.hub-lista .scheda:first-child img{height:100%;aspect-ratio:auto;min-height:280px}
.hub-lista .scheda:first-child .testo{justify-content:center;padding:32px 36px}
.hub-lista .scheda:first-child h3{font-size:clamp(22px,2.6vw,30px);line-height:1.15}

@media (max-width:760px){
  .hub-lista{grid-template-columns:1fr}
  .hub-lista .scheda:first-child{display:flex}
  .hub-lista .scheda:first-child img{aspect-ratio:16/9;min-height:0}
  .hub-lista .scheda:first-child .testo{padding:22px 24px 26px}
  .cta-box{padding:0 0 clamp(26px,6vw,34px)}
  .cta-box::after{position:static;display:block;width:auto;height:180px;margin-bottom:24px}
  .cta-box h2,.cta-box p,.cta-box .cta-row{margin-left:clamp(22px,6vw,32px);margin-right:clamp(22px,6vw,32px)}
  .cta-box{display:flex;flex-direction:column}
  .cta-box::after{order:-1}
}
@media (max-width:640px){
  .corpo{font-size:17px}
  .nota-host{font-size:16.5px;padding:20px 20px 20px 22px}
  .indice{padding:18px 20px}
  .btn{flex:1 1 100%}
}

@media (hover:hover) and (pointer:fine){
  .faq-voce summary:hover{color:var(--salvia)}
  .scheda:hover{border-color:var(--bordo-forte);transform:translateY(-2px);box-shadow:var(--ombra)}
  .hub-lista .scheda:hover img{transform:scale(1.03)}
  .cta-box .btn-wa:hover{background:transparent;border-color:var(--nero)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
  .scheda:hover,.hub-lista .scheda:hover img{transform:none}
}