/* The Content Item block: author-entered rich text on a background. Self-contained like the other
   blocks: the partial links this file itself, once per page, and every font, size, colour and
   space comes from the shared tokens in /blocks/blocks.css, each with its own fallback for a site
   without that file. */

/* Full bleed, painted the same way as the CTA and the accordion: --block-bg is set inline when the
   author chose a colour, and the panel white stands in when they did not. */
.design-block-contentitem-block {
    width: 100%;
    box-sizing: border-box;
    padding: var(--block-pad-y, 64px) 0;
    background-color: var(--block-bg, var(--block-panel-bg, #fff));
    border-image: linear-gradient(var(--block-bg, var(--block-panel-bg, #fff)) 0 0) fill 0 // 0 100vw;
    color: var(--block-ink, #1a1a1a);
}

/* Inside another bleeding block it would paint over it. */
.design-block-accordioncontainer-block .design-block-contentitem-block,
.design-block-cta-block .design-block-contentitem-block {
    border-image: none;
}

/* On its own the block is a row of its own, and the text takes its Width of that row from the
   left -- 33% leaves the other two thirds empty. Auto sets no --block-width, which is full width.
   Inside a Content Container the container sizes the block instead and this is 100%. */
.design-block-contentitem-body {
    width: calc(var(--block-width, 1) * 100%);
    font-size: var(--block-body-size, 1.0625rem);
    line-height: var(--block-body-line, 1.75);
}

    .design-block-contentitem-body > :first-child { margin-top: 0; }
    .design-block-contentitem-body > :last-child { margin-bottom: 0; }

    .design-block-contentitem-body p,
    .design-block-contentitem-body ul,
    .design-block-contentitem-body ol {
        margin: 0 0 1em;
    }

    .design-block-contentitem-body ul,
    .design-block-contentitem-body ol {
        padding-left: 1.5em;
    }

    /* A heading typed into the editor reads as a block title. */
    .design-block-contentitem-body h2,
    .design-block-contentitem-body h3,
    .design-block-contentitem-body h4 {
        margin: 1.5em 0 0.5em;
        font-family: var(--block-title-font, Georgia, "Times New Roman", serif);
        line-height: var(--block-title-line, 1.15);
    }

    .design-block-contentitem-body h2 {
        font-size: var(--block-title-size, clamp(1.5rem, 1rem + 1.5vw, 2.25rem));
        font-weight: var(--block-title-weight, 700);
    }

    .design-block-contentitem-body a {
        color: var(--block-ink, #1a1a1a);
        text-decoration: underline;
    }

    .design-block-contentitem-body img {
        max-width: 100%;
        height: auto;
        border-radius: var(--block-radius, 6px);
    }

@media (max-width: 900px) {
    .design-block-contentitem-block {
        padding: var(--block-pad-y-sm, 40px) 0;
    }

    /* Stacked, every width is full width. */
    .design-block-contentitem-body {
        width: 100%;
    }
}