/* =========================================
   COMPREHENSIVE MOBILE OPTIMIZATION
   Professional responsive design for all mobile tiers
   ========================================= */

/* =========================================
   DEVICE TIER BREAKPOINTS
   Small: 320px - 480px (iPhone SE, small Android)
   Medium: 481px - 768px (iPhone 12/13/14, standard phones)
   Large: 769px - 991px (Tablets, landscape phones)
   ========================================= */

/* =========================================
   BASE MOBILE STYLES (All Mobile Devices)
   ========================================= */
@media (max-width: 991px) {

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

    /* Hide desktop-only elements */
    .quick-sidebar {
        display: none !important;
    }

    /* Optimize container padding */
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Ensure all images are responsive */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* =========================================
   LARGE TIER (769px - 991px)
   Tablets and large phones in landscape
   ========================================= */
@media (min-width: 769px) and (max-width: 991px) {

    /* Typography - Approaching desktop sizes */
    .hero__title {
        font-size: 3rem !important;
        line-height: 1.2;
    }

    .hero__subtitle {
        font-size: 1.125rem !important;
    }

    .section__title {
        font-size: 2rem !important;
    }

    .section__description {
        font-size: 1rem !important;
    }

    /* Grid Layouts - 3 columns for cards */
    .faculty-preview .row>.col-lg-3,
    .faculty-section .row>.col-lg-3 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }

    .campus .row>.col-lg-3,
    .gallery .row>.col-lg-3 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }

    /* Programs - 2 columns */
    .programs .row>.col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* News - 3 columns */
    .news .row>.col-lg-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }

    /* Hero Section */
    .hero {
        padding: 120px 0 80px !important;
    }

    /* Section Spacing */
    .section {
        padding: 60px 0 !important;
    }

    /* Card Sizes */
    .faculty-card__image,
    .faculty-card__image img {
        height: 220px !important;
    }

    .campus__item img,
    .gallery__item img {
        height: 200px !important;
    }

    .news-card__image {
        height: 180px !important;
    }

    /* Buttons */
    .btn {
        padding: 14px 28px !important;
        font-size: 1rem !important;
    }

    /* Header */
    .header {
        padding: 16px 0 !important;
    }

    /* Footer - 2 columns */
    .footer .row>.col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* =========================================
   MEDIUM TIER (481px - 768px)
   Standard smartphones (iPhone 12/13/14)
   ========================================= */
@media (min-width: 481px) and (max-width: 768px) {

    /* Typography - Balanced sizing */
    .hero__title {
        font-size: 2.25rem !important;
        line-height: 1.2;
    }

    .hero__subtitle {
        font-size: 1rem !important;
    }

    .section__title {
        font-size: 1.75rem !important;
    }

    .section__description {
        font-size: 0.9375rem !important;
    }

    /* Grid Layouts - 2 columns */
    .faculty-preview .row>.col-lg-3,
    .faculty-preview .row>.col-md-6,
    .faculty-section .row>.col-lg-3,
    .faculty-section .row>.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .campus .row>.col-lg-3,
    .campus .row>.col-md-6,
    .gallery .row>.col-lg-3,
    .gallery .row>.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .programs .row>.col-lg-3,
    .programs .row>.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .news .row>.col-lg-4,
    .news .row>.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Hero Section */
    .hero {
        padding: 100px 0 60px !important;
    }

    .hero__badge {
        font-size: 0.875rem !important;
        padding: 10px 20px !important;
    }

    /* Section Spacing */
    .section {
        padding: 50px 0 !important;
    }

    /* Card Sizes */
    .faculty-card__image,
    .faculty-card__image img {
        height: 200px !important;
    }

    .campus__item img,
    .gallery__item img {
        height: 180px !important;
    }

    .news-card__image {
        height: 160px !important;
    }

    /* Card Content */
    .faculty-card__content,
    .news-card__content {
        padding: 16px !important;
    }

    .faculty-card__name {
        font-size: 1rem !important;
    }

    .news-card__title {
        font-size: 1rem !important;
    }

    /* Buttons */
    .btn {
        padding: 12px 24px !important;
        font-size: 0.9375rem !important;
    }

    /* Gap between columns */
    .row.g-4 {
        --bs-gutter-x: 14px !important;
        --bs-gutter-y: 14px !important;
    }

    /* Header */
    .header {
        padding: 14px 0 !important;
    }

    .header__logo {
        height: 50px !important;
    }

    /* Footer - 2 columns */
    .footer .row>.col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 30px;
    }

    /* Page Header */
    .page-header {
        padding: 80px 0 60px !important;
    }

    .page-header__title {
        font-size: 2rem !important;
    }
}

/* =========================================
   SMALL TIER (320px - 480px)
   Small smartphones (iPhone SE, small Android)
   ========================================= */
@media (max-width: 480px) {

    /* Typography - Compact but readable */
    .hero__title {
        font-size: 1.75rem !important;
        line-height: 1.25;
    }

    .hero__subtitle {
        font-size: 0.875rem !important;
        line-height: 1.5;
    }

    .section__title {
        font-size: 1.5rem !important;
        margin-bottom: 12px !important;
    }

    .section__description {
        font-size: 0.875rem !important;
        line-height: 1.6;
    }

    /* Grid Layouts - Single column */
    .faculty-preview .row>.col-lg-3,
    .faculty-preview .row>.col-md-6,
    .faculty-section .row>.col-lg-3,
    .faculty-section .row>.col-md-6,
    .campus .row>.col-lg-3,
    .campus .row>.col-md-6,
    .gallery .row>.col-lg-3,
    .gallery .row>.col-md-6,
    .programs .row>.col-lg-3,
    .programs .row>.col-md-6,
    .news .row>.col-lg-4,
    .news .row>.col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Hero Section */
    .hero {
        padding: 80px 0 50px !important;
    }

    .hero__badge {
        font-size: 0.75rem !important;
        padding: 8px 16px !important;
    }

    .hero__buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .hero__buttons .btn {
        width: 100% !important;
    }

    /* Section Spacing */
    .section {
        padding: 40px 0 !important;
    }

    /* Container Padding */
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Card Sizes */
    .faculty-card__image,
    .faculty-card__image img {
        height: 240px !important;
    }

    .campus__item img,
    .gallery__item img {
        height: 200px !important;
    }

    .news-card__image {
        height: 180px !important;
    }

    /* Card Content */
    .faculty-card,
    .news-card,
    .program-card,
    .campus__item {
        margin-bottom: 16px !important;
        padding: 14px !important;
    }

    .faculty-card__content,
    .news-card__content {
        padding: 14px !important;
    }

    .faculty-card__name {
        font-size: 1rem !important;
        margin-bottom: 6px !important;
    }

    .faculty-card__designation {
        font-size: 0.8125rem !important;
    }

    .news-card__title {
        font-size: 0.9375rem !important;
        margin-bottom: 8px !important;
    }

    .news-card__excerpt {
        font-size: 0.8125rem !important;
        line-height: 1.5 !important;
    }

    .news-card__category,
    .news-card__date {
        font-size: 0.6875rem !important;
        padding: 4px 8px !important;
    }

    /* Program Cards */
    .program-card__content {
        padding: 16px !important;
    }

    .program-card__title {
        font-size: 1.125rem !important;
    }

    .program-card__description {
        font-size: 0.8125rem !important;
    }

    /* Buttons - Larger touch targets */
    .btn {
        padding: 14px 24px !important;
        font-size: 0.9375rem !important;
        min-height: 48px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Gap between columns */
    .row.g-4 {
        --bs-gutter-x: 12px !important;
        --bs-gutter-y: 12px !important;
    }

    /* Header */
    .header {
        padding: 12px 0 !important;
    }

    .header__logo {
        height: 45px !important;
    }

    /* Mobile Menu Button - Larger touch target */
    .mobile-nav__toggle {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.25rem !important;
    }

    /* Footer - Single column */
    .footer .row>.col-lg-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px;
    }

    .footer {
        padding: 40px 0 30px !important;
    }

    .footer__title {
        font-size: 1.125rem !important;
    }

    .footer__link {
        font-size: 0.875rem !important;
        padding: 8px 0 !important;
    }

    /* Page Header */
    .page-header {
        padding: 60px 0 40px !important;
    }

    .page-header__title {
        font-size: 1.75rem !important;
    }

    .page-header__description {
        font-size: 0.875rem !important;
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: 0.8125rem !important;
    }

    /* Stats Section */
    .stats__item {
        margin-bottom: 24px !important;
    }

    .stats__number {
        font-size: 2rem !important;
    }

    .stats__label {
        font-size: 0.875rem !important;
    }

    /* VC Message */
    .vc-message__content {
        padding: 24px !important;
    }

    .vc-message__quote {
        font-size: 1rem !important;
    }

    /* Contact Form */
    .form-control,
    .form-select {
        padding: 12px 16px !important;
        font-size: 0.9375rem !important;
        min-height: 48px !important;
    }

    textarea.form-control {
        min-height: 120px !important;
    }

    .form-label {
        font-size: 0.875rem !important;
        margin-bottom: 8px !important;
    }
}

/* =========================================
   EXTRA SMALL TIER (< 375px)
   Very small devices
   ========================================= */
@media (max-width: 374px) {

    .hero__title {
        font-size: 1.5rem !important;
    }

    .section__title {
        font-size: 1.375rem !important;
    }

    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .btn {
        padding: 12px 20px !important;
        font-size: 0.875rem !important;
    }
}

/* =========================================
   TOUCH TARGET OPTIMIZATION
   Ensure all interactive elements meet accessibility standards
   ========================================= */
@media (max-width: 991px) {

    /* Minimum touch target size */
    a,
    button,
    input,
    select,
    textarea {
        min-height: 44px;
    }

    /* Navigation links */
    .mobile-sidebar__link,
    .mobile-sidebar__dropdown-toggle,
    .mobile-sidebar__dropdown-item {
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Social links */
    .footer__social-link,
    .mobile-sidebar__social-link {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

/* =========================================
   LANDSCAPE ORIENTATION OPTIMIZATION
   ========================================= */
@media (max-width: 768px) and (orientation: landscape) {

    .hero {
        padding: 60px 0 40px !important;
    }

    .section {
        padding: 40px 0 !important;
    }

    .page-header {
        padding: 50px 0 30px !important;
    }

    /* Use 2 columns in landscape for better space utilization */
    .faculty-preview .row>.col-lg-3,
    .faculty-section .row>.col-lg-3,
    .programs .row>.col-lg-3,
    .news .row>.col-lg-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}