/* Responsive About video sizing */
.about-video--height {
    height: 520px;
}

@media (min-width: 576px) {
    .about-video--height {
        height: 520px;
    }
}

@media (min-width: 768px) {
    .about-video--height {
        height: 560px;
    }
}

@media (min-width: 992px) {
    .about-video--height {
        height: 600px;
    }
}

.about-video--media {
    height: 100%;
    object-fit: cover;
}

/* Desktop: enforce 16:9 aspect ratio for the video container */
@media (min-width: 992px) {
    .about-video--height {
        height: auto;           /* override fixed height */
        aspect-ratio: 16 / 9;  /* 16:9 ratio */
    }
}

/* Bottom-to-top gradient overlay for better text/button contrast */
.about-video::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* strong at bottom, fades to transparent towards top */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 35%, rgba(0, 0, 0, 0.0) 65%);
    z-index: 2;
}

.about-video--text {
    max-width: 550px;
}

@media (max-width: 767.98px) {
    .about-video--text {
        max-width: 90%;
    }
}

/* CTA inline with paragraph */
.about-video--cta-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .8rem 4rem;
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    letter-spacing: .1em;
    color: #ffffff;
    background-color: transparent;
    border: 1px solid #ffffff;
    text-decoration: none;
    white-space: nowrap;
    transition: all .3s ease;
}
.about-video--cta-inline:hover {
    background-color: #ffffff;
    color: #000000;
}
@media (max-width: 767.98px) {
    .about-video--row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .about-video--cta-inline {
        padding: .7rem 2.5rem;
        align-self: flex-start;
    }
    /* Ensure paragraph aligns exactly with H2 and button */
    .about-video--row,
    .about-video--text,
    .about-video--text p {
        padding-left: 0 !important;
        margin-left: 0 !important;
        width: 100%;
    }
    .about-video--row,
    .about-video--text,
    .about-video--text p { text-align: left !important; }
    .about-video--text { align-self: flex-start; }
    .about-video--text p { text-indent: 0; margin-left: 0 !important; margin-right: 0 !important; }
    /* Align paragraph block with the same left start as H2 */
    .about-video--text {
        margin-left: 0 !important;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .about-video--cta {
        position: static;
        margin: 0;
    }
}

/* Unify home titles on mobile */
@media (max-width: 767.98px) {
    /* About, Counter/Reach, Publications, and Events headings */
    .about-section .section-title,
    .culture-section .section-title,
    .publication-section .left-title h2,
    .news-section .news-title-navigation h2 {
        font-size: 28px !important;
        line-height: 1.2;
    }
}

/* Services section mobile and tablet adjustments */
@media (max-width: 991.98px) {
    /* Disable ALL hover effects on mobile and tablets to keep text ALWAYS visible */
    .box-small:hover img,
    .box:hover img {
        filter: none !important;
        transform: scale(1) !important;
    }

    .box:hover .green-overlay,
    .box:hover .secondary-overlay,
    .box:active .green-overlay,
    .box:active .secondary-overlay,
    .box:focus .green-overlay,
    .box:focus .secondary-overlay {
        transform: translateX(0) !important;
    }

    .box:hover .box-link-text,
    .box:active .box-link-text,
    .box:focus .box-link-text {
        transform: translateX(0) !important;
        opacity: 1 !important;
    }

    .box:hover .box-text,
    .box:active .box-text,
    .box:focus .box-text {
        opacity: 1 !important;
    }

    /* Keep the dark gradient overlay for readability on mobile and tablets */
    .services-section .box::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        /* Dark gradient for text visibility */
        background: linear-gradient(to top, rgba(70, 95, 90, 0.95) 0%, rgba(70, 95, 90, 0.85) 25%, rgba(70, 95, 90, 0.5) 50%, rgba(70, 95, 90, 0.15) 75%);
        z-index: 10;
    }

    /* Hide the full green hover overlay on mobile and tablets */
    .services-section .green-overlay {
        display: none !important;
    }

    /* Keep text ALWAYS visible on mobile and tablets */
    .services-section .box-text {
        z-index: 11;
        opacity: 1 !important;
    }

    .services-section .box-link-text {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }

    .services-section .box-title {
        color: white;
    }
}

/* Hero section mobile adjustments */
@media (max-width: 767.98px) {
    .hero-section {
        height: 50vh;
        min-height: 400px;
    }

    .heroSwiper {
        height: 100%;
    }

    .heroSwiper--slide-content .hero-text-anim-up,
    .heroSwiper--slide-content .reveal-up h1,
    .heroSwiper--slide-content h1 {
        font-size: 27px !important;
        line-height: 1.2;
    }

    .heroSwiper--slide-info h6.subtitle {
        font-size: 13px !important;
    }

    .heroSwiper--slide-info {
        gap: 12px;
    }

    .heroSwiper--slide-content {
        padding-bottom: 2.5rem;
    }

    .cta-button {
        padding: .7rem 2rem !important;
        font-size: 11px !important;
    }
}



/* Visually hidden (accessible) — keep in DOM, hide visually */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important; /* prevent line breaks */
    border: 0 !important;
}