/* Auto Elite Service — le nuove card e la nuova scheda dell'auto (inc/schede.php).

   I COLORI. Quattro variabili: oggi prendono i colori del sito (l'arancio di
   Motors), quando il cliente sceglie la palette del PDF si cambiano qui. Le
   quattro proposte:
     grafite e rosso       --ae-accento #c8102e  --ae-accento-scuro #9e0c24  --ae-scuro #1b1d1f  --ae-chiaro #eceeef
     blu notte e ottone    #8a6527 / #6e5020 / #0e1a2b / #e9ecf1
     grafite e petrolio    #0f766e / #0b5a54 / #1c2124 / #e8eeed
     bruno e blu profondo  #1f4e79 / #173a5a / #2b2622 / #e8e0d2

   Motors da' stili suoi a pulsanti, titoli, elenchi e collegamenti: qui ogni
   pezzo li riazzera, per non dipendere dall'ordine dei fogli. */

:root {
	--ae-accento: var(--mvl-primary-color, #cc6119);
	--ae-accento-scuro: #a54d12;
	--ae-scuro: #232628;
	--ae-chiaro: #eceeef;
	--ae-card: #f5f6f6;
	--ae-inchiostro: #16181a;
	--ae-secondario: #4d5358;
}

.ae-nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ae-icona { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- la card ---------- */

.ae-cella { margin-bottom: 24px; }
.ae-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--ae-card); color: var(--ae-inchiostro); font-family: 'Open Sans', Arial, sans-serif; transition: transform .25s; }
.ae-card:hover { transform: translateY(-4px); }
.ae-card--venduta .ae-card__foto img { filter: grayscale(.7); }
.ae-card__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ae-chiaro); }
.ae-card__img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .6s; }
.ae-card:hover .ae-card__img { transform: scale(1.04); }
.ae-bollini { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }
.ae-bollino { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; background: #fff; color: var(--ae-inchiostro); font-size: 14px; font-weight: 600; line-height: 1.3; }
.ae-bollino::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #5c6368; }
.ae-bollino--nuovo::before { background: #1a7f37; }
.ae-bollino--km0::before { background: #1d6fb8; }
.ae-bollino--semestrale::before { background: #b26a00; }
.ae-card__azioni { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; z-index: 2; }
.ae-quadro { width: 44px; height: 44px; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 0; background: #fff; color: var(--ae-inchiostro); cursor: pointer; box-shadow: none; transition: transform .15s, background-color .2s, color .2s; touch-action: manipulation; }
.ae-quadro:hover { transform: scale(1.06); background: #fff; }
.ae-quadro.active, .ae-quadro[aria-pressed="true"] { background: var(--ae-accento-scuro); color: #fff; }
.ae-card__corpo { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 20px; flex: 1; }
.ae-card__titolo { margin: 0; font: 800 22px/1.15 'Montserrat', Arial, sans-serif; letter-spacing: -0.01em; text-transform: none; color: var(--ae-inchiostro); }
.ae-card__link, .ae-card__link:hover, .ae-card__link:focus { color: inherit; text-decoration: none; }
.ae-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.ae-card__link:focus-visible { outline: none; }
.ae-card:has(.ae-card__link:focus-visible) { outline: 3px solid var(--ae-accento); outline-offset: 3px; }
.ae-card__sotto { margin: -6px 0 0; font-size: 16px; line-height: 1.4; color: var(--ae-secondario); }
.ae-dati { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; }
.ae-dati li { margin: 0 !important; padding: 4px 9px; background: var(--ae-chiaro); font-size: 14px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.ae-dati li::before { content: none !important; }
.ae-prezzo { margin: auto 0 0; display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.ae-prezzo__prima { color: var(--ae-secondario); font-size: 16px; }
.ae-prezzo__ora { display: inline-block; padding: 4px 12px; background: var(--ae-accento); color: #fff; font: 800 22px/1.3 'Montserrat', Arial, sans-serif; font-variant-numeric: tabular-nums; }
.ae-prezzo__ora--testo { font-size: 18px; background: var(--ae-accento-scuro); } /* testo piccolo: l'arancione chiaro col bianco sta a 3,96:1 */
.ae-prezzo--grande .ae-prezzo__ora { font-size: clamp(28px, 3.4vw, 40px); padding: 6px 16px; }
.ae-prezzo--grande .ae-prezzo__prima { font-size: 18px; }

/* ---------- la scheda ---------- */

.ae-scheda { padding: 32px 0 96px; color: var(--ae-inchiostro); font: 400 18px/1.55 'Open Sans', Arial, sans-serif; }
.ae-dentro { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.ae-scheda h1, .ae-scheda h2 { font-family: 'Montserrat', Arial, sans-serif; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; text-transform: none; color: var(--ae-inchiostro); margin: 0; }
.ae-scheda :focus-visible { outline: 3px solid var(--ae-accento); outline-offset: 3px; }

.ae-barra { position: fixed; left: 0; right: 0; top: 0; z-index: 990; background: var(--ae-scuro); color: #fff; transform: translateY(-100%); transition: transform .3s; box-shadow: 0 8px 24px rgba(0,0,0,.18); } /* taste-skill-ignore: barra fissa che galleggia sopra la pagina */
.ae-barra.ae-vista { transform: none; }
.ae-barra__dentro { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.ae-barra__nome { font: 800 18px/1.2 'Montserrat', Arial, sans-serif; }
.ae-barra .ae-dati { flex: 1; }
.ae-barra .ae-dati li { background: rgba(255,255,255,.12); }
.ae-barra .ae-prezzo { margin: 0; }
.ae-barra .ae-prezzo__prima { color: #c9cdd0; }

.ae-briciole { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 24px; font-size: 16px; }
.ae-briciole a { color: var(--ae-inchiostro); }
.ae-briciole ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; color: var(--ae-secondario); }
.ae-briciole ol a { color: var(--ae-secondario); }
.ae-briciole li { margin: 0; }
.ae-briciole li + li::before { content: '/'; margin-right: 6px; }

.ae-scheda__testa { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 24px; }
.ae-scheda__titolo { display: flex; align-items: center; gap: 18px; }
.ae-scheda h1 { font-size: clamp(30px, 5vw, 60px); }
.ae-logo-marca { width: 64px; height: 64px; object-fit: contain; background: #fff; padding: 6px; flex: none; }
.ae-scheda__sotto { margin: 8px 0 0; font-size: 18px; color: var(--ae-secondario); }
.ae-scheda__azioni { display: flex; gap: 8px; }
.ae-scheda__azioni .ae-quadro { background: var(--ae-card); }

.ae-mosaico { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: clamp(320px, 42vw, 560px); }
.ae-mosaico--poche { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ae-mosaico__principale { position: relative; grid-row: 1 / 3; overflow: hidden; background: var(--ae-chiaro); }
.ae-mosaico--poche .ae-mosaico__principale { grid-row: auto; }
.ae-mosaico__grande { width: 100% !important; height: 100% !important; object-fit: cover; }
.ae-mosaico__tutte { position: absolute; right: 16px; bottom: 16px; z-index: 2; }
.ae-mosaico__mini { margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden; cursor: pointer; background: var(--ae-chiaro); }
.ae-mosaico__mini img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .5s; }
.ae-mosaico__mini:hover img { transform: scale(1.05); }

.ae-galleria { width: min(1100px, 100vw); max-width: 100vw; max-height: 100vh; margin: auto; padding: 0; border: 0; background: var(--ae-scuro); color: #fff; }
.ae-galleria::backdrop { background: rgba(0,0,0,.8); }
.ae-galleria__testa { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px; background: var(--ae-scuro); }
.ae-galleria__testa p { margin: 0; }
.ae-galleria__elenco { display: grid; gap: 8px; padding: 0 16px 16px; }
.ae-galleria__elenco figure { margin: 0; }
.ae-galleria__elenco img { width: 100%; height: auto; }

.ae-scheda__corpo { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 56px; margin-top: 48px; align-items: start; }
.ae-blocco h2 { font-size: 28px; margin-bottom: 18px; }
.ae-blocco + .ae-blocco { margin-top: 56px; }
.ae-tabella { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.ae-tabella div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; }
.ae-tabella div:nth-child(4n+1), .ae-tabella div:nth-child(4n+2) { background: var(--ae-card); }
.ae-tabella dt { font-weight: 400; color: var(--ae-secondario); }
.ae-tabella dd { margin: 0; font-weight: 700; text-align: right; }
.ae-vantaggi { list-style: none !important; margin: 0 0 24px !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
.ae-vantaggi li { margin: 0 !important; padding: 8px 14px; background: var(--ae-scuro); color: #fff; font-weight: 600; }
.ae-vantaggi li::before { content: none !important; }
.ae-dotazioni { columns: 2; column-gap: 40px; margin: 0; padding: 0 0 0 20px; }
.ae-dotazioni li { margin-bottom: 8px; break-inside: avoid; }
.ae-modulo__testo { margin: 0 0 20px; color: var(--ae-secondario); }
.ae-modulo__testo a { color: var(--ae-inchiostro); text-decoration: underline; text-underline-offset: 2px; }

.ae-lato { position: sticky; top: 96px; display: grid; gap: 12px; }
.ae-lato__prezzo { background: var(--ae-card); padding: 24px; display: grid; gap: 8px; }
.ae-lato__prezzo .ae-prezzo { justify-content: flex-start; }
.ae-lato__nota { margin: 0; font-size: 16px; color: var(--ae-secondario); }
.ae-bottone, .ae-bottone:visited { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; margin: 0; padding: 12px 22px; border: 0; border-radius: 0; background: var(--ae-accento-scuro); color: #fff; font: 700 16px/1.2 'Open Sans', Arial, sans-serif; text-transform: none; letter-spacing: 0; text-decoration: none; box-shadow: none; cursor: pointer; transition: background-color .2s, transform .15s; touch-action: manipulation; }
.ae-bottone:hover, .ae-bottone:focus { background: var(--ae-scuro); color: #fff; text-decoration: none; }
.ae-bottone:active { transform: translateY(1px); }
.ae-bottone--chiaro, .ae-bottone--chiaro:visited { background: #fff; color: var(--ae-inchiostro); }
.ae-bottone--chiaro:hover, .ae-bottone--chiaro:focus { background: var(--ae-chiaro); color: var(--ae-inchiostro); }
.ae-lato .ae-bottone { width: 100%; justify-content: flex-start; }
.ae-telefono, .ae-telefono:visited { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--ae-scuro); color: #fff; text-decoration: none; font: 800 22px/1.2 'Montserrat', Arial, sans-serif; }
.ae-telefono:hover { color: #fff; text-decoration: none; }
.ae-telefono .ae-icona { width: 24px; height: 24px; }
.ae-azione, .ae-azione:visited { display: block; padding: 16px 20px; background: var(--ae-card); color: var(--ae-inchiostro); text-decoration: none; transition: background-color .2s; }
.ae-azione:hover, .ae-azione:focus { background: var(--ae-chiaro); color: var(--ae-inchiostro); text-decoration: none; }
.ae-azione strong { display: block; font-size: 18px; }
.ae-azione span { color: var(--ae-secondario); font-size: 16px; }
.ae-dove { background: var(--ae-card); padding: 20px; }
.ae-dove h2 { font-size: 18px; margin-bottom: 4px; }
.ae-dove p { margin: 0 0 12px; }

@media (prefers-reduced-motion: reduce) {
	.ae-card, .ae-card__img, .ae-quadro, .ae-mosaico__mini img, .ae-barra, .ae-bottone, .ae-azione { transition: none !important; }
	.ae-card:hover, .ae-card:hover .ae-card__img, .ae-mosaico__mini:hover img { transform: none; }
}

@media (max-width: 900px) {
	.ae-scheda__corpo { grid-template-columns: 1fr; }
	.ae-lato { position: static; }
	.ae-barra .ae-dati { display: none; }
}

@media (max-width: 600px) {
	.ae-scheda { font-size: 16px; padding-top: 16px; }
	.ae-mosaico { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }
	.ae-mosaico__principale { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
	.ae-mosaico__mini { aspect-ratio: 4 / 3; }
	.ae-tabella { grid-template-columns: 1fr; }
	.ae-tabella div:nth-child(4n+1), .ae-tabella div:nth-child(4n+2) { background: none; }
	.ae-tabella div:nth-child(odd) { background: var(--ae-card); }
	.ae-dotazioni { columns: 1; }
	.ae-barra__nome { font-size: 16px; }
	.ae-barra .ae-prezzo__prima { display: none; }
	.ae-scheda__titolo { gap: 12px; }
	.ae-logo-marca { width: 48px; height: 48px; }
}

/* ---------- contro gli !important di Motors ----------
   Il tema impone colori con !important o con selettori molto specifici
   (`h1 { color: #959595 !important }`, `button { color: #fff }` dentro
   `html body ...`): senza questo blocco titoli grigi, icone bianche su bianco
   e telefono scuro su scuro (visto il 27/10/2026). Solo sulle nostre classi. */
.ae-scheda h1, .ae-scheda h2, .ae-card__titolo, .ae-card__titolo a { color: var(--ae-inchiostro) !important; }
.ae-quadro, .ae-quadro:hover, .ae-quadro:focus { color: var(--ae-inchiostro) !important; background: #fff !important; }
.ae-scheda__azioni .ae-quadro, .ae-scheda__azioni .ae-quadro:hover { background: var(--ae-card) !important; }
.ae-quadro.active, .ae-quadro[aria-pressed="true"] { color: #fff !important; background: var(--ae-accento-scuro) !important; }
.ae-telefono, .ae-telefono:visited, .ae-telefono:hover, .ae-barra, .ae-barra .ae-bottone, .ae-vantaggi li { color: #fff !important; }
.ae-bottone, .ae-bottone:visited, .ae-bottone:hover, .ae-bottone:focus { color: #fff !important; }
.ae-bottone--chiaro, .ae-bottone--chiaro:visited, .ae-bottone--chiaro:hover, .ae-bottone--chiaro:focus { color: var(--ae-inchiostro) !important; }
.ae-azione, .ae-azione:visited, .ae-azione:hover, .ae-briciole a { color: var(--ae-inchiostro) !important; }
.ae-briciole ol a { color: var(--ae-secondario) !important; }
/* la barra con il prezzo sta sopra anche all'intestazione del tema (z-index 1055) */
.ae-barra { z-index: 100000; }