/* ==========================================================================
   CARFUSION per Elementor: cf-elementor.css (SCRITTO A MANO)
   Solo gli adattamenti del design system (cf.css, generato dal sito statico) al markup di Elementor.
   Regola: specificità bassa, così quello che si imposta nel pannello di Elementor vince sempre.
   ========================================================================== */

/* ---------- 1. Container importati (classe cf-box) ----------
   Nel sito statico sono blocchi: se una classe del sito non decide il display, restano a blocco.
   Le classi del sito (body.cf-sito .x) e il pannello di Elementor vincono su questa regola. */
.e-con:where(.cf-box) {
  display: block;
  --background-transition: 0s; --border-transition: 0s; --e-con-transform-transition-duration: 0s;
}
/* Larghezza automatica come i div del sito (Elementor mette width:100%, che nelle righe flex manda tutto a capo) */
.e-con.e-flex:where(.cf-box) {
  --width: auto;
  /* valori "non validi": le proprietà flex tornano ai valori del CSS (riga, nessun allineamento) e le decide il sito */
  --flex-direction: initial; --flex-wrap: initial; --flex-wrap-mobile: initial; --align-items: initial;
  --align-content: initial; --justify-content: initial; --row-gap: initial; --column-gap: initial; --gap: initial;
}
/* GSAP anima le trasformazioni: la transizione di Elementor (0,4 s) le farebbe arrivare in ritardo */
.elementor-element.elementor-element { --e-transform-transition-duration: 0s; }

/* ---------- 2. Titoli e testi ----------
   Le classi stanno sul contenitore del widget: il titolo interno ne eredita il testo (cf-t = titolo con classe di stile). */
.cf-t > .elementor-heading-title {
  font: inherit; letter-spacing: inherit; color: inherit; text-transform: inherit;
  text-wrap: inherit; line-height: inherit; font-variant-numeric: inherit; margin: 0;
}
/* Sul contenitore, la scala del livello del titolo (come :where(h2) del sito): le classi del sito la sovrascrivono */
:where(.cf-t:has(> h1.elementor-heading-title)) { font-size: var(--fs-h1); line-height: 1; letter-spacing: -.03em; }
:where(.cf-t:has(> h2.elementor-heading-title)) { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.025em; }
:where(.cf-t:has(> h3.elementor-heading-title)) { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.02em; }
:where(.cf-t:has(> :is(h1, h2, h3, h4).elementor-heading-title)) { font-weight: 400; text-wrap: balance; }
/* .elementor-heading-title { line-height: 1 } batterebbe la scala del sito */
h1.elementor-heading-title { line-height: 1; }
h2.elementor-heading-title { line-height: 1.05; }
h3.elementor-heading-title { line-height: 1.1; }
p.elementor-heading-title { line-height: inherit; }
.elementor-widget-text-editor > p:last-child { margin-bottom: 0; }
/* il paragrafo interno va a capo come dice la classe sul contenitore (text-wrap: balance…); senza classe "pretty" */
.elementor-widget-text-editor { text-wrap: pretty; }
.elementor-widget-text-editor > p { text-wrap: inherit; }

/* ---------- 3. Immagini (widget Immagine con classe cf-img) ----------
   Riempiono il riquadro come nel sito statico (object-fit e posizione arrivano dalle classi del sito). */
.e-con > .elementor-widget-image.cf-img { width: 100%; height: 100%; }
.elementor-widget-image.cf-img > img { display: block; width: 100%; height: 100%; object-fit: inherit; object-position: inherit; transform-origin: inherit; }
.media-cover > .elementor-widget-image > img { object-fit: cover; }

/* Lo stato di oggi è inline-flex: nel sito è elemento di una griglia, qui il contenitore del widget fa lo stesso */
.blocco-sede--stato-home, .blocco-sede--stato-scheda { display: flex; }

/* ---------- 4. Home ---------- */
/* "Vedi tutte le auto" in fondo alle auto in evidenza è nascosto da 768 px: anche il suo contenitore (gap della griglia) */
@media (min-width: 768px) { .elementor-widget:has(> .home-feat__all) { display: none; } }
/* idem "Scorri per esplorare" nell'hero, che c'è solo da 1024 px */
@media (max-width: 1023px) { .elementor-widget:has(> .home-hero__scroll) { display: none; } }
/* la foto che segue il cursore negli Ultimi arrivi si posiziona rispetto alla sezione, come nel sito statico */
.home-latest .e-con, .home-latest .elementor-widget-cf-ultimi-arrivi { position: static; }

/* ---------- 5. Scheda auto ----------
   Nella griglia della scheda gli elementi sono i contenitori dei widget: posizione e colonna ferma passano a loro. */
@media (min-width: 1024px) {
  .e-con.scheda-layout > .elementor-widget-cf-auto-galleria { grid-column: 1; grid-row: 1; }
  .e-con.scheda-layout > .elementor-widget-cf-auto-prezzo {
    grid-column: 2; grid-row: 1 / span 2; align-self: start;
    position: sticky; top: calc(var(--header-h) + 24px); z-index: 1;
  }
  .e-con.scheda-layout > .elementor-widget-cf-auto-prezzo > .scheda-buy { position: static; }
}

/* L'H1 della scheda contiene marca e modello + versione (due righe come nel sito statico) */
body.cf-sito .scheda-buy__h1 { font: inherit; letter-spacing: inherit; line-height: inherit; text-wrap: initial; }
body.cf-sito .scheda-buy__h1 > span { display: block; }

/* ---------- 5. Editor: avvisi dei widget senza dati ---------- */
.cf-avviso-editor { padding: 16px; border: 1px dashed var(--line-strong); color: var(--ink-2); font-size: var(--fs-small); }