/* ============================================================
   CANNONI CONRAD · CLASSI BASE v2.0
   Stessi nomi delle classi globali V4 (cc-*). Sulla V3 si usano
   da Avanzate > Classi CSS. I widget CC Pack le presuppongono.
   Solo var(--cc-*), niente hex. Breakpoint: 960 tablet, 640 mobile.
   ============================================================ */

/* ---------- Sezioni e contenitore ---------- */
.cc-sec{padding:var(--cc-section-y) 24px}
.cc-sec--dark{background:var(--cc-black);color:var(--cc-white)}
.cc-sec--light{background:var(--cc-surface);color:var(--cc-ink)}
.cc-sec--white{background:var(--cc-white);color:var(--cc-ink)}
.cc-wrap{max-width:var(--cc-container);margin:0 auto}
.cc-sec-head{margin-bottom:40px}
.cc-sec-head-center{text-align:center}
.cc-sec-head-center .cc-lead{margin-inline:auto}

/* ---------- Contesto colore ---------- */
.cc-on-dark{color:var(--cc-white)}
.cc-on-dark p{color:var(--cc-text-dark-2)}
.cc-on-dark h1,.cc-on-dark h2,.cc-on-dark h3,.cc-on-dark h4{color:var(--cc-white)}
.cc-light{color:var(--cc-ink)}

/* ---------- Tipografia ---------- */
.cc-h1{font:400 var(--cc-h1)/1.08 var(--cc-font-display);text-transform:uppercase;margin:0}
.cc-h2{font:400 var(--cc-h2)/1.15 var(--cc-font-display);text-transform:uppercase;margin:0}
.cc-h3{font:700 1.1rem/1.3 var(--cc-font-body);text-transform:uppercase;letter-spacing:.04em;margin:0}
.cc-sub{font:600 1rem/1.4 var(--cc-font-body);text-transform:uppercase;letter-spacing:.05em}
.cc-kicker{font:600 .78rem/1 var(--cc-font-body);text-transform:uppercase;letter-spacing:.1em;color:var(--cc-accent);margin-bottom:14px}
.cc-on-dark .cc-kicker{color:var(--cc-accent-dark)}
.cc-lead{margin-top:12px;max-width:56ch;color:var(--cc-ink-2);font-size:1rem;line-height:1.65}
.cc-on-dark .cc-lead{color:var(--cc-text-dark-2)}
.cc-caption{font:400 .85rem/1.5 var(--cc-font-body);color:var(--cc-muted)}
.cc-on-dark .cc-caption{color:var(--cc-muted-dark)}
.cc-outline{color:transparent;-webkit-text-stroke:2px currentColor}

/* ---------- Griglie ---------- */
.cc-grid{display:grid;gap:var(--cc-grid-gap)}
.cc-grid--2{grid-template-columns:repeat(2,1fr)}
.cc-grid--3{grid-template-columns:repeat(3,1fr)}
.cc-grid--4{grid-template-columns:repeat(4,1fr)}
.cc-grid--5{grid-template-columns:repeat(5,1fr)}
.cc-grid--narrow{max-width:760px;margin-inline:auto}

/* ---------- Bottoni ---------- */
.cc-btn{display:inline-flex;align-items:center;gap:10px;border-radius:var(--cc-radius-pill);padding:13px 28px;font:700 .875rem/1 var(--cc-font-body);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background var(--cc-motion-micro) var(--cc-ease),color var(--cc-motion-micro) var(--cc-ease),border-color var(--cc-motion-micro) var(--cc-ease)}
.cc-btn--primary{background:var(--cc-accent);color:var(--cc-white)}
.cc-btn--primary:hover{background:var(--cc-accent-hover);color:var(--cc-white)}
.cc-btn--primary:active{background:var(--cc-accent-pressed)}
.cc-btn--secondary{background:var(--cc-ink);color:var(--cc-white)}
.cc-btn--secondary:hover{background:var(--cc-black);color:var(--cc-white)}
.cc-on-dark .cc-btn--secondary,.cc-sec--dark .cc-btn--secondary{background:var(--cc-white);color:var(--cc-ink)}
.cc-on-dark .cc-btn--secondary:hover,.cc-sec--dark .cc-btn--secondary:hover{background:var(--cc-text-dark-2);color:var(--cc-ink)}
.cc-btn--ghost{background:transparent;color:currentColor;border-color:currentColor}
.cc-btn--ghost:hover{background:rgba(0,0,0,.06)}
.cc-on-dark .cc-btn--ghost:hover,.cc-sec--dark .cc-btn--ghost:hover{background:rgba(255,255,255,.1)}
.cc-btn--sm{padding:10px 20px;font-size:.78rem}
.cc-btn--block{display:flex;justify-content:center;width:100%}
.cc-btn:focus-visible{outline:3px solid var(--cc-accent);outline-offset:3px}
.cc-btn[disabled],.cc-btn.is-disabled{opacity:.4;pointer-events:none}
.cc-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}

/* ---------- Badge, pill, chip ---------- */
.cc-badge{display:inline-block;border-radius:var(--cc-radius-badge);padding:4px 10px;font:700 .68rem/1.3 var(--cc-font-body);text-transform:uppercase;letter-spacing:.1em;border:1.5px solid var(--cc-accent);color:var(--cc-accent);background:transparent}
.cc-badge--solid{background:var(--cc-accent);color:var(--cc-white)}
.cc-on-dark .cc-badge{border-color:var(--cc-accent-dark);color:var(--cc-accent-dark)}
.cc-on-dark .cc-badge--solid{background:var(--cc-accent);color:var(--cc-white);border-color:var(--cc-accent)}
.cc-pill{display:inline-flex;align-items:center;gap:8px;border-radius:var(--cc-radius-pill);padding:8px 16px;font:600 .8rem/1 var(--cc-font-body);text-transform:uppercase;letter-spacing:.06em;background:var(--cc-white);border:1.5px solid var(--cc-border);color:var(--cc-ink);text-decoration:none;cursor:pointer}
.cc-pill.is-active{background:var(--cc-ink);color:var(--cc-white);border-color:var(--cc-ink)}
.cc-on-dark .cc-pill{background:transparent;border-color:var(--cc-line-dark);color:var(--cc-white)}
.cc-on-dark .cc-pill.is-active{background:var(--cc-white);color:var(--cc-ink);border-color:var(--cc-white)}

/* ---------- Liste specs con "+" ---------- */
.cc-specs{list-style:none;margin:0;padding:0;font-size:.9rem}
.cc-specs li{position:relative;padding:7px 0 7px 20px;border-bottom:1px solid var(--cc-border)}
.cc-specs li:last-child{border-bottom:0}
.cc-specs li::before{content:"+";position:absolute;left:0;top:5px;color:var(--cc-accent);font-weight:700;font-size:1.05rem}
.cc-specs strong{font-weight:600}
.cc-on-dark .cc-specs li{border-color:var(--cc-line-dark)}
.cc-on-dark .cc-specs li::before{color:var(--cc-accent-dark)}

/* ---------- Media frame ---------- */
.cc-frame{border-radius:var(--cc-radius-card);overflow:hidden;background:var(--cc-panel)}
.cc-frame img,.cc-frame video,.cc-frame iframe{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- Pannello e blocco accent ---------- */
.cc-panel{background:var(--cc-white);border:1px solid var(--cc-border);border-radius:var(--cc-radius-card);box-shadow:var(--cc-shadow-card);padding:24px}
.cc-on-dark .cc-panel{background:var(--cc-panel);border-color:var(--cc-line-dark);box-shadow:none}
.cc-accent{background:var(--cc-accent);color:var(--cc-white);border-radius:var(--cc-radius-block);padding:40px 44px}
.cc-accent h2{font:400 clamp(1.6rem,3vw,2.2rem)/1.1 var(--cc-font-display);text-transform:uppercase;margin:0 0 10px;color:var(--cc-white)}
.cc-accent p{margin:0;color:var(--cc-white);opacity:.95}

/* ---------- Form ---------- */
.cc-field{display:flex;flex-direction:column;gap:6px}
.cc-field label{font:600 .78rem/1.3 var(--cc-font-body);text-transform:uppercase;letter-spacing:.08em}
.cc-field input,.cc-field select,.cc-field textarea{font:400 1rem/1.4 var(--cc-font-body);color:var(--cc-ink);background:var(--cc-white);border:2px solid transparent;border-radius:var(--cc-radius-badge);padding:11px 14px;width:100%}
.cc-light .cc-field input,.cc-light .cc-field select,.cc-light .cc-field textarea{border-color:var(--cc-field-border)}
.cc-field textarea{min-height:120px;resize:vertical}
.cc-field input:focus,.cc-field select:focus,.cc-field textarea:focus{outline:none;border-color:var(--cc-accent)}
.cc-field.has-error input,.cc-field.has-error select,.cc-field.has-error textarea{border-color:var(--cc-error)}
.cc-field label.cc-check{display:flex;gap:12px;align-items:flex-start;font:400 .85rem/1.5 var(--cc-font-body);text-transform:none;letter-spacing:0;color:var(--cc-text-dark-2)}
.cc-radios{display:flex;gap:20px;flex-wrap:wrap}
.cc-radio{display:flex;gap:8px;align-items:center;font:400 .95rem/1 var(--cc-font-body);text-transform:none;letter-spacing:0}
.cc-radio input{accent-color:var(--cc-accent);width:18px;height:18px}

/* ---------- Alert ---------- */
.cc-alert{border-radius:var(--cc-radius-badge);padding:12px 16px;font-size:.9rem;font-weight:600}
.cc-alert--info{background:var(--cc-accent-soft);color:var(--cc-ink)}
.cc-alert--success{background:var(--cc-success-bg);color:var(--cc-success-txt)}
.cc-alert--warning{background:var(--cc-warning-bg);color:var(--cc-warning-txt)}
.cc-alert--error{background:var(--cc-error-bg);color:var(--cc-error)}

/* ---------- Breadcrumb ---------- */
.cc-crumb{display:inline-flex;flex-wrap:wrap;gap:10px;row-gap:4px;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--cc-muted-dark);margin:0;padding:0;list-style:none}
.cc-crumb li{white-space:nowrap}
.cc-crumb a{color:inherit;text-decoration:none}
.cc-crumb li+li::before{content:"/";margin-right:10px;color:var(--cc-line-dark)}
.cc-crumb li:last-child{color:var(--cc-white)}
.cc-light .cc-crumb{color:var(--cc-muted)}
.cc-light .cc-crumb li+li::before{color:var(--cc-border)}
.cc-light .cc-crumb li:last-child{color:var(--cc-ink)}

/* ---------- Tabella specs ---------- */
.cc-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--cc-border);border-radius:var(--cc-radius-card);overflow:hidden;font-size:.95rem}
.cc-table th{width:230px;text-align:left;background:var(--cc-surface);font:600 .8rem/1.4 var(--cc-font-body);text-transform:uppercase;letter-spacing:.05em;padding:12px 16px}
.cc-table td{background:var(--cc-white);padding:12px 16px}
.cc-table tr+tr th,.cc-table tr+tr td{border-top:1px solid var(--cc-border)}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .cc-grid--3,.cc-grid--4,.cc-grid--5{grid-template-columns:repeat(2,1fr)}
  .cc-accent{padding:32px}
}
@media (max-width:640px){
  .cc-sec{padding-inline:20px}
  .cc-grid--2,.cc-grid--3,.cc-grid--4,.cc-grid--5{grid-template-columns:1fr}
  .cc-btn{padding:14px 24px}
  .cc-btn--block-mobile{display:flex;justify-content:center;width:100%}
  .cc-table th{width:40%}
}