/* Content blocks: the one outer element every block gets in every theme
   (see ecommerce/src/ecomHelpers/content.ts, wrapBlock). A theme styles
   `.csf-block--container` (its own block container sits inside it); a bare
   block has no box of its own at all. */
.csf-block {
    box-sizing: border-box;
}

.csf-block--bare {
    margin: 0;
    padding: 0;
}

/* Outside a block host (inside a block container, an article's body) a
   width-limited block is an inline-block of that percentage — there is no
   row to join. */
[class*="csf-block-width--"] {
    display: inline-block;
    vertical-align: top;
    inline-size: var(--csf-block-width, auto);
    max-inline-size: 100%;
    /* The gutter lives inside the block, because the element that holds
       these is often the operator's own markup (a wrapper div inside an
       Html block) and no rule can reach a parent to give it a gap. With
       `box-sizing: border-box` above, four quarters still add up to
       exactly 100%. */
    padding-inline: calc(var(--csf-block-gutter, 1rem) / 2);
}

/* Inside a host the row's own gap already spaces them, and doing both
   would double it. */
.csf-block-host > [class*="csf-block-width--"] {
    padding-inline: 0;
}

/* The row model. A theme marks the element it drops page content into
   with `csf-block-host`, and widths become column spans of a 12-column
   grid.

   Why spans and not the percentage: a host laid out as a grid makes every
   block its own row, so four blocks set to 25% each rendered a quarter
   wide and stacked — the operator set four across and got four down. A
   percentage cannot solve it either, because the gap between two items is
   real width: 4 x 25% plus three gaps overflows and the fourth drops to
   the next row. Spans leave the arithmetic to the grid.

   The browser closes an open `<p>` when a `<div>` starts inside it, so a
   block token written inside a paragraph lands as a direct child here —
   which is exactly what makes `>` the right combinator, and what leaves
   the emptied paragraphs behind. */
.csf-block-host {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    row-gap: var(--csf-block-gap, 1rem);
    /* Eleven gutters sit between twelve columns: at a large text size or in a narrow column a rem gap alone would be wider than the host. */
    column-gap: min(var(--csf-block-gap, 1rem), 1.4%);
    align-items: start;
}

/* EVERY direct child, not only a block: a page's content also contains
   headings, paragraphs and the odd wrapper div, and a grid item with no
   span of its own lands in a single 1/12 column — 90px of a 1256px page.
   Full width is the default; a width class narrows it. */
.csf-block-host > * {
    grid-column: span 12;
}

.csf-block-host > .csf-block {
    /* The span decides the width here; the inline percentage would
       re-apply inside the cell and shrink the block again. */
    inline-size: auto;
    max-inline-size: none;
}

.csf-block-host > .csf-block-width--25 { grid-column: span 3; }
.csf-block-host > .csf-block-width--33 { grid-column: span 4; }
.csf-block-host > .csf-block-width--50 { grid-column: span 6; }
.csf-block-host > .csf-block-width--66 { grid-column: span 8; }
.csf-block-host > .csf-block-width--100 { grid-column: span 12; }

/* Left behind when a block token was written inside a paragraph: the
   token expands into markup a `<p>` may not hold, so the browser closes
   the paragraph early and an empty one remains. As a grid item each takes
   a full row and a gap — the unexplained gaps between rows of blocks.

   `devops/local-db/migrateBlockTokenParagraphs.ts` removes the cause by
   rewriting those paragraphs as containers. This stays for content that
   has not been migrated yet, and for anything a future editor writes the
   same way. */
.csf-block-host > p:empty { display: none; }

/* A quarter is unreadable on a phone; halves still work on a tablet. */
@media (max-width: 1023px) {
    .csf-block-host > .csf-block-width--25 { grid-column: span 6; }
    .csf-block-host > .csf-block-width--33 { grid-column: span 6; }
}

@media (max-width: 599px) {
    .csf-block-host > * { grid-column: span 12; }

    /* Outside a host the same quarters and thirds become halves, as they do inside one on a tablet. */
    :not(.csf-block-host) > .csf-block-width--25,
    :not(.csf-block-host) > .csf-block-width--33 {
        inline-size: 50%;
        padding-block-end: 0.5rem;
    }
}

/* The default block container gives an untitled section a heading taken
   from the operator's own block name, hidden so nothing changes visually.
   Without it a section whose content starts at `h3` follows the page `h1`
   and skips a level. Themes that ship their own container repeat this. */
.csf-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* 2.5.8 target size for the viewed-products block's own links. The block
   builds this markup itself (`recentProductsBlock`), so the rule belongs
   here rather than in each of the six themes. Measured at 21px tall on a
   real checkout page. */
.viewed-product-item a {
    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
}

/* A tile's title and its link are siblings of one caption; as inline spans they ran together on one line. */
.csf-text-block__title {
    display: block;
}