/* =========================================================
   b-image-text-cta — Block
   Mobile-first
========================================================= */

.b-image-text-cta {
    --this-background: var(--background, var(--color-white));
    --this-color--active: var(--color-active, var(--color-black));
    background: var(--this-background);
    padding: calc(22/16*1rem) calc(24/16*1rem);
}

.b-image-text-cta__inner {
    max-width: var(--max-width--block);
    margin: 0 auto;
}

/* =========================================================
   Slider container
========================================================= */

.b-image-text-cta__slider {
    overflow: hidden;
}

.b-image-text-cta__track {
    display: flex;
    gap: calc(24/16*1rem);
}

/* Inactive slides are invisible and non-interactive (Embla Fade stacks them) */
.b-image-text-cta__slide {
    flex: 0 0 100%;
    min-width: 0;
    pointer-events: none;
}

.b-image-text-cta__slide.is-selected {
    pointer-events: auto;
}

/* =========================================================
   Slide inner — mobile: column, desktop: row
========================================================= */

.b-image-text-cta__slide-inner {
    display: flex;
    flex-direction: column;
    gap: calc(28/16*1rem);
}

/* =========================================================
   Media (image + overlay)
========================================================= */

.b-image-text-cta__media {
    position: relative;
    overflow: hidden;
    border-radius: calc(12/16*1rem);
    flex-shrink: 0;
}

.b-image-text-cta__media .c-image,
.b-image-text-cta__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.b-image-text-cta__media-overlay {
    padding: calc(17/16*1rem) calc(15/16*1rem);
    background: var(--color-primary--green);
    backdrop-filter: blur(calc(50/16*1rem));
    color: var(--color-white);
}

.b-image-text-cta__media-title {
    font: var(--typo--mobile-headline-02);
    margin-bottom: calc(8/16*1rem);
}

.b-image-text-cta__media-description {
    font: var(--typo--transverse-large-body-02);
}

/* =========================================================
   Text content
========================================================= */

.b-image-text-cta__content {
    display: flex;
    flex-direction: column;
    gap: calc(16/16*1rem);
}

/* =========================================================
   Controls — centered mobile, left-aligned tablet+
========================================================= */

.b-image-text-cta__controls {
    /* Override slider-controls defaults to use black */
    --color--active: var(--this-color--active);
    --color--disabled: var(--color-grey--light);

    align-self: center;
}

/* =========================================================
   Section title
========================================================= */

.b-image-text-cta__section-title {
    --this-title-color: var(--color-black);
    color: var(--this-title-color);
    font: var(--typo--mobile-headline-02);
    text-align: center;
    white-space: pre-line;
}

/* =========================================================
   Introduction + wysiwyg
========================================================= */

.b-image-text-cta__introduction {
    font: var(--typo--mobile-headline-05);
    color: var(--color-black);
    text-align: center;
}

.b-image-text-cta__wysiwyg {
    font: var(--typo--desktop-headline-05);
    color: var(--color-black);

    ul {
        display: table;
        margin: 0 auto;
        list-style: disc;
        margin: 0;
        margin-left: calc(30/16*1rem);
    }

    a {
        font: inherit;
        color: var(--color-black);
        text-decoration: underline;

        &:hover {
            text-decoration-thickness: calc(2/16*1rem);
        }
    }

    p:not(:last-child) {
        margin-bottom: calc(12/16*1rem);
    }
}

/* =========================================================
   CTAs
========================================================= */

.b-image-text-cta__ctas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(16/16*1rem);
}

.b-image-text-cta__cta-pdf {
    font: var(--typo--transverse-large-body-02);
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: calc(3/16*1rem);
    text-decoration-skip-ink: none;

    &:hover {
        text-decoration-thickness: calc(2/16*1rem);
    }
}

.b-image-text-cta__ctas .c-button {
    width: 100%;
}

/* =========================================================
   ≥ 65em (desktop) — two-column layout
========================================================= */

@media (min-width: 65em) {
    .b-image-text-cta {
        padding-block: calc(88/16*1rem);
    }

    .b-image-text-cta__media-overlay {
        padding: calc(17/16*1rem) calc(24/16*1rem);
    }

    .b-image-text-cta__controls {
        align-self: flex-start;
    }

    .b-image-text-cta__ctas .c-button {
        width: auto;
    }

    .b-image-text-cta__section-title,
    .b-image-text-cta__introduction {
        text-align: left;
    }

    .b-image-text-cta__ctas {
        align-items: flex-start;
        gap: calc(30/16*1rem);
    }

    .b-image-text-cta__slide-inner {
        flex-direction: row;
        align-items: center;
        gap: calc(48/16*1rem);
    }

    .b-image-text-cta__media {
        flex: 0 0 50%;
    }

    .b-image-text-cta__content {
        flex: 1;
        gap: calc(30/16*1rem);
    }

    .b-image-text-cta__media-title {
        font: var(--typo--desktop-headline-03);
    }

    .b-image-text-cta__section-title {
        font: var(--typo--desktop-headline-02);
    }

    .b-image-text-cta__introduction {
        font: var(--typo--desktop-headline-05);
    }
}

/* =========================================================
   ≥ 75em (desktop medium)
========================================================= */

@media (min-width: 75em) {
    .b-image-text-cta__slide-inner {
        gap: calc(120/16*1rem);
    }
}