/* ==========================================================================
   Campaign Component Styles
   File: css/components/campaign.css
   Visual overrides for components in the campaign/homepage context.
   Depends on: css/components/base.css
   ========================================================================== */


/* ==========================================================================
   Feature Highlight
   ========================================================================== */
.feature-highlight {
    max-width: var(--component-max-width);
    padding: 0 var(--component-padding-inline);
    margin: 120px auto;
}

.feature-highlight-text,
.feature-highlight-image {
    max-width: 50%;
}

.feature-highlight .feature-highlight-heading {
    font-family: var(--font-family-secondary);
    font-size: clamp(1.75rem, 3vw + 0.5rem, 2.8rem);
    color: var(--color-blue-dark);
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
}

.feature-highlight .feature-highlight-description {
    margin: 10px 0 0 0;
    font-family: var(--font-family-primary);
    font-size: var(--copy-size-standard);
    line-height: 1.5;
    color: var(--color-black);
    font-weight: 400;
}

/* ── Tablet — stack ────────────────────────────────────────────────────────── */
@media (max-width: 850px) {
    .feature-highlight {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 var(--mobile-horizontal-padding);
    }

    .feature-highlight-text,
    .feature-highlight-image {
        max-width: 100%;
    }
}


/* ==========================================================================
   Important Announcement
========================================================================== */
.announcement {
    background-color: #e8f2fc;
    border-top-left-radius: 90px;
    margin: 120px 0px 120px 10%;
    padding: 40px 10% 40px clamp(20px, 4vw, 60px);
}

/* ── Tablet — left margin aligns with nav's mobile-horizontal-padding ────── */
@media (max-width: 1023px) {
    .announcement {
        margin-left: var(--mobile-horizontal-padding);
        border-top-left-radius: 60px;
        padding: 30px var(--mobile-horizontal-padding) 30px var(--mobile-horizontal-padding);
    }
}

/* ── Mobile — tighter vertical padding, radius scales down ─────────────── */
@media (max-width: 768px) {
    .announcement {
        margin-left: var(--mobile-horizontal-padding);
        border-top-left-radius: 40px;
        padding: 24px var(--mobile-horizontal-padding) 24px var(--mobile-horizontal-padding);
    }

    .announcement .announcement-heading {
        font-size: 1.25rem;
    }

    .announcement .announcement-text {
        font-size: 1rem;
    }
}


/* ==========================================================================
   Hero Video
   ========================================================================== */
.campaign-hero-container {
    background-color: var(--color-blue-dark);
}

.video-wrapper {
    background-color: var(--color-black);
}

/* ==========================================================================
   CTA Block
   ========================================================================== */
.campaign-cta {
    background: linear-gradient(135deg, var(--color-blue-dark) 0%, var(--color-blue-medium) 100%);
    border-bottom-left-radius: var(--component-section-radius);
    padding: var(--component-padding-block) 0;
}

.cta-heading {
    font-family: var(--font-family-secondary);
    font-size: clamp(32px, 3vw + 20px, 52px);
    font-weight: var(--fw-regular);
    color: var(--color-california-gold);
    margin: 0 0 var(--space-m) 0;
    line-height: 1.2;
}

.cta-excerpt {
    font-family: var(--font-family-primary);
    font-size: var(--copy-size-standard);
    font-weight: var(--fw-regular);
    color: var(--color-white);
    margin: 0 var(--component-padding-inline) var(--space-l);
    line-height: 1.5;
    max-width: 700px;
    opacity: 0.9;
    text-align: left;
}

.cta-button {
    font-size: var(--fs-500);
    padding: 0.6rem 1.25rem;
    max-width: max-content;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-family-primary);
    font-weight: var(--fw-regular);
    text-decoration: none !important;
    color: var(--color-black) !important;
    background-color: var(--color-white);
    border: 1px solid var(--color-black);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
        background-color: #FFE18D;

}

.cta-button:active {
    background-color: var(--color-california-gold);
    color: var(--color-black);
    border: 1px solid var(--color-black);
}

/* ==========================================================================
   Infographic / Stats
   ========================================================================== */
.campaign-infographic {
    background-color: var(--color-white);
    padding: var(--component-padding-block) 0;
}

.infographic-heading {
    font-family: var(--font-family-secondary);
    font-size: clamp(28px, 2vw + 20px, 42px);
    font-weight: var(--fw-medium);
    color: var(--color-berkeley-blue);
    margin: 0 0 var(--space-xl) 0;
    text-align: center;
}

.icon-placeholder {
    background-color: var(--color-blue-light);
    color: var(--color-berkeley-blue);
}

.stat-number {
    font-family: var(--font-family-primary);
    font-size: clamp(36px, 2vw + 20px, 64px);
    font-weight: var(--fw-bold);
    color: #474747;
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.stat-divider {
    border: none;
    border-top: 1px solid #343434;
    margin: var(--space-s) 0;
    width: 70px;
}

.stat-text {
    font-family: var(--font-family-primary);
    font-size: clamp(14px, 1vw + 8px, 18px);
    font-weight: var(--fw-regular);
    color: var(--color-black);
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   Photo Cards
   ========================================================================== */
.campaign-photo-cards {
    background: linear-gradient(315deg, var(--color-blue-dark) 0%, var(--color-blue-medium) 100%);
    border-bottom-right-radius: var(--component-section-radius);
}

.photo-cards-heading {
    font-family: var(--font-family-secondary);
    font-size: clamp(28px, 2vw + 20px, 42px);
    font-weight: 400;
    color: var(--color-white);
    margin: 0 0 40px 0;
    text-align: center;
}

/* ==========================================================================
   Photo Text CTAs
   ========================================================================== */
.campaign-photo-text-ctas {
    background-color: var(--color-white);
    margin-top: 140px;
    margin-bottom: 140px;
}

.ptc-block-grey {
    background-color: var(--color-grey-light);
    grid-column: 1;
    grid-row: 1;
}

.ptc-block-grey .ptc-heading {
    color: var(--color-black);
}

.ptc-block-grey .ptc-excerpt {
    color: var(--color-black);
}

.ptc-block-blue {
    background-color: var(--color-blue-medium);
    grid-column: 2;
    grid-row: 2;
}

.ptc-block-blue .ptc-heading {
    color: var(--color-white);
}

.ptc-block-blue .ptc-excerpt {
    color: var(--color-white);
}

.ptc-image-top-right {
    grid-column: 2;
    grid-row: 1;
    border-top-left-radius: var(--background-component-radius);
    overflow: hidden;
}

.ptc-image-bottom-left {
    grid-column: 1;
    grid-row: 2;
    border-top-right-radius: var(--background-component-radius);
    overflow: hidden;
}

.ptc-image {
    position: relative;
    overflow: hidden;
    min-height: 300px;
}

.ptc-heading {
    font-family: var(--font-family-primary);
    font-size: clamp(24px, 2vw + 16px, 36px);
    font-weight: 800;
    margin: 0 0 var(--space-m) 0;
    line-height: 1.2;
}

.ptc-excerpt {
    font-family: var(--font-family-primary);
    font-size: clamp(14px, 1vw + 10px, 18px);
    font-weight: var(--fw-regular);
    line-height: 1.5;
    margin: 0 0 var(--space-l) 0;
}

.ptc-button-bold {
    padding: 0.6rem 1.25rem;
    max-width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-family-primary);
    font-weight: var(--fw-regular);
    text-decoration: none !important;
    color: var(--color-black) !important;
    background-color: var(--color-white);
    border: 1px solid var(--color-black);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.ptc-button-bold:hover {
    background-color: #FFE18D;
}

.ptc-button-bold:active {
    background-color: var(--color-california-gold);
    color: var(--color-black);
    border: 1px solid var(--color-black);
}
.ptc-button {
    display: inline-block;
    font-family: var(--font-family-primary);
    font-size: var(--fs-500);
    font-weight: 300;
    padding: var(--space-xs) var(--space-l);
    border-radius: 50px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    align-self: flex-start;
}

.ptc-button-outline {
    color: var(--color-blue-dark);
    background-color: var(--color-white);
    border: 1px solid var(--color-blue-dark);
}

.campaign-photo-text-ctas .btn-sacomms {
    max-width: max-content;
}

/* ==========================================================================
   Text Blocks
   ========================================================================== */
.campaign-text-blocks {
    background-color: var(--color-white);
    padding: var(--component-padding-block) 0;
}

.text-blocks-heading {
    font-family: var(--font-family-secondary);
    font-size: clamp(24px, 1.5vw + 18px, 36px);
    font-weight: 400;
    color: var(--color-black);
    margin: 0 auto var(--space-2xl) auto;
    text-align: center;
    line-height: 1.2;
    max-width: 400px;
}

.text-block-subheading {
    font-family: var(--font-family-primary);
    font-size: clamp(16px, 1vw + 10px, 20px);
    font-weight: var(--fw-semibold);
    color: var(--color-black);
    margin: 0 0 var(--space-xs) 0;
    line-height: 1.3;
}

.text-block-text {
    font-family: var(--font-family-primary);
    font-size: var(--copy-size-standard);
    font-weight: var(--fw-regular);
    color: var(--color-black);
    line-height: 1.4;
    margin: 0;
    display: inline;
}

.text-block-arrow {
    color: var(--color-blue-medium);
}

/* ==========================================================================
   Testimonial
   ========================================================================== */
.campaign-testimonial {
    background-color: var(--color-white);
    padding: var(--component-padding-block) 0;
}

.campaign-testimonial-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
}

.testimonial-image-wrapper {
    width: 280px;
    margin-bottom: var(--space-xl);
}

.testimonial-bg-rectangle {
    background-color: var(--color-california-gold);
    border-bottom-left-radius: 80px;
}

.testimonial-image {
    border-bottom-right-radius: 80px;
}

.testimonial-quote {
    font-family: var(--font-family-secondary);
    font-size: clamp(20px, 2vw + 16px, 36px);
    font-weight: 700;
    color: var(--color-black);
    line-height: 1.4;
    margin: 0 0 var(--space-l) 0;
    max-width: 1100px;
}

.testimonial-divider {
    border: none;
    border-top: 1px solid var(--color-black);
    width: 50px;
    margin: 0 auto var(--space-m) auto;
}

.testimonial-name {
    font-family: var(--font-family-secondary);
    font-size: clamp(16px, 1vw + 12px, 20px);
    font-weight: 700;
    color: var(--color-black);
    margin: 0;
}

.testimonial-position {
    font-family: var(--font-family-primary);
    font-size: clamp(13px, 0.8vw + 10px, 16px);
    font-weight: 300;
    color: var(--color-black);
    margin: 0;
}

/* ==========================================================================
   slider
   ========================================================================== */

    .campaign-slider .nextend-arrow[aria-label="next arrow"] {
        transform: rotate(180deg);
    }   

    .campaign-slider .nextend-arrow[aria-label="next arrow"]:hover {
        transform: rotate(360deg);
    }

    .campaign-slider .nextend-arrow:hover img {
        transform: scale(1);
    }

/* ==========================================================================
   newsletter
   ========================================================================== */
.newsletter-cta {
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    font-family: var(--font-family-primary);
    padding: 100px 50px;
    background: linear-gradient(to right, #111137, #23408b);
    color: white;
    margin-top: 100px;
}

.newsletter-cta h2 {
    margin: 0;
    color: var(--color-california-gold);
    font-size: var(--h2)
}
.newsletter-cta p {
    margin: 0px 0px 30px;
    max-width: 700px;
    font-size: 15px;
    font-weight: 300
}

.newsletter-cta .quform form .quform-child-elements {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    max-height: max-content;
}

.newsletter-cta label {
    color: black;
}

.newsletter-cta .camp-input {
    border: none;
    max-width: 400px;
    width: 400px;
}
.newsletter-cta .quform-element-submit {
    margin: 0px;
    margin-top: -16px
}

.newsletter-cta .quform-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-family-primary);
    font-weight: var(--fw-regular);
    text-decoration: none !important;
    color: var(--color-black) !important;
    background-color: var(--color-white);
    border: 1px solid var(--color-black);
    border-radius: 999px;
    cursor: pointer;
    padding: 10px 40px;
}

.newsletter-cta .quform-submit:hover {
    background-color: #FFE18D;
}
.newsletter-cta .quform-submit:active {
    background-color: var(--color-california-gold);
}

@media (max-width: 769px) {
    .newsletter-cta .quform form .quform-child-elements {
        flex-direction: column;
    }
}

@media (max-width: 488px) {
    .newsletter-cta h2 {
        font-size: 26px;
        line-height: 1.2;
        margin-bottom: 10px
    }

    .newsletter-cta .quform form input {
        width: 100%;
    }
}

.sbi_feedtheme_header_text {
    font-family: var(--font-family-primary);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1023px) {
    .campaign-hero-container {
        border-top-right-radius: 80px;
    }

    .campaign-cta {
        padding: var(--space-xl) 0;
        border-bottom-left-radius: 80px;
    }

    .campaign-cta-container,
    .campaign-infographic-container,
    .campaign-photo-cards-container {
        padding: 0 var(--mobile-horizontal-padding);
    }

    .campaign-photo-cards-container {
        padding: 30px var(--mobile-horizontal-padding) 60px;
    }

    .campaign-infographic {
        padding: var(--space-xl) 0;
    }

    .campaign-photo-cards {
        border-bottom-right-radius: 80px;
    }

    .infographic-grid {
        gap: var(--space-l);
    }

    .stat-card {
        padding: var(--space-m);
        gap: var(--space-m);
    }

    .icon-placeholder {
        width: 60px;
        height: 60px;
    }

    .icon-placeholder svg {
        width: 30px;
        height: 30px;
    }

    .ptc-block {
        padding: var(--space-xl) var(--mobile-horizontal-padding);
    }

    .ptc-image-top-right {
        border-top-left-radius: 80px;
    }

    .ptc-image-bottom-left {
        border-top-right-radius: 80px;
    }

    .campaign-text-blocks-container {
        padding: 0 var(--mobile-horizontal-padding);
    }

    .text-blocks-heading {
        font-size: clamp(22px, 2vw + 14px, 32px);
    }

    .text-blocks-grid {
        gap: var(--space-l) var(--space-xl);
    }

    .text-block-subheading {
        font-size: clamp(15px, 1.5vw + 8px, 18px);
    }

    .text-block-text {
        font-size: clamp(13px, 1vw + 8px, 14px);
    }

    .campaign-testimonial-container {
        padding: 0 var(--mobile-horizontal-padding);
    }

    .testimonial-image-wrapper {
        width: 240px;
    }

    .testimonial-bg-rectangle {
        bottom: -35px;
        left: -35px;
        border-bottom-left-radius: 35px;
    }

    .testimonial-image {
        top: -35px;
        right: -35px;
        border-bottom-right-radius: 35px;
    }
}

@media (max-width: 768px) {
    .campaign-hero-container {
        border-top-right-radius: 60px;
    }

    .campaign-cta {
        padding: var(--space-l) 0;
        border-bottom-left-radius: 60px;
    }

    .cta-heading {
        font-size: clamp(26px, 5vw, 36px);
    }

    .cta-excerpt {
        font-size: var(--copy-size-standard);
    }

    .cta-button {
        padding: var(--space-s) var(--space-l);
        font-size: var(--fs-400);
    }

    .campaign-infographic {
        padding: var(--space-l) 0;
    }

    .infographic-heading {
        font-size: clamp(24px, 4vw, 32px);
        margin-bottom: var(--space-l);
    }

    .infographic-grid {
        grid-template-columns: 1fr;
        gap: var(--space-m);
    }

    .stat-card {
        padding: var(--space-m);
    }

    .stat-number {
        font-size: clamp(32px, 6vw, 48px);
    }

    .stat-text {
        font-size: clamp(14px, 2vw, 16px);
    }

    .campaign-photo-cards {
        border-bottom-right-radius: 60px;
    }

    .campaign-photo-cards-container {
        padding: 24px var(--mobile-horizontal-padding) 48px;
    }

    .photo-cards-heading {
        font-size: clamp(24px, 4vw, 32px);
        margin-bottom: var(--space-m);
    }

    .ptc-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
    }

    @media (max-width: 1024px) {
        .ptc-grid {
            padding: 0 var(--mobile-horizontal-padding);
        }
    }

    .ptc-image-top-right {
        grid-column: 1;
        grid-row: 1;
        border-top-left-radius: 60px;
        border-top-right-radius: 0;
    }

    .ptc-block-grey {
        grid-column: 1;
        grid-row: 2;
    }

    .ptc-image-bottom-left {
        grid-column: 1;
        grid-row: 3;
        border-top-right-radius: 60px;
        border-top-left-radius: 0;
    }

    .ptc-block-blue {
        grid-column: 1;
        grid-row: 4;
    }

    .ptc-block {
        padding: var(--space-l) var(--mobile-horizontal-padding);
    }

    .ptc-image {
        min-height: 250px;
    }

    .ptc-heading {
        font-size: clamp(22px, 4vw, 28px);
    }

    .ptc-excerpt {
        font-size: clamp(15px, 2vw, 17px);
    }

    .ptc-button {
        font-size: var(--fs-400);
        padding: var(--space-s) var(--space-l);
    }

    .text-blocks-heading {
        font-size: 26px;
        margin-bottom: var(--space-xl);
    }

    .text-blocks-grid {
        grid-template-columns: 1fr;
        gap: var(--space-l);
    }

    .text-block-subheading {
        font-size: clamp(15px, 2.5vw, 18px);
    }

    .text-block-text {
        font-size: clamp(13px, 2vw, 14px);
    }

    .text-block-arrow {
        width: 14px;
        height: 14px;
    }

    .testimonial-image-wrapper {
        width: 220px;
    }

    .testimonial-bg-rectangle {
        bottom: -30px;
        left: -30px;
        border-bottom-left-radius: 30px;
    }

    .testimonial-image {
        top: -30px;
        right: -30px;
        border-bottom-right-radius: 30px;
    }

    .testimonial-quote {
        font-size: clamp(18px, 3vw, 28px);
    }
}

@media (max-width: 480px) {
    .stat-icon {
        flex: 0 0 25%;
    }

    .icon-placeholder {
        width: 50px;
        height: 50px;
    }

    .icon-placeholder svg {
        width: 24px;
        height: 24px;
    }

    .stat-divider {
        width: 40px;
    }

    .ptc-image {
        min-height: 200px;
    }

    .ptc-image-top-right {
        border-top-left-radius: 40px;
    }

    .ptc-image-bottom-left {
        border-top-right-radius: 40px;
    }
}
.front-page .n2-section-smartslider {
    padding-bottom: 65px;
    margin-bottom: 60px;
}

/* Paragraphs */
.front-page > p,
.template-campaign > 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),
.template-campaign > :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,
.template-campaign > *:first-child {
    margin-top: 0 !important;
}

@media (max-width: 1023px) {
    .front-page > *:first-child,
    .template-campaign > *:first-child {
        margin-top: 1em !important;
    }
}

/* Headings */
.front-page > h2,
.template-campaign > 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;
    align-self: ;
}

.front-page > h3, 
.template-campaign > 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,
.template-campaign > h4,
.template-campaign > h5,
.template-campaign > 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,
.template-campaign > h4 { font-size: var(--h4); }
.front-page > h5,
.template-campaign > h5 { font-size: var(--h5); }
.front-page > h6,
.template-campaign > 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,
.template-campaign > h2 a,
.template-campaign > h3 a,
.template-campaign > h4 a,
.template-campaign > h5 a,
.template-campaign > h6 a,
.template-campaign > 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,
.template-campaign > p a:hover,
.template-campaign > p a:focus,
.template-campaign > ul a:hover,
.template-campaign > ul a:focus,
.template-campaign > ol a:hover,
.template-campaign > ol a:focus,
.template-campaign > blockquote a:hover,
.template-campaign > blockquote a:focus {
    color: var(--color-berkeley-blue);
}

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

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

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

/* Mobile */
@media (max-width: 850px) {
    .front-page > h2,
    .template-campaign > h2 { 
        font-size: clamp(24px, 2vw + 14px, 30px);        
        padding: 0 var(--mobile-horizontal-padding);
    }
    .front-page > h3,
    .template-campaign > h3 { 
        font-size: clamp(20px, 1.5vw + 12px, 26px);
        padding: 0 var(--mobile-horizontal-padding);
    }
    .front-page > h4,
    .template-campaign > h4 { 
        font-size: clamp(17px, 1vw + 10px, 22px); 
        padding: 0 var(--mobile-horizontal-padding);
    }
    .front-page > ul,
    .front-page > ol,
    .template-campaign > ul,
    .template-campaign > ol {
        padding: 0 var(--mobile-horizontal-padding);
    }
    .front-page > p,
    .template-campaign > 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,
.template-campaign > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, table, dl, pre, hr) + .med-blue-bg,
.template-campaign > :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,
.template-campaign > .med-blue-bg + .white-bg {
    margin-top: 0;
}

/* 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)),
.template-campaign > .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,
    .template-campaign > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, table, dl, pre, hr) + .med-blue-bg,
    .template-campaign > :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)),
    .template-campaign > .med-blue-bg:has(+ :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, table, dl, pre, hr)) {
        margin-bottom: 40px;
    }
}