/* The Content Container: Content Items, Media Items and Forms side by side. Self-contained like
   the other blocks: the partial links this file itself, once per page, and every font, colour and
   space comes from the shared tokens in /blocks/blocks.css, each with its own fallback.

   What it asks of an item, so any block can sit in it -- a Form, which ships with the platform and
   has never heard of this file, sits here on exactly these terms:
   - Its root is a <section>. That is what the counting below counts: the zone also writes <link>
     and <script> tags between items, and those must not count as items.
   - It sets --block-width (a fraction, 0.3333 for 33%) on that section when it has a width, and
     --block-grow: 1 instead for Auto.

   What it does NOT ask:
   - A background. The container paints the row; an item that paints itself keeps its own paint,
     because the reset that strips it is scoped to this site's own design-block-* blocks and to
     nothing else.
   - data-painted="true", which this site's blocks set when the author chose a colour, and which
     buys the panel treatment: a radius, and the inner padding kept when the item is alone on its
     row. A block painted from a developer's own stylesheet can set it in its own markup to ask for
     the same, or leave it off and handle its own padding. Razor writes a data- attribute even when
     its value is null, so the value is what counts, not the attribute being there. */

/* contentcontainer.js, linked by the partial, marks each item data-alone="true" while it has its
   row to itself -- a 100% item, a lone Auto item, one wrapped onto a row of its own, and every item
   once the row stacks on a phone. Flex wrapping is decided by the browser at layout time, which is
   why that takes a script: no selector can ask which row an item landed on. */

/* Full bleed, painted like every block: the author's colour, or the panel white. */
.design-block-contentcontainer-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);
}

.design-block-contentcontainer-heading {
    margin: 0 0 24px;
    font-family: var(--block-title-font, Georgia, "Times New Roman", serif);
    font-size: var(--block-title-size, clamp(1.5rem, 1rem + 1.5vw, 2.25rem));
    font-weight: var(--block-title-weight, 700);
    line-height: var(--block-title-line, 1.15);
    color: var(--block-ink, #1a1a1a);
}

/* The row. Items keep their width and wrap onto the next row when the widths add up past 100%:
   66% then 50% is two rows. --auto is the share an Auto item starts from, by how many items there
   are: one full width, two a half, three a third, four or more a quarter. That decides where rows
   break; then Auto items grow into whatever their row has left, so a fifth Auto item on a row of
   its own is full width, and two there are halves. Sized items never grow. */
.design-block-contentcontainer-items {
    --auto: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-item-gap, 20px);
}

    .design-block-contentcontainer-items:has(> section:nth-of-type(2)) { --auto: 0.5; }
    .design-block-contentcontainer-items:has(> section:nth-of-type(3)) { --auto: 0.3333; }
    .design-block-contentcontainer-items:has(> section:nth-of-type(4)) { --auto: 0.25; }

    /* Each item: its own width, or the Auto share. The subtraction takes the item's part of the
       gaps out, so two halves, three thirds or a 66 and a 33 fill a row exactly. Every item gets
       the same inner padding, so text lines up across painted and unpainted items.

       Layout only. Sizing an item is the container's business whatever the item is; how an item is
       painted is not, which is the rule below. */
    .design-block-contentcontainer-items > section {
        --w: var(--block-width, var(--auto));
        flex: var(--block-grow, 0) 0 calc(var(--w) * 100% - var(--block-item-gap, 20px) * (1 - var(--w)));
        min-width: 0;
        box-sizing: border-box;
        padding: 24px;
    }

        /* Undoing the standalone dressing THIS SITE'S blocks give themselves: they bleed to the
           viewport and default to the panel white, and inside a row they must do neither -- the
           container paints the row, and an item paints only when it has a colour of its own.

           Scoped to design-block-* on purpose. As `> section` it also hit every other block that
           can sit here -- a platform Form, a partner's own -- at a specificity (0,1,1) no ordinary
           class can beat, so a developer painting .mc-form-block watched it work standalone and
           silently not work in a container. Nothing outside this site's own convention needs
           undoing, because nothing outside it did the bleeding. */
        .design-block-contentcontainer-items > section[class*="design-block-"] {
            background-color: transparent;
            border-image: none;
        }

        /* An item with its row to itself runs edge to edge, like a block on its own: the padding is
           for lining text up with the items beside it, and there are none. An item with a colour
           keeps it, so its text does not touch the edge of its own panel. */
        .design-block-contentcontainer-items > section[data-alone="true"]:not([data-painted="true"]) {
            padding: 0;
        }

        /* An item with its own colour: painted as a panel inside the row. */
        .design-block-contentcontainer-items > section[data-painted="true"] {
            background-color: var(--block-bg, transparent);
            border-radius: var(--block-radius, 6px);
        }

        /* The item's own content fills the item; it takes its width from the item only when the
           item stands alone. */
        .design-block-contentcontainer-items > section > * {
            --block-width: 1;
        }

/* Stacked at the width every block stacks at: one item per row, whatever its width. */
@media (max-width: 900px) {
    .design-block-contentcontainer-block {
        padding: var(--block-pad-y-sm, 40px) 0;
    }

    .design-block-contentcontainer-items {
        gap: 24px;
    }

        .design-block-contentcontainer-items > section {
            flex-basis: 100%;
        }
}