/* =========================================
   COMPLETE WEBSITE MOBILE OPTIMIZATION
   Comprehensive mobile styles for all pages and components
   ========================================= */

/* =========================================
   CSS VARIABLES - MOBILE TYPOGRAPHY & SPACING
   ========================================= */
:root {
    /* Small Tier (320-480px) */
    --h1-mobile-small: 1.75rem;
    --h2-mobile-small: 1.5rem;
    --h3-mobile-small: 1.25rem;
    --h4-mobile-small: 1.1rem;
    --body-mobile-small: 0.875rem;
    --section-padding-small: 40px;
    --card-padding-small: 16px;
    --gap-small: 16px;

    /* Medium Tier (481-768px) */
    --h1-mobile-medium: 2.25rem;
    --h2-mobile-medium: 1.875rem;
    --h3-mobile-medium: 1.5rem;
    --h4-mobile-medium: 1.25rem;
    --body-mobile-medium: 0.9375rem;
    --section-padding-medium: 60px;
    --card-padding-medium: 20px;
    --gap-medium: 20px;

    /* Large Tier (769-991px) */
    --h1-mobile-large: 2.75rem;
    --h2-mobile-large: 2.25rem;
    --h3-mobile-large: 1.75rem;
    --h4-mobile-large: 1.5rem;
    --body-mobile-large: 1rem;
    --section-padding-large: 80px;
    --card-padding-large: 24px;
    --gap-large: 24px;
}

/* =========================================
   HOMEPAGE - HERO SECTION
   ========================================= */

/* Small Tier Hero */
@media (max-width: 480px) {
    .hero {
        min-height: 400px !important;
        padding: 60px 0 40px !important;
    }

    .hero__content {
        padding: 20px !important;
    }

    .hero__title {
        font-size: var(--h1-mobile-small) !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }

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

    .hero__description {
        font-size: var(--body-mobile-small) !important;
        margin-bottom: 24px !important;
    }

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

    .hero__cta .btn {
        width: 100% !important;
        padding: 12px 24px !important;
    }
}

/* Medium Tier Hero */
@media (min-width: 481px) and (max-width: 768px) {
    .hero {
        min-height: 500px !important;
        padding: 80px 0 50px !important;
    }

    .hero__content {
        padding: 30px !important;
    }

    .hero__title {
        font-size: var(--h1-mobile-medium) !important;
        line-height: 1.3 !important;
        margin-bottom: 16px !important;
    }

    .hero__subtitle {
        font-size: 1rem !important;
        margin-bottom: 24px !important;
    }

    .hero__description {
        font-size: var(--body-mobile-medium) !important;
        margin-bottom: 28px !important;
    }

    .hero__cta {
        gap: 16px !important;
    }
}

/* Large Tier Hero */
@media (min-width: 769px) and (max-width: 991px) {
    .hero {
        min-height: 550px !important;
        padding: 100px 0 60px !important;
    }

    .hero__title {
        font-size: var(--h1-mobile-large) !important;
        line-height: 1.3 !important;
    }

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

    .hero__description {
        font-size: var(--body-mobile-large) !important;
    }
}

/* =========================================
   HOMEPAGE - VC MESSAGE SECTION
   ========================================= */

/* Small & Medium Tier - Stack layout */
@media (max-width: 768px) {
    .vc-message {
        padding: var(--section-padding-small) 0 !important;
    }

    .vc-message .row {
        flex-direction: column !important;
    }

    .vc-message__image {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto 24px !important;
    }

    .vc-message__content {
        text-align: center !important;
    }

    .vc-message__title {
        font-size: var(--h2-mobile-small) !important;
        margin-bottom: 16px !important;
    }

    .vc-message__text {
        font-size: var(--body-mobile-small) !important;
        line-height: 1.6 !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .vc-message {
        padding: var(--section-padding-medium) 0 !important;
    }

    .vc-message__title {
        font-size: var(--h2-mobile-medium) !important;
    }

    .vc-message__text {
        font-size: var(--body-mobile-medium) !important;
    }
}

/* Large Tier - Side by side */
@media (min-width: 769px) and (max-width: 991px) {
    .vc-message {
        padding: var(--section-padding-large) 0 !important;
    }

    .vc-message__title {
        font-size: var(--h2-mobile-large) !important;
    }
}

/* =========================================
   HOMEPAGE - STATS SECTION
   ========================================= */

@media (max-width: 480px) {
    .faculty-stats {
        padding: var(--section-padding-small) 0 !important;
    }

    .faculty-stats .row {
        gap: 20px !important;
    }

    .stat-card {
        padding: 20px !important;
        margin-bottom: 16px !important;
    }

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

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

@media (min-width: 481px) and (max-width: 768px) {
    .faculty-stats {
        padding: var(--section-padding-medium) 0 !important;
    }

    .stat-card {
        padding: 24px !important;
    }

    .stat-card__number {
        font-size: 2.5rem !important;
    }
}

/* =========================================
   HOMEPAGE - CONTACT SECTION
   ========================================= */

@media (max-width: 768px) {
    .contact-section {
        padding: var(--section-padding-small) 0 !important;
    }

    .contact-form {
        padding: 20px !important;
    }

    .contact-form .form-control,
    .contact-form .form-select {
        min-height: 48px !important;
        font-size: 1rem !important;
        padding: 12px 16px !important;
    }

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

    .contact-form .btn {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 1rem !important;
    }

    .contact-info {
        margin-top: 32px !important;
    }

    .contact-info__item {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }
}

/* =========================================
   PROGRAM PAGES - PAGE HEADER
   ========================================= */

@media (max-width: 480px) {
    .page-header {
        padding: 80px 0 40px !important;
        min-height: 250px !important;
    }

    .page-header__title {
        font-size: var(--h1-mobile-small) !important;
        margin-bottom: 12px !important;
    }

    .page-header__subtitle {
        font-size: var(--body-mobile-small) !important;
    }

    .breadcrumb {
        font-size: 0.75rem !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .page-header {
        padding: 100px 0 50px !important;
        min-height: 300px !important;
    }

    .page-header__title {
        font-size: var(--h1-mobile-medium) !important;
    }

    .page-header__subtitle {
        font-size: var(--body-mobile-medium) !important;
    }
}

@media (min-width: 769px) and (max-width: 991px) {
    .page-header {
        padding: 120px 0 60px !important;
    }

    .page-header__title {
        font-size: var(--h1-mobile-large) !important;
    }
}

/* =========================================
   PROGRAM PAGES - CONTENT SECTIONS
   ========================================= */

@media (max-width: 768px) {

    .program-overview,
    .program-courses,
    .program-careers,
    .program-admission {
        padding: var(--section-padding-small) 0 !important;
    }

    .section__title {
        font-size: var(--h2-mobile-small) !important;
        margin-bottom: 20px !important;
    }

    .section__description {
        font-size: var(--body-mobile-small) !important;
        margin-bottom: 24px !important;
    }

    /* Course List */
    .course-list {
        gap: 12px !important;
    }

    .course-item {
        padding: 16px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .course-item__code {
        font-size: 0.75rem !important;
        margin-bottom: 8px !important;
    }

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

    .course-item__credits {
        margin-top: 8px !important;
        font-size: 0.875rem !important;
    }

    /* Career Prospects */
    .career-grid {
        gap: 16px !important;
    }

    .career-card {
        padding: 20px !important;
    }

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

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

@media (min-width: 481px) and (max-width: 768px) {

    .program-overview,
    .program-courses,
    .program-careers,
    .program-admission {
        padding: var(--section-padding-medium) 0 !important;
    }

    .section__title {
        font-size: var(--h2-mobile-medium) !important;
    }

    .section__description {
        font-size: var(--body-mobile-medium) !important;
    }
}

/* =========================================
   FACULTY PAGE
   ========================================= */

@media (max-width: 768px) {
    .faculty-section {
        padding: var(--section-padding-small) 0 !important;
    }

    .faculty-grid {
        gap: 20px !important;
    }

    .faculty-card {
        padding: 20px !important;
    }

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

    .faculty-card__title {
        font-size: 0.875rem !important;
        margin-bottom: 12px !important;
    }

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

    .faculty-card__contact {
        margin-top: 16px !important;
        font-size: 0.875rem !important;
    }
}

/* =========================================
   NEWS & UPDATES PAGE
   ========================================= */

@media (max-width: 768px) {
    .news-section {
        padding: var(--section-padding-small) 0 !important;
    }

    .news-grid {
        gap: 20px !important;
    }

    .news-card {
        padding: 0 !important;
    }

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

    .news-card__content {
        padding: 20px !important;
    }

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

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

    .news-card__meta {
        font-size: 0.75rem !important;
        margin-top: 12px !important;
    }
}

/* =========================================
   CAREER PAGE
   ========================================= */

@media (max-width: 768px) {
    .career-section {
        padding: var(--section-padding-small) 0 !important;
    }

    .job-listing {
        padding: 20px !important;
        margin-bottom: 16px !important;
    }

    .job-listing__title {
        font-size: 1.125rem !important;
        margin-bottom: 12px !important;
    }

    .job-listing__details {
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
    }

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

    .job-listing__description {
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
        margin-bottom: 16px !important;
    }

    .job-listing__btn {
        width: 100% !important;
        min-height: 44px !important;
    }
}

/* =========================================
   QEC PAGE
   ========================================= */

@media (max-width: 768px) {
    .qec-section {
        padding: var(--section-padding-small) 0 !important;
    }

    .qec-content {
        padding: 20px !important;
    }

    .qec-content h2,
    .qec-content h3 {
        font-size: var(--h3-mobile-small) !important;
        margin-bottom: 16px !important;
    }

    .qec-content p,
    .qec-content li {
        font-size: var(--body-mobile-small) !important;
        line-height: 1.6 !important;
    }

    .qec-document-list {
        gap: 12px !important;
    }

    .qec-document {
        padding: 16px !important;
    }

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

/* =========================================
   TABLES - RESPONSIVE
   ========================================= */

@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    table {
        font-size: 0.875rem !important;
    }

    table th,
    table td {
        padding: 12px 8px !important;
        white-space: nowrap !important;
    }

    table th {
        font-size: 0.875rem !important;
    }
}

/* =========================================
   BUTTONS & FORMS - GLOBAL
   ========================================= */

@media (max-width: 991px) {

    /* Touch-friendly buttons */
    .btn {
        min-height: 44px !important;
        padding: 12px 24px !important;
        font-size: 0.9375rem !important;
    }

    .btn-sm {
        min-height: 38px !important;
        padding: 8px 16px !important;
        font-size: 0.875rem !important;
    }

    .btn-lg {
        min-height: 52px !important;
        padding: 16px 32px !important;
        font-size: 1.0625rem !important;
    }

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

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

    /* Form spacing */
    .mb-3 {
        margin-bottom: 20px !important;
    }
}

/* =========================================
   SECTION SPACING - GLOBAL
   ========================================= */

@media (max-width: 480px) {
    .section {
        padding: var(--section-padding-small) 0 !important;
    }

    .section__title {
        font-size: var(--h2-mobile-small) !important;
        margin-bottom: 16px !important;
    }

    .section__subtitle {
        font-size: 0.75rem !important;
        margin-bottom: 12px !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .section {
        padding: var(--section-padding-medium) 0 !important;
    }

    .section__title {
        font-size: var(--h2-mobile-medium) !important;
        margin-bottom: 20px !important;
    }
}

@media (min-width: 769px) and (max-width: 991px) {
    .section {
        padding: var(--section-padding-large) 0 !important;
    }

    .section__title {
        font-size: var(--h2-mobile-large) !important;
    }
}

/* =========================================
   CONTAINER PADDING
   ========================================= */

@media (max-width: 480px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* =========================================
   UTILITY CLASSES
   ========================================= */

@media (max-width: 768px) {
    .mobile-center {
        text-align: center !important;
    }

    .mobile-stack {
        flex-direction: column !important;
    }

    .mobile-full-width {
        width: 100% !important;
    }

    .mobile-hide {
        display: none !important;
    }
}