/**
 * ==========================================================
 * MSTJapan
 * Vehicle Detail V4 Responsive
 * Phase 18.14
 * Version: 2.0.0
 * ==========================================================
 */


/* ==========================================================
   LARGE LAPTOP
========================================================== */

@media (max-width: 1280px) {

    .vehicle-top-layout {
        grid-template-columns:
            minmax(0, 1fr)
            315px;
    }

    .vehicle-main-grid {
        grid-template-columns:
            minmax(340px, .9fr)
            minmax(0, 1.1fr);
    }

    .vehicle-gallery-stage {
        height: 350px;
    }

    .vehicle-gallery-zoom-preview {
        width: 340px;
        height: 340px;
    }

    .vehicle-feature-table {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .vehicle-feature-item:nth-child(4n) {
        border-right:
            1px solid
            #dfe4ea;
    }

    .vehicle-feature-item:nth-child(3n) {
        border-right: 0;
    }

    .vehicle-similar-card {
        flex-basis:
            calc((100% - 30px) / 4);
    }
}


/* ==========================================================
   TABLET LANDSCAPE
========================================================== */

@media (max-width: 1050px) {

    .vehicle-detail-shell {
        width:
            calc(100% - 22px);
    }

    .vehicle-top-layout {
        grid-template-columns: 1fr;
    }

    .vehicle-inquiry-column {
        position: static;

        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(260px, .42fr);

        align-items: start;
    }

    .vehicle-main-grid {
        grid-template-columns:
            minmax(330px, .9fr)
            minmax(0, 1.1fr);
    }

    .vehicle-gallery-stage {
        height: 340px;
    }

    .vehicle-gallery-lens,
    .vehicle-gallery-zoom-preview {
        display: none !important;
    }

    .vehicle-similar-card {
        flex-basis:
            calc((100% - 20px) / 3);
    }
}


/* ==========================================================
   TABLET PORTRAIT
========================================================== */

@media (max-width: 820px) {

    .vehicle-main-grid {
        grid-template-columns: 1fr;
    }

    .vehicle-gallery-stage {
        height: 420px;
    }

    .vehicle-information-column {
        padding-top: 2px;
    }

    .vehicle-inquiry-column {
        display: block;
    }

    .vehicle-support-card {
        margin-top: 12px;
    }

    .vehicle-secondary-content {
        grid-template-columns: 1fr;
    }

    .vehicle-similar-card {
        flex-basis:
            calc((100% - 10px) / 2);
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 620px) {

    .vehicle-detail-page {
        padding-top: 8px;
    }

    .vehicle-detail-shell {
        width:
            calc(100% - 14px);
    }

    .vehicle-main-card {
        padding: 9px;
    }

    .vehicle-breadcrumb {
        font-size: 9px;
    }


    /* ======================================================
       GALLERY
    ====================================================== */

    .vehicle-gallery-stage {
        height: auto;

        aspect-ratio: 4 / 3;

        border-radius: 10px;
    }

    .vehicle-gallery-image {
        width: 100%;
        height: 100%;

        object-fit: contain;
    }

    .vehicle-gallery-arrow {
        width: 34px;
        height: 34px;

        font-size: 25px;
    }

    .vehicle-gallery-prev {
        left: 8px;
    }

    .vehicle-gallery-next {
        right: 8px;
    }

    .vehicle-gallery-expand {
        right: 8px;
        bottom: 8px;

        width: 30px;
        height: 30px;
    }

    .vehicle-gallery-counter {
        left: 8px;
        bottom: 8px;
    }

    .vehicle-category-badge {
        top: 8px;
        left: 8px;
    }

    .vehicle-gallery-thumb {
        flex-basis: 72px;

        height: 52px;
    }


    /* ======================================================
       TITLE / PRICE
    ====================================================== */

    .vehicle-title-row {
        flex-direction: column;
    }

    .vehicle-title-row h1 {
        font-size: 21px;
    }

    .vehicle-status {
        align-self: flex-start;
    }

    .vehicle-price-row {
        align-items: flex-start;
    }

    .vehicle-price-row > div > strong {
        font-size: 23px;
    }


    /* ======================================================
       QUICK SPECS
    ====================================================== */

    .vehicle-quick-specs {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .vehicle-quick-spec {
        border-right:
            1px solid
            #e1e5ea;

        border-bottom:
            1px solid
            #e1e5ea;
    }

    .vehicle-quick-spec:nth-child(2n) {
        border-right: 0;
    }


    /* ======================================================
       SPECS
    ====================================================== */

    .vehicle-spec-table {
        grid-template-columns: 1fr;
    }

    .vehicle-spec-cell {
        border-right: 0;
    }


    /* ======================================================
       FEATURES
    ====================================================== */

    .vehicle-feature-table {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .vehicle-feature-item,
    .vehicle-feature-item:nth-child(3n),
    .vehicle-feature-item:nth-child(4n) {
        border-right:
            1px solid
            #dfe4ea;
    }

    .vehicle-feature-item:nth-child(2n) {
        border-right: 0;
    }


    /* ======================================================
       INQUIRY
    ====================================================== */

    .vehicle-inquiry-card {
        padding: 14px;
    }

    .vehicle-form-grid {
        grid-template-columns: 1fr;
    }


    /* ======================================================
       SIMILAR VEHICLES
    ====================================================== */

    .vehicle-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .vehicle-similar-heading-actions {
        width: 100%;

        justify-content: space-between;
    }

    .vehicle-similar-card {
        flex:
            0 0
            82%;
    }

    .vehicle-similar-image {
        height: 175px;
    }


    /* ======================================================
       LIGHTBOX
    ====================================================== */

    .vehicle-lightbox-dialog {
        inset: 3vh 8px;
    }

    .vehicle-lightbox-dialog > img {
        max-width: 100%;
        max-height: 88vh;
    }

    .vehicle-lightbox-arrow {
        width: 37px;
        height: 37px;

        font-size: 27px;
    }

    .vehicle-lightbox-prev {
        left: 4px;
    }

    .vehicle-lightbox-next {
        right: 4px;
    }

    .vehicle-lightbox-close {
        top: 4px;
        right: 4px;

        width: 36px;
        height: 36px;
    }
}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 430px) {

    .vehicle-gallery-stage {
        aspect-ratio: 4 / 3;
    }

    .vehicle-title-row h1 {
        font-size: 19px;
    }

    .vehicle-price-row {
        flex-direction: column;

        gap: 8px;
    }

    .vehicle-stock-country {
        text-align: left;
    }

    .vehicle-feature-table {
        grid-template-columns: 1fr;
    }

    .vehicle-feature-item,
    .vehicle-feature-item:nth-child(2n),
    .vehicle-feature-item:nth-child(3n),
    .vehicle-feature-item:nth-child(4n) {
        border-right: 0;
    }

    .vehicle-similar-card {
        flex-basis: 88%;
    }
}


/* ==========================================================
   VERY SMALL MOBILE
========================================================== */

@media (max-width: 360px) {

    .vehicle-title-row h1 {
        font-size: 18px;
    }

    .vehicle-spec-cell {
        grid-template-columns:
            42% minmax(0, 1fr);
    }

    .vehicle-similar-card {
        flex-basis: 92%;
    }
}


/* ==========================================================
   TOUCH DEVICES
========================================================== */

@media (hover: none) {

    .vehicle-gallery-lens,
    .vehicle-gallery-zoom-preview {
        display: none !important;
    }
}