/* ========================================
   HOMEPAGE LAYOUT ENHANCEMENTS
   Systematic spacing, alignment, and responsive design
   ======================================== */

/* ========================================
   1. GLOBAL SECTION SPACING
   ======================================== */

/* Consistent section padding across all sections */
.section-premium {
    padding: 100px 0;
    position: relative;
}

/* Alternating background colors for visual rhythm */
.section-premium.bg-light {
    background-color: var(--light-gray);
}

.section-premium.bg-cream {
    background-color: var(--cream);
}

/* Section titles - consistent styling */
.section-title {
    text-align: center;
    margin-bottom: var(--space-16);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.section-title h2 {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    color: var(--primary-dark);
    margin-bottom: var(--space-4);
    line-height: 1.2;
}

.section-title p {
    font-size: var(--text-lg);
    color: var(--gray);
    line-height: 1.6;
    margin: 0;
}

/* ========================================
   2. FACULTIES SECTION ENHANCEMENTS
   ======================================== */

/* Ensure equal height cards */
.card-premium {
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-premium p {
    flex: 1;
    margin-bottom: var(--space-5);
}

/* Add scroll-animate to faculty cards */
#faculties .col-lg-3,
#faculties .col-md-6 {
    animation-delay: calc(var(--animation-order, 0) * 0.1s);
}

/* ========================================
   3. RESPONSIVE GRID SYSTEM
   ======================================== */

/* Ensure consistent grid gaps */
.row.g-4 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

.row.g-5 {
    --bs-gutter-x: 3rem;
    --bs-gutter-y: 3rem;
}

/* ========================================
   4. IMAGE OPTIMIZATION
   ======================================== */

/* Ensure all images scale properly */
.activity-image img,
.news-image img,
.about-campus-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Prevent image distortion */
img {
    max-width: 100%;
    height: auto;
}

/* ========================================
   5. CARD CONSISTENCY
   ======================================== */

/* Ensure all cards have equal heights in their rows */
.activity-card,
.news-card {
    height: 100%;
    min-height: 450px;
}

.career-item {
    height: auto;
    min-height: 200px;
}

/* ========================================
   6. BUTTON ALIGNMENT
   ======================================== */

/* Center all "View All" buttons */
.text-center.mt-5 {
    margin-top: var(--space-12) !important;
}

/* Ensure buttons have consistent spacing */
.btn-hero-primary,
.btn-hero-secondary,
.btn-career-apply,
.btn-career-details {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

/* ========================================
   7. RESPONSIVE BREAKPOINTS
   ======================================== */

/* Large Desktop (1920px+) */
@media (min-width: 1920px) {
    .container-premium {
        max-width: 1600px;
    }

    .section-premium {
        padding: 120px 0;
    }

    .section-title h2 {
        font-size: var(--text-5xl);
    }
}

/* Desktop (1440px - 1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
    .container-premium {
        max-width: 1400px;
    }

    .section-premium {
        padding: 100px 0;
    }
}

/* Standard Desktop (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    .container-premium {
        max-width: 1140px;
    }

    .section-premium {
        padding: 90px 0;
    }

    .section-title h2 {
        font-size: var(--text-3xl);
    }
}

/* Laptop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .container-premium {
        max-width: 960px;
    }

    .section-premium {
        padding: 80px 0;
    }

    .section-title {
        margin-bottom: var(--space-12);
    }

    .section-title h2 {
        font-size: var(--text-3xl);
    }

    .section-title p {
        font-size: var(--text-base);
    }
}

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .container-premium {
        max-width: 720px;
    }

    .section-premium {
        padding: 70px 0;
    }

    .section-title {
        margin-bottom: var(--space-10);
    }

    .section-title h2 {
        font-size: var(--text-2xl);
    }

    .section-title p {
        font-size: var(--text-base);
    }

    /* Adjust grid gaps */
    .row.g-4 {
        --bs-gutter-x: 1.25rem;
        --bs-gutter-y: 1.25rem;
    }

    .row.g-5 {
        --bs-gutter-x: 2rem;
        --bs-gutter-y: 2rem;
    }

    /* Adjust card heights */
    .activity-card,
    .news-card {
        min-height: 400px;
    }
}

/* Mobile (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .container-premium {
        max-width: 540px;
    }

    .section-premium {
        padding: 60px 0;
    }

    .section-title {
        margin-bottom: var(--space-8);
    }

    .section-title h2 {
        font-size: var(--text-xl);
    }

    .section-title p {
        font-size: var(--text-sm);
    }

    /* Adjust grid gaps */
    .row.g-4 {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }

    .row.g-5 {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 1.5rem;
    }

    /* Adjust card heights */
    .activity-card,
    .news-card {
        min-height: 350px;
    }

    /* Stack faculty cards */
    #faculties .col-lg-3,
    #faculties .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Small Mobile (360px - 575px) */
@media (min-width: 360px) and (max-width: 575px) {
    .container-premium {
        max-width: 100%;
        padding: 0 var(--space-4);
    }

    .section-premium {
        padding: 50px 0;
    }

    .section-title {
        margin-bottom: var(--space-6);
    }

    .section-title h2 {
        font-size: var(--text-lg);
    }

    .section-title p {
        font-size: var(--text-sm);
    }

    /* Adjust grid gaps */
    .row.g-4,
    .row.g-5 {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }

    /* Adjust card heights */
    .activity-card,
    .news-card {
        min-height: auto;
    }
}

/* Extra Small Mobile (< 360px) */
@media (max-width: 359px) {
    .container-premium {
        padding: 0 var(--space-3);
    }

    .section-premium {
        padding: 40px 0;
    }

    .section-title h2 {
        font-size: var(--text-base);
    }

    .section-title p {
        font-size: var(--text-xs);
    }
}

/* ========================================
   8. SMOOTH SCROLL BEHAVIOR
   ========================================/* 5. SMOOTH SCROLLING */
/* Native smooth scrolling */

/* Offset for fixed header */
section[id] {
    scroll-margin-top: 100px;
}

/* ========================================
   9. VISUAL HIERARCHY
   ======================================== */

/* Add subtle separation between sections */
.section-premium+.section-premium {
    position: relative;
}

.section-premium+.section-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 1200px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.05), transparent);
}

.section-premium.bg-light+.section-premium.bg-light::before,
.section-premium.bg-cream+.section-premium.bg-cream::before {
    display: none;
}

/* ========================================
   10. LOADING OPTIMIZATION
   ======================================== */

/* Prevent layout shift */
.activity-image,
.news-image {
    aspect-ratio: 16 / 10;
}

.about-campus-image {
    aspect-ratio: 4 / 3;
}

/* ========================================
   11. ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Focus states */
.btn-hero-primary:focus,
.btn-hero-secondary:focus,
.btn-career-apply:focus,
.btn-career-details:focus {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary);
    color: var(--white);
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    z-index: 100;
}

.skip-to-content:focus {
    top: 0;
}

/* ========================================
   12. PRINT STYLES
   ======================================== */

@media print {
    .section-premium {
        padding: 20px 0;
        page-break-inside: avoid;
    }

    .hero-premium,
    .carousel-control,
    .carousel-indicators,
    .btn-hero-primary,
    .btn-hero-secondary {
        display: none;
    }
}

/* ========================================
   13. PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Use will-change for animated elements */
.scroll-animate,
.activity-card,
.news-card,
.career-item {
    will-change: transform, opacity;
}

/* Remove will-change after animation */
.scroll-animate.active {
    will-change: auto;
}

/* ========================================
   14. GRID ALIGNMENT FIXES
   ======================================== */

/* Ensure Bootstrap grid doesn't break */
.row {
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
}

.row>* {
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    padding-right: calc(var(--bs-gutter-x) * 0.5);
}

/* ========================================
   15. OVERFLOW PREVENTION
   ======================================== */

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
}

.container-premium,
.section-premium {
    overflow-x: hidden;
}

/* ========================================
   16. CALL TO ACTION ENHANCEMENTS
   ======================================== */

/* Improve CTA button layout */
.d-flex.gap-4 {
    gap: var(--space-4) !important;
}

@media (max-width: 767px) {
    .d-flex.gap-4 {
        flex-direction: column;
        gap: var(--space-3) !important;
    }

    .d-flex.gap-4 .btn-hero-primary,
    .d-flex.gap-4 .btn-hero-secondary {
        width: 100%;
    }
}

/* ========================================
   17. SECTION-SPECIFIC FIXES
   ======================================== */

/* About section balance */
#about .row {
    align-items: center;
}

/* Notice board centering */
.notice-board-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Career section layout */
#careers .row {
    align-items: flex-start;
}

/* ========================================
   18. ANIMATION PERFORMANCE
   ======================================== */

/* Use GPU acceleration */
.scroll-animate {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reduce motion for accessibility */
@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;
    }
}