/* Sentieri d'Italia — foglio di stile condiviso
   Linguaggio visivo approvato: avorio + rosso segnavia + ocra, Fraunces/IBM Plex Mono/Inter.
   Estratto da index.html (hub) ed esteso per pillar/cluster/scheda/spoke. */
:root{
  --paper:#f4efe6; --carta:#fbf8f1; --ink:#1c1815; --grigio:#7a6f5e; --bordo:#ddd0b6;
  --rosso:#c0261f; --rosso-scuro:#9c1620; --ocra:#c19a3d;
  --serif:'Fraunces',Georgia,serif; --mono:'IBM Plex Mono',monospace; --sans:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.65;font-size:16.5px}
.wrap{max-width:1080px;margin:0 auto;padding:0 26px}
a{color:var(--rosso-scuro);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:.002em}
.mono{font-family:var(--mono)}
p{margin:0 0 1rem}
img{max-width:100%}

/* segnavia — numero CAI dentro bande bianco-rosso */
.trail-badge{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:29px;padding:0 8px;background:#fff;
  border:1px solid var(--rosso);border-left:7px solid var(--rosso);border-right:7px solid var(--rosso);
  font-family:var(--mono);font-weight:500;font-size:.9rem;color:var(--ink)}

/* due righine rosse — richiamo segnavia */
.top-rules{position:absolute;top:0;left:0;right:0;height:9px;z-index:6;pointer-events:none;
  background:linear-gradient(to bottom,var(--rosso) 0 2px,transparent 2px 7px,var(--rosso) 7px 9px)}

/* HEADER trasparente sopra l'hero (hub) */
header.top{position:absolute;top:0;left:0;right:0;z-index:5}
.nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.brand{font-family:var(--serif);font-weight:600;font-size:1.4rem;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.brand small{display:block;font-family:var(--mono);font-weight:400;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;opacity:.85;margin-top:2px}
.nav nav a{margin-left:24px;color:#fff;font-size:.92rem;opacity:.92;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.nav nav a:hover{opacity:1;text-decoration:none}

/* HEADER solido su carta (pagine interne senza hero fotografico) */
header.subhead{position:relative;background:var(--carta);border-bottom:1px solid var(--bordo)}
header.subhead .nav{padding:20px 0}
header.subhead .brand{color:var(--ink);text-shadow:none}
header.subhead .nav nav a{color:var(--ink);text-shadow:none;opacity:.85}
header.subhead .nav nav a:hover{color:var(--rosso);opacity:1}

/* HERO fotografico full-bleed (hub) */
.hero{position:relative;height:82vh;min-height:520px;max-height:760px;background:#1c1815;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,13,.82) 0%,rgba(20,16,13,.28) 42%,rgba(20,16,13,.15) 100%)}
.hero .h-inner{position:absolute;left:0;right:0;bottom:0;padding:0 0 54px}
.hero .eyebrow{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#f0d9b0}
.hero h1{color:#fff;font-size:clamp(46px,7.5vw,92px);line-height:1.02;font-weight:500;margin:14px 0 12px;max-width:760px;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero h1 em{font-style:italic;color:#f2cf9a}
.hero p.lead{font-family:var(--serif);font-size:clamp(18px,2.1vw,23px);color:#eee6d6;max-width:560px;line-height:1.5}

/* HERO editoriale su carta (pillar/cluster) — niente foto, bande segnavia */
.pagehead{background:var(--ink);color:#f4efe6;position:relative;overflow:hidden}
.pagehead::before{content:"";position:absolute;top:0;left:0;right:0;height:9px;
  background:linear-gradient(to bottom,var(--rosso) 0 2px,transparent 2px 7px,var(--rosso) 7px 9px)}
.pagehead .wrap{padding:64px 26px 54px}
.pagehead .eyebrow{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#f0d9b0}
.pagehead h1{font-size:clamp(38px,6vw,72px);line-height:1.03;font-weight:500;margin:12px 0 12px;max-width:840px}
.pagehead h1 em{font-style:italic;color:#f2cf9a}
.pagehead p.lead{font-family:var(--serif);font-size:clamp(17px,2vw,22px);color:#e4dccb;max-width:640px;line-height:1.5}

/* breadcrumb */
.crumbs{background:var(--carta);border-bottom:1px solid var(--bordo);font-family:var(--mono);font-size:.74rem}
.crumbs .wrap{padding:11px 26px}
.crumbs a{color:var(--grigio)}
.crumbs a:hover{color:var(--rosso)}
.crumbs span.sep{color:var(--bordo);margin:0 7px}
.crumbs span.here{color:var(--ink)}

/* sezioni */
section{padding:56px 0}
.sec-eyebrow{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--rosso);margin-bottom:12px}
h2.sec{font-size:clamp(26px,3.6vw,40px);font-weight:500;margin-bottom:10px}
.sec-sub{font-family:var(--serif);font-size:1.15rem;color:#5c5344;margin-bottom:30px;max-width:680px}
.prose{max-width:760px}
.prose p{font-size:1.04rem}
.prose h2{font-size:clamp(24px,3.2vw,34px);margin:34px 0 12px}
.prose h3{font-size:1.4rem;margin:26px 0 8px}
.prose ul{margin:0 0 1rem 1.2rem}
.prose li{margin:.25rem 0}

/* fascia editoriale (citazione) */
.filo-band{background:var(--carta);border-top:1px solid var(--bordo);border-bottom:1px solid var(--bordo)}
.filo-band .wrap{padding:36px 26px;display:flex;gap:22px;align-items:flex-start}
.filo-band .glyph{font-family:var(--serif);font-size:2.6rem;color:var(--rosso);line-height:1;flex:none}
.filo-band p{font-family:var(--serif);font-size:1.32rem;font-style:italic;color:#3a3327;max-width:820px;margin:0}
.filo-band p b{font-style:normal;color:var(--rosso-scuro)}

/* stat row */
.stats{display:flex;gap:38px;flex-wrap:wrap;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:22px 0;margin:6px 0 8px}
.stat b{display:block;font-family:var(--mono);font-size:1.6rem;font-weight:500;color:var(--ink)}
.stat span{color:var(--grigio);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}

/* griglia regioni / zone / comuni */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bordo);border:1px solid var(--bordo)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--bordo);border:1px solid var(--bordo)}
.cell{display:block;background:var(--carta);padding:22px 22px;color:var(--ink);transition:.15s}
.cell:hover{background:#fff;text-decoration:none}
.cell .n{font-family:var(--serif);font-size:1.32rem;font-weight:600}
.cell .cnt{font-family:var(--mono);font-size:.72rem;color:var(--rosso);margin:3px 0 6px}
.cell .c{color:var(--grigio);font-size:.86rem}
.cell.soon{opacity:.5}

/* lista sentieri (righe) */
.trail-list{border:1px solid var(--bordo);background:var(--carta)}
.trail-row{display:flex;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--bordo);color:var(--ink);transition:.12s}
.trail-row:last-child{border-bottom:0}
.trail-row:hover{background:#fff;text-decoration:none}
.trail-row .tr-badge{flex:none}
.trail-row .tr-main{flex:1;min-width:0}
.trail-row .tr-name{font-family:var(--serif);font-size:1.16rem;font-weight:600;line-height:1.2}
.trail-row .tr-sub{color:var(--grigio);font-size:.82rem;margin-top:2px}
.trail-row .tr-data{font-family:var(--mono);font-size:.82rem;color:var(--rosso);white-space:nowrap;flex:none}
.trail-list.plain .plain-row{padding:12px 20px;border-bottom:1px solid var(--bordo);font-size:.94rem}
.trail-list.plain .plain-row:last-child{border-bottom:0}
.trail-list.plain .plain-row .pn{font-family:var(--serif);font-weight:600}
.trail-list.plain .plain-row .ps{color:var(--grigio);font-size:.82rem}

/* scheda sentiero */
.trail-card{background:var(--carta);border:1px solid var(--bordo)}
.trail-head{display:flex;align-items:center;gap:16px;padding:26px 28px;border-bottom:1px solid var(--bordo);flex-wrap:wrap}
.trail-head h1{font-size:clamp(28px,4vw,44px);font-weight:600;flex:1;min-width:200px;margin:0}
.trail-meta{display:flex;gap:34px;padding:22px 28px;flex-wrap:wrap}
.tm b{display:block;font-family:var(--mono);font-size:1.28rem;font-weight:500}
.tm span{color:var(--grigio);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.segnatab{margin:0 28px 24px;border:1.5px solid var(--ink);overflow:hidden;max-width:560px}
.segnatab .row{display:flex;align-items:center;border-bottom:1px solid #cfc4a9;background:#fff}
.segnatab .row:last-child{border-bottom:0}
.segnatab .sq{width:22px;align-self:stretch;background:var(--rosso)}
.segnatab .meta{flex:1;padding:11px 15px;font-weight:500;font-size:.96rem}
.segnatab .t{padding:11px 16px;font-family:var(--mono);color:var(--grigio)}
.segnatab .arrow{width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-left:16px solid var(--rosso)}

/* tabella dati OSM */
.data-table{width:100%;border-collapse:collapse;background:var(--carta);border:1px solid var(--bordo);margin:8px 0 20px}
.data-table th,.data-table td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--bordo);font-size:.95rem}
.data-table th{font-family:var(--mono);font-weight:500;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--grigio);width:40%;vertical-align:top}
.data-table td{font-weight:500}
.data-table tr:last-child th,.data-table tr:last-child td{border-bottom:0}
.data-table td.na{color:var(--grigio);font-weight:400;font-style:italic}

/* box dormire / callout */
.dormi{background:var(--carta);border:1px solid var(--bordo);border-left:4px solid var(--ocra);padding:20px 24px;margin:20px 0;font-family:var(--serif);font-size:1.06rem;color:#5c5344}
.dormi b{font-family:var(--sans);font-size:.9rem;color:var(--ink)}
.callout{background:#fff;border:1px solid var(--bordo);border-left:4px solid var(--rosso);padding:16px 22px;margin:18px 0;font-size:.95rem}
.callout b{color:var(--rosso-scuro)}

/* chip comuni */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 20px}
.chip{display:inline-block;background:var(--carta);border:1px solid var(--bordo);padding:5px 12px;font-size:.86rem;color:var(--ink)}
a.chip:hover{border-color:var(--rosso);color:var(--rosso);text-decoration:none}

/* FAQ */
.faq{margin:18px 0}
.faq details{background:var(--carta);border:1px solid var(--bordo);margin-bottom:8px;padding:0}
.faq summary{cursor:pointer;padding:15px 20px;font-family:var(--serif);font-weight:600;font-size:1.08rem}
.faq details[open] summary{border-bottom:1px solid var(--bordo)}
.faq .a{padding:15px 20px;color:#5c5344}

/* cross-verticali */
.verticals{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.vert{padding:22px 0;border-top:2px solid var(--ink);color:var(--ink)}
.vert:hover{text-decoration:none}
.vert:hover .t{color:var(--rosso)}
.vert .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rosso)}
.vert .t{font-family:var(--serif);font-weight:600;font-size:1.26rem;margin:8px 0 3px}
.vert .d{color:var(--grigio);font-size:.85rem}

/* footer */
.site-footer{background:#1c1815;color:#cabfad;padding:48px 0 0;margin-top:20px}
.site-footer__inner{max-width:1080px;margin:0 auto;padding:0 26px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:30px}
.site-footer__col h4{font-family:var(--serif);font-weight:600;font-size:1.16rem;color:#f4efe6;margin-bottom:12px}
.site-footer__col a{display:block;color:#cabfad;font-size:.88rem;margin:5px 0}
.site-footer__col a:hover{color:#fff}
.site-footer__col p{font-size:.86rem;line-height:1.6}
.site-footer__bar{max-width:1080px;margin:32px auto 0;padding:16px 26px;border-top:1px solid #3a352d;display:flex;justify-content:space-between;font-family:var(--mono);font-size:.72rem;flex-wrap:wrap;gap:8px}
.ra-bottombar{background:#151210;color:#8c8477;font-family:var(--mono);font-size:.7rem}
.ra-bottombar__inner{max-width:1080px;margin:0 auto;padding:12px 26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.ra-bottombar a{color:#b3aa9a}.ra-heart{color:var(--rosso)}

@media(max-width:860px){
  .hero{height:78vh}
  .grid3,.grid2,.verticals,.site-footer__inner{grid-template-columns:repeat(2,1fr)}
  .filo-band .wrap{flex-direction:column;gap:10px}
  .nav nav a{margin-left:16px}
}
@media(max-width:520px){
  .grid3,.grid2,.verticals,.site-footer__inner{grid-template-columns:1fr}
  .trail-meta{gap:20px}
  .brand small{display:none}
}