/* Announcement Teaser Block Styles */
.emp-soda-announcement-teaser {
    position: relative;
    --color-font: var(--d-color-fg-brand, #001957);
    --color-font-hover: var(--d-color-special-hover-brand, #20366C);

    &.primary-bg {
        --color-font: var( --d-color-fg-brand-dark, #ffffff);
        --color-font-hover: var(--d-color-special-hover-brand-dark, #E4E7ED);
    }

    .emp-soda-announcement-teaser__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--grid-col-gap, 32px);

        .with-image & {
            align-items: flex-start;
            text-align: left;
        }
    }

    .emp-soda-announcement-teaser__badge {
        margin-bottom: var(--d-spacing-xsmall, 12px);

        .badge {
            overflow: hidden;
            display: inline-flex;
            align-items: center;
            gap: var(--c-badgeEyecatcher-gap-horizontal, 4px);
            max-width: 200px;
            padding: var(--c-badgeEyecatcher-padding-vertical, 2px) var(--c-badgeEyecatcher-padding-horizontal, 6px);
            border-radius: var(--c-badgeEyecatcher-border-radius-default, 4px);
            background: var(--o-color-decoration-75, #A45F33);
            color: var(--o-color-base-light, #FFF);
            font-family: var(--o-fontFamily-1, "Marselis for RuV"), sans-serif;
            font-size: var(--d-fontSize-menu-small, 14px);
            font-style: normal;
            text-overflow: ellipsis;
            font-weight: var(--o-fontWeight-700, 700);
            line-height: var(--d-lineHeight-menu-small, 20px);
            text-transform: uppercase;
        }
    }

    .emp-soda-announcement-teaser__icon {
        flex-shrink: 0;

        img {
            width: 112px;
            aspect-ratio: 1;
            object-fit: contain;
        }
    }

    .emp-soda-announcement-teaser__overline {
        color: var(--color-font);
        font-size: var(--d-fontSize-overline-medium, 16px);
        font-family: var(--o-fontFamily-2, "Marselis for RuV Slab"), sans-serif;
        font-style: normal;
        font-weight: var(--o-fontWeight-700, 700);
        line-height: var(--d-lineHeight-overline-medium, 24px);
        text-transform: uppercase;
    }

    .emp-soda-announcement-teaser__heading {
        margin-block-end: var(--d-spacing-xsmall, 12px);
        font-size: var(--d-fontSize-headline-medium, 26px);
        line-height: var(--d-lineHeight-headline-medium, 32px);
    }

    .emp-soda-announcement-teaser__body {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        color: var(--color-font);
        font-family: var(--o-fontFamily-1, "Marselis for RuV"), sans-serif;
        font-size: var(--d-fontSize-body-default, 16px);
        font-style: normal;
        font-weight: var(--o-fontWeight-400, 400);
        line-height: var(--d-lineHeight-body-default, 24px);
    }

    .emp-soda-announcement-teaser__bullets {
        margin: var(--d-spacing-large, 32px);
        list-style-type: disc;

        li {
            margin-bottom: 0.5rem;
            font-size: 1rem;
            line-height: 1.6;
        }
    }

    .emp-soda-announcement-teaser__cta {
        margin-top: var(--d-spacing-small, 16px);

        & .button:not(.ruv-btn),
        .gform_wrapper.gravity-theme.ruv-theme_wrapper.soda-form_wrapper .gform_button.button, .alm-btn-wrap .alm-load-more-btn.button, #pmpro_login #loginform input[type="submit"], #pmpro_login #lostpasswordform input[type="submit"]{
            &.button--default {
                &.button--secondary {

                    --button-color: var(--color-font);

                    &:hover {
                        --button-color: var(--color-font-hover);
                    }
                }
            }
        }
    }

    .emp-soda-announcement-teaser__image {
        position: relative;
        container-type: inline-size;

        img {
            max-width: 100%;
            height: auto;
        }
    }

    .emp-soda-announcement-teaser__eyecatcher {
        position: absolute;
        top: var(--d-innerSpacing-20, 20px);
        left: var(--d-innerSpacing-20, 20px);
        z-index: 10;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-inline-size: 40cqi;
        min-inline-size: 136px;
        max-block-size: 40cqi;
        min-block-size: 136px;
        aspect-ratio: 1;
        border-radius: 50%;
        color: var(--o-color-base-light, #fff);
        background: var(--d-color-fg-highContrast-decoration, #A45F33);

        &.sand-bg {
            color: var(--o-color-brand-105, #001957);
            background: var(--o-color-base-light, #fff);
        }

        &.primary-bg {
            color: var(--o-color-brand-105, #001957);
            background: var(--o-color-decoration-30, #EABE8D);
        }

        &:has(img) {
            padding: var(--d-innerSpacing-8, 8px);
        }

        .eyecatcher-image {
            width: 80px;
            aspect-ratio: 1;
            object-fit: contain;
        }

        > div {
            text-align: center;
            hyphens: auto;
        }

        .eyecatcher-text-2 {
            overflow: hidden;
            max-inline-size: 136px;
            font-family: var(--o-fontFamily-1, "Marselis for RuV");
            font-size: var(--d-fontSize-headline-medium, 26px);
            font-style: normal;
            font-weight: var(--o-fontWeight-700, 700);
            line-height: var(--d-lineHeight-headline-medium, 32px); /* 123.077% */
        }
    }

    .emp-soda-announcement-teaser__advertorial {
        position: absolute;
        right: 15px;
        top: 10px;
        color: var(--color-font);
    }

    &.with-image {
        .emp-soda-announcement-teaser__inner {
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;
            gap: var(--d-spacing-large, 32px);
            padding-inline: var(--d-width-grid-default-margin, 48px);
            padding-block: var(--d-spacing-small, 16px);
        }
    }

    /* Image Alignment */
    @media (min-width: 768px) {
        .emp-soda-announcement-teaser__inner {
            grid-template-columns: 1fr 1fr;
        }

        &.emp-soda-announcement-teaser--image-left {
            .emp-soda-announcement-teaser__inner {
                grid-template-columns: 1fr 1fr;
            }

            .emp-soda-announcement-teaser__image {
                order: -1;
            }
        }

        &.emp-soda-announcement-teaser--image-right {
            .emp-soda-announcement-teaser__inner {
                grid-template-columns: 1fr 1fr;
            }

            .emp-soda-announcement-teaser__image {
                order: 1;
            }
        }
    }

    /* Responsive Design */
    @media (max-width: 767px) {
        padding: 0;

        .emp-soda-announcement-teaser__inner {
            .emp-soda-announcement-teaser__content {
                padding: 0;
            }

            .emp-soda-announcement-teaser__image {
                order: -1;

                img {
                    width: 100%;
                }
            }
        }

        .emp-soda-announcement-teaser__heading {
            font-size: 1.5rem;
        }

        .emp-soda-announcement-teaser__eyecatcher {
            max-inline-size: 40cqi;
            min-inline-size: 112px;
            max-block-size: 40cqi;
            min-block-size: 112px;

            .eyecatcher-text-2 {
                max-inline-size: 112px;
            }
        }
    }
}