/* The CTA block. Self-contained like the accordion's stylesheet: drop the folder and the partial
   into any site and the layout comes with it. Fonts, sizes and colours come from the shared tokens
   in /blocks/blocks.css; each var() carries its own fallback for a site without that file. */

/* Full bleed. --block-bg is set inline by the template (and not at all for "(default)"); the
   colour is painted as a border image outset to the viewport on both sides, so it reaches the
   edges of the screen without changing the block's width or adding a horizontal scrollbar. */
.design-block-cta-block {
    width: 100%;
    box-sizing: border-box;
    padding: var(--block-pad-y, 64px) 0;
    background-color: var(--block-bg, transparent);
    border-image: linear-gradient(var(--block-bg, transparent) 0 0) fill 0 // 0 100vw;
}

/* A CTA inside another bleeding block would paint over it. */
.design-block-accordioncontainer-block .design-block-cta-block,
.design-block-cta-block .design-block-cta-block {
    border-image: none;
}

/* Two equal columns under a dark rule. The gutter is the column gap; the ::before draws the thin
   separator down its middle, from the rule to the bottom of the columns. */
.design-block-cta-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--block-gutter, 56px);
    padding-top: 20px;
    border-top: 1px solid var(--block-rule-strong, #1a1a1a);
}

    .design-block-cta-inner::before {
        content: "";
        position: absolute;
        top: 20px;
        bottom: 0;
        left: 50%;
        width: 1px;
        background: var(--block-rule, rgba(0, 0, 0, 0.16));
    }

/* No image: the text takes the full width and there is nothing to separate. */
.design-block-cta--no-image .design-block-cta-inner {
    grid-template-columns: minmax(0, 1fr);
}

    .design-block-cta--no-image .design-block-cta-inner::before {
        display: none;
    }

/* Image on the left by default; the modifier swaps the columns without reordering the markup, so
   the reading order (image, then text) stays the same for screen readers either way. */
.design-block-cta--image-right .design-block-cta-media {
    order: 2;
}

/* Every image renders 16:9, filling the column and cropped from the centre — a portrait or oversized
   upload is trimmed evenly rather than stretched or letterboxed. */
.design-block-cta-media {
    min-width: 0;
}

.design-block-cta-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}

/* A column, so the button can be pushed to the bottom with margin-top: auto and line up with the
   bottom edge of the image beside it. */
.design-block-cta-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.design-block-cta-label {
    margin: 0 0 4px;
    font-size: var(--block-label-size, 0.875rem);
    font-weight: var(--block-label-weight, 700);
    letter-spacing: var(--block-label-tracking, 0.12em);
    text-transform: uppercase;
    color: var(--block-ink, #1a1a1a);
}

.design-block-cta-heading {
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--block-rule, rgba(0, 0, 0, 0.16));
    font-family: var(--block-title-font, Georgia, "Times New Roman", serif);
    font-size: var(--block-title-size, clamp(1.5rem, 1rem + 1.5vw, 2.25rem));
    font-weight: var(--block-title-weight, 700);
    line-height: var(--block-title-line, 1.15);
    color: var(--block-ink, #1a1a1a);
}

.design-block-cta-description {
    font-size: var(--block-body-size, 1.0625rem);
    line-height: var(--block-body-line, 1.75);
    color: var(--block-ink, #1a1a1a);
}

    .design-block-cta-description p {
        margin: 0 0 1em;
    }

        .design-block-cta-description p:last-child {
            margin-bottom: 0;
        }

.design-block-cta-action {
    margin-top: auto;
    padding-top: 32px;
}

.design-block-cta-button {
    display: inline-block;
    padding: 14px 22px;
    background: var(--block-button-bg, #111);
    color: var(--block-button-ink, #fff);
    font-size: var(--block-button-size, 0.9375rem);
    font-weight: 700;
    letter-spacing: var(--block-button-tracking, 0.12em);
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease;
}

    .design-block-cta-button:hover {
        background: var(--block-button-bg-hover, #333);
        color: var(--block-button-ink, #fff);
    }

    .design-block-cta-button:focus-visible {
        outline: 2px solid var(--block-focus, #1a1a1a);
        outline-offset: 3px;
    }

/* Stacked: one column, image always on top whichever side it was set to, no vertical separator. */
@media (max-width: 900px) {
    .design-block-cta-block {
        padding: var(--block-pad-y-sm, 40px) 0;
    }

    .design-block-cta-inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
    }

        .design-block-cta-inner::before {
            display: none;
        }

    .design-block-cta--image-right .design-block-cta-media {
        order: 0;
    }

    .design-block-cta-action {
        padding-top: 24px;
    }
}