/**
 * InspireX – site-wide responsive layer (loaded after main.css)
 * Breakpoints align with :root in main.css: --bp-sm 640px, --bp-md 768px, --bp-lg 1024px
 */

/* -------------------------------------------------------------------------
   Global: prevent horizontal overflow from wide children
   ------------------------------------------------------------------------- */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

/* -------------------------------------------------------------------------
   Small screens: scale design tokens used across home + sections
   ------------------------------------------------------------------------- */
@media (max-width: 639px) {
    :root {
        --leadership-headline-size: 2.15rem;
        --leadership-quote-size: 2rem;
        --leadership-section-padding-y: 3rem;
        --leadership-section-padding-x: 5%;
        --leadership-structure-title-size: 1.65rem;
        --leadership-labs-margin-top: 2.5rem;
        --events-title-size: 1.85rem;
        --events-section-padding-y: 3rem;
        --events-section-padding-x: 5%;
        --event-card-padding: 1.5rem;
        --event-card-padding-x: 1.25rem;
        --event-date-num-size: 2.25rem;
        --stats-num-size: 2.5rem;
        --cta-download-heading-size: 1.65rem;
        --cta-section-padding-y: 2.5rem;
        --projects-title-size: 1.65rem;
        --projects-section-padding-x: 5%;
        --footer-padding-x: 1rem;
        --footer-col-gap: 2rem;
    }

    .leadership-structure {
        margin-top: 4rem !important;
    }

    .leadership-hero {
        margin-bottom: 2.5rem;
    }

    .leadership-conviction-block {
        text-align: left;
    }
}

@media (max-width: 767px) {
    .cta-projects-heading {
        font-size: clamp(2rem, 11vw, 3.25rem);
    }

    .trusted-section-box {
        width: min(18vw, 10rem);
    }
}

/* -------------------------------------------------------------------------
   Medium: two-column footers, tighter hero offsets
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
    :root {
        --hero-content-offset: 4rem;
        --site-header-offset: 5.75rem;
    }
}

/* -------------------------------------------------------------------------
   Rich / CMS content: fluid media (public pages)
   ------------------------------------------------------------------------- */
.project-view-body-html img,
.project-view-body-html video,
.news-article-body img,
.news-article-body video {
    max-width: 100%;
    height: auto;
}

/* -------------------------------------------------------------------------
   Site header (grid layout from header.php)
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .site-header {
        width: 100%;
    }

    .site-header.is-open {
        background: #0b0b0b;
    }

    .site-logo--desktop {
        display: none;
    }

    .site-logo--mobile {
        display: block;
        height: 2.1rem;
        width: auto;
    }

    .site-header-inner {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 0.75rem;
        align-items: center;
        text-align: left;
    }

    .site-header-brand {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .site-header-menu-toggle {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.2rem;
        height: 2.2rem;
        border: none;
        border-radius: 0;
        background: transparent;
        padding: 0;
        cursor: pointer;
    }

    .site-header-menu-icon {
        display: block;
        width: 2.1rem;
        height: auto;
    }

    .site-header-menu-panel {
        grid-column: 1 / -1;
        display: grid;
        gap: 0.75rem;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(-8px);
        pointer-events: none;
        padding: 0 0.85rem;
        transition: max-height 0.32s ease, opacity 0.24s ease, transform 0.28s ease, padding 0.25s ease;
    }

    .site-header.is-open .site-header-menu-panel {
        max-height: 70vh;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        background: transparent;
        padding: 0.75rem 0.85rem 0.9rem;
    }

    .site-header-nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .site-header-nav a {
        width: 100%;
    }

    .site-header-cta {
        font-size: 0.8125rem;
        padding-left: 1rem;
        padding-right: 1rem;
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }
}

@media (min-width: 901px) {
    .site-logo--mobile,
    .site-header-menu-toggle {
        display: none;
    }

    .site-header-menu-panel {
        display: contents;
    }
}

/* -------------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .project-card img,
    .projects-carousel .project-card img {
        transition: none;
    }
}