/* ==========================================================================
   2 Spalten Layout
   ========================================================================== */

.two-column {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
}

/* ---- Image ---- */

.two-column__image {
    order: -1;
}

.two-column__image img {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

/* Aspect ratios — mobile (< 1024px) */
.two-column__image--ratio-mobile-3-2 img,
.two-column__image--mobile.two-column__image--ratio-3-2 img { aspect-ratio: 3 / 2; }
.two-column__image--ratio-mobile-16-9 img,
.two-column__image--mobile.two-column__image--ratio-16-9 img { aspect-ratio: 16 / 9; }
.two-column__image--ratio-mobile-1-1 img,
.two-column__image--mobile.two-column__image--ratio-1-1 img { aspect-ratio: 1 / 1; }
.two-column__image--ratio-mobile-3-4 img,
.two-column__image--mobile.two-column__image--ratio-3-4 img { aspect-ratio: 3 / 4; }

/* Mobile/Desktop image switching: mobile up to 1023px */
.two-column__image--desktop {
    display: none;
}

@media (min-width: 1024px) {
    .two-column__image--mobile {
        display: none;
    }

    .two-column__image--desktop {
        display: block;
    }

    /* Aspect ratios — desktop (≥ 1024px) */
    .two-column__image--ratio-desktop-3-2 img,
    .two-column__image--desktop.two-column__image--ratio-3-2 img { aspect-ratio: 3 / 2; }
    .two-column__image--ratio-desktop-16-9 img,
    .two-column__image--desktop.two-column__image--ratio-16-9 img { aspect-ratio: 16 / 9; }
    .two-column__image--ratio-desktop-1-1 img,
    .two-column__image--desktop.two-column__image--ratio-1-1 img { aspect-ratio: 1 / 1; }
    .two-column__image--ratio-desktop-3-4 img,
    .two-column__image--desktop.two-column__image--ratio-3-4 img { aspect-ratio: 3 / 4; }
}

/* ---- Content ---- */

.two-column__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.two-column__content-inner {
    display: flex;
    flex-direction: column;
    gap: var(--gap-32);
    padding: 24px 12px;
}

.neo-ds.BMW:not(html) .two-column__content h2 {
    text-transform: none;
}

.two-column__cta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-12);
    margin-top: 8px;
}

.two-column__cta:empty {
    display: none;
}

/* Each slot wrapper is its own parent for the canvas-slot HTML comment,
   so Canvas can compute a distinct bounding box per slot in edit mode. */
.two-column__cta-item {
    flex: 0 1 auto;
    min-width: 0;
}

/* In edit mode (slot empty), expand wrapper so both dropzones share the
   row equally and become a useful drop target. */
.two-column__cta-item:has(.canvas--slot-empty-placeholder) {
    flex: 1 1 0;
    min-width: 120px;
}

.two-column__cta .d-flex {
    align-items: center;
}

@media (max-width: 767px) {

    .two-column__cta {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (min-width: 1024px) {

    .two-column__cta {
        gap: var(--gap-16);
    }
}

/* ==========================================================================
   M2 (Tablet portrait) 
   ========================================================================== */

@media (min-width: 768px) {
    .two-column__content-inner {
        padding: 48px 36px;
    }
}

/* ==========================================================================
   M1+ (Desktop) – Side-by-side layout
   ========================================================================== */

@media (min-width: 1024px) {

    .two-column {
        flex-direction: row;
        align-items: center;
        gap: var(--gap-48);
    }

    /* ---- 50:50 ratio ---- */

    .two-column--ratio-50-50 .two-column__image,
    .two-column--ratio-50-50 .two-column__content {
        flex: 1 1 50%;
        min-width: 0;
    }

    /* ---- 60:40 ratio ---- */

    .two-column--ratio-60-40 .two-column__image {
        flex: 1 1 60%;
        min-width: 0;
    }

    .two-column--ratio-60-40 .two-column__content {
        flex: 1 1 40%;
        min-width: 0;
    }

    .two-column__content-inner {
        padding: 0 48px 0 0;
    }

    /* ---- Image right: reverse order ---- */

    .two-column--image-right {
        flex-direction: row-reverse;
    }

    .two-column--image-right .two-column__content-inner {
        padding: 0 0 0 48px;
    }
}

/* ==========================================================================
   LG (Desktop)
   ========================================================================== */

@media (min-width: 1280px) {

    .two-column__content-inner {
        gap: var(--gap-24);
    }

    .two-column__cta {
        margin-top: 16px;
    }

    .container .two-column .two-column__content h2.neo-headline-2-uppercase {
        font-size: 40px;
    }
}

@media (min-width: 1920px) {

    .two-column {
        gap: var(--gap-72);
    }

    .two-column__content-inner {
        gap: var(--gap-32);
        padding: 0 72px 0 0;
    }

    .two-column__cta {
        margin-top: 0;
    }

    .two-column--image-right .two-column__content-inner {
        padding: 0 0 0 72px;
    }
}