/*
 * Sections – the band every block draws, and the text inside them.
 *
 * A block is a band (.section) in one of three grounds – Light (the page's
 * chalk), Stone or Dark (graphite) – with its content in the container.
 * Two bands of the same ground in a row share their padding, so they read
 * as one section. Most blocks open with a section head: the small label,
 * the heading and an intro. Text from a text editor is .prose.
 *
 * Loaded on the front end and in the editor (add_editor_style), so the
 * block previews are the site.
 */

/* ── Bands ────────────────────────────────────────────────────── */

.section {
    padding-block: var(--section-space, clamp(64px, 8vw + 32px, 128px));
    background: var(--section-ground, var(--color-chalk));
}

.section--stone { --section-ground: var(--color-stone); }

.section--dark {
    --section-ground: var(--color-graphite);

    color: var(--color-white-75);

    & :is(h1, h2, h3, h4, h5, h6) { color: var(--color-chalk); }
    & :is(h1, h2, h3, h4) em { color: var(--color-oak); }
    & .eyebrow { color: var(--color-oak); }
}

.section--light + .section--light,
.section--stone + .section--stone,
.section--dark + .section--dark { padding-block-start: 0; }

/*
 * Long reads (posts, projects): the light bands drop their padding and sit
 * 24px apart inside the article's own, like the parts of one piece.
 */
:is(.single-post, .single-project) .blocks {
    padding-block: var(--space-xl) var(--space-2xl);

    @media (min-width: 1100px) { padding-block: var(--space-2xl) var(--space-3xl); }

    & > .section--light { padding-block: 0; }
    & > .section + .section { margin-block-start: 24px; }
}

/* A narrower column for reading and for the form. */
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.container--form { max-width: calc(900px + var(--gutter) * 2); }

/* Text beside something – a photo, a card, the contact details. Side by side from 782px. */
.split {
    display: grid;
    gap: var(--space-xl) var(--space-2xl);

    @media (min-width: 782px) {
        grid-template-columns: var(--split-columns, minmax(0, 1fr) minmax(0, 1fr));
        align-items: var(--split-align, center);
    }
}

/* ── Section head: small label, heading, intro ────────────────── */

.section-head {
    max-width: 720px;
    margin-block-end: var(--space-xl);

    /* Inside a column, beside other content: just the space before the text. */
    &.section-head--tight { margin-block-end: var(--space-md); }

    &:last-child { margin-block-end: 0; }
}

.section-head__eyebrow { margin: 0; }

.section-head__title {
    margin: 0;

    .section-head__eyebrow + & { margin-block-start: var(--space-sm); }
}

.section-head__intro {
    margin-block-start: var(--space-md);

    & p { font: var(--text-20ar); color: var(--color-charcoal); }

    .section--dark & p { color: var(--color-white-75); }
}

/* ── Text from a text editor ──────────────────────────────────── */

.prose {
    & > * { margin-block: 0; }
    & > * + * { margin-block-start: 24px; }

    /* Headings open a new passage – more room above than below. */
    & > :is(h2, h3, h4):not(:first-child) { margin-block-start: var(--space-xl); }
    & > :is(h2, h3, h4) + * { margin-block-start: var(--space-md); }

    & p.lead { font: var(--text-20ar); color: var(--color-charcoal); }
    & p.small { font: 400 15px/24px var(--font-archivo); color: var(--color-slate); }

    & a:not(.button) {
        color: var(--color-cedar);
        text-decoration: underline;
        text-decoration-thickness: 1.5px;
        text-underline-offset: 3px;

        &:hover { color: var(--color-cedar-dark); }
    }

    & :where(ul, ol):not(.ticks) {
        padding-inline-start: 1.3em;

        & li + li { margin-block-start: calc(var(--space-sm) + var(--space-xs)); }
        & li::marker { color: var(--color-cedar); }
    }

    & blockquote {
        padding-inline-start: var(--space-lg);
        border-inline-start: 3px solid var(--color-oak);

        & p { font: italic 500 24px/34px var(--font-gelica); color: var(--color-graphite); }
    }

    & img {
        height: auto;
        border-radius: var(--radius-md);
    }

    & a:has(> img) { display: block; cursor: zoom-in; }

    & .wp-caption { max-width: 100%; }

    & .wp-caption-text {
        margin-block-start: var(--space-sm);
        font: var(--text-14ar);
        color: var(--color-slate);
    }

    & .alignright { float: right; margin: 0 0 var(--space-md) var(--space-lg); }
    & .alignleft { float: left; margin: 0 var(--space-lg) var(--space-md) 0; }
    & .aligncenter { margin-inline: auto; }

    .section--dark & {
        & p.lead { color: var(--color-white-75); }
        & a:not(.button) { color: var(--color-oak); }
        & li::marker { color: var(--color-oak); }
        & blockquote p { color: var(--color-chalk); }
    }
}

/* A ticked list – in text (Formats → Ticked list) and in the Text & checklist card. */
ul.ticks {
    display: grid;
    gap: calc(var(--space-sm) + var(--space-xs));
    padding: 0;
    list-style: none;

    & li {
        position: relative;
        padding-inline-start: 34px;
    }

    & li::before {
        content: "";
        position: absolute;
        inset: 3px auto auto 0;
        width: 22px;
        height: 22px;
        background-color: var(--color-cedar);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 4.5 4.5 10.5-11'/%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 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 4.5 4.5 10.5-11'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .section--dark & li::before { background-color: var(--color-oak); }
}

/* ── Cards and reviews ────────────────────────────────────────── */

/* A white card – the Cards grid, the checklist. */
.card {
    padding: var(--space-lg);
    background: var(--color-white);
    border: 1px solid var(--color-putty);
    border-radius: var(--radius-md);
    color: var(--color-charcoal);

    & h3 { margin: 0; font: var(--text-24gm); color: var(--color-graphite); }
    & h3 + * { margin-block-start: var(--space-md); }

    .section--dark & { border-color: transparent; }
}

/* A customer's words – white, a big oak quote mark, italic Gelica. */
.review {
    display: grid;
    gap: var(--space-md);
    margin: 0;
    padding: var(--space-lg);
    background: var(--color-white);
    border: 1px solid var(--color-putty);
    border-radius: var(--radius-md);

    &::before {
        content: "“";
        height: 40px;
        font: 500 80px/1 var(--font-gelica);
        color: var(--color-oak);
    }

    & p {
        margin: 0;
        font: italic 500 20px/31px var(--font-gelica);
        color: var(--color-graphite);
    }

    & p + p { margin-block-start: var(--space-md); }

    & cite {
        font: var(--text-14am);
        font-style: normal;
        letter-spacing: 0.04em;
        color: var(--color-slate);
    }

    .section--dark & { border-color: transparent; }
}

/* Breathing room above a button that closes a column of text. */
.section__actions { margin-block-start: var(--space-lg); }