/* Styling for all news custom HTML elements */

.key-figure-wrapper {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.key-figure {
    max-width: 250px;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid var(--hcp-color-light-grey, #EAECF0);
    background: var(--hcp-color-white, #FFFFFF);
    box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.10);
    margin: 10px 10px 16px;
    color: var(--hcp-color-med-grey, #748194);
}

.key-figure-title {
    margin-bottom: 16px;
    padding: 30px 0;
    border-bottom: 4px solid var(--hcp-color-focus, #E9D7FE);
    color: var(--hcp-color-fourth, #42307D);
}

.key-figure-title .title-text {
    min-height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.key-feature-legend {
    color: var(--hcp-color-fifth, #546782);
}

.article {
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--hcp-color-grey, #D0D5DD);
}

.article:last-of-type {
    border-bottom: none;
}

.article .article-image,
.quote-block img {
    border-radius: 50%;
}

.article-box {
    border-radius: 16px;
    border: 1px solid var(--hcp-color-light-grey, #EAECF0);
    background: var(--hcp-color-white, #FFFFFF);
    box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.10);
    margin: 10px 10px 16px;
    padding: 36px;
    color: var(--hcp-color-med-grey, #748194);
}

.article-box-title {
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 24px;
    color: var(--hcp-color-fourth, #42307D);
}

.article-box-title:after,
.news-banner-title:before {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    width: 130px;
    height: 4px;
    background-color: var(--hcp-color-focus, #E9D7FE);
}

.sources-box {
    --dxp-c-link-text-decoration: underline;
    border-radius: 16px;
}

.quote-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.quote-block .quote {
    position: relative;
    padding-top: 28px;
    color: var(--hcp-color-third, #4E2C7E);
}

.quote-block .credits {
    color: var(--hcp-color-gark-grey, #575756);
}

.quote-block .quote:after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 75px;
    height: 4px;
    background-color: var(--hcp-color-focus, #E9D7FE);
}

.download-section {
    border-radius: 8px;
    background: var(--hcp-color-white, #FFFFFF);
    box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.10);
    margin: 10px 10px 16px;
    padding: 24px;
}

.download-heading {
    position: relative;
    padding-left: 76px;
    min-height: 60px;
    display: flex;
    align-items: center;
}

.download-heading:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='60' height='60' rx='30' fill='%23E9D7FE'/%3E%3Cpath d='M39 33V34.2C39 35.8802 39 36.7202 38.673 37.362C38.3854 37.9265 37.9265 38.3854 37.362 38.673C36.7202 39 35.8802 39 34.2 39H25.8C24.1198 39 23.2798 39 22.638 38.673C22.0735 38.3854 21.6146 37.9265 21.327 37.362C21 36.7202 21 35.8802 21 34.2V33M35 28L30 33M30 33L25 28M30 33V21' stroke='%2342307D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.download-section ul {
    list-style: disc;
    list-style-position: inside;
}

.download-link {
    padding: 24px 10px;
    border-top: 1px solid var(--hcp-color-grey, #D0D5DD);
}

.news-banner {
    --dxp-c-link-text-color: var(--hcp-color-white, #FFFFFF);
    --dxp-s-text-heading-large-color: var(--hcp-color-white, #FFFFFF);
    --dxp-c-link-text-color-hover: var(--hcp-color-white, #FFFFFF);
    --dxp-c-link-text-color-focus: var(--hcp-color-white, #FFFFFF);
    --dxp-c-link-text-color-active: var(--hcp-color-white, #FFFFFF);
    display: flex;
    flex-wrap: wrap;
    min-height: 335px;
    padding: 48px 16px 32px 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.news-banner-title {
    position: relative;
    padding-top: 36px;
    padding-bottom: 16px;
}

.news-banner-title:before {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 65px;
    height: 4px;
    background-color: var(--hcp-color-focus, #E9D7FE);
}

.news-banner-button {
    width: 100%;
    min-height: 59px;
    display: flex;
    align-self: flex-end;
    justify-content: flex-end;
    align-items: center;
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='49' viewBox='0 0 48 49' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='24.4902' r='23' stroke='%23E9D7FE' stroke-width='2'/%3E%3Cpath d='M17 24.4902H31M31 24.4902L24 17.4902M31 24.4902L24 31.4902' stroke='%23E9D7FE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 64px;
    color: var(--hcp-color-focus, #F4EBFF);
}

/* Tablet up */
@media only screen and (min-width: 768px) {
    .quote-block {
        flex-direction: row;
    }
    
    .quote-block .quote,
    .quote-block .credits {
        padding-top: 0;
        padding-left: 28px;
    }

    .quote-block .quote:after {
        width: 4px;
        height: 100%;
    }
    
    .news-banner {
        padding-left: 72px;
        padding-right: 72px;
    }
}