@charset "UTF-8";

/*
@copyright: CAFFEINAPURA Srls Unipersonale - All right reserved
Version: 2026.01 - 2026-06-09
Autore: Roberto Cheli

Singolo articolo blog. Carica DOPO base.css + article-shell.css + cms-content.css.
Hero base (.art-hero*) e contenuto boxed sono in article-shell.css.
Qui solo: altezza hero + supporto immagine via <img> + sezione "Articoli correlati".
*/

/* ── Article hero (immagine di copertina) ── */
.art-hero{height:62vh;min-height:380px;max-height:580px;}
.art-hero img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block;}

/* Decoro eyebrow (trattino verde prima del testo) */
.art-eyebrow::before{content:'';width:14px;height:1.5px;background:var(--g300);border-radius:2px;}

/* ── Related posts ── */
.related-sec{background:var(--bg);border-top:1px solid var(--border);padding:64px var(--gutter);}
.related-wrap{max-width:1100px;margin:0 auto;}
.related-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:32px;}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;}
.rel-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-l);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--ease-m),box-shadow var(--ease-m);}
.rel-card:hover{transform:translateY(-4px);box-shadow:var(--sh-l);}
.rel-img{height:175px;overflow:hidden;}
.rel-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.rel-card:hover .rel-img img{transform:scale(1.04);}
.rel-body{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column;}
.rel-cat{font-size:.65rem;font-weight:700;color:var(--g500);letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px;}
.rel-title{font-family:var(--ff-d);font-size:.97rem;font-weight:600;color:var(--t900);line-height:1.3;margin-bottom:10px;flex:1;}
.rel-meta{font-size:.72rem;color:var(--t300);display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--border);}

@media(max-width:840px){
    .related-sec{padding:48px var(--gutter);}
    .related-hd{margin-bottom:24px;}
}
@media(max-width:600px){
    .related-sec{padding:40px var(--gutter);}
    .related-grid{grid-template-columns:1fr;gap:14px;}
}
@media(max-width:480px){
    .rel-img{height:160px;}
}