/*
 * WebIndigo default — AI-first visual vocabulary.
 *
 * This layer intentionally contains no industry-specific selectors. AI chooses
 * semantic section variants and combines them with theme colors, tones and
 * layouts declared by template.json.
 */

.wi-layout-section {
    --wi-ai-radius-sm: 16px;
    --wi-ai-radius-md: 24px;
    --wi-ai-radius-lg: clamp(26px, 3vw, 40px);
    --wi-ai-shadow-soft: 0 20px 54px rgba(20, 32, 51, .08);
    --wi-ai-shadow-strong: 0 30px 84px rgba(20, 32, 51, .16);
}

/* A softer hero gives AI a non-corporate light landing-page option without CSS generation. */
.wi-layout-section--variant-hero.wi-layout-section--tone-soft {
    background:
        radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--wi-accent) 18%, transparent), transparent 34%),
        radial-gradient(circle at 10% 92%, color-mix(in srgb, var(--wi-brand) 10%, transparent), transparent 31%),
        var(--wi-surface-soft);
}

.wi-layout-section--variant-hero.wi-layout-section--tone-default {
    background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--wi-brand) 8%, transparent), transparent 32%),
        var(--wi-surface);
}

/* SHOWCASE: expressive content/media composition. */
.wi-layout-section--variant-showcase {
    overflow: hidden;
    padding-top: clamp(70px, 8vw, 112px);
    padding-bottom: clamp(70px, 8vw, 112px);
}

.wi-layout-section--variant-showcase.wi-layout-section--tone-default {
    background:
        radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--wi-accent) 12%, transparent), transparent 30%),
        linear-gradient(180deg, var(--wi-surface), color-mix(in srgb, var(--wi-surface-soft) 64%, var(--wi-surface)));
}

.wi-layout-section--variant-showcase.wi-layout-section--tone-soft {
    background:
        radial-gradient(circle at 10% 16%, color-mix(in srgb, var(--wi-brand) 10%, transparent), transparent 28%),
        radial-gradient(circle at 88% 86%, color-mix(in srgb, var(--wi-accent) 12%, transparent), transparent 30%),
        var(--wi-surface-soft);
}

.wi-layout-section--variant-showcase .wi-layout-section__heading {
    max-width: 900px;
    margin-bottom: clamp(34px, 5vw, 64px);
}

.wi-layout-section--variant-showcase .wi-layout-section__title {
    max-width: 880px;
    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.02;
    text-wrap: balance;
}

.wi-layout-section--variant-showcase .wi-layout-section__items--split {
    gap: clamp(36px, 6vw, 88px);
}

.wi-layout-section--variant-showcase .wi-media-block__frame {
    overflow: hidden;
    border-radius: var(--wi-ai-radius-lg);
    box-shadow: var(--wi-ai-shadow-strong);
}

.wi-layout-section--variant-showcase .wi-media-block__image,
.wi-layout-section--variant-showcase .wi-builder-media-image {
    width: 100%;
    min-height: min(560px, 58vw);
    object-fit: cover;
}

.wi-layout-section--variant-showcase .wi-layout-section__items--grid > .wi-extra-section:not(.wi-extra-section--cta_block) {
    border-color: color-mix(in srgb, var(--wi-brand) 16%, var(--wi-line));
    border-radius: var(--wi-ai-radius-md);
    box-shadow: var(--wi-ai-shadow-soft);
}

.wi-layout-section--variant-showcase.wi-layout-section--tone-accent .wi-layout-section__items--grid > .wi-extra-section:not(.wi-extra-section--cta_block),
.wi-layout-section--variant-showcase.wi-layout-section--tone-contrast .wi-layout-section__items--grid > .wi-extra-section:not(.wi-extra-section--cta_block),
.wi-layout-section--variant-showcase.wi-layout-section--background-color-custom .wi-layout-section__items--grid > .wi-extra-section:not(.wi-extra-section--cta_block) {
    border-color: color-mix(in srgb, currentColor 20%, transparent);
    background: color-mix(in srgb, currentColor 9%, transparent);
    box-shadow: none;
}

/* PANEL: related content is visually collected into one independent surface. */
.wi-layout-section--variant-panel {
    background: var(--wi-bg);
}

.wi-layout-section--variant-panel > .wi-container {
    padding: clamp(30px, 5vw, 72px);
    border: 1px solid var(--wi-line);
    border-radius: var(--wi-ai-radius-lg);
    background: var(--wi-surface);
    box-shadow: var(--wi-ai-shadow-soft);
}

.wi-layout-section--variant-panel.wi-layout-section--tone-soft > .wi-container {
    background: var(--wi-surface-soft);
}

.wi-layout-section--variant-panel.wi-layout-section--tone-accent,
.wi-layout-section--variant-panel.wi-layout-section--tone-contrast,
.wi-layout-section--variant-panel.wi-layout-section--background-color-custom {
    background: var(--wi-bg);
}

.wi-layout-section--variant-panel.wi-layout-section--tone-accent > .wi-container {
    border-color: color-mix(in srgb, var(--wi-brand) 45%, transparent);
    background:
        radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--wi-accent) 28%, transparent), transparent 34%),
        linear-gradient(135deg, var(--wi-brand), var(--wi-brand-dark));
    color: #fff;
    box-shadow: var(--wi-ai-shadow-strong);
}

.wi-layout-section--variant-panel.wi-layout-section--tone-contrast > .wi-container {
    border-color: color-mix(in srgb, #fff 14%, transparent);
    background: var(--wi-brand-dark);
    color: #fff;
    box-shadow: var(--wi-ai-shadow-strong);
}

.wi-layout-section--variant-panel.wi-layout-section--background-color-custom > .wi-container {
    border-color: color-mix(in srgb, var(--cms-layout-section-foreground-color) 18%, transparent);
    background: var(--cms-layout-section-background-color);
    color: var(--cms-layout-section-foreground-color);
}

.wi-layout-section--variant-panel.wi-layout-section--tone-accent > .wi-container .wi-layout-section__eyebrow,
.wi-layout-section--variant-panel.wi-layout-section--tone-contrast > .wi-container .wi-layout-section__eyebrow,
.wi-layout-section--variant-panel.wi-layout-section--background-color-custom > .wi-container .wi-layout-section__eyebrow {
    color: currentColor;
    opacity: .78;
}

/* MINIMAL: editorial / content-first composition with little visual chrome. */
.wi-layout-section--variant-minimal {
    background: var(--wi-surface);
}

.wi-layout-section--variant-minimal .wi-layout-section__heading {
    max-width: 980px;
}

.wi-layout-section--variant-minimal .wi-layout-section__title {
    max-width: 940px;
    font-weight: 720;
    letter-spacing: -.035em;
}

.wi-layout-section--variant-minimal .wi-layout-section__items--grid {
    border-top: 1px solid var(--wi-line);
}

.wi-layout-section--variant-minimal .wi-layout-section__items--grid > .wi-extra-section:not(.wi-extra-section--cta_block) {
    padding: clamp(22px, 3vw, 34px) 0;
    border: 0;
    border-bottom: 1px solid var(--wi-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.wi-layout-section--variant-minimal .wi-layout-section__items--split {
    gap: clamp(38px, 7vw, 104px);
}

.wi-layout-section--variant-minimal .wi-media-block__frame {
    border-radius: var(--wi-ai-radius-sm);
    box-shadow: none;
}

/* Keep semantic primitives visually coherent in composed grids. */
.wi-layout-section__items--grid > .wi-extra-section--feature_card,
.wi-layout-section__items--grid > .wi-extra-section--pricing_card {
    display: flex;
    flex-direction: column;
}

.wi-layout-section__items--grid > .wi-extra-section--feature_card .wi-extra-section__button,
.wi-layout-section__items--grid > .wi-extra-section--pricing_card .wi-extra-section__button {
    margin-top: auto;
}

@media (max-width: 980px) {
    .wi-layout-section--variant-showcase .wi-media-block__image,
    .wi-layout-section--variant-showcase .wi-builder-media-image {
        min-height: 0;
    }

    .wi-layout-section--variant-panel > .wi-container {
        padding: clamp(26px, 5vw, 48px);
    }
}

@media (max-width: 640px) {
    .wi-layout-section {
        --wi-ai-radius-md: 20px;
        --wi-ai-radius-lg: 24px;
    }

    .wi-layout-section--variant-showcase {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .wi-layout-section--variant-showcase .wi-layout-section__title {
        font-size: clamp(32px, 10vw, 44px);
    }

    .wi-layout-section--variant-panel {
        padding-left: 12px;
        padding-right: 12px;
    }

    .wi-layout-section--variant-panel > .wi-container {
        padding: 24px 20px;
        border-radius: 22px;
    }
}