/*
 * Grid: items in a wrapping row (so an incomplete last row is centred). Columns drop to
 * 2 (or 3, from 4–5) on tablets and 1 on phones.
 */

.blk--grid {
    --grid-cols: var(--grid-columns, 3);
    --grid-gap-x: 24px;
}

.grid__heading + .grid__items,
.grid__heading + .grid__decor + .grid__items {
    margin-top: var(--step-10);
}

.grid__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px var(--grid-gap-x);
}

.grid__item {
    flex: 0 0 calc((100% - (var(--grid-cols) - 1) * var(--grid-gap-x)) / var(--grid-cols));
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.grid__icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.grid__title {
    max-width: var(--item-title-width, none);
    margin: 0;
    color: var(--heading);
    font-family: var(--font-serif);
    font-size: 28px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: .03em;
}

.grid__text {
    max-width: var(--item-text-width, none);
    margin: 0;
    color: var(--text);
    font-size: 16px;
    line-height: 1.625;
}

.grid__buttons {
    margin-top: var(--step-10);
}

.blk--grid:has(.text-group--center-desktop) .grid__buttons {
    justify-content: center;
}

/* Cards: a bordered box, left aligned (a light, see-through border on dark backgrounds) */
.grid--cards .grid__item {
    padding: 32px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--neutral-50) 3%, transparent);
}

.is-dark .grid--cards .grid__item,
.grid--cards.is-dark .grid__item {
    /* the colour theme's darkest, very see-through, the photo softly blurred behind; a light edge */
    border-color: color-mix(in srgb, var(--theme-400) 40%, transparent);
    background: color-mix(in srgb, var(--theme-900) 25%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.grid--centred .grid__item {
    align-items: center;
    text-align: center;
}

.grid--sans .grid__title {
    font-family: var(--font-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
}

.grid--plain .grid__items {
    gap: 40px 24px;
}

.grid--plain .grid__item {
    align-items: center;
    gap: 16px;
    text-align: center;
}

.grid--tiles .grid__icon-wrap {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: var(--tertiary-100);
}

.grid--tiles .grid__icon {
    width: 22px;
    height: 22px;
}

/* Small items: the same sizes at every screen size */
.grid--small .grid__item {
    gap: 12px;
}

.grid--small .grid__title {
    font-size: 18px;
    line-height: 1.3;
}

.grid--small .grid__text {
    font-size: 14px;
    line-height: 1.55;
}

.grid--small.grid--tiles .grid__icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.grid--small.grid--tiles .grid__icon {
    width: 16px;
    height: 16px;
}

/* ---------- Decorative images: at the section's top corners on desktop, in the flow below ---------- */

.grid__decor {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--step-8);
}

.grid__decor img {
    flex: 0 0 50%;
    width: 50%;
    min-width: 0;
    height: auto;
}

.grid__decor-left {
    position: relative;
    z-index: 1;
}

/* The images slide in from beyond the sides: they mustn't widen the page while they wait */
.section:has(.grid--decor) {
    overflow-x: clip;
}

/* A dark gradient section: solid black down past the images (their backgrounds are black).
   --grid-black-until: measured by script.js. */
.section.has-grid-black-top {
    background: linear-gradient(180deg, var(--black) max(35%, var(--grid-black-until, 0px)), var(--secondary-800) 100%);
}

@media (min-width: 1025px) {
    /* The images are placed against the section, not its padded content box */
    .section:has(> .section__inner .grid--decor) :is(.section__inner, .section__blocks, .blk--grid) {
        position: static;
    }

    .grid--decor > :not(.grid__decor) {
        position: relative;
        z-index: 1;
    }

    .grid__decor {
        position: absolute;
        inset: 0;
        margin: 0;
        overflow: hidden;
        border-radius: inherit;
        pointer-events: none;
    }

    .grid__decor img {
        position: absolute;
        top: 0;
        margin: 0;
    }

    .grid__decor-left {
        z-index: auto;
        left: 0;
        width: 30%;
        max-width: 440px;
    }

    .grid__decor-right {
        right: 0;
        width: 25%;
        max-width: 380px;
    }
}

@media (max-width: 1024px) {
    .blk--grid {
        --grid-cols: 2;
    }

    .grid--cols-4,
    .grid--cols-5 {
        --grid-cols: 3;
    }

    .grid__heading + .grid__decor + .grid__items {
        margin-top: var(--step-8);
    }
}

@media (max-width: 600px) {
    .blk--grid {
        --grid-cols: 1 !important;
    }

    .grid__title {
        max-width: var(--item-title-width-mobile, var(--item-title-width, none));
        font-size: 24px;
        line-height: 1.17;
    }

    .grid__text {
        max-width: var(--item-text-width-mobile, var(--item-text-width, none));
    }

    .grid--sans .grid__title,
    .grid--small .grid__title {
        font-size: 18px;
    }

    .grid--cards .grid__item {
        gap: 16px;
        padding: 20px;
    }

    .grid__buttons {
        width: 100%;
        margin-top: var(--step-8);
    }
}

/* ---------- Entrance (script.js) ----------
   The heading (from the left, or up when centred) with the decorative images (each from
   its own side), then the items one at a time, row by row, or all at once, then the buttons. */

.blk--grid {
    --rv-stagger: var(--reveal-stagger);
}

.blk--grid[data-entrance="row"] {
    --rv-stagger: calc(var(--reveal-stagger) * 2);
}

.blk--grid.rv :is(.grid__heading, .grid__decor img, .grid__item, .grid__buttons) {
    opacity: 0;
}

.blk--grid.rv.rv-from-left .grid__heading { transform: translateX(calc(var(--reveal-shift) * -1)); }
.blk--grid.rv.rv-from-below .grid__heading { transform: translateY(var(--reveal-rise)); }
.blk--grid.rv .grid__decor-left { translate: calc(var(--reveal-shift) * -1.5) 0; }
.blk--grid.rv .grid__decor-right { translate: calc(var(--reveal-shift) * 1.5) 0; }
.blk--grid.rv .grid__item { transform: translateY(var(--reveal-rise)); }
.blk--grid.rv .grid__buttons { transform: translateY(calc(var(--reveal-rise) * .6)); }

.blk--grid.rv-armed .grid__heading {
    transition: opacity var(--reveal-text) ease, transform var(--reveal-text) var(--reveal-ease);
}

.blk--grid.rv-armed .grid__decor img {
    transition: opacity calc(var(--reveal-media) * .8) ease, translate var(--reveal-media) var(--reveal-ease);
}

.blk--grid.rv-armed .grid__item {
    transition:
        opacity var(--reveal-text) ease calc(var(--rv-start, 0s) + var(--rv-i, 0) * var(--rv-stagger)),
        transform calc(var(--reveal-text) + .1s) var(--reveal-ease) calc(var(--rv-start, 0s) + var(--rv-i, 0) * var(--rv-stagger));
}

.blk--grid.rv-armed .grid__buttons {
    transition: opacity var(--reveal-text) ease, transform var(--reveal-text) var(--reveal-ease);
    transition-delay: calc(var(--rv-start, 0s) + var(--rv-count, 1) * var(--rv-stagger) + .2s);
}

.blk--grid.rv.rv-heading-in :is(.grid__heading, .grid__decor img),
.blk--grid.rv.rv-items-in :is(.grid__item, .grid__buttons) {
    opacity: 1;
    transform: none;
    translate: none;
}