/* 
 * 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; }

    /* Match the desktop left-side readability overlay on mobile. */
    .slide-overlay {
        background: linear-gradient(90deg, rgba(5, 24, 15, 0.9) 0%, rgba(5, 24, 15, 0.62) 55%, rgba(5, 24, 15, 0.14) 100%),
            linear-gradient(to top, rgba(5, 15, 10, 0.58) 0%, transparent 42%);
    }
    
    /* 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;
    }
}