/* Columns block (templates/components/columns_section.html).
   The block's inner box is a size container, so the column count follows the space the block really has
   (also inside the Page Editor preview): all of them on wide screens, --cols-mid on tablets (four become
   two by two, five become three and two), at most two on large phones and one on phones. Rows that
   aren't full are centred so wrapped columns keep the same width. */
.columns-block {
    --cols-gap: 32px;
    padding: 56px 40px;
}

.columns-inner {
    width: 100%;
    max-width: var(--block-width, 1200px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
    container-type: inline-size;
    overflow-wrap: break-word;
}

.columns-head {
    max-width: var(--container-max-width, 800px);
}

.columns-head h2 {
    margin: 0;
}

.columns-intro > :first-child { margin-top: 12px; }
.columns-intro > :last-child { margin-bottom: 0; }

.columns-block.align-center .columns-head {
    align-self: center;
    text-align: center;
}

.columns-grid {
    --cols: var(--cols-wide, 3);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--cols-gap);
}

.columns-col {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--cols-gap)) / var(--cols));
    min-width: 0;
    box-sizing: border-box;
}

.columns-block.align-center .columns-col {
    text-align: center;
}

.columns-col-heading {
    margin: 0 0 10px;
    font-family: var(--font-bold);
    font-weight: normal;
    font-size: 1.2em;
    line-height: 1.25;
}

.columns-col-text > :first-child { margin-top: 0; }
.columns-col-text > :last-child { margin-bottom: 0; }

.columns-col-text img {
    max-width: 100%;
    height: auto;
}

/* Cards: each column on an outlined card, like a block's Card background. The card sets its own text colour so
   its words stay readable on a Tint or Accent background. */
.columns-block.card-style-card .columns-col {
    padding: 24px;
    background: var(--color-accordion-bg, var(--color-background));
    color: var(--color-accordion-text, var(--color-text));
    border: 1px solid color-mix(in srgb, var(--color-text, #000000) 10%, transparent);
    border-radius: var(--border-radius-card, 14px);
    box-shadow: var(--card-shadow, none);
}

@container (max-width: 999px) {
    .columns-grid { --cols: var(--cols-mid, 2); --cols-gap: 28px; }
}

@container (max-width: 679px) {
    .columns-grid { --cols: var(--cols-narrow, 2); --cols-gap: 24px; }
}

@container (max-width: 479px) {
    .columns-grid { --cols: 1; }
    .columns-block.card-style-card .columns-col { padding: 20px; }
}

@media (max-width: 600px) {
    .columns-block {
        padding: 40px 20px;
    }
}