/* 
 * SRCS Premium Website CSS
 * Responsive Adjustments
 */

/* =========================================
   Max-width: 1600px
   ========================================= */
@media (max-width: 1600px) {
    .header-container { padding: 0 2rem; }
}

/* =========================================
   Max-width: 1400px
   ========================================= */
@media (max-width: 1400px) {
    .hero-vertical-nav { right: 2rem; }
    .hero-scroll-explore { left: 2rem; }
}

/* =========================================
   Max-width: 1200px (Desktop smaller)
   ========================================= */
@media (max-width: 1200px) {
    .desktop-nav ul { gap: 1.5rem; }
    .editorial-heading { font-size: clamp(2.5rem, 4vw, 3.5rem); }
}

/* =========================================
   Max-width: 991px (Tablet Landscape / Mobile Menu Trigger)
   ========================================= */
@media (max-width: 991px) {
    /* Cursor disable */
    .custom-cursor { display: none !important; }
    body { cursor: auto; }
    
    /* Header */
    .header-container { padding: 0 1rem; }
    .header-actions { right: 1rem; }
    .hero-vertical-nav, .hero-scroll-explore { display: none !important; }
    
    /* Hero */
    .hero-section { min-height: 80vh; height: 80vh; }
    
    /* Campus Gallery (Masonry override) */
    .masonry-grid { grid-template-columns: repeat(2, 1fr); }
    .w-large, .w-wide { grid-column: span 2; }
    
    /* Academics */
    .academic-card { margin-bottom: 1.5rem; }
}

/* =========================================
   Max-width: 768px (Tablet Portrait)
   ========================================= */
@media (max-width: 768px) {
    .hero-swiper .swiper-slide > .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* Hero */
    .hero-section { min-height: 70vh; height: 70vh; }
    .slide-heading { font-size: 2.5rem; }
    .slide-desc { font-size: 1rem; margin-bottom: 1.5rem; }
    .slide-actions { flex-direction: column; align-items: flex-start; gap: 1rem; }
    
    /* General */
    .section-padding { padding-top: 4rem; padding-bottom: 4rem; }
    
    /* Sports Marquee */
    
}

/* =========================================
   Max-width: 576px (Mobile Landscape)
   ========================================= */
@media (max-width: 576px) {
    .srcs-about-section .container { padding-left: 20px; padding-right: 20px; }
    .srcs-about-section .srcs-about-content { transform: none; }
    .brand-logo-image { width: 150px; }
    .preloader-logo-image { width: 260px; }
    .editorial-heading { font-size: 2rem; }
    
    /* Hero */
    .hero-section {
        min-height: 680px;
        height: min(100svh, 720px);
        padding-bottom: 0;
        background: #fff;
    }

    /* Keep a compact wave on mobile without creating a blank area. */
    .hero-wave { display: block; bottom: 0; }
    .hero-wave svg { height: 46px; transform: none; }
    .srcs-about-section { margin-top: -1px; }

    /* Soft central shading keeps the heading readable over bright photos. */
    .slide-overlay {
        background: linear-gradient(to bottom, transparent 15%, rgba(5, 15, 10, 0.16) 30%, rgba(5, 15, 10, 0.42) 50%, rgba(5, 15, 10, 0.16) 70%, transparent 85%),
            linear-gradient(to top, rgba(5, 15, 10, 0.55) 0%, rgba(5, 15, 10, 0.15) 30%, transparent 60%);
    }
    .slide-content-box {
        padding-bottom: 0;
    }
    .slide-heading {
        font-size: clamp(2rem, 8vw, 2.5rem);
    }
    
    /* Gallery */
    .masonry-grid {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .masonry-grid .grid-item,
    .w-large, .w-wide, .w-normal,
    .h-large, .h-normal,
    .student-community, .science-laboratories {
        width: 100%;
        height: 280px;
        min-height: 280px;
        grid-column: auto;
        grid-row: auto;
    }
    .gallery-action { margin-top: 24px; }
}

/* =========================================
   Max-width: 425px (Mobile Portrait Large)
   ========================================= */
@media (max-width: 425px) {
    .slide-heading { font-size: 2rem; }
}

/* =========================================
   Max-width: 375px (Mobile Portrait Medium)
   ========================================= */
@media (max-width: 375px) {
    .header-actions .btn-solid { padding: 0.6rem 1.2rem; font-size: 0.75rem; }
    .brand-logo .logo-text { font-size: 1.5rem; }
}

/* =========================================
   Max-width: 320px (Mobile Portrait Small)
   ========================================= */
@media (max-width: 320px) {
    .editorial-heading { font-size: 1.8rem; }
    .slide-heading { font-size: 1.8rem; }
}

/* Pre-fers reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Updates Section Responsive */
@media screen and (max-width: 1024px) {
    .updates-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .card-4 {
        grid-column: span 2;
    }
    
    .card-6 {
        grid-column: span 2;
    }
}

@media screen and (max-width: 768px) {
    .updates-grid {
        grid-template-columns: 1fr;
    }
    
    .card-4, .card-6 {
        grid-column: span 1;
    }
    
    .split-card {
        flex-direction: column;
    }
    
    .split-image, .split-content, .card-6 .split-image, .card-6 .split-content {
        flex: 1 1 100%;
        width: 100%;
    }
    
    .updates-heading h2 {
        font-size: 2.5rem;
    }
}

/* ============================================================
   Global mobile stability
   Keep every page inside the viewport and give the shared header
   one predictable height. Page-specific designs can still override
   their own sections below this block.
   ============================================================ */
@media (max-width: 767px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    .main-header {
        height: 76px;
        min-height: 76px;
        padding: 0 !important;
        display: flex;
        align-items: center;
    }

    .main-header .header-container {
        width: 100%;
        height: 76px;
        min-height: 76px;
        margin: 0;
        padding: 0 18px !important;
        display: flex;
        align-items: center;
        justify-content: space-between !important;
    }

    .main-header .brand-logo {
        display: inline-flex;
        align-items: center;
        width: auto;
        max-width: calc(100% - 70px);
        height: 100%;
        margin: 0;
        line-height: 0;
    }

    .main-header .brand-logo-image,
    .main-header.scrolled .brand-logo-image {
        display: block;
        width: min(170px, 52vw) !important;
        height: auto;
        max-width: 100%;
        max-height: 58px;
        margin: 0;
        object-fit: contain;
    }

    .main-header .brand-logo .logo-light,
    .main-header.scrolled .brand-logo .logo-light {
        display: block;
    }

    .main-header .brand-logo .logo-colored,
    .main-header.scrolled .brand-logo .logo-colored {
        display: none;
    }

    .main-header.scrolled .brand-logo .logo-light {
        display: none;
    }

    .main-header.scrolled .brand-logo .logo-colored {
        display: block;
    }

    .main-header .header-actions {
        position: static;
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        margin: 0;
    }

    .main-header .menu-award-badge {
        width: 65px;
        height: 65px;
        margin-right: 12px;
    }

    .main-header .hamburger-menu {
        width: 42px;
        height: 42px;
        padding: 9px 5px;
        margin: 0;
        flex: 0 0 42px;
    }

    .main-header .hamburger-menu span {
        left: 5px;
        width: 32px;
    }

    .main-header .hamburger-menu span:nth-child(1) { top: 9px; }
    .main-header .hamburger-menu span:nth-child(2) { top: 19px; }
    .main-header .hamburger-menu span:nth-child(3) { top: 29px; }

    .main-header .hamburger-menu.active span:nth-child(1),
    .main-header .hamburger-menu.active span:nth-child(3) {
        top: 19px;
    }

    .mobile-sidebar {
        width: min(380px, 91vw);
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
    }

    .sidebar-header {
        min-height: 76px;
        padding: 12px 18px;
    }

    .sidebar-logo {
        width: min(175px, 55vw);
        height: auto;
        max-height: 52px;
    }

    .sidebar-nav {
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent fixed/absolute desktop sections from widening the page. */
    .container,
    .container-fluid,
    section,
    main,
    .swiper,
    .swiper-wrapper,
    img,
    video {
        max-width: 100%;
    }

    .hero-section {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    /* Fixed header must not cover the first block on non-hero pages. */
    body:not(.home) main:first-of-type,
    body:not(.home) .page-content:first-of-type {
        scroll-margin-top: 76px;
    }
}

@media (max-width: 420px) {
    .main-header .header-container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .main-header .brand-logo-image,
    .main-header.scrolled .brand-logo-image {
        width: min(158px, 53vw) !important;
        max-height: 54px;
    }

    .main-header .hamburger-menu {
        width: 40px;
        flex-basis: 40px;
    }

    .main-header .hamburger-menu span {
        width: 30px;
    }
}