/* ==========================================================================
   ALPHAPLUS MOBILE RESPONSIVENESS - COMPREHENSIVE
   Master mobile stylesheet for homepage + all inner pages
   ========================================================================== */

/* --- GLOBAL MOBILE RESETS --- */
@media (max-width: 991px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    * {
        box-sizing: border-box !important;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    .container, .container-fluid {
        overflow-x: hidden;
    }

    /* Prevent horizontal scroll from absolute positioned elements */
    section, .hero, main, footer {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Reduce section padding globally */
    section {
        padding: 50px 15px !important;
    }

    /* Display headings smaller */
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.6rem !important; }
    h3 { font-size: 1.3rem !important; }
    .display-4, .display-5, .display-6 {
        font-size: 1.8rem !important;
    }

    /* Fix position-absolute glow spots from causing overflow */
    .glow-spot, 
    .position-absolute[style*="blur"],
    div[style*="filter: blur"] {
        display: none !important;
    }
}

/* =============================================
   HEADER & NAVBAR (Mobile)
   ============================================= */
@media (max-width: 767px) {
    /* Top action bar - compact on mobile */
    .top-action-bar {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    .top-action-bar .container {
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 5px !important;
    }

    .top-action-bar .d-flex.align-items-center.gap-3 {
        gap: 10px !important;
    }

    .top-action-bar .d-flex.align-items-center.gap-4 {
        gap: 10px !important;
    }

    .top-action-bar .small {
        font-size: 11px !important;
    }

    /* Navbar */
    .custom-navbar {
        padding: 10px 15px !important;
    }

    .custom-navbar .navbar-brand img {
        height: 40px !important;
    }

    /* Mobile menu dropdown styling */
    .navbar-collapse {
        max-height: 80vh;
        overflow-y: auto;
        padding: 15px 0;
    }

    .navbar-nav .nav-link {
        padding: 10px 15px !important;
        font-size: 14px !important;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .navbar-nav .dropdown-menu {
        background: rgba(255,255,255,0.05) !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .navbar-nav .dropdown-item {
        color: rgba(255,255,255,0.7) !important;
        padding: 8px 25px !important;
        font-size: 13px !important;
    }

    /* Submenus on mobile - stack them */
    .dropdown-submenu > .dropdown-menu {
        position: static !important;
        display: none;
        margin: 0 !important;
        padding-left: 15px !important;
    }

    .dropdown-submenu.show > .dropdown-menu {
        display: block;
    }

    .dropdown-submenu > a::after {
        float: right;
    }

    /* Book Demo button in navbar - full width on mobile */
    .navbar .d-flex.align-items-center .btn-solid {
        width: 100% !important;
        text-align: center !important;
        padding: 10px 20px !important;
        font-size: 13px !important;
    }

    .navbar .theme-toggle {
        width: 35px !important;
        height: 35px !important;
    }
}


/* =============================================
   TICKER SECTION (Mobile)
   ============================================= */
@media (max-width: 767px) {
    .ticker-preview-section {
        padding: 0 !important;
    }

    .new-ticker-container {
        padding: 0 !important;
    }

    .marquee-content-horizontal {
        font-size: 13px !important;
    }

    .marquee-content-horizontal .badge {
        font-size: 9px !important;
        padding: 3px 8px !important;
    }

    .ticker-item-text {
        font-size: 12px !important;
    }
}


/* =============================================
   VIDEO GALLERY SECTION (#NayeZamaneKaCareer)
   ============================================= */
@media (max-width: 767px) {
    /* Video section - 2 columns on mobile instead of 4 */
    #premiumVideoModal .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }

    #premiumVideoModal .modal-header {
        padding: 5px 10px !important;
    }

    .video-thumbnail-card {
        aspect-ratio: 16/9 !important;
    }

    .video-play-btn {
        width: 45px !important;
        height: 45px !important;
    }

    .video-play-btn i {
        font-size: 1rem !important;
    }

    /* Video title below thumbnail */
    .video-thumbnail-card + .mt-3 h5 {
        font-size: 0.7rem !important;
    }
}

@media (max-width: 575px) {
    /* On very small screens, show 2 videos per row */
    .row.g-4 > .col-md-6.col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}


/* =============================================
   EXAMS & PAPERS SECTION (Mobile)
   ============================================= */
@media (max-width: 767px) {
    /* Tab navigation - scrollable on mobile */
    .nav-pills .nav-link {
        font-size: 12px !important;
        padding: 8px 14px !important;
        white-space: nowrap !important;
    }

    .nav-pills {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nav-pills::-webkit-scrollbar {
        display: none;
    }

    /* Course cards in tabs */
    .course-card {
        margin-bottom: 15px !important;
    }

    .course-card .card-body {
        padding: 15px !important;
    }
}


/* =============================================
   ALUMNI NETWORK & TESTIMONIALS (Mobile)
   ============================================= */
@media (max-width: 767px) {
    .alumni-cards-wrapper {
        overflow: hidden !important;
    }

    .alumni-card-item {
        min-width: 280px !important;
    }

    /* Testimonial cards */
    .glass-panel.p-5 {
        padding: 20px !important;
    }

    .glass-panel .fa-quote-right {
        font-size: 40px !important;
        top: 10px !important;
        right: 10px !important;
    }
}


/* =============================================
   UPCOMING LIVE BATCHES SECTION (Mobile)
   ============================================= */
@media (max-width: 767px) {
    .batch-item-symmetric {
        padding: 12px 15px !important;
    }

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

    .play-icon-box {
        margin-right: 12px !important;
    }

    /* Enroll Now button */
    .btn-solid.rounded-pill {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 20px !important;
    }
}


/* =============================================
   CONTACT / LEAD FORM SECTION (Mobile)
   ============================================= */
@media (max-width: 767px) {
    #contact .display-5 {
        font-size: 1.5rem !important;
    }

    #contact .col-lg-6.offset-lg-1 {
        margin-top: 30px !important;
    }

    #contact .bg-white.p-5 {
        padding: 25px !important;
    }

    #contact .form-control-lg {
        font-size: 14px !important;
        padding: 10px 15px !important;
    }
}


/* =============================================
   PRE-FOOTER CTA (Mobile)
   ============================================= */
@media (max-width: 767px) {
    .pre-footer-cta {
        padding: 40px 20px !important;
        text-align: center !important;
    }

    .pre-footer-cta h2 {
        font-size: 1.5rem !important;
    }

    .pre-footer-cta p {
        font-size: 0.95rem !important;
    }

    .pre-footer-cta div[style*="display:flex"] {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .pre-footer-cta .btn-solid,
    .pre-footer-cta .btn-outline {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 20px !important;
    }
}


/* =============================================
   FOOTER (Mobile)
   ============================================= */
@media (max-width: 767px) {
    /* Maps - stack on mobile */
    body .footer-maps-row {
        grid-template-columns: 1fr !important;
    }

    body .footer-maps-row iframe {
        height: 220px !important;
    }

    /* Footer columns - single column */
    body .footer-body-row .row {
        text-align: center !important;
    }

    body .footer-body-row .col-lg-3,
    body .footer-body-row .col-lg-2,
    body .footer-body-row .col-lg-4 {
        margin-bottom: 30px;
    }

    body .footer-logo-col img {
        margin: 0 auto 20px auto !important;
    }

    body .footer-social-links {
        justify-content: center !important;
    }

    body .footer-contact-list li {
        justify-content: center !important;
        text-align: left;
    }

    body .footer-nav-links {
        text-align: center !important;
    }

    /* Legal bar - stack links */
    body .footer-legal-bar .container {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
    }

    /* Fixed bottom action bar - more compact */
    body .footer-action-bar {
        padding: 8px 0 !important;
    }

    body .footer-action-bar .container {
        gap: 5px !important;
        justify-content: space-around !important;
    }

    body .footer-action-link {
        flex-direction: column !important;
        gap: 2px !important;
        font-size: 10px !important;
        text-align: center;
    }

    body .footer-action-link i {
        font-size: 18px !important;
    }

    body .footer-action-link span {
        font-size: 9px !important;
        line-height: 1.2 !important;
    }
}


/* =============================================
   FLOATING WIDGETS (Mobile)
   ============================================= */
@media (max-width: 767px) {
    .floating-widgets {
        bottom: 70px !important;
        right: 15px !important;
    }

    .floating-btn {
        width: 50px !important;
        height: 50px !important;
    }

    .whatsapp-btn {
        bottom: 70px !important;
        left: 15px !important;
    }
}


/* =============================================
   OFFCANVAS BATCHES PANEL (Mobile)
   ============================================= */
@media (max-width: 767px) {
    #offcanvasBatches {
        height: 95vh !important;
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
    }

    #offcanvasBatches .offcanvas-header {
        padding: 15px !important;
    }

    #offcanvasBatches .offcanvas-title {
        font-size: 1rem !important;
    }

    #offcanvasBatches .table {
        font-size: 12px !important;
    }

    #offcanvasBatches .table th,
    #offcanvasBatches .table td {
        padding: 8px 6px !important;
        font-size: 11px !important;
    }

    #offcanvasBatches .accordion-button {
        font-size: 1rem !important;
        padding: 12px !important;
    }
}


/* =============================================
   MODAL VIDEO POPUP (Mobile)
   ============================================= */
@media (max-width: 767px) {
    #premiumVideoModal .modal-dialog {
        margin: 15px !important;
    }

    #premiumVideoModal .btn-close {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.8rem !important;
    }
}


/* =============================================
   INNER PAGES - CMS PAGES (Mobile)
   ============================================= */
@media (max-width: 767px) {
    /* CMS content pages */
    .cms-content-wrapper {
        padding: 0 10px !important;
    }

    .cms-content-wrapper img {
        width: 100% !important;
        height: auto !important;
    }

    .cms-content-wrapper table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
    }

    /* Page headers with breadcrumbs */
    .page-header {
        padding: 30px 15px !important;
    }

    .page-header h1 {
        font-size: 1.5rem !important;
    }

    .page-header .breadcrumb {
        font-size: 12px !important;
    }
}


/* =============================================
   INNER PAGES - COURSE DETAIL PAGES (Mobile)
   ============================================= */
@media (max-width: 767px) {
    /* Course page hero banners */
    .course-hero-banner {
        min-height: auto !important;
        padding: 40px 15px !important;
    }

    .course-hero-banner h1 {
        font-size: 1.6rem !important;
    }

    /* Course feature grids */
    .row.g-4 > [class*="col-lg-"] {
        margin-bottom: 15px;
    }

    /* Admission process steps */
    .position-absolute.d-none.d-lg-block {
        display: none !important;
    }

    /* Course enrollment CTA bars */
    .bg-warning.rounded-pill,
    .btn-dark.rounded-pill {
        width: 100% !important;
        text-align: center !important;
    }
}


/* =============================================
   INNER PAGES - CONTACT PAGE (Mobile)
   ============================================= */
@media (max-width: 767px) {
    .contact-info-card {
        padding: 20px !important;
    }

    .contact-info-card i {
        font-size: 1.5rem !important;
    }
}


/* =============================================
   INNER PAGES - RESULTS PAGE (Mobile)
   ============================================= */
@media (max-width: 767px) {
    .table-responsive {
        border: none !important;
    }

    .table-responsive table {
        font-size: 12px !important;
    }

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

    /* Achiever cards */
    .achiever-card {
        padding: 15px !important;
    }

    .achiever-card img {
        width: 60px !important;
        height: 60px !important;
    }
}


/* =============================================
   INNER PAGES - BLOG (Mobile)
   ============================================= */
@media (max-width: 767px) {
    .blog-card {
        margin-bottom: 20px !important;
    }

    .blog-card .card-body {
        padding: 15px !important;
    }

    .blog-card .card-title {
        font-size: 1rem !important;
    }

    .blog-card .card-text {
        font-size: 0.85rem !important;
    }
}


/* =============================================
   INNER PAGES - GALLERY (Mobile)
   ============================================= */
@media (max-width: 767px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .gallery-grid img {
        border-radius: 8px !important;
    }
}


/* =============================================
   INNER PAGES - BOOK DEMO (Mobile)
   ============================================= */
@media (max-width: 767px) {
    .book-demo-form {
        padding: 20px !important;
    }

    .book-demo-form .form-control-lg {
        font-size: 14px !important;
    }
}


/* =============================================
   INNER PAGES - SHOP / E-COMMERCE (Mobile)
   ============================================= */
@media (max-width: 767px) {
    /* Product grid */
    .product-card {
        margin-bottom: 15px !important;
    }

    .product-card .card-body {
        padding: 12px !important;
    }

    /* Cart page */
    .cart-item {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Checkout page */
    .checkout-summary {
        margin-top: 20px !important;
    }
}


/* =============================================
   INNER PAGES - STUDENT PORTAL (Mobile)
   ============================================= */
@media (max-width: 767px) {
    .student-dashboard .card {
        margin-bottom: 15px !important;
    }

    .student-dashboard .progress {
        height: 8px !important;
    }

    .student-dashboard .table {
        font-size: 12px !important;
    }
}


/* =============================================
   INNER PAGES - PUBLICATIONS (Mobile)
   ============================================= */
@media (max-width: 767px) {
    .publication-card {
        padding: 15px !important;
    }

    .publication-card h5 {
        font-size: 1rem !important;
    }
}


/* =============================================
   UTILITY: SMALL SCREEN FIXES (< 480px)
   ============================================= */
@media (max-width: 480px) {
    h1 { font-size: 1.6rem !important; }
    h2 { font-size: 1.3rem !important; }
    h3 { font-size: 1.1rem !important; }

    .display-4, .display-5, .display-6 {
        font-size: 1.5rem !important;
    }

    /* More compact sections */
    section {
        padding: 35px 12px !important;
    }

    /* Even smaller stat text */
    .text-5xl, .text-4xl, .text-3xl {
        font-size: 1.5rem !important;
    }

    /* Video grid - single column on tiny screens */
    .row.g-4 > .col-md-6.col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 5px !important;
    }

    /* Mini text */
    .small, small {
        font-size: 0.75rem !important;
    }

    .fs-5 {
        font-size: 0.95rem !important;
    }

    .fs-4 {
        font-size: 1.1rem !important;
    }

    /* Tables always scrollable */
    .table-responsive {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Footer action bar - icon only on very small */
    body .footer-action-link span {
        display: none !important;
    }

    body .footer-action-link i {
        font-size: 22px !important;
    }
}


/* =============================================
   LANDSCAPE MODE FIXES
   ============================================= */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto !important;
        padding: 30px 5% !important;
    }

    .founder-img {
        max-height: 250px !important;
    }

    #offcanvasBatches {
        height: 100vh !important;
    }
}


/* =============================================
   TABLET SPECIFIC (768px - 991px)
   ============================================= */
@media (min-width: 768px) and (max-width: 991px) {
    .display-4 {
        font-size: 2.2rem !important;
    }

    /* 2-column grids instead of 3/4 on tablet */
    .row > .col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

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

    /* Course cards */
    .course-scroll-item {
        width: 320px !important;
    }

    /* Footer - 2 columns on tablet */
    body .footer-body-row .row {
        justify-content: center;
    }
}


/* =============================================
   SAFE AREA INSETS (Notch phones)
   ============================================= */
@supports (padding: max(0px)) {
    .top-action-bar {
        padding-left: max(10px, env(safe-area-inset-left)) !important;
        padding-right: max(10px, env(safe-area-inset-right)) !important;
    }

    body .footer-action-bar {
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }

    body {
        padding-bottom: max(60px, calc(60px + env(safe-area-inset-bottom))) !important;
    }
}


/* =============================================
   TOUCH-FRIENDLY: Increase tap targets
   ============================================= */
@media (hover: none) and (pointer: coarse) {
    /* Links & buttons need bigger tap targets */
    .nav-link,
    .dropdown-item,
    .footer-nav-links a,
    .footer-action-link {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Disable hover effects that don't make sense on touch */
    .card-hover:hover,
    .gradient-border-card:hover,
    .course-card:hover {
        transform: none !important;
    }

    /* Make form inputs comfortable */
    input, select, textarea {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }
}


/* =============================================
   PRINT STYLES
   ============================================= */
@media print {
    .top-action-bar,
    .floating-widgets,
    .whatsapp-btn,
    .footer-action-bar,
    .navbar-toggler,
    .theme-toggle {
        display: none !important;
    }

    body {
        padding: 0 !important;
    }

    section {
        page-break-inside: avoid;
    }
}