@charset "UTF-8";

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

Blocchi editoriali riutilizzabili nel body CMS:
callout, cluster-hub, read-more-link, comp-table, faq, cta-block.
Usato da blog-category e pillar-page (e da qualunque template articolo
che renda contenuto strutturato dal CMS).
*/

/* ── Callout boxes ── */

.callout{border-radius:var(--r-l);padding:22px 24px;margin:2rem 0;display:flex;gap:16px;align-items:flex-start;}
.callout-icon{font-size:1.15rem;flex-shrink:0;margin-top:2px;}
.callout-title{font-family:var(--ff-d);font-size:.95rem;font-weight:600;margin-bottom:8px;}
.callout-body p{margin-bottom:0;font-size:.93rem;line-height:1.7;}
.callout-body ul{margin:.5rem 0 0;}
.callout-body ul li{font-size:.93rem;padding:.3rem 0 .3rem 1.5rem;}
.callout-body ul li::before{top:.77rem;}
.callout--green{background:var(--g50);border:1px solid var(--g200);}
.callout--green .callout-icon,.callout--green .callout-title{color:var(--g700);}
.callout--amber{background:var(--a-bg);border:1px solid #e8c98a;}
.callout--amber .callout-icon{color:var(--a400);}
.callout--amber .callout-title{color:var(--a500);}
.callout--surface{background:var(--surface);border:1px solid var(--border);}
.callout--surface .callout-icon{color:var(--g400);}
.callout--surface .callout-title{color:var(--t700);}

/* ── Cluster hub (raggruppa link a sotto-articoli) ── */

.cluster-hub{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px 28px 24px;margin:2.8rem 0;}
.cluster-hub-eye{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g500);display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.cluster-hub-eye::before{content:'';width:12px;height:2px;background:var(--g500);border-radius:2px;}
.cluster-hub-title{font-family:var(--ff-d);font-size:1.2rem;font-weight:600;color:var(--t900);margin-bottom:4px;}
.cluster-hub-sub{font-size:.82rem;color:var(--t300);margin-bottom:20px;}
.cluster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:10px;}
.cluster-card{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-l);transition:all var(--ease-m);}
.cluster-card:hover{border-color:var(--g300);box-shadow:var(--sh-s);transform:translateY(-2px);}
.cc-icon{width:38px;height:38px;border-radius:var(--r);background:var(--g50);border:1px solid var(--g200);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--g500);flex-shrink:0;}
.cc-cat{font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g400);margin-bottom:3px;}
.cc-title{font-family:var(--ff-d);font-size:.88rem;font-weight:600;color:var(--t900);line-height:1.3;}
.cc-min{font-size:.7rem;color:var(--t300);margin-top:4px;}

@media(max-width:1024px){
    .cluster-hub{padding:28px 14px 24px;}
}
@media(max-width:600px){
    .cluster-grid{grid-template-columns:1fr;}
}

/* ── Read more / spoke link inline ── */

.read-more-link{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--g50);border:1px solid var(--g200);border-radius:var(--r-l);margin:1.6rem 0;transition:all var(--ease-m);}
.read-more-link:hover{background:var(--g100);border-color:var(--g300);transform:translateX(3px);}
.rml-icon{width:36px;height:36px;border-radius:50%;background:var(--g500);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;}
.rml-label{font-size:.6rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--g500);margin-bottom:2px;}
.rml-title{font-family:var(--ff-d);font-size:.95rem;font-weight:600;color:var(--t900);line-height:1.25;}
.rml-arrow{margin-left:auto;color:var(--g400);font-size:.75rem;flex-shrink:0;transition:transform var(--ease);}
.read-more-link:hover .rml-arrow{transform:translateX(4px);}

/* ── Tabella comparativa ── */

.table-wrap{overflow-x:auto;margin:2rem 0;border-radius:var(--r-l);border:1px solid var(--border);box-shadow:var(--sh-s);}
.comp-table{width:100%;border-collapse:collapse;font-size:.88rem;}
.comp-table thead tr{background:var(--g800);}
.comp-table thead th{padding:12px 16px;text-align:left;color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;}
.comp-table thead th:first-child{font-family:var(--ff-d);font-size:.85rem;text-transform:none;letter-spacing:0;}
.comp-table tbody tr{border-bottom:1px solid var(--border);}
.comp-table tbody tr:last-child{border-bottom:none;}
.comp-table tbody tr:nth-child(even){background:var(--bg);}
.comp-table td{padding:11px 16px;color:var(--t700);vertical-align:middle;}
.comp-table td:first-child{font-weight:600;color:var(--t900);}
.stars{color:var(--g500);letter-spacing:1px;font-size:.8rem;}
.stars-empty{color:var(--border-2);}
.badge-best{display:inline-block;background:var(--g100);color:var(--g700);font-size:.62rem;font-weight:700;padding:.15rem .5rem;border-radius:20px;border:1px solid var(--g200);margin-left:6px;}

/* ── CTA block (sfondo scuro nel body CMS) ── */

.cta-block{background:var(--g800);border-radius:var(--r-xl);padding:36px 32px;margin:3rem 0 1rem;text-align:center;}
.cta-eye{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g300);margin-bottom:10px;}
.cta-block h3{font-family:var(--ff-d);font-size:1.5rem;font-weight:600;color:#fff;margin-bottom:10px;line-height:1.25;}
.cta-block p{font-size:.92rem;color:rgba(255,255,255,.6);line-height:1.65;margin-bottom:22px;max-width:480px;margin-left:auto;margin-right:auto;}
.cta-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.btn-cta{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--g700);font-family:var(--ff-b);font-size:.9rem;font-weight:700;padding:.8rem 1.8rem;border-radius:var(--r);transition:all var(--ease);border:none;}
.btn-cta:hover{background:var(--g100);color:var(--g800);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.2);}
.btn-cta-secondary{display:inline-flex;align-items:center;gap:7px;background:#4a7740;color:#fff;font-family:var(--ff-b);font-size:.88rem;font-weight:600;padding:.78rem 1.4rem;border-radius:var(--r);border:2px solid rgba(255,255,255,.5);transition:all var(--ease);}
.btn-cta-secondary:hover{background:rgba(255,255,255,.1);border-color:#fff;}
@media(max-width:480px){.cta-block{padding:24px 18px;}.btn-cta,.btn-cta-secondary{width:100%;justify-content:center;}}