/* =============================================================================
   RESPONSIVE.CSS — All media queries for the JenaInnovation theme
   Sections:
     1. Full-Height Sections
     2. HUD & Nav Drawer
     3. News Grid
     4. Team Grid
     5. Partner Logos
     6. Events
     7. Scroll Image Slider Block
     8. Single & Page Templates
     9. Accessibility — Reduced Motion & High Contrast
   ============================================================================= */


/* =============================================================================
   1. FULL-HEIGHT SECTIONS
   ============================================================================= */

   @media (max-width: 1200px) {

    .full-height-group {
        padding-bottom: 6rem !important;
    }

    .full-height-group .hud-label {
        margin-top: 1.875rem;
        margin-bottom: 3rem;
    }

    .has-large-font-size {
        font-size: 1.125rem !important;
        line-height: 1.875rem !important;
    }

    .has-x-large-font-size,
    .has-larger-font-size {
        font-size: 1.875rem !important;
        line-height: 2.188rem !important;
    }

    .growing-list ul.wp-block-list {
        font-size: 1.25rem;
        line-height: 1.563rem;
    }

}

@media (max-width: 992px) {

    .full-height-group {
        height: auto;
        min-height: auto;
        max-height: none;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

}

@media (max-width: 768px) {

    .full-height-group {
        padding-top: 4rem !important;
    }

}


/* =============================================================================
   2. HUD & NAV DRAWER
   ============================================================================= */

@media (max-width: 1200px) {

    .hud-svg-logo {
        top: 20px;
        left: 0;
        transform: none;
        width: 45px;
        height: 60px;
        margin-left: 30px;
    }

    .hud-svg-logo__wordmark {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-left: 90px;
        width: 270px;
        height: auto;
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
        z-index: 3;
    }

    .wp-block-site-logo {
        width: 270px;
        left: 10px;
    }


    .nav-drawer--bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        bottom: calc(2rem + env(safe-area-inset-bottom));
    }

    .nav-drawer--bottom .is-layout-flex, footer .is-layout-flex {
        display: flex !important;
    }

    .nav-drawer--bottom nav {
        order: 2;
    }

    .nav-drawer--bottom > .wp-block-group {
        order: 1;
    }


    .nav-drawer--bottom a,
    .nav-drawer--bottom p {
        font-size: 0.938rem !important;
    }

}

@media (max-width: 768px) {

    .site-hud {
        padding: 1.25rem 1.5rem;
        gap: 1rem;
    }

    .site-hud__text-line1 { font-size: 0.95rem; }
    .site-hud__text-line2 { font-size: 0.8rem; }

    .nav-drawer {
        width: 95%;
    }

    .nav-drawer__link {
        font-size: 1.5rem;
    }

    .nav-drawer--top img {
        height: 30px;
    }

}


/* =============================================================================
   3. NEWS GRID
   Desktop:   3 columns
   ≤ 1200px:  font size reduced
   ≤ 1024px:  2 columns
   ≤  768px:  1 column
   ============================================================================= */

@media (max-width: 1200px) {

    .news-item .wp-block-post-date,
    .news-item .wp-block-post-title {
        font-size: var(--wp--preset--font-size--large) !important;
        line-height: 1.4 !important;
    }

    .news-item .wp-block-post-date,
    .news-item h2 a {
        font-size: 1.563rem !important;
        line-height: 2.188rem !important;
    }

    .block-news  .wp-block-post-template.columns-3 li {
        padding-left: 1.25rem;
    }

}

@media (max-width: 1024px) {

    .block-news .wp-block-post-template.columns-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

}

@media (max-width: 768px) {

    .block-news .wp-block-post-template.columns-3 {
        grid-template-columns: 1fr !important;
    }

    .block-news .wp-block-post-template.columns-3 .wp-block-post {
        width: 90% !important;
        margin-bottom: 1.5rem;
    }

    .block-news .wp-block-post-template li:nth-child(n+4) {
        margin-top: 0;
    }

    .news-item .wp-block-group[style*="padding-right"] {
        padding-right: 0 !important;
    }

    .wp-block-post.archive-link .news-item {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    li.wp-block-post.archive-link {
        border-left: none;
    }

}


/* =============================================================================
   4. TEAM GRID
   Desktop:   6 columns with staggered offset rows
   ≤ 1024px:  4 columns, offset spacers hidden
   ≤  768px:  2 columns
   ============================================================================= */

@media (max-width: 1024px) {

    .team-grid {
        display: block !important;
    }

    .team-grid .wp-block-columns {
        flex-wrap: wrap !important;
        gap: 1.5rem !important;
    }

    .team-grid .wp-block-column:not(:has(.team-card-animate)) {
        display: none !important;
    }

    .team-grid .wp-block-column {
        flex-basis: calc(25% - 1.125rem) !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        min-width: 0 !important;
    }

}

@media (max-width: 768px) {

    .team-grid .wp-block-columns {
        gap: 1rem !important;
    }

    .team-grid .wp-block-column {
        flex-basis: calc(50% - 0.5rem) !important;
        margin-bottom: 2rem;
    }

    .team-grid .team-card-animate figure img {
        width: 70% !important;
        height: auto !important;
    }

}


/* =============================================================================
   5. PARTNER LOGOS
   Left-align on tablet and below
   ============================================================================= */

@media (max-width: 992px) {

    .col-bottom.logos .wp-block-image {
        padding: 0.5rem 0;
    }

    .col-bottom.logos .wp-block-image img {
        width: 100% !important;
        max-height: 60px;
        object-fit: contain;
    }

    .col-bottom.logos .wp-block-image.aligncenter,
    .col-bottom.logos .wp-block-image.alignright {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        float: left;
    }

    .col-bottom.logos .wp-block-image.aligncenter img,
    .col-bottom.logos .wp-block-image.alignright img {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    

}


/* =============================================================================
   6. EVENTS
   ============================================================================= */

@media (max-width: 1200px) {

    .event-card-row {
        gap: 0;
    }

    .wp-block-columns.event-card-row {
        display: block;
    }

    .event-card-row .wp-block-column {
        padding-left: 10px;
        padding-bottom: 5px;
    }

    .event-details p {
        font-size: 0.938rem;
        line-height: 1.25rem;
    }

}


/* =============================================================================
   7. SCROLL IMAGE SLIDER BLOCK
   ============================================================================= */

@media (max-width: 1200px) {

    .block-scroll-image-slider {
        padding-top: 4rem;
    }

}


/* =============================================================================
   8. SINGLE & PAGE TEMPLATES
   ============================================================================= */

@media (max-width: 1200px) {

    .single,
    .page {
        font-size: 1.125rem;
        line-height: 1.875rem !important;


    }

    .single main {
        padding-top: 6rem !important;
    }

    .page main {
        padding-top: 6rem !important;
    }

    .blog main {
        padding-top: 6rem !important;
    }

    .single .is-layout-flex {
        display: block;
    }
    .single .wp-block-column {
        padding-bottom: 2rem;
    }

    .page .wp-block-post-title {
        font-size: 1.875rem !important;
        line-height: 2.188rem !important;
        padding-bottom: 30px;
    }

    .single .featured-image-caption {
        width: 100%;
    }

    .single-website-logo figure {      
        top: 0;
        position: absolute;
    }

    .single-website-logo figure img {
        width: 50px !important;
    }

        footer .wp-block-group.is-content-justification-space-between.is-nowrap {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 1.5rem;
        }
    

    footer .wp-block-group.is-nowrap.is-layout-flex .wp-block-group.is-nowrap {
        flex-wrap: wrap !important;
    }

   .block-newsletter {
        padding-top: 10rem !important;
    }

    footer .block-newsletter p {
        font-size: 1.563rem !important;
        line-height: 2.188rem !important;
    }

    input[type=email]::placeholder, input[type=email], input[type=text]::placeholder, input[type=text] {
        font-size: 1.25rem !important;
    }


    footer.wp-block-template-part {
        padding-bottom: env(safe-area-inset-bottom);
    }

    footer .is-content-justification-space-between.is-nowrap {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1.5rem;
    }
    
    footer .is-content-justification-space-between.is-nowrap nav {
        order: 2;
    }
    
    footer .is-content-justification-space-between.is-nowrap > .wp-block-group {
        order: 1;
    }


}


/* =============================================================================
   9. ACCESSIBILITY — Reduced Motion & High Contrast
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {

    .full-height-group,
    .full-height-group > * {
        opacity: 1;
        transform: none;
        transition: none;
    }

}

@media (prefers-contrast: more) {

    .full-height-group,
    .full-height-group > * {
        opacity: 1;
        transform: none;
        transition: none;
    }

}



@media (max-width: 768px) {
    .block-interactive-graphic {
        display: none;
    }
}