/*
 * The page builder's building blocks: sections, blocks, the text group, backgrounds.
 * Markup: inc/builder/render.php.
 */

/* ---------- Sections ---------- */

.section {
    --section-pt: var(--space-lg);
    --section-pb: var(--space-lg);
    --section-gap: var(--space-md);
    --section-header-gap: var(--space-sm);
    position: relative;
    padding-block: var(--section-pt) var(--section-pb);
    background: var(--bg, transparent);
}

.section--pt-none { --section-pt: 0px; }
.section--pt-xs { --section-pt: var(--space-xs); }
.section--pt-sm { --section-pt: var(--space-sm); }
.section--pt-md { --section-pt: var(--space-md); }
.section--pt-lg { --section-pt: var(--space-lg); }
.section--pt-xl { --section-pt: var(--space-xl); }

.section--pb-none { --section-pb: 0px; }
.section--pb-xs { --section-pb: var(--space-xs); }
.section--pb-sm { --section-pb: var(--space-sm); }
.section--pb-md { --section-pb: var(--space-md); }
.section--pb-lg { --section-pb: var(--space-lg); }
.section--pb-xl { --section-pb: var(--space-xl); }

.section--gap-none { --section-gap: 0px; }
.section--gap-xs { --section-gap: var(--space-xs); }
.section--gap-sm { --section-gap: var(--space-sm); }
.section--gap-md { --section-gap: var(--space-md); }
.section--gap-lg { --section-gap: var(--space-lg); }
.section--gap-xl { --section-gap: var(--space-xl); }

.section--header-gap-none { --section-header-gap: 0px; }
.section--header-gap-xs { --section-header-gap: var(--space-xs); }
.section--header-gap-sm { --section-header-gap: var(--space-sm); }
.section--header-gap-md { --section-header-gap: var(--space-md); }
.section--header-gap-lg { --section-header-gap: var(--space-lg); }
.section--header-gap-xl { --section-header-gap: var(--space-xl); }

.section__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section__header + .section__blocks {
    margin-top: var(--section-header-gap);
}

.section__blocks {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

/* A block's own "Space above": replaces the section's gap above it */
.section__blocks > .blk--above-none { margin-top: calc(0px - var(--section-gap)); }
.section__blocks > .blk--above-xs { margin-top: calc(var(--space-xs) - var(--section-gap)); }
.section__blocks > .blk--above-sm { margin-top: calc(var(--space-sm) - var(--section-gap)); }
.section__blocks > .blk--above-md { margin-top: calc(var(--space-md) - var(--section-gap)); }
.section__blocks > .blk--above-lg { margin-top: calc(var(--space-lg) - var(--section-gap)); }
.section__blocks > .blk--above-xl { margin-top: calc(var(--space-xl) - var(--section-gap)); }
.section__blocks > :first-child[class*="blk--above-"] { margin-top: 0; }

/* ---------- Blocks ---------- */

.blk {
    position: relative;
    min-width: 0;
}

.blk.has-bg {
    background: var(--bg, transparent);
}

/* Inset: a rounded card on its own background */
.blk--inset {
    border-radius: var(--radius);
    overflow: hidden;
    isolation: isolate;
}

/* Full-bleed: a block that runs edge to edge of the screen, out of the section's gutters */
.blk--bleed {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
}

/* Arched top: a blush background (primary-100, edged in primary-300) rising in a shallow arch (about an eighth of the width,
   at most 140px), edged with a fine line. The content clears the arch. */
.section--arch {
    --arch-h: min(11.8vw, 140px);
    --arch-fill: var(--primary-100);
    --arch-line: var(--primary-300);
    padding-top: max(var(--section-pt), calc(var(--arch-h) + 16px));
    background: linear-gradient(var(--arch-fill), var(--arch-fill)) 0 calc(var(--arch-h) - 1px) / 100% calc(100% - var(--arch-h) + 1px) no-repeat;
}

.section__arch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--arch-h);
    overflow: visible;
}

.section__arch-fill {
    fill: var(--arch-fill);
}

.section__arch-line {
    fill: none;
    stroke: var(--arch-line);
    stroke-width: 1.5px;
}

/* Content sits above a block's background layers */
.blk.has-bg-media > :not(.blk__bg, .blk__overlay) {
    position: relative;
    z-index: 1;
}

/* Hidden sections and blocks, shown in an editor's preview */
.is-hidden-preview {
    outline: 2px dashed #D63638;
    outline-offset: -2px;
}

.is-hidden-preview::before {
    content: 'Hidden';
    position: absolute;
    z-index: 5;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #D63638;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

/* ---------- Backgrounds ---------- */

.section__bg,
.blk__bg {
    position: absolute;
    inset: 0;
    background: var(--bg-image) center / cover no-repeat;
}

.section__bg video,
.blk__bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 860px) {
    .section__bg,
    .blk__bg {
        background-image: var(--bg-image-tablet, var(--bg-image));
    }
}

@media (max-width: 600px) {
    .section__bg,
    .blk__bg {
        background-image: var(--bg-image-mobile, var(--bg-image-tablet, var(--bg-image)));
    }
}

.section__overlay,
.blk__overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay);
    pointer-events: none;
}

/* Entrances (reveal.js): a background image settles in with a masked zoom; an inset
   card's colour fades in (a page-coloured cover fades away) before its content enters. */
.has-rv-bg > .section__bg,
.has-rv-bg > .blk__bg {
    --mz: var(--reveal-zoom);
    scale: var(--mz);
    clip-path: inset(calc((1 - 1 / var(--mz)) * 50%) round calc(var(--rv-bg-radius, 0px) / var(--mz)));
}

.blk--inset.has-rv-bg {
    --rv-bg-radius: var(--radius);
}

.has-rv-bg.rv-bg-armed > .section__bg,
.has-rv-bg.rv-bg-armed > .blk__bg {
    transition: --mz var(--reveal-media) var(--reveal-ease);
}

.has-rv-bg.rv-bg-in > .section__bg,
.has-rv-bg.rv-bg-in > .blk__bg {
    --mz: 1;
}

.rv-backdrop-cover {
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    pointer-events: none;
}

/* ---------- The text group: subheading, heading, body, buttons ---------- */

.text-group__subheading {
    margin-bottom: var(--subheading-gap);
    color: var(--subheading);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.33;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.text-group__heading {
    max-width: var(--heading-width, none);
}

.text-group__body {
    display: flex;
    flex-direction: column;
    gap: var(--step-6);
    max-width: var(--body-width, none);
    margin-top: var(--step-6);
    color: var(--text);
}

.text-group__subheading + .text-group__body {
    margin-top: 0;
}

.text-group__body > * {
    margin: 0;
}

.text-group__body :is(ul, ol) li + li {
    margin-top: var(--step-2);
}

.text-group__buttons {
    margin-top: var(--step-8);
}

/* Lists with check marks (a list style in the body text) */
.text-group__body ul.is-checks,
.list-checks {
    padding: 0;
    list-style: none;
}

.text-group__body ul.is-checks li,
.list-checks li {
    position: relative;
    padding-left: 28px;
}

.text-group__body ul.is-checks li::before,
.list-checks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .25em;
    width: 16px;
    height: 16px;
    background: var(--tertiary-600);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='m2.5 8.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='m2.5 8.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 601px) {
    .text-group--center-desktop {
        text-align: center;
    }

    .text-group--center-desktop :is(.text-group__heading, .text-group__body) {
        margin-inline: auto;
    }

    .text-group--center-desktop .text-group__body {
        max-width: var(--body-width, 600px);
        align-items: center;
    }

    .text-group--center-desktop .text-group__buttons {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .text-group__subheading {
        font-size: 16px;
        line-height: 1.5;
    }

    .text-group--center-mobile {
        text-align: center;
    }

    .text-group--center-mobile :is(.text-group__heading, .text-group__body) {
        margin-inline: auto;
    }

    .text-group--center-mobile .text-group__buttons {
        justify-content: center;
    }
}

/* Text group entrance (reveal.js → revealText): each part a beat after the last */
.text-group.rv > * {
    opacity: 0;
}

.text-group.rv.rv-from-left > * {
    transform: translateX(calc(var(--reveal-shift) * -1));
}

.text-group.rv.rv-from-below > * {
    transform: translateY(var(--reveal-rise));
}

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

.text-group.rv.rv-in > * {
    opacity: 1;
    transform: none;
}

/* The first section under a transparent header (over a dark first section) starts below
   the nav and the hanging logo (--header-clearance: site-header/style.css). */
.site-main > .section:first-child > .section__inner {
    margin-top: var(--header-clearance, 0px);
}

/* Blocks use the same gap under their subheading as sections (--subheading-gap) */
.blk .text-group__subheading {
    margin-bottom: var(--subheading-gap);
}

.blk--content .text-group__subheading {
    margin-bottom: var(--subheading-gap);
}

/* A lone button under a section heading (or in a Content block) is at least 200px wide */
:is(.section__header, .blk--content) .text-group__buttons > .btn:only-child {
    min-width: 200px;
}

/* Phones: buttons stack, each as wide as the widest (full width in the hero) */
@media (max-width: 600px) {
    .text-group__buttons {
        flex-direction: column;
        align-items: stretch;
        width: fit-content;
    }

    .text-group__buttons > .btn {
        width: 100%;
    }

    .text-group--center-mobile .text-group__buttons {
        margin-inline: auto;
    }
}