@charset "UTF-8";

/*
@copyright: CAFFEINAPURA Srls Unipersonale - All right reserved
Version: 2026.01 - 2026-03-06 00:00
Author: Roberto Cheli
*/

/* ── Reading progress ── */

#read-prog{
    position:fixed;top:66px;left:0;z-index:99;
    height:3px;width:0%;
    background:var(--g500);
    transition:width .1s linear;
    border-radius:0 2px 2px 0;
}

/* ── Sistema 1: hero articolo/pillar (.art-hero) ──
   Tecnica "boxed": immagine di sfondo a tutta altezza + contenuto in scatola
   da 1280px centrata, allineata alla griglia di pagina, ancorato in fondo. */

.art-hero{position:relative;overflow:hidden;background:var(--hero-bg);display:flex;}
.art-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 40%;background-repeat:no-repeat;}
.art-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(18,24,14,.08) 0%,rgba(18,24,14,.72) 100%);pointer-events:none;}
.art-hero-content{position:relative;z-index:1;max-width:1280px;width:100%;margin:0 auto;padding:0 var(--gutter) 48px;align-self:flex-end;}
.art-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g200);margin-bottom:12px;}
h1.art-title{font-family:var(--ff-d);font-size:clamp(1.7rem,4vw,2.8rem);font-weight:600;color:#fff;letter-spacing:-.025em;line-height:1.12;margin-bottom:18px;}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.8rem;color:rgba(255,255,255,.6);}
.art-meta-dot{color:rgba(255,255,255,.25);}
.art-meta-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);color:rgba(255,255,255,.85);font-size:.68rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:.25rem .65rem;border-radius:20px;border:1px solid rgba(255,255,255,.15);}

/* ── Sistema 2: hero categoria/magazine (.section-hero) ──
   Stessa tecnica boxed; contenuto = eyebrow + h1 + sottotitolo (no metadati). */

.section-hero{position:relative;height:var(--hero-img-h);min-height:var(--hero-img-min);max-height:var(--hero-img-max);overflow:hidden;display:flex;background:var(--hero-bg);}
.section-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 42%;background-repeat:no-repeat;background-color:var(--hero-bg);}
.section-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(18,24,14,.18) 0%,rgba(18,24,14,.68) 100%);pointer-events:none;}
.section-hero-content{position:relative;z-index:1;max-width:1280px;width:100%;margin:0 auto;padding:0 var(--gutter) 46px;align-self:flex-end;}
.section-eyebrow{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);color:var(--g200);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.3rem 1rem;border-radius:20px;border:1px solid rgba(255,255,255,.12);margin-bottom:16px;}
h1.section-title,.section-title{font-family:var(--ff-d);font-size:clamp(1.9rem,3.6vw,3rem);font-weight:600;color:#fff;letter-spacing:-.03em;line-height:1.1;margin-bottom:12px;}
.section-sub{font-size:.98rem;color:rgba(255,255,255,.6);line-height:1.7;max-width:560px;}

@media(max-width:840px){
    .section-hero{height:42vh;min-height:260px;}
    .section-hero-content, .art-hero-content{padding: 0 14px 36px;}
}
@media(max-width:600px){
    .section-hero{min-height:220px;}
    .section-hero-content{padding-left:20px;padding-right:20px;}
}
@media(max-width:480px){
    .section-sub{font-size:.9rem;}
}

/* ── Article layout (2 colonne) ── */

.art-layout{max-width:1280px;margin:0 auto;padding:0;display:grid;grid-template-columns:1fr 280px;gap:56px;align-items:start;}
@media(max-width:900px){
    .art-layout{grid-template-columns:1fr;gap:32px;padding:0 14px;}
}

/* ── Article body ── */

.art-body{padding:40px 0 60px;}
.art-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:28px;}
.art-tag{font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.25rem .65rem;border-radius:var(--r-s);background:var(--surface);color:var(--t500);border:1px solid var(--border);transition:all var(--ease);}
.art-tag:hover{background:var(--g100);border-color:var(--g300);color:var(--g700);}

/* ── Article content (body editoriale dal CMS) ── */

.art-content{font-size:1.05rem;line-height:1.85;color:var(--t700);}
.art-content .lead{font-family:var(--ff-d);font-size:1.18rem;font-weight:300;color:var(--t500);line-height:1.72;margin-bottom:32px;padding-bottom:28px;border-bottom:1px solid var(--border);}
.art-content h2{font-family:var(--ff-d);font-size:1.55rem;font-weight:600;color:var(--t900);letter-spacing:-.02em;margin:2.5rem 0 1rem;line-height:1.2;}
.art-content h3{font-family:var(--ff-d);font-size:1.15rem;font-weight:600;color:var(--t900);margin:2rem 0 .75rem;}
.art-content p{margin-bottom:1.4rem;}
.art-content strong{color:var(--t900);font-weight:600;}
.art-content a{color:var(--g600);}
.art-content a:hover{color:var(--g500);border-color:var(--g400);}
.art-content ul,.art-content ol{margin:1.2rem 0 1.6rem;padding:0;list-style:none;}
.art-content ul li,.art-content ol li{padding: 0rem 0 .45rem 1.6rem;position:relative;margin-bottom:.25rem;color:var(--t700);}
.art-content ul li::before{content:'';position:absolute;left:0;top:.9rem;width:6px;height:6px;border-radius:50%;background:var(--g400);}
.art-content ol{counter-reset:ol;}
.art-content ol li{counter-increment:ol;}
.art-content ol li::before{content:counter(ol);position:absolute;left:0;top:.35rem;width:22px;height:22px;border-radius:50%;background:var(--g700);color:#fff;font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;}
.art-content blockquote{margin:2.5rem 0;padding:20px 24px;border-left:3px solid var(--g400);background:var(--bg);border-radius:0 var(--r) var(--r) 0;}
.art-content blockquote p{font-family:var(--ff-d);font-style:italic;font-size:1.12rem;color:var(--t700);margin-bottom:8px;line-height:1.6;}
.art-content blockquote footer{font-size:.78rem;color:var(--t300);}

/* ── Author box ── */

.author-box{display:flex;align-items:flex-start;gap:16px;padding:20px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:32px 0;}
.author-av{width:104px;height:104px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--g100);}
.author-av-placeholder{width:104px;height:104px;border-radius:50%;flex-shrink:0;border:2px solid var(--g100);background:var(--g100);display:flex;align-items:center;justify-content:center;font-family:var(--ff-d);font-size:1.2rem;font-weight:600;color:var(--g600);}
.author-name{font-family:var(--ff-d);font-size:.97rem;font-weight:600;color:var(--t900);}
.author-bio{font-size:.82rem;color:var(--t300);margin-top:2px;}

/* ── Share row ── */

.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.share-lbl{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t300);margin-right:4px;}
.share-btn{display:inline-flex;align-items:center;gap:6px;padding:.4rem .9rem;border-radius:var(--r-s);border:1.5px solid var(--border);background:var(--white);font-size:.78rem;font-weight:500;color:var(--t700);cursor:pointer;transition:all var(--ease);}
.share-btn:hover{border-color:var(--g300);background:var(--g50);color:var(--g700);}
.share-btn i{font-size:.75rem;}
.share-btn.copied{background:var(--g100);border-color:var(--g400);color:var(--g700);}

@media(max-width:1024px){
    .share-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
    .share-lbl{grid-column:1 / -1;margin-bottom:2px;}
    .share-btn{justify-content:center;width:100%;}
}

/* ── Sidebar ── */

.art-sidebar{padding-top:40px;}
.sidebar-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-l);overflow:hidden;margin-bottom:16px;box-shadow:var(--sh-xs);}
.sc-head{padding:12px 16px;border-bottom:1px solid var(--border);font-size:.67rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t300);background:var(--bg);}
.sc-body{padding:10px 6px;}
.toc-item{display:flex;align-items:flex-start;gap:8px;padding:7px 10px;border-radius:var(--r-s);font-size:.82rem;color:var(--t500);cursor:pointer;border:none;background:transparent;text-align:left;width:100%;transition:all var(--ease);}
.toc-item:hover{background:var(--g50);color:var(--g700);}
.toc-item.active{background:var(--g100);color:var(--g700);font-weight:600;}
.toc-num{font-family:var(--ff-d);font-size:.75rem;font-weight:600;color:var(--g400);flex-shrink:0;min-width:20px;}
.sc-row{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:.82rem;color:var(--t500);border-bottom:1px solid var(--border);}
.sc-row:last-child{border-bottom:none;}
.sc-row i{color:var(--g400);font-size:.75rem;width:14px;}

/* Sidebar spoke links (lista articoli del cluster) */
.spoke-list{padding:6px;}
.spoke-link{display:flex;align-items:flex-start;gap:10px;padding:8px 8px;border-radius:var(--r-s);font-size:.8rem;color:var(--t500);transition:all var(--ease);}
.spoke-link:hover{background:var(--g50);color:var(--g700);}
.sl-num{font-family:var(--ff-d);font-size:.72rem;font-weight:600;color:var(--g400);min-width:18px;flex-shrink:0;line-height:1.5;}
.sl-text{line-height:1.4;flex:1;}

/* Sidebar CTA card */
.sidebar-cta{background:var(--g800);border-radius:var(--r-l);padding:22px 20px;margin-bottom:16px;box-shadow:var(--sh-m);}
.scta-title{font-family:var(--ff-d);font-size:1.1rem;font-weight:600;color:#fff;margin-bottom:6px;}
.scta-sub{font-size:.8rem;color:rgba(255,255,255,.5);line-height:1.6;margin-bottom:16px;}
.scta-btn{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--g500);color:#fff;font-size:.8rem;font-weight:600;padding:.65rem 1rem;border-radius:var(--r);transition:background var(--ease);width:100%;border:none;cursor:pointer;text-decoration:none;}
.scta-btn:hover{background:var(--g600);}

/* ── Focus mode (toggle dalla toolbar) ── */

body.focus-mode .art-sidebar{display:none;}
body.focus-mode .art-layout{grid-template-columns:1fr;max-width:720px;}

/* ── Fix layout mobile (colonna singola) ──
   Aggiunta 2026 — corregge il disallineamento orizzontale su mobile.
   Causa: la traccia grid 1fr ha min-width:auto implicito e non si
   comprime sotto la larghezza del figlio più largo (es. .comp-table),
   gonfiando .art-layout oltre il viewport. min-width:0 permette la
   compressione; il padding laterale viene ridotto sui piccoli schermi
   per uniformare i margini di tutti i blocchi del body. */

.art-layout > *{min-width:0;}

@media(max-width:900px){
    .art-layout{padding:0 20px;}
}
@media(max-width:480px){
    .art-layout{padding:0 16px;}
    .art-body{padding:28px 0 48px;}
}
/* ════════════════════════════════════════════════════════════════════════
   NEWSLETTER + RICERCA BLOG — aggiunto 2026-06-09
   Riutilizzabili su magazine, categoria e sidebar articolo.
   .sidebar-card / .sc-head / .sc-body sono definiti sopra (riuso contenitore).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Newsletter (widget sidebar/newsletter) ── */
.nl-card .sc-body{padding:14px 16px;}
.nl-text{font-size:.82rem;color:var(--t500);line-height:1.6;margin-bottom:12px;}
.nl-form{display:flex;flex-direction:column;gap:8px;}
.nl-input{font-family: var(--ff-b), sans-serif;font-size:.84rem;padding:.55rem .85rem;border:1.5px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--t900);outline:none;transition:border-color var(--ease);}
.nl-input:focus{border-color:var(--g400);}
.nl-btn{background:var(--g500);color:#fff;font-family: var(--ff-b), sans-serif;font-size:.8rem;font-weight:600;padding:.6rem;border-radius:var(--r);border:none;cursor:pointer;transition:background var(--ease);}
.nl-btn:hover{background:var(--g600);}
.nl-note{font-size:.7rem;color:var(--t300);line-height:1.5;margin-top:8px;}
/* ── Lista categorie in sidebar (box .cat-card-box) ── */
.cat-card-box .sc-body{padding:8px 8px;}
.sb-cat-list{display:flex;flex-direction:column;gap:2px;}
.sb-cat-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:var(--r-s);font-size:.85rem;color:var(--t700);transition:background var(--ease),color var(--ease);}
.sb-cat-item:hover{background:var(--g50);color:var(--g700);}
.sb-cat-item.active{background:var(--g100);color:var(--g700);font-weight:600;}
.sb-cat-name{display:flex;align-items:center;gap:9px;min-width:0;}
.sb-cat-name i{color:var(--g500);font-size:.8rem;width:16px;text-align:center;flex-shrink:0;}
.sb-cat-item:hover .sb-cat-name i{color:var(--g700);}
.sb-cat-count{font-size:.7rem;color:var(--t300);background:var(--surface);padding:.12rem .55rem;border-radius:20px;flex-shrink:0;}

/* ════════════════════════════════════════════════════════════════════════
   MAGAZINE — rifiniture contestuali (override solo dentro .mag-main)
   Aggiunto: 2026-06-10. Non tocca la homepage: gli stili globali di
   .pillar-hub / .pillar-hub-grid restano invariati per la home.
   ════════════════════════════════════════════════════════════════════════ */

/* #1 — riduci lo spazio in alto: pillar-hub è il primo elemento del body */
.mag-main .art-body{padding-top:8px;}
.mag-main .pillar-hub{padding:32px 0 48px;border-bottom:1px solid var(--border);}
.mag-main .ph-hub-hd{margin-bottom:28px;}

/* #3 — card guide adattive (vanno a capo, più grandi) invece di 7 colonne fisse */
.mag-main .pillar-hub-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;}
.mag-main .phg-card{padding:26px 16px 22px;}
.mag-main .phg-icon{width:52px;height:52px;font-size:1.15rem;}
.mag-main .phg-title{font-size:.94rem;}

/* spazio fra pillar-hub e 'Ultimi articoli' */
.mag-main .pillar-hub + .sec,.mag-main .pillar-hub + section{padding-top:40px;}

/* ── Ricerca in sidebar (card verticale, coerente con .nl-card) ── */
.search-card .sc-body{padding:14px 16px;}
.bs-form{display:flex;flex-direction:column;gap:8px;}
.bs-field{display:flex;align-items:center;gap:8px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r);padding:.5rem .75rem;transition:border-color var(--ease);}
.bs-field:focus-within{border-color:var(--g400);}
.bs-field i{color:var(--t300);font-size:.82rem;flex-shrink:0;}
.bs-input{flex:1;min-width:0;border:none;background:transparent;font-family:var(--ff-b);font-size:.84rem;color:var(--t900);outline:none;}
.bs-input::placeholder{color:var(--t300);}
.bs-btn{background:var(--g500);color:#fff;font-family:var(--ff-b);font-size:.8rem;font-weight:600;padding:.6rem;border-radius:var(--r);border:none;cursor:pointer;transition:background var(--ease);}
.bs-btn:hover{background:var(--g600);}

/* ── ART-CLUSTER CARDS (guide correlate negli articoli) ──
   Prefisso art-cluster- per evitare collisione con .cluster-card
   di cms-content.css (usata dentro .cluster-hub).               */
.art-cluster-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin: 1.6rem 0 2rem;
}
.art-cluster-card {
    background: var(--g50);
    border: 1px solid var(--border-2);
    border-radius: var(--r-l);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform var(--ease-m), box-shadow var(--ease-m);
}
.art-cluster-card:hover { transform: translateY(-3px); box-shadow: var(--sh-m); }
.art-cluster-card--pillar {
    background: var(--g100);
    border-color: var(--g400);
    border-width: 2px;
    box-shadow: 0 2px 12px rgba(78,119,64,.12);
}
.art-cluster-card--pillar::before {
    content: '★ Guida completa del cluster';
    display: block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--g600);
    background: var(--g200);
    border-radius: 20px;
    padding: .18rem .65rem;
    margin-bottom: 6px;
    width: fit-content;
}
.art-cluster-card h3 {
    font-family: var(--ff-d);
    font-size: .97rem;
    font-weight: 600;
    color: var(--t900);
    line-height: 1.3;
    margin: 0;
}
.art-cluster-card h3 a { color: var(--g600); border-bottom: 1px solid var(--g200); transition: color var(--ease); }
.art-cluster-card h3 a:hover { color: var(--g500); border-color: var(--g400); }
.art-cluster-card p { font-size: .82rem; color: var(--t500); line-height: 1.55; margin: 0; }
.art-cluster-kw {
    display: inline-block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--g500);
    background: var(--g100);
    border-radius: 20px;
    padding: .2rem .6rem;
    margin-top: 2px;
}
@media (max-width: 600px) { .art-cluster-cards { grid-template-columns: 1fr; } }
.art-cluster-card--pillar .art-cluster-kw {
    background: var(--g400);   /* #5e8f4e — verde pieno */
    color: #fff;
}