/*
 * Key Takeaways box.
 *
 * A self-contained article component: the editor inserts the markup, this file
 * is the only place that decides how it looks. It is deliberately not scoped to
 * a blog or a news class, so the same file can be dropped into the next portal
 * and it will work there unchanged.
 *
 * To restyle it, change the values in the block below and nothing else. Every
 * rule further down reads from them.
 *
 * The markup it styles:
 *
 *   <div class="content-takeaways">
 *       <h3 class="content-takeaways__title">Key Takeaways</h3>
 *       <ul class="content-takeaways__list">
 *           <li class="content-takeaways__item">…</li>
 *       </ul>
 *   </div>
 *
 * Selectors double up the block class (.content-takeaways .content-takeaways__list)
 * on purpose. The article stylesheets style bare `ul` and `li` inside a section —
 * blog-inner.css gives every list item a border and an arrow — and the extra class
 * is what keeps those rules out of this box without an !important anywhere.
 */

.content-takeaways {
    /* Box */
    --takeaways-bg: #cd0f36;
    --takeaways-color: #ffffff;
    --takeaways-radius: 16px;
    --takeaways-padding: 30px 34px;
    --takeaways-margin: 34px 0;
    --takeaways-max-width: none;
    --takeaways-shadow: none;
    --takeaways-border: 0;

    /* Title */
    --takeaways-title-size: 19px;
    --takeaways-title-weight: 800;
    --takeaways-title-spacing: 0.04em;
    --takeaways-title-transform: uppercase;
    --takeaways-title-gap: 18px;

    /* The mark before the title. Set --takeaways-marker to none to drop it. */
    --takeaways-marker: "\25C6";
    --takeaways-marker-size: 15px;
    --takeaways-marker-gap: 11px;

    /* Items */
    --takeaways-item-size: 16.5px;
    --takeaways-item-weight: 500;
    --takeaways-item-line: 1.5;
    --takeaways-item-gap: 13px;
    --takeaways-bullet: "\2022";
    --takeaways-bullet-size: 17px;
    --takeaways-bullet-indent: 22px;

    /* Phone */
    --takeaways-padding-sm: 24px 22px;
    --takeaways-title-size-sm: 17px;
    --takeaways-item-size-sm: 15px;

    box-sizing: border-box;
    max-width: var(--takeaways-max-width);
    margin: var(--takeaways-margin);
    padding: var(--takeaways-padding);
    border: var(--takeaways-border);
    border-radius: var(--takeaways-radius);
    background: var(--takeaways-bg);
    box-shadow: var(--takeaways-shadow);
    color: var(--takeaways-color);
}

.content-takeaways *,
.content-takeaways *::before {
    box-sizing: border-box;
}

.content-takeaways .content-takeaways__title {
    display: flex;
    align-items: baseline;
    margin: 0 0 var(--takeaways-title-gap);
    padding: 0;
    border: 0;
    color: inherit;
    font-family: inherit;
    font-size: var(--takeaways-title-size);
    font-weight: var(--takeaways-title-weight);
    line-height: 1.25;
    letter-spacing: var(--takeaways-title-spacing);
    text-transform: var(--takeaways-title-transform);
}

.content-takeaways .content-takeaways__title::before {
    content: var(--takeaways-marker);
    flex: 0 0 auto;
    margin-right: var(--takeaways-marker-gap);
    font-size: var(--takeaways-marker-size);
    line-height: 1;
}

.content-takeaways .content-takeaways__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
}

.content-takeaways .content-takeaways__item {
    position: relative;
    margin: 0 0 var(--takeaways-item-gap);
    padding: 0 0 0 var(--takeaways-bullet-indent);
    border: 0;
    color: inherit;
    font-size: var(--takeaways-item-size);
    font-weight: var(--takeaways-item-weight);
    line-height: var(--takeaways-item-line);
}

.content-takeaways .content-takeaways__item:last-child {
    margin-bottom: 0;
}

.content-takeaways .content-takeaways__item::before {
    content: var(--takeaways-bullet);
    position: absolute;
    top: 0;
    left: 4px;
    color: inherit;
    font-size: var(--takeaways-bullet-size);
    line-height: inherit;
}

/* Links inside a takeaway stay readable on the coloured background. */
.content-takeaways .content-takeaways__item a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 640px) {
    .content-takeaways {
        padding: var(--takeaways-padding-sm);
    }

    .content-takeaways .content-takeaways__title {
        font-size: var(--takeaways-title-size-sm);
    }

    .content-takeaways .content-takeaways__item {
        font-size: var(--takeaways-item-size-sm);
    }
}