/* ===================================================================
 * Catalogo — pagina "Confronta Articoli".
 * Colonne affiancate (max 4), ognuna col dettaglio completo reso INLINE.
 * Le colonne sono sempre strette → forzo il layout impilato (come mobile)
 * a prescindere dal viewport, scoped a .confronto-col. Su mobile le colonne
 * si impilano in verticale. Veicoli compatibili esclusi dal confronto.
 * Token M3; testo sempre neutro (mai --accent come colore del testo).
 * =================================================================== */

.confronto-page { padding: 16px 0 32px; }

.confronto-page__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.confronto-page__title { font-size: 1.25rem; margin: 0; color: var(--bs-body-color); }
.confronto-page__count { font-weight: 700; color: var(--bs-secondary-color); }
/* "Svuota" → `btn btn-outline-secondary` (hook `.confronto-page__clear` / id #confronto-clear):
   resta solo il micro-lift su hover; colore/bordo/padding li dà la variante Bootstrap.
   "Torna al catalogo" (`.confronto-page__back`) NON è nella tabella di migrazione — resta
   bespoke (fill accent + chevron animato + margin-left:auto). */
.confronto-page__clear i { transition: transform 0.15s; }
.confronto-page__clear:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in srgb, #000000 12%, transparent);
}

/* "Torna al catalogo" → `btn btn-primary` (hook `.confronto-page__back`): resta il
   posizionamento a destra + il micro-lift e la freccia che scorre su hover. */
.confronto-page__back { margin-left: auto; }
.confronto-page__back i { transition: transform 0.15s; }
.confronto-page__back:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in srgb, #000000 18%, transparent);
}
.confronto-page__back:hover i { transform: translateX(-3px); }
.confronto-page__empty { padding: 40px; text-align: center; color: var(--bs-secondary-color); }

.confronto-grid {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
}
/* Superficie via utility nel markup (bg-body rounded-3); border + ombra restano
   bespoke perche' cambiano su hover (utility Bootstrap sarebbero !important). */
.confronto-col {
    flex: 1 1 0;
    /* min-width: 340px; */
    /* max-width: 460px; */
    border: 1px solid var(--bs-border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px color-mix(in srgb, #000000 8%, transparent);
    transition: box-shadow 0.15s, border-color 0.15s;
}
.confronto-col:hover {
    border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color));
    box-shadow: 0 4px 14px color-mix(in srgb, #000000 14%, transparent);
}
/* Barra colonna: solo la "x" di rimozione (codice/brand sono già nel dettaglio
   sottostante → nessuna ripetizione). Filo accent in alto = ogni colonna si
   legge come una card distinta, coerente col catalogo. */
.confronto-col__bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 7px 9px;
    background: var(--bs-tertiary-bg);
    border-top: 3px solid var(--bs-primary);
    border-bottom: 1px solid var(--bs-border-color);
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 2;
}
/* "x" ben visibile: tinta accent a riposo (bordo + fondo tenue) con glifo neutro
   leggibile su ogni skin; hover = fill accent pieno (mai accent come colore del
   testo su fondo chiaro → uso --on-accent sul fill). */
/* "×" rimozione colonna → `btn btn-outline-primary btn-sm rounded-circle p-0`
   (hook `.confronto-col__remove`): resta il box 28×28 (icona centrata) + lo scale hover/active. */
.confronto-col__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}
.confronto-col__remove:hover { transform: scale(1.1); }
.confronto-col__remove:active { transform: scale(0.96); }

/* Le card si estendono in verticale (nessun max-height): la pagina scrolla. */
.confronto-col__detail { padding: 10px; }

/* ── Forced-stack: la colonna è sempre stretta, forzo il layout "mobile" del
      dettaglio (le media query del dettaglio sono viewport-based e qui non
      scatterebbero). ── */
.confronto-col .ad-detail__row { flex-direction: column; }
.confronto-col .ad-detail__row .ad-card,
.confronto-col .ad-detail__row .ad-tabs-wrap { flex: 1 1 auto; }
.confronto-col .ad-detail__row .ad-tabs-wrap .ad-tab-panel { max-height: none; }
.confronto-col .ad-detail__row .ad-card { flex-direction: column; gap: 12px; padding: 16px; }
.confronto-col .ad-card__img { width: 100%; height: auto; max-height: 280px; aspect-ratio: 1; flex: 0 0 auto; }
.confronto-col .ad-card__grid { grid-template-columns: 1fr; }
.confronto-col .ad-card__cta { flex-direction: column; align-items: stretch; }
.confronto-col .ad-card__actions { justify-content: stretch; }

/* Le tab del dettaglio nella colonna vanno A CAPO (niente scroll orizzontale
   nascosto, che rende le tab fuori-bordo difficili da cliccare). */
.confronto-col .ad-tabs { flex-wrap: wrap; overflow-x: visible; }
.confronto-col .ad-tabs-wrap::after { display: none; }

/* ── Mobile: swipe orizzontale, un articolo (quasi) a schermo pieno per volta.
      NB: NON usare flex-direction:column qui — con .confronto-col { flex:1 1 0 }
      il flex-basis 0 sull'asse verticale collasserebbe le colonne (pagina vuota).
      Restiamo in riga con scroll-snap: niente collasso e UX a "carosello". ── */
@media (max-width: 767px) {
    /* Il px-5 del container è troppo su mobile e, con colonne a 88vw, tagliava le
       card: riduco il padding (Bootstrap usa !important) e porto le colonne a 100%
       del contenitore → riempiono esattamente l'area visibile, swipe un articolo
       per volta, nessun taglio. */
    .confronto-page { padding-left: 12px !important; padding-right: 12px !important; }
    .confronto-grid { scroll-snap-type: x mandatory; }
    .confronto-col { flex: 0 0 100%; min-width: 0; max-width: 100%; scroll-snap-align: start; }
    .confronto-page__back { margin-left: 0; }
}