/* Photo cards */
.med-blue-bg {
    background-color: var(--color-blue-medium);
    padding: 100px var(--container-margin-inline) 120px;
    margin: auto;
    border-bottom-right-radius: var(--background-component-radius);
}

@media (max-width: 1024px) {
    .med-blue-bg {
        padding: 40px var(--mobile-horizontal-padding) 80px !important;
    }
    .white-bg h2 {
        padding: 40px var(--mobile-horizontal-padding) 0 !important;
    }
}

.med-blue-bg h2 {
    max-width: var(--container-max-width);
    padding: 0 var(--container-margin-inline);
    margin: auto;
    color: white;
    margin-bottom: 20px;
}

.white-bg h2 {
    max-width: var(--container-max-width);
    padding: 100px var(--container-margin-inline) 0;
    margin: auto;
    color: var(--color-berkeley-blue);
    margin-bottom: 20px;
}

@media (max-width: 550px) {
    .med-blue-bg h2 {
        padding: 0;
    }
    .med-blue-bg .wpgb-grid-17 {
        max-width: var(--container-max-width);
        margin: auto 0px;
    }
}

.wpgb-metro article:nth-child(2) .excerpt_color-card::after {
    color: var(--color-berkeley-blue) !important;
}

.wpgb-metro article:nth-child(3) .excerpt_color-card::after {
    color: white !important;
}

.front-page .n2-section-smartslider {
    padding-bottom: 65px;
    margin-bottom: 60px;
}

/* Paragraphs */
.front-page > p {
    margin-top: 1em;
    margin-bottom: 1em;
    font-family: var(--font-family-primary);
    font-size: var(--copy-size-standard);
}

/* ==========================================================================
   Front Page — Loose WYSIWYG Content
   Mirrors .page-content typography from css/templates/page-layout.css so
   editor-added text (h1–h6, p, lists, links) on the front page matches
   interior pages. Uses direct-child selectors so shortcode components,
   nested inside their own wrappers, are NOT affected.
   ========================================================================== */

/* Width constraint + first-child margin reset */
.front-page > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, table, dl, pre, hr) {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-margin-inline);
    padding-right: var(--container-margin-inline);
    box-sizing: border-box;
}

.front-page > *:first-child {
    margin-top: 0 !important;
}

/* Headings */
.front-page > h2 {
    font-family: var(--font-family-primary);
    font-size: var(--h2);
    font-weight: 600;
    color: black;
    margin-top: 60px;
    margin-bottom: 20px;
    line-height: 1.3;
}

.front-page > h3 {
    font-family: var(--font-family-primary);
    font-size: var(--h3);
    font-weight: 600;
    color: black;
    margin-top: 40px;
    margin-bottom: 20px;
    line-height: 1.3;
}

.front-page > h4,
.front-page > h5,
.front-page > h6 {
    font-family: var(--font-family-primary);
    font-weight: 600;
    color: black;
    margin-top: 30px;
    margin-bottom: 20px;
    line-height: 1.3;
}

.front-page > h4 { font-size: var(--h4); }
.front-page > h5 { font-size: var(--h5); }
.front-page > h6 { font-size: var(--h6); }

/* Links inside loose content */
.front-page > p a,
.front-page > ul a,
.front-page > ol a,
.front-page > h2 a,
.front-page > h3 a,
.front-page > h4 a,
.front-page > h5 a,
.front-page > h6 a,
.front-page > blockquote a {
    color: var(--color-science-blue);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.front-page > p a:hover,
.front-page > p a:focus,
.front-page > ul a:hover,
.front-page > ul a:focus,
.front-page > ol a:hover,
.front-page > ol a:focus,
.front-page > blockquote a:hover,
.front-page > blockquote a:focus {
    color: var(--color-berkeley-blue);
}

/* Lists */
.front-page > ul,
.front-page > ol {
    margin-bottom: var(--space-m);
}

.front-page > ul li,
.front-page > ol li {
    margin-bottom: var(--space-xs);
}

/* Tablet */
@media (max-width: 1023px) {
    .front-page > h2 { font-size: clamp(26px, 2.5vw + 10px, 32px); }
    .front-page > h3 { font-size: clamp(22px, 2vw + 10px, 28px); }
    .front-page > h4 { font-size: clamp(18px, 1.5vw + 8px, 22px); }
}

/* Mobile */
@media (max-width: 850px) {
    .front-page > h2 { 
        font-size: clamp(24px, 2vw + 14px, 30px);        
        padding: 0 var(--mobile-horizontal-padding);
    }
    .front-page > h3 { 
        font-size: clamp(20px, 1.5vw + 12px, 26px);
        padding: 0 var(--mobile-horizontal-padding);
    }
    .front-page > h4 { 
        font-size: clamp(17px, 1vw + 10px, 22px); 
        padding: 0 var(--mobile-horizontal-padding);
    }
    .front-page > ul,
    .front-page > ol {
        padding: 0 var(--mobile-horizontal-padding);
    }
    .front-page > p {
        padding: 0 var(--mobile-horizontal-padding);
    }
}


@media (max-width: 850px) {
    .feature-highlight {
        flex-direction: column;
        align-items: flex-start;
    }
}



/* ==========================================================================
   Section spacing — .med-blue-bg / .white-bg flow control
   These sections are designed to flow seamlessly when stacked (blue → white).
   They also need breathing room when adjacent to loose WYSIWYG text (h2, p,
   etc.) — but NOT when adjacent to other components, which manage their own
   spacing.
   ========================================================================== */

/* Top margin — only when preceded by loose WYSIWYG text */
.front-page > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, table, dl, pre, hr) + .med-blue-bg,
.front-page > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, table, dl, pre, hr) + .white-bg {
    margin-top: 100px;
}

/* Seamless case: blue immediately followed by white preserves zero-gap flow */
.front-page > .med-blue-bg + .white-bg {
    margin-top: 0;
    margin-bottom: 100px;
}

/* Bottom margin on .med-blue-bg — only when followed by loose WYSIWYG text.
   When followed by .white-bg (seamless) or another component (component owns
   its own spacing), no bottom margin is added. */
.front-page > .med-blue-bg:has(+ :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, table, dl, pre, hr)) {
    margin-bottom: 100px;
}

/* Mobile — scale spacing to match the existing internal padding reduction
   already defined at this breakpoint elsewhere in this file. */
@media (max-width: 1024px) {
    .front-page > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, table, dl, pre, hr) + .med-blue-bg,
    .front-page > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, table, dl, pre, hr) + .white-bg {
        margin-top: 40px;
    }

    .front-page > .med-blue-bg:has(+ :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, table, dl, pre, hr)) {
        margin-bottom: 40px;
    }
}