/*
 * Semantic section presentation for the default site template.
 *
 * The CMS stores semantic values only. Another site template may implement
 * the same contract with completely different colors, spacing and layout.
 */

.cms-section-presentation--tone-soft.wi-extra-section {
    border-color: var(--wi-line);
    background: var(--wi-surface-soft);
    color: var(--wi-text);
}

.cms-section-presentation--tone-soft .wi-extra-section__title,
.cms-section-presentation--tone-soft .wi-extra-section__text,
.cms-section-presentation--tone-soft .wi-extra-section__content,
.cms-section-presentation--tone-soft .wi-extra-section__eyebrow {
    color: var(--wi-text);
}

.cms-section-presentation--tone-soft a.wi-extra-section__button {
    background: var(--wi-brand);
    color: #ffffff;
}

.cms-section-presentation--tone-accent.wi-extra-section {
    border-color: transparent;
    background: linear-gradient(135deg, var(--wi-brand-dark), var(--wi-brand));
    color: #ffffff;
}

.cms-section-presentation--tone-accent .wi-extra-section__title,
.cms-section-presentation--tone-accent .wi-extra-section__text,
.cms-section-presentation--tone-accent .wi-extra-section__content,
.cms-section-presentation--tone-accent .wi-extra-section__eyebrow {
    color: #ffffff;
}

.cms-section-presentation--tone-accent .wi-extra-section__text,
.cms-section-presentation--tone-accent .wi-extra-section__content {
    opacity: 0.88;
}

.cms-section-presentation--tone-accent a.wi-extra-section__button {
    background: #ffffff;
    color: var(--wi-brand-dark);
}

.cms-section-presentation--tone-contrast.wi-extra-section {
    border-color: transparent;
    background: linear-gradient(135deg, #101a2b, #1e293b);
    color: #ffffff;
}

.cms-section-presentation--tone-contrast .wi-extra-section__title,
.cms-section-presentation--tone-contrast .wi-extra-section__text,
.cms-section-presentation--tone-contrast .wi-extra-section__content,
.cms-section-presentation--tone-contrast .wi-extra-section__eyebrow {
    color: #ffffff;
}

.cms-section-presentation--tone-contrast .wi-extra-section__text,
.cms-section-presentation--tone-contrast .wi-extra-section__content {
    opacity: 0.88;
}

.cms-section-presentation--tone-contrast a.wi-extra-section__button {
    background: #ffffff;
    color: #101a2b;
}

.cms-section-presentation--align-left {
    text-align: left;
}

.cms-section-presentation--align-center {
    text-align: center;
}

.wi-zone-grid > .cms-section-presentation--width-wide {
    grid-column: span 2;
}

.wi-zone-grid > .cms-section-presentation--width-full {
    grid-column: 1 / -1;
}

.cms-section-presentation--spacing-compact.wi-extra-section {
    padding: clamp(16px, 2vw, 24px);
}

.cms-section-presentation--spacing-spacious.wi-extra-section {
    padding: clamp(36px, 5vw, 56px);
}

@media (max-width: 900px) {
    .wi-zone-grid > .cms-section-presentation--width-wide,
    .wi-zone-grid > .cms-section-presentation--width-full {
        grid-column: 1 / -1;
    }
}

/* Custom block background selected through the Builder Theme Contract. */
.cms-section-presentation--background-color-custom.wi-extra-section {
    border-color: color-mix(in srgb, var(--cms-section-foreground-color) 18%, transparent);
    background: var(--cms-section-background-color);
    color: var(--cms-section-foreground-color);
}

.cms-section-presentation--background-color-custom .wi-extra-section__title,
.cms-section-presentation--background-color-custom .wi-extra-section__text,
.cms-section-presentation--background-color-custom .wi-extra-section__content,
.cms-section-presentation--background-color-custom .wi-extra-section__eyebrow {
    color: var(--cms-section-foreground-color);
}

.cms-section-presentation--background-color-custom .wi-extra-section__text,
.cms-section-presentation--background-color-custom .wi-extra-section__content {
    opacity: 0.88;
}

.cms-section-presentation--background-color-custom a.wi-extra-section__button {
    border-color: color-mix(in srgb, var(--cms-section-foreground-color) 20%, transparent);
    background: var(--cms-section-foreground-color);
    color: var(--cms-section-background-color);
}