/**
 * Mobile Responsive Styles for All Frontend Pages
 * Comprehensive mobile-first responsive design
 * Ikigugu Group - 2025
 *
 * BREAKPOINTS (align with training, internships, industrial-it):
 * - Phone:        max-width: 767px  (single column, stacked, touch-friendly)
 * - Small phone:  max-width: 480px  (reduced typography, tighter padding)
 * - Tablet:       768px - 1023px    (2 columns where appropriate, larger padding)
 * - Desktop:     1024px+           (multi-column grids, full layout)
 */

/* ============================================
   GLOBAL MOBILE RESPONSIVE RULES
   ============================================ */

/* Base Mobile Styles (Mobile First) */
@media (max-width: 767px) {
    /* Prevent horizontal scroll on all pages (index, about, cctv, rnd, multimedia, etc.) */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Container adjustments */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Typography scaling */
    h1, .hero__title {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    h2, .section__title {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 1.5rem !important;
    }

    h4 {
        font-size: 1.25rem !important;
    }

    /* Hero sections */
    .hero {
        padding: 4rem 0 2rem !important;
        min-height: auto !important;
    }

    .hero__title {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }

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

    .hero__content {
        padding: 1.5rem 1rem !important;
    }

    .hero__actions {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .hero__actions .btn {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Grid layouts - convert to single column */
    .grid,
    .grid-2,
    .grid-3,
    .grid-4,
    .services-grid,
    .portfolio-grid,
    .modules-grid,
    .team-grid,
    .testimonials-grid,
    .features-grid,
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Cards */
    .card,
    .service-card,
    .portfolio-card,
    .module-card,
    .team-card,
    .testimonial-card {
        width: 100% !important;
        margin-bottom: 1.5rem;
    }

    /* Sections */
    .section {
        padding: 3rem 0 !important;
    }

    /* Closer spacing between hero and first content section on mobile */
    .hero + .section {
        padding-top: 2rem !important;
    }

    .section__header {
        margin-bottom: 2rem !important;
        text-align: center;
    }

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

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

    /* Buttons */
    .btn {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9rem !important;
        min-height: 44px; /* Touch-friendly */
    }

    .btn--lg {
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
    }

    /* Forms */
    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-group label {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        min-height: 44px; /* Touch-friendly */
    }

    .form-row {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* Tables - make scrollable */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
        font-size: 0.875rem;
    }

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

    /* ===== Index, About, Service pages (CCTV, RND, Multimedia) - same logic as training/industrial-it ===== */
    .hero__content-wrapper {
        max-width: 100% !important;
        padding: 1rem 1rem !important;
        box-sizing: border-box;
    }

    .hero__trust {
        padding: 1.25rem 1rem !important;
    }

    .hero__trust-metrics {
        flex-direction: column;
        gap: 1rem;
    }

    .data-showcase__container {
        padding: 1.5rem 1rem !important;
    }

    .data-metrics {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
    }

    .spotlight__container {
        flex-direction: column !important;
    }

    /* About page */
    .hero--about .hero__title {
        font-size: 2rem !important;
    }

    .mission-vision__grid {
        grid-template-columns: 1fr !important;
    }

    .story__content {
        flex-direction: column !important;
    }

    .values-grid {
        grid-template-columns: 1fr !important;
    }

    /* Service pages: CCTV, RND, Multimedia - single column, scroll background, smaller type */
    .hero--cctv,
    .hero--rnd,
    .hero--multimedia,
    .hero--hosting,
    .hero--marketing,
    .hero--ai {
        min-height: auto !important;
        padding: 3rem 0 !important;
        background-attachment: scroll !important;
    }

    .hero--cctv .hero__content,
    .hero--rnd .hero__content,
    .hero--multimedia .hero__content,
    .hero--hosting .hero__content,
    .hero--marketing .hero__content,
    .hero--ai .hero__content,
    .hero--ai__content {
        padding: 1.5rem 1rem !important;
        max-width: 100% !important;
    }

    .hero--cctv .hero__title,
    .hero--rnd .hero__title,
    .hero--multimedia .hero__title,
    .hero--hosting .hero__title,
    .hero--marketing .hero__title,
    .hero--ai .hero__title {
        font-size: 2rem !important;
    }

    .hero--cctv .hero__subtitle,
    .hero--rnd .hero__subtitle,
    .hero--multimedia .hero__subtitle,
    .hero--hosting .hero__subtitle,
    .hero--marketing .hero__subtitle,
    .hero--ai .hero__subtitle {
        font-size: 1rem !important;
    }

    .hero--cctv__stats,
    .hero--rnd__stats,
    .hero--multimedia__stats,
    .hero--hosting__stats,
    .hero--marketing__stats,
    .hero--ai__stats {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    /* AI hero split grid -> single column */
    .hero--ai__grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* AI/Hosting/Marketing first content sections – reduce big top/bottom spacing on phones */
    .ai-solutions-showcase,
    .ai-workflow,
    .process-timeline {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .ai-capabilities {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }

    .camera-types-grid,
    .solutions-grid,
    .research-areas-grid,
    .service-types-grid,
    .equipment-grid,
    .client-work-grid,
    .pricing-packages-grid,
    .dashboard-grid,
    .partners-grid,
    .tech-features-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    /* Background images - disable fixed attachment on mobile */
    .cta-section,
    .cta,
    .hero__image-bg,
    [style*="background-attachment: fixed"] {
        background-attachment: scroll !important;
        background-size: cover !important;
    }

    /* Navigation - Mobile Menu */
    .nav {
        position: relative;
        z-index: 1000;
    }

    .nav__brand {
        z-index: 1001;
        position: relative;
    }

    .nav__toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative;
        z-index: 1001;
        background: transparent;
        border: none;
        padding: 0.5rem;
        cursor: pointer;
        font-size: 1.5rem;
        color: var(--neutral-700);
        transition: color 0.3s ease;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }

    .nav__toggle:hover,
    .nav__toggle:focus {
        color: var(--primary-600);
        outline: 2px solid var(--primary-200);
        outline-offset: 2px;
    }

    .nav__toggle[aria-expanded="true"] {
        color: var(--primary-600);
    }

    .nav__toggle i {
        pointer-events: none;
    }

    /* Mobile Menu Backdrop */
    .nav__backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        pointer-events: none;
    }

    .nav__backdrop.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Mobile Menu - Force display and visibility */
    .nav__menu {
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        border-bottom: 2px solid var(--neutral-200);
        padding: 1rem !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 999 !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        overflow-x: hidden;
        pointer-events: auto;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
    }

    .nav__menu.nav__menu--open,
    .nav__menu.show-menu {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
    }

    /* Ensure menu is always visible when open */
    #nav-menu.nav__menu--open,
    #nav-menu.show-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* Mobile Menu Links - Ensure all links are visible */
    .nav__menu .nav__link,
    #nav-menu .nav__link {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem 1.25rem;
        width: 100%;
        text-align: left;
        color: var(--neutral-700) !important;
        font-size: 1rem;
        font-weight: 500;
        border-radius: 8px;
        transition: all 0.2s ease;
        min-height: 44px;
        pointer-events: auto;
        position: relative;
        z-index: 1;
        border: 1px solid transparent;
        text-decoration: none;
    }

    .nav__menu .nav__link:hover,
    .nav__menu .nav__link:focus {
        background: var(--primary-50);
        color: var(--primary-700);
        border-color: var(--primary-200);
        transform: translateX(4px);
    }

    .nav__menu .nav__link.nav__link--active {
        background: var(--primary-100);
        color: var(--primary-700);
        border-color: var(--primary-300);
        font-weight: 600;
    }

    .nav__menu .nav__link i {
        font-size: 1.125rem;
        width: 20px;
        text-align: center;
    }

    /* Mobile Menu Button */
    .nav__menu .btn,
    #nav-menu .btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100%;
        margin-top: 0.5rem;
        padding: 1rem 1.25rem;
        min-height: 44px;
        justify-content: center;
        align-items: center;
        pointer-events: auto;
        position: relative;
        z-index: 1;
        text-decoration: none;
    }

    /* Ensure all menu items are visible */
    #nav-menu.nav__menu--open a,
    #nav-menu.show-menu a,
    #nav-menu.nav__menu--open .nav__link,
    #nav-menu.show-menu .nav__link,
    #nav-menu.nav__menu--open .btn,
    #nav-menu.show-menu .btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Override any display:none rules that might hide the menu */
    @media (max-width: 767px) {
        .nav__menu.nav__menu--open,
        .nav__menu.show-menu,
        #nav-menu.nav__menu--open,
        #nav-menu.show-menu {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            transform: translateY(0) !important;
        }

        /* Ensure menu is above everything */
        .nav__menu.nav__menu--open,
        .nav__menu.show-menu {
            z-index: 9999 !important;
        }

        /* Make sure header doesn't cover menu */
        .header {
            z-index: 1000;
        }
    }

    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden !important;
        position: fixed;
        width: 100%;
        height: 100%;
    }

    /* Ensure header stays fixed on mobile */
    .header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* Footer */
    .footer {
        padding: 2rem 0 !important;
    }

    .footer__grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Spacing adjustments */
    .mb-4, .my-4 {
        margin-bottom: 1.5rem !important;
    }

    .mt-4, .my-4 {
        margin-top: 1.5rem !important;
    }

    .p-4 {
        padding: 1rem !important;
    }

    .px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}

/* ============================================
   SPECIFIC PAGE RESPONSIVE STYLES
   ============================================ */

/* Homepage (index.php) */
@media (max-width: 767px) {
    .hero__title-highlight {
        font-size: 2rem !important;
    }

    .hero__content-wrapper {
        padding: 1rem !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .stat-item {
        padding: 1rem !important;
    }

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

/* About Page */
@media (max-width: 767px) {
    .team-grid {
        grid-template-columns: 1fr !important;
    }

    .team-card {
        text-align: center;
    }

    .mission-vision-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Services Page */
@media (max-width: 767px) {
    .service-card {
        padding: 1.5rem !important;
    }

    .service-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.5rem !important;
    }

    .pricing-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Contact Page */
@media (max-width: 767px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
    }

    .contact-form {
        padding: 1.5rem !important;
    }

    .contact-info {
        margin-top: 2rem;
    }

    .map-container {
        height: 300px !important;
    }
}

/* Portfolio Page */
@media (max-width: 767px) {
    .portfolio-filter {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .portfolio-filter button {
        width: 100% !important;
    }

    .portfolio-card {
        margin-bottom: 2rem;
    }

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

/* Modules/Learning Hub Page */
@media (max-width: 767px) {
    .module-card {
        padding: 1rem !important;
    }

    .module-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .module-card__actions {
        width: 100%;
        flex-direction: column;
    }

    .module-card__actions .btn {
        width: 100%;
    }

    .department-selector {
        flex-direction: column !important;
    }

    .department-tab {
        width: 100% !important;
    }
}

/* Books Page */
@media (max-width: 767px) {
    .books-grid {
        grid-template-columns: 1fr !important;
    }

    .book-card {
        padding: 1rem !important;
    }

    .book-card__cover {
        width: 100% !important;
        max-width: 200px;
        margin: 0 auto 1rem;
    }
}

/* Blog Page */
@media (max-width: 767px) {
    .blog-grid {
        grid-template-columns: 1fr !important;
    }

    .blog-card {
        margin-bottom: 2rem;
    }

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

/* Careers Page */
@media (max-width: 767px) {
    .careers-grid {
        grid-template-columns: 1fr !important;
    }

    .career-card {
        padding: 1.5rem !important;
    }

    .career-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* Internships Page */
@media (max-width: 767px) {
    .programs-grid {
        grid-template-columns: 1fr !important;
    }

    .program-card {
        margin-bottom: 2rem;
    }

    .tracks-grid {
        grid-template-columns: 1fr !important;
    }

    .track-card {
        padding: 1rem !important;
    }
}

/* Team Page */
@media (max-width: 767px) {
    .team-grid {
        grid-template-columns: 1fr !important;
    }

    .team-member {
        text-align: center;
    }

    .team-member__image {
        width: 150px !important;
        height: 150px !important;
        margin: 0 auto 1rem;
    }
}

/* Payment Page */
@media (max-width: 767px) {
    .payment-hero {
        padding: 2rem 0 !important;
    }

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

    .payment-form {
        padding: 1rem !important;
    }

    .payment-summary {
        margin-top: 2rem;
        padding: 1rem !important;
    }

    .payment-methods {
        grid-template-columns: 1fr !important;
    }

    .payment-method-card {
        padding: 1rem !important;
    }

    .payment-details-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Learning Hub Page */
@media (max-width: 767px) {
    .cta-learning {
        min-height: auto !important;
        padding: 2rem 0 !important;
    }

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

    .cta-learning__benefits {
        flex-direction: column;
        align-items: center;
    }

    .courses-grid,
    .books-grid {
        grid-template-columns: 1fr !important;
    }
}

/* FAQ Page */
@media (max-width: 767px) {
    .faq-item {
        padding: 1rem !important;
    }

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

/* Partnership Page */
@media (max-width: 767px) {
    .partnership-form {
        padding: 1.5rem !important;
    }

    .partnership-tiers {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   TABLET RESPONSIVE STYLES (768px - 1023px)
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
        max-width: 100%;
        box-sizing: border-box;
    }

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

    /* Index page */
    .hero__content-wrapper {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* About page */
    .mission-vision__grid {
        grid-template-columns: 1fr !important;
    }

    .values-grid {
        grid-template-columns: 1fr !important;
    }

    .grid-3,
    .grid-4,
    .services-grid,
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .modules-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Service pages: CCTV, RND, Multimedia - 2 cols on tablet */
    .hero--cctv .hero__title,
    .hero--rnd .hero__title,
    .hero--multimedia .hero__title {
        font-size: 2.5rem !important;
    }

    .camera-types-grid,
    .solutions-grid,
    .research-areas-grid,
    .service-types-grid,
    .equipment-grid,
    .client-work-grid,
    .pricing-packages-grid,
    .dashboard-grid,
    .partners-grid,
    .tech-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem;
    }
}

/* ============================================
   SMALL PHONE (480px) - tighter layout
   ============================================ */

@media (max-width: 480px) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .hero__title,
    .hero--about .hero__title,
    .hero--cctv .hero__title,
    .hero--rnd .hero__title,
    .hero--multimedia .hero__title {
        font-size: 1.75rem !important;
    }

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

    .data-metrics {
        grid-template-columns: 1fr !important;
    }

    .hero__content-wrapper {
        padding: 0.75rem 0.5rem !important;
    }

    .hero--cctv .hero__content,
    .hero--rnd .hero__content,
    .hero--multimedia .hero__content {
        padding: 1rem 0.75rem !important;
    }
}

/* ============================================
   TOUCH-FRIENDLY IMPROVEMENTS
   ============================================ */

@media (hover: none) and (pointer: coarse) {
    /* Ensure all interactive elements are touch-friendly */
    button,
    .btn,
    a.btn,
    input[type="submit"],
    input[type="button"],
    select,
    .nav__link {
        min-height: 44px;
        min-width: 44px;
    }

    /* Increase tap target sizes */
    .nav__link {
        padding: 0.75rem 1rem !important;
    }

    /* Prevent text selection on tap */
    button,
    .btn {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
}

/* ============================================
   LANDSCAPE ORIENTATION ON MOBILE
   ============================================ */

@media (max-width: 767px) and (orientation: landscape) {
    .hero {
        min-height: auto !important;
        padding: 2rem 0 !important;
    }

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

    .section {
        padding: 2rem 0 !important;
    }
}

/* ============================================
   ADDITIONAL MOBILE FIXES
   ============================================ */

/* Fix for images in hero sections */
@media (max-width: 767px) {
    .hero__image-container {
        height: 300px !important;
        margin-bottom: 2rem;
    }

    .hero__img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    /* Fix hero grid on mobile */
    .hero__grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }
}

/* Fix for modals and overlays */
@media (max-width: 767px) {
    .modal,
    .modal-overlay,
    .purchase-preview-modal {
        padding: 1rem !important;
    }

    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 1rem auto !important;
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* Fix for cards with images */
@media (max-width: 767px) {
    .card__image,
    .service-card__image,
    .portfolio-card__image,
    .module-card__image {
        height: 200px !important;
    }
}

/* Fix for text overflow */
@media (max-width: 767px) {
    * {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word;
    }
}

/* Fix for flex containers */
@media (max-width: 767px) {
    .flex,
    .d-flex {
        flex-wrap: wrap !important;
    }

    .justify-content-between {
        justify-content: center !important;
        gap: 1rem;
    }
}

/* ============================================
   UTILITY CLASSES FOR MOBILE
   ============================================ */

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

@media (min-width: 768px) {
    .mobile-hidden {
        display: block !important;
    }

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

.mobile-only {
    display: block !important;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .nav,
    .footer,
    .btn,
    .hero__actions,
    .form-navigation {
        display: none !important;
    }

    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }

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