/*
 * Uniform cards, 2026-08-18.
 *
 * Equal card heights for the benefits, reviews and purchase scheme blocks:
 * the copy is clamped to a fixed number of lines so every card in a block
 * ends up the same height, and the rest of the text opens in a dialog.
 *
 * Paired with /templates/mwvl/js/uniform-cards-20260818.js
 */

/* Reserving the full height keeps a one line card as tall as a four line one,
   which is what makes every card in a block end up the same height. */
.uc-clamp {
    --uc-lines: 4;
    height: calc(1.4em * var(--uc-lines));
    margin-top: .75em;
    overflow: hidden;
    line-height: 1.4;
}

.uc-clamp__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--uc-lines);
    line-clamp: var(--uc-lines);
    margin: 0;
    overflow: hidden;
    line-height: inherit;
}

/* Original paragraphs stay in the DOM as the source for the dialog. */
.uc-source {
    display: none !important;
}

.uc-card.uc-truncated .reviews_slide__text--link {
    display: none !important;
}

.uc-more {
    align-self: flex-start;
    margin: .5em 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: #0f8f76;
    font: inherit;
    font-size: .875em;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.uc-more:hover {
    color: #151515;
}

.uc-more--empty {
    visibility: hidden;
    pointer-events: none;
}

/* ---------- dialog ---------- */

.uc-dialog {
    width: min(560px, calc(100% - 32px));
    max-height: calc(100dvh - 48px);
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: #fff;
    color: #151515;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
    overflow: hidden;
}

.uc-dialog::backdrop {
    background: rgba(8, 11, 13, .72);
}

body.uc-dialog-open {
    overflow: hidden;
}

.uc-dialog__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 48px);
    overflow: auto;
}

.uc-dialog__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #151515;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.uc-dialog__close:hover {
    background: #14ffca;
}

.uc-dialog__media img {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    object-position: center;
}

.uc-dialog__body {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.uc-dialog__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.uc-dialog__meta {
    margin-top: 8px;
    color: #727277;
    font-size: 14px;
    line-height: 1.4;
}

.uc-dialog__meta .reviews_slide__title {
    display: none;
}

.uc-dialog__meta img {
    max-width: 110px;
}

.uc-dialog__text {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.5;
}

.uc-dialog__text p {
    margin: 0;
}

.uc-dialog__text p + p {
    margin-top: .75em;
}

.uc-dialog__actions {
    margin-top: 20px;
}

.uc-dialog__actions > * {
    width: 100%;
}

/* ---------- mobile: one height per block ---------- */

@media (max-width: 768px) {
    /* Cards stretch to the tallest one in the strip instead of sitting on the
       top edge at their own height. */
    .general_info__mosaic_grid,
    .general_info .swiper-wrapper,
    .reviews__slider .swiper-wrapper,
    .scheme__block_wrap {
        align-items: stretch !important;
    }

    .reviews__slider .reviews_slide,
    .general_info__mosaic .general_info_slide:nth-child(n),
    .scheme_step {
        align-self: stretch !important;
        height: auto !important;
    }

    /* Benefits.
       Everything above the picture has a fixed height, so titles and copy line
       up across cards. The picture zone then takes whatever height is left:
       cards without a button get a bigger picture instead of a hole at the
       bottom. */
    .general_info__mosaic .general_info_slide .general_info_slide__title {
        min-height: 2.4em;
    }

    .general_info__mosaic .general_info_slide .uc-clamp {
        --uc-lines: 4;
        order: 1;
        width: 100%;
    }

    .general_info__mosaic .general_info_slide .uc-more {
        order: 1;
        margin-bottom: 4px;
    }

    .general_info__mosaic .general_info_slide:nth-child(n) > .general_info_slide__img {
        height: auto !important;
        min-height: 150px !important;
        flex: 1 1 auto !important;
    }

    .general_info__mosaic .general_info_slide:nth-child(n) > .general_info_slide__img .image {
        width: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }

    /* Reviews: taller photo so the car is actually visible, clamped copy. */
    .reviews_slide__img {
        height: 232px !important;
        overflow: hidden;
        border-radius: 14px;
    }

    .reviews_slide__img .image,
    .reviews_slide__img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .reviews_slide {
        display: flex !important;
        flex-direction: column !important;
    }

    .reviews_slide__info {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .reviews_slide .uc-clamp {
        --uc-lines: 5;
    }

    .reviews_slide .reviews_slide__text--link {
        margin-top: auto !important;
        padding-top: 10px;
    }

    /* The reviews block used to sit flush against the form above it. */
    .section.reviews {
        margin-top: var(--mw-mobile-section, 48px) !important;
    }

    /* Purchase scheme steps: same idea, the picture absorbs the spare height. */
    .scheme_step .uc-clamp {
        --uc-lines: 4;
    }

    .scheme_step__title {
        min-height: 2.4em;
    }

    .scheme_step__img {
        height: auto !important;
        min-height: 140px !important;
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden;
    }

    .scheme_step__img .image {
        width: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    .scheme_step .uc-more {
        margin-bottom: 12px;
    }
}

/* ---------- desktop: untouched ----------

   This whole mechanism is mobile only. On desktop the shortened teaser and its
   "read more" link are hidden and the original paragraphs are shown again, so
   the layout renders exactly as it did before this file existed. */

@media (min-width: 769px) {
    .uc-clamp,
    .uc-more,
    .general_info_slide__btn--mobile {
        display: none !important;
    }

    .uc-source {
        display: block !important;
    }

    .uc-card.uc-truncated .reviews_slide__text--link {
        display: block !important;
    }
}