/*
 * CTA Prodotti: stile del riquadro e della scheda.
 *
 * Colori, raggio e font arrivano dalle impostazioni come variabili CSS, in un
 * blocco in linea dopo questo foglio. Chi preferisce il CSS puo' ridefinirle
 * su .ctaprod. I valori dopo la virgola sono i ripieghi neutri.
 *
 * Il font: `var(--ctaprod-font,inherit)` con `inherit` da solo, mai dentro un
 * elenco di font (renderebbe invalida l'intera dichiarazione).
 */

.ctaprod{box-sizing:border-box;display:grid;gap:24px;align-items:center;
  margin:32px 0;padding:24px;border-radius:var(--ctaprod-raggio,4px);
  font-family:var(--ctaprod-font,inherit);line-height:1.5}
.ctaprod *{box-sizing:border-box}
.ctaprod p{margin:0}

.ctaprod--riquadro{grid-template-columns:150px minmax(0,1fr);
  background:var(--ctaprod-fondo-riquadro,#f3f4f6);color:var(--ctaprod-testo,#1f2937);
  border-top:var(--ctaprod-filetto,0px) solid var(--ctaprod-colore-filetto,currentColor)}
.ctaprod--scheda{grid-template-columns:220px minmax(0,1fr);gap:28px;padding:32px;
  background:var(--ctaprod-fondo-scheda,#1f2937);color:var(--ctaprod-testo-scheda,#fff)}
.ctaprod--senza-immagine{grid-template-columns:minmax(0,1fr)}
.ctaprod--riquadro.ctaprod--orizzontale{grid-template-columns:210px minmax(0,1fr)}
.ctaprod--scheda.ctaprod--orizzontale{grid-template-columns:260px minmax(0,1fr)}

.ctaprod__immagine img{display:block;width:100%;height:auto;margin:0}

.ctaprod__occhiello{font-size:11px;line-height:1.3;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ctaprod-accento,#2563eb);margin-bottom:6px !important}
.ctaprod__nome{font-size:20px;line-height:1.3;margin-bottom:8px !important;color:inherit}
.ctaprod__nome strong{font-weight:700}
.ctaprod--scheda .ctaprod__nome{font-size:24px}
.ctaprod__frase{font-size:15px;line-height:1.65;margin-bottom:16px !important;color:inherit}

.ctaprod__punti{margin:0 0 16px !important;padding:0 0 0 18px !important}
.ctaprod__punti li{font-size:14px;line-height:1.6;margin:0 0 4px;color:inherit;list-style:square}
.ctaprod__punti li::marker{color:var(--ctaprod-accento,#2563eb)}

.ctaprod__prezzo{font-size:13px;margin-bottom:16px !important;color:inherit}
.ctaprod__prezzo-attuale{font-size:18px;font-weight:700;margin-right:6px}
.ctaprod__prezzo-pieno{opacity:.7;margin-right:6px}
.ctaprod__prezzo-nota{opacity:.8}

.ctaprod a.ctaprod__pulsante,
.ctaprod a.ctaprod__pulsante:visited{display:inline-block;padding:12px 24px;
  border-radius:var(--ctaprod-raggio,4px);background:var(--ctaprod-pulsante,#2563eb);
  color:var(--ctaprod-testo-pulsante,#fff);font-size:15px;font-weight:600;line-height:1.3;
  text-decoration:none;border:0;box-shadow:none}
.ctaprod--scheda a.ctaprod__pulsante,
.ctaprod--scheda a.ctaprod__pulsante:visited{background:var(--ctaprod-pulsante-scheda,#2563eb)}
.ctaprod a.ctaprod__pulsante:hover,
.ctaprod a.ctaprod__pulsante:focus{color:var(--ctaprod-testo-pulsante,#fff);text-decoration:none;filter:brightness(1.12)}
.ctaprod a.ctaprod__pulsante:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* Da mobile la copertina va sopra al testo. */
@media (max-width:767px){
  .ctaprod--riquadro,.ctaprod--scheda,
  .ctaprod--riquadro.ctaprod--orizzontale,.ctaprod--scheda.ctaprod--orizzontale{grid-template-columns:minmax(0,1fr);gap:16px;padding:20px}
  .ctaprod--riquadro .ctaprod__immagine{max-width:160px}
  .ctaprod--scheda .ctaprod__immagine{max-width:240px}
  .ctaprod--orizzontale .ctaprod__immagine{max-width:none}
  .ctaprod--scheda .ctaprod__nome{font-size:21px}
  .ctaprod a.ctaprod__pulsante{display:block;text-align:center}
}