/* =========================================================
   MOBILE — GLOBAL UTILITY CLASSES ( ≤769px )
   ========================================================= */
@media (max-width: 769px) {
    /* Utility layouts */
    .wrap-mobile {
        flex-direction: column;
    }

    .wrap-in-mobile {
        display: flex;
        flex-direction: column;
    }

    .mobile-spacing-bottom {
        margin-bottom: 2em;
    }

    .spacing-top-xl {
        margin-top: 3em;
    }

    /* Override large font preset only for mobile */
    .has-large-font-size {
        --wp--preset--font-size--large: 28px;
    }


    /* =====================================================
       MOBILE — HEADER / LOGO / BRANDING
       ===================================================== */

    #cu-header .cu-unit {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    header svg.lab-logo-vector {
        width: 200px;
        max-width: 100%;
        height: auto;
    }

    header svg.lab-logo-vector .cu-wordmark {
        display: none;
    }

    header svg.lab-logo-vector .logo-text-ai {
        fill: var(--wp--preset--color--carnelian);
    }

    header svg.lab-logo-vector .logo-text-innovation,
    header svg.lab-logo-vector .logo-text-lab {
        fill: var(--wp--preset--color--dark-gray);
    }

    /* =====================================================
       MOBILE — H1 VISIBILITY RULES
       ===================================================== */

    h1:not(.keep-in-mobile, .cu-logo) {
        display: none;
    }

    h2.mobile-act-h1{
        font-size: 33px;
        line-height: 1.1;
        padding-bottom: 0;
        border-bottom: 0;
        margin-bottom: 0.5em;
    }

    /* =====================================================
       MOBILE — CONTENT STRUCTURE
       ===================================================== */

    body article section {
        padding-bottom: 3em;
        margin-bottom: 0;
        border-bottom: none;
    }

    body article#main-article {
        margin-bottom: 0;
    }

    main,
    #main {
        padding-top: 1.8em;
    }

    body:not(:has(#image-band)) #main {
        padding-top: 0;
    }

    main .row > .primary:after {
        margin-top: 2em;
        margin-bottom: 1em;
    }

    .wp-block-query.lab-team-grid ul{
        grid-template-columns: 1fr 1fr!important;
    }

    /* =====================================================
       MOBILE — BLOG META
       ===================================================== */

    body .wp-block-post-date {
        margin-bottom: 10px;
    }

    /* =========================================================
        FILTERS — MOBILE ( ≤769px )
   ========================================================= */

    .wp-block-group.filter-container,
    .wp-block-group.filter-container > .wp-block-group {
        flex-direction: column;
    }

    .wp-block-query-filter,
    .wp-block-group.filter-container > .wp-block-group,
    .wp-block-group.filter-container > .wp-block-group > div {
        width: 100%;
    }


    /* =====================================================
       MOBILE — SIDEBAR
       ===================================================== */

    #sidebar-top {
        padding: 15px;
        margin: 15px;
        margin-top: 0;
        max-width: calc(100% - 30px);
        border: 2px solid #e5e5e5;
    }

    #sidebar-top .tool-overview ul {
        padding-left: 7px;
    }


    /* =====================================================
       MOBILE — FOOTER & REPEATING CTA PATTERNS
       ===================================================== */

    body .ai-lab-get-involved-cta {
        padding-top: var(--wp--preset--spacing--60) !important;
        padding-bottom: var(--wp--preset--spacing--60) !important;
    }

    .cai-newsletter__fields {
        flex-direction: column;
    }

    body .cai-newsletter__fields * {
        width: 100%;
    }

    footer .three-col > div {
        margin-top: 0;
        margin-bottom: 0;
    }

    footer .three-col,
    footer .main-footer {
        margin-bottom: 0;
    }

    body footer .row > .primary {
        margin-bottom: 1em;
    }

    footer .three-col .wp-block-post-title,
    footer .three-col h4.wp-block-heading {
        text-align: left;
    }

    footer .three-col h4.wp-block-heading {
        font-size: 22px;
        margin-bottom: 0.5em;
    }
}


/* =====================================================
    NAVIGATION
    ===================================================== */

@media (max-width: 1024px) {
    #main-navigation li{
        font-size: 18px!important;
    }

    .container-fluid:has(#mobile-close){
        min-height: 50px;
    }

    #mobile-close::before {
        content: "×";
        font-size: 28px;
        line-height: 1;
        display: block;
    }

    #mobile-home{
        opacity: 0!important;
        pointer-events: none!important;
    }

    li.mobile-nav-only{
        display: none!important;
    }
}