﻿/*#||###############################################*/
/*# STILI MULTISCHERMO #############################*/
/*#||###############################################*/
/*#|THUMBNAIL VEICOLO|##############################*/
/*#||###############################################*/
/*#|PROPRIETÀ GENERICHE|############################*/
.thmb_veicolo { display: flex; flex-flow: column; justify-content: space-between; flex-wrap: wrap; align-items: center; aspect-ratio: 10/16; }
    .thmb_veicolo:hover { box-shadow: 0 0.3rem 0.8rem rgba(0,0,0,0.25); }
    .thmb_veicolo .promo_only, .thmb_veicolo.promozione .standard_only { display: none; }
    .thmb_veicolo.promozione .promo_only, .thmb_veicolo .standard_only { display: inline-block; }
    /*#||###############################################*/
    /*#|Gestione altezze|###############################################*/
    .thmb_veicolo .first_part, .thmb_veicolo .media, .thmb_veicolo .main_data, .thmb_veicolo .prezzo { flex-grow: 0; flex-shrink: 1; }
    .thmb_veicolo .first_part { flex-basis: 13%; }
    .thmb_veicolo .media { flex-basis: 46%; }
    .thmb_veicolo .main_data { flex-basis: 9%; }
    .thmb_veicolo .prezzo { flex-basis: 18%; }
    /*#||###############################################*/
    /*#|PRIMA PARTE - Marca modello e allestimento|#####*/
    .thmb_veicolo .first_part { width: 100%; /*aspect-ratio: 100/20;*/ padding: 1.5rem 1rem; }
        .thmb_veicolo .first_part .brand { flex: 0 1 15%; aspect-ratio: 1/1; border-right: solid 1px #ccc; }
            .thmb_veicolo .first_part .brand img { width: 90%; height: 90%; object-fit: contain; }
        .thmb_veicolo .first_part .marca_modello { flex: 0 1 85%; padding-left: 0.5rem; }
            .thmb_veicolo .first_part .marca_modello .marca.font_sz_var_03 { font-size: 1.85rem; }
            .thmb_veicolo .first_part .marca_modello .allestimento { display: block; }
    /*#||###############################################*/
    /*#|IMMAGINE - Foto, tipologia e tags|##############*/
    .thmb_veicolo .media { width: 100%; aspect-ratio: 4/3; }
        .thmb_veicolo .media img.picture { z-index: 2; }
        .thmb_veicolo .media .background_blur { z-index: 1; aspect-ratio: inherit; overflow: hidden; }
            .thmb_veicolo .media .background_blur img.picture { z-index: 1; filter: blur(4px) brightness(0.95); }
        .thmb_veicolo .media .tags_container { position: absolute; top: 0; left: 0; width: 100%; z-index: 3; transform: translateY(-1rem); }
            .thmb_veicolo .media .tags_container .item { position: relative; margin: 0 0.5rem 0.5rem 0; padding: 0.25rem 0.6rem; border-radius: 0.6rem; text-align: center; box-shadow: 0 0 0.6rem rgba(0,0,0,0.25); }
                .thmb_veicolo .media .tags_container .item.custom_hue_1 { padding-right: 3.5rem; }
                .thmb_veicolo .media .tags_container .item i { margin-right: 0.2rem; }
                .thmb_veicolo .media .tags_container .item strong { }
                .thmb_veicolo .media .tags_container .item .tag_copy_cta { position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 1/1; border-radius: inherit; cursor: pointer; }
                    .thmb_veicolo .media .tags_container .item .tag_copy_cta i { opacity: 0.6; filter: saturate(0); }
                .thmb_veicolo .media .tags_container .item:hover .tag_copy_cta i { opacity: 1; filter: saturate(1); }
        .thmb_veicolo .media .tipologia { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 2; padding: 8rem 1.5rem 1rem 1.5rem; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%,rgba(0,0,0,0.95) 100%);  }
            .thmb_veicolo .media .tipologia .item { }
            .thmb_veicolo .media .tipologia .item * { display: inline; }
            .thmb_veicolo .media .tipologia strong { }
        .thmb_veicolo .media:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0.2rem; z-index: 4; background-color: #034798; }
        /**/
        .thmb_veicolo .media .tag_copy { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: 100%; overflow-y: auto; padding: 2.5rem 1.2rem 6rem 1.2rem; z-index: 2; backdrop-filter: blur(1rem) brightness(0.25); background-color: rgba(0,0,0,0.6); }
            .thmb_veicolo .media .tag_copy:hover { }
            .thmb_veicolo .media .tag_copy p { position: relative; z-index: 1; }
                .thmb_veicolo .media .tag_copy p * { display: block; }
                .thmb_veicolo .media .tag_copy p i { position: absolute; top: 0; right: 1.2rem; }
                .thmb_veicolo .media .tag_copy p strong { font-size: 2rem; }
                .thmb_veicolo .media .tag_copy p span { }

/*Colori normalizzati per i tag - La base è bianca*/
.tags_container .item { background-color: #fff; }
    /*Rosso*/
    .tags_container .item.custom_hue_1 { background-color: #034798; color: #fff; }
    /*Verde*/
    .tags_container .item.custom_hue_2 { background-color: #00224B; color: #fff; }
    /*Nero*/
    .tags_container .item.custom_hue_3 { background-color: #0A0A0A; color: #fff; }
/*#||###############################################*/
/*#|DATI IN EVIDENZA|###############################*/
.thmb_veicolo .main_data { width: 100%; /*aspect-ratio: 100/30;*/ }
    .thmb_veicolo .main_data .item { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: flex-start; flex: 0 1 50%; padding: 0.5rem 1rem; }
        .thmb_veicolo .main_data .item i { margin-right: 0.6rem; color: #034798; }
        .thmb_veicolo .main_data .item p { }
            .thmb_veicolo .main_data .item p * { display: block; }
            .thmb_veicolo .main_data .item p strong { font-size: 1.2rem; }
            .thmb_veicolo .main_data .item p span { font-size: 1.35rem; }
/*#||###############################################*/
/*#|PREZZO|#########################################*/
.thmb_veicolo .prezzo { width: 100%; /*aspect-ratio: 100/30;*/ border-top: solid 1px #ccc; }
    .thmb_veicolo .prezzo p { flex: 1 1 100%; }
        .thmb_veicolo .prezzo p.prezzo_esposto { font-size: 2.5rem; }
.thmb_veicolo.promozione .prezzo { color: #fff; background: #034798 url('../img/background/AlessandriaAuto_bkg_pattern.webp') center no-repeat; background-size: cover; }
    .thmb_veicolo.promozione .prezzo p { }
        .thmb_veicolo.promozione .prezzo p.prezzo_esposto { font-size: 2.2rem; }
/*#||###############################################*/
/*#|PROPRIETÀ PER LISTA AUTO|#######################*/
.lista_veicoli ul.list_container li { padding: 1.2rem; flex: 0 1 calc(100%/4); }
/*#||###############################################*/
/*#||###############################################*/
/*--------------------------------------------------*/
/*#||###############################################*/
/*#|VARIABILI per veicolo NUOVO|####################*/
/*#||###############################################*/
.thmb_veicolo.nuovo { }
    /*#||###############################################*/
    /*#|IMMAGINE - Foto e tags|##############*/
    .thmb_veicolo.nuovo .media { border-bottom: solid 1px #034798; }
        .thmb_veicolo.nuovo .media img.picture { width: 100%; height: 100%; object-fit: contain; z-index: 2; }
        .thmb_veicolo.nuovo .media .tags_container { z-index: 3; }
        .thmb_veicolo.nuovo .media:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 50%; opacity: 0.1; z-index: 1; /**/ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); }
    .thmb_veicolo.nuovo:hover .media:after { opacity: 0.2; }
    /*#||###############################################*/
    /*#|DATI IN EVIDENZA|###############################*/
    .thmb_veicolo.nuovo .main_data .item:first-child { flex: 1 1 100%; }
/*#||###############################################*/
/*--------------------------------------------------*/
/*#||###############################################*/
/*- STILI Comuni: tutti gli schermi DESKTOP --------*/
@media (min-width: 769px) {
    /*#||###############################################*/
}
/*#||###############################################*/
/*- STILI Comuni: tutti gli schermi PORTABLE -------*/
@media (max-width: 768px) {
    /*#||###############################################*/
}
/*#||###############################################*/
/*--------------------------------------------------*/
/*#||###############################################*/
/*- STILI ESCLUSIVI GRANDI SCHERMI -----------------*/
@media (min-width: 1281px) {
    /*#||###############################################*/
}
/*#||###############################################*/
/*- STILI SCHERMI MEDI --------------------------*/
@media (min-width: 1025px) and (max-width: 1280px) {
    /*#||###############################################*
    .thmb_veicolo { aspect-ratio: 10/18; }
    /*#||###############################################*/
    .thmb_veicolo .first_part { padding: 1.2rem 1rem; }
    /*#||###############################################*/
}
/*#||###############################################*/
/*- STILI PICCOLI SCHERMI --------------------------*/
@media (min-width: 769px) and (max-width: 1024px) {
    /*#||###############################################*
    .thmb_veicolo { aspect-ratio: 10/16; }
    /*#||###############################################*/
    /*#|PROPRIETÀ PER LISTA AUTO|#######################*/
    .lista_veicoli ul.list_container li { flex: 0 1 calc(100%/2); }
    /*#||###############################################*/
    /*#||###############################################*/
}
/*#||###############################################*/
/*- STILI TABLET -----------------------------------*/
@media (min-width: 481px) and (max-width: 768px) {
    /*#||###############################################*
    .thmb_veicolo { aspect-ratio: 10/17.5; }
    /*#||###############################################*/
    /*#|PROPRIETÀ PER LISTA AUTO|#######################*/
    .lista_veicoli ul.list_container li { flex: 0 1 calc(100%/2); }
    /*#||###############################################*/
    /*#||###############################################*/
}
/*#||###############################################*/
/*- STILI MOBILE -----------------------------------*/
@media (max-width: 480px) {
    /*#||###############################################*/
    /*#|PROPRIETÀ PER LISTA AUTO|#######################*/
    .lista_veicoli ul.list_container li { flex: 1 1 calc(100%/1); }
    /*#||###############################################*/
    /*#||###############################################*/
}
/*--------------------------------------------------*/
