/*
 * Shared responsive measure for solution-page content.
 *
 * The navbar is `calc(100% - clamp(32px, 8vw, 128px))` wide with a 1424px
 * cap. Keeping the same outer measure here makes every non-CTA composition
 * scale with the viewport without drifting away from the navigation edges.
 */
.solution-page-content {
    --solution-content-width: var(--site-shell-width, calc(100% - clamp(32px, 8vw, 128px)));
    --solution-content-max-width: var(--site-shell-max-width, 1424px);
    --solution-content-gutter: clamp(12px, 1.1vw, 16px);
    /* Keep every solution hero on the current Home hero type scale. */
    --solution-hero-title-size: 34px;
    --solution-hero-description-size: 16px;
    overflow-x: clip;
}

@media (min-width: 576px) {
    .solution-page-content {
        --solution-hero-title-size: 38px;
        --solution-hero-description-size: 18px;
    }
}

@media (min-width: 768px) {
    .solution-page-content {
        --solution-hero-title-size: clamp(38px, 3vw, 60px);
        --solution-hero-description-size: clamp(18px, 1.4vw, 28px);
    }
}

.solution-page-content :where(#hero .hero-title, .vas-hero-title) {
    font-size: var(--solution-hero-title-size);
}

.solution-page-content :where(#hero .hero-description, #hero .hero-subtitle, .vas-hero-description) {
    font-size: var(--solution-hero-description-size);
}

.solution-page-content .container {
    width: var(--solution-content-width);
    max-width: var(--solution-content-max-width);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--solution-content-gutter);
    padding-left: var(--solution-content-gutter);
}

/* Keep flexible layouts and media inside their existing columns as they scale. */
.solution-page-content :where(.row, [class*="-layout"], [class*="-grid"]) > * {
    min-width: 0;
}

.solution-page-content :where(img, video, picture, iframe, svg) {
    max-width: 100%;
}

.solution-page-content :where(h1, h2, h3, h4, p, li, a, button) {
    overflow-wrap: break-word;
}

/* Typography belongs to each page's fixed viewport tiers. CTA sections use
 * container-fluid and retain their dedicated shared geometry. */
.solution-page-content #hero.hero-overlay-disabled::after {
    display: none;
}

/* JavaScript adds the root class before the page is painted, then reveals the
 * hero after its web fonts settle. This prevents line wrapping from changing
 * in the middle of the entrance. `translate` preserves each hero's existing
 * vertical-positioning transform. */
.solution-hero-animation .solution-page-content :where(#hero .hero-content, .vas-hero .vas-hero-content) {
    opacity: 0;
    translate: -50px 0;
    transition: opacity 1s ease, translate 1s ease;
}

.solution-hero-animation .solution-page-content :where(#hero .hero-content, .vas-hero .vas-hero-content).solution-hero-is-visible {
    opacity: 1;
    translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .solution-hero-animation .solution-page-content :where(#hero .hero-content, .vas-hero .vas-hero-content) {
        opacity: 1;
        translate: 0 0;
        transition: none;
    }
}