/* ===== MOBILE PERFECTION - COMPLETE FIX ===== */
/* Distinguished Engineer - Production Grade */

@media (max-width: 768px) {

    /* REMOVE NOTIFICATION POPUP ON MOBILE */
    .notification-toast,
    #notificationToast {
        display: none !important;
    }

    /* ===== TYPOGRAPHY: COMPACT & PROFESSIONAL ===== */
    html {
        font-size: 14px !important;
        /* Reduced from 16px for more compact UI */
    }

    body {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }

    p,
    li,
    span {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    /* Reduce huge headers */
    h1 {
        font-size: 1.75rem !important;
        /* More normal mobile size */
        line-height: 1.1 !important;
    }

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

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

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

    /* ===== CRITICAL: TOUCH TARGETS (Optimized Height) ===== */
    button,
    .btn,
    .btn-hero-green,
    .btn-hero-white,
    a.btn,
    .theme-toggle-btn,
    .mobile-menu-btn,
    .nav-link {
        min-height: 40px !important;
        /* Slightly more compact but still touchable */
        padding: 0.6rem 1.2rem !important;
        font-size: 0.9rem !important;
    }

    /* Close buttons - made smaller */
    .modal-close,
    .close-modal,
    .close-btn {
        min-width: 36px !important;
        min-height: 36px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 1.1rem !important;
    }

    /* MODAL CONTENT SCALING */
    .modal-content,
    .application-modal {
        padding: 1.25rem !important;
        border-radius: 12px !important;
    }

    /* INPUTS SCALING */
    input,
    textarea,
    select {
        min-height: 40px !important;
        padding: 0.6rem 0.8rem !important;
        font-size: 0.95rem !important;
    }

    /* ===== SPACING: TIGHTER LAYOUT ===== */
    .section {
        padding: 1rem 0.75rem !important;
    }

    .container {
        padding: 0 1.5rem !important;
    }

    .edge-card,
    .testimonial-card {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }

    /* ===== JOBS CAROUSEL: 2 CARDS VISIBLE ===== */
    .jobs-carousel {
        display: flex !important;
        gap: 0.5rem !important;
        padding: 0.5rem !important;
        padding-bottom: 1.5rem !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .job-card {
        min-width: calc(48% - 0.25rem) !important;
        flex: 0 0 calc(48% - 0.25rem) !important;
        padding: 0.5rem !important;
        min-height: 180px !important;
        scroll-snap-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        gap: 0.25rem !important;
        margin-bottom: 0 !important;
    }

    .job-card .job-icon {
        font-size: 1.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .job-card .job-title {
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 !important;
    }

    .job-card .job-company {
        font-size: 0.65rem !important;
        margin-bottom: 0.25rem !important;
    }

    .job-card .job-details {
        flex-direction: column !important;
        gap: 0.15rem !important;
        margin-bottom: 0.5rem !important;
    }

    .job-card .job-details span {
        font-size: 0.55rem !important;
        padding: 0 !important;
    }

    .job-card .btn-primary {
        width: 100% !important;
        padding: 0.35rem !important;
        font-size: 0.6rem !important;
        min-height: 30px !important;
    }

    /* ===== HEADER: COMPACT & FUNCTIONAL ===== */
    .header {
        height: 60px !important;
        padding: 0 1rem !important;
    }

    .header-left {
        gap: 0.5rem !important;
    }

    .nav {
        display: none;
    }

    /* ===== MODALS: PERFECT UX ===== */
    .modal-overlay {
        padding: 1rem !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    .modal-content,
    .application-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90vh !important;
        margin: 1rem auto !important;
        padding: 1rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ===== FORMS: TOUCH-OPTIMIZED ===== */
    input,
    textarea,
    select {
        min-height: 48px !important;
        padding: 0.85rem 1rem !important;
        font-size: 1rem !important;
    }

    /* ===== COMPACT 2X2 GRID LAYOUT ===== */
    .partner-grid,
    .bento-grid,
    .testimonial-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Adjust 3rd item to span full width if it sits alone */
    .partner-grid>div:last-child:nth-child(odd),
    .bento-grid>div:last-child:nth-child(odd),
    .testimonial-grid>div:last-child:nth-child(odd) {
        grid-column: span 2 !important;
    }

    /* Multi-Content Sections (Full Width for Tags/Lists) */
    .industry-grid,
    .pricing-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        width: 100% !important;
    }

    .trust-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.3rem !important;
        width: 100% !important;
    }

    /* Cards in 2x2 Grid Layout */
    .partner-grid>div,
    .bento-grid>div,
    .testimonial-grid>div,
    .trust-grid>div {
        padding: 0.85rem 0.5rem !important;
        min-height: 150px !important;
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 0 !important;
        background: rgba(15, 23, 42, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* Cards in Full Width Rows (Industry & Pricing) */
    .industry-grid>div,
    .pricing-card {
        padding: 1.5rem !important;
        min-height: auto !important;
        border-radius: 20px !important;
        display: block !important;
        width: 100% !important;
        background: rgba(15, 23, 42, 0.8) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* Prevent text clamping in full-width cards */
    .industry-grid p,
    .pricing-card p {
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        font-size: 0.9rem !important;
    }

    .industry-grid .category-title,
    .pricing-card h3 {
        font-size: 1.25rem !important;
    }

    /* Typography scaling - Compact & Readable */
    .partner-grid h3,
    .bento-grid h3,
    .industry-grid .category-title,
    .testimonial-grid h4,
    .trust-grid h4,
    .edge-card h3,
    .salary-range {
        font-size: 0.85rem !important;
        margin: 0.35rem 0 !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
    }

    .partner-grid p,
    .bento-grid p,
    .industry-grid p,
    .testimonial-grid p,
    .trust-grid p,
    .edge-card p,
    .salary-label,
    .fee-label,
    .fee-note {
        font-size: 0.65rem !important;
        line-height: 1.3 !important;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0 !important;
    }

    .fee-amount {
        font-size: 0.75rem !important;
        margin: 0.15rem 0 !important;
        font-weight: 900 !important;
    }

    /* Icon & Wrapper scaling */
    .partner-grid i,
    .bento-grid i,
    .industry-grid i,
    .testimonial-grid i,
    .trust-grid i,
    .edge-card i,
    .tier-icon i {
        font-size: 1rem !important;
        margin-bottom: 0.35rem !important;
    }

    /* Special handling for auto-wrappers */
    .partner-grid div[style*="width: 55px"],
    .edge-icon,
    .trust-grid div[style*="width: 70px"],
    .trust-grid div[style*="width: 45px"] {
        width: 32px !important;
        height: 32px !important;
        margin: 0 auto 0.35rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Buttons in rows */
    .btn-tier {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.5rem !important;
        min-height: 28px !important;
        width: 90% !important;
        margin-top: 0.3rem !important;
    }

    /* Hide long labels */
    .clickable-partner-card div:last-child {
        display: none !important;
    }

    /* ===== OVERFLOW FIX ===== */
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* ===== MOBILE CONTACT HUB: PREMIUM CARDS ===== */
    .mobile-contact-hub {
        position: fixed;
        bottom: 85px;
        right: 15px;
        width: 280px;
        background: rgba(15, 23, 42, 0.98);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        z-index: 10000;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
        display: none;
        flex-direction: column;
        overflow: hidden;
        animation: slideInHub 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    }

    .hub-header {
        background: rgba(56, 239, 125, 0.1);
        padding: 12px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .hub-header h3 {
        font-size: 0.85rem !important;
        color: #38ef7d !important;
        margin: 0 !important;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .close-hub {
        background: transparent;
        border: none;
        color: #94a3b8;
        cursor: pointer;
        font-size: 1rem;
    }

    .hub-body {
        padding: 15px;
    }

    .contact-row {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 15px;
    }

    .contact-item-box {
        background: rgba(255, 255, 255, 0.03);
        padding: 10px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 12px;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .contact-item-box i {
        color: #38ef7d;
        font-size: 0.9rem;
    }

    .contact-item-box a {
        color: #f1f5f9;
        text-decoration: none;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .social-grid-minimal {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
    }

    .social-mini-link {
        width: 38px;
        height: 38px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-decoration: none;
        font-size: 1rem;
        transition: 0.2s;
    }

    .social-mini-link.insta {
        color: #e4405f;
    }

    .social-mini-link.linkedin {
        color: #0077b5;
    }

    .social-mini-link.whatsapp {
        color: #25d366;
    }

    .social-mini-link.facebook {
        color: #1877f2;
    }

    .social-mini-link.youtube {
        color: #ff0000;
    }

    .hub-divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.05);
        margin: 15px 0;
    }

    .founder-minimal-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(168, 85, 247, 0.1));
        padding: 12px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .founder-info-mini {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .founder-thumb-mini {
        width: 38px;
        height: 38px;
        background: #3b82f6;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        font-weight: 900;
        object-fit: cover;
        border: 1.5px solid rgba(255, 255, 255, 0.1);
    }

    .founder-text-mini {
        display: flex;
        flex-direction: column;
    }

    .founder-text-mini strong {
        font-size: 0.75rem;
        color: white;
    }

    .founder-text-mini span {
        font-size: 0.6rem !important;
        color: #94a3b8 !important;
    }

    .founder-social-btn {
        background: rgba(255, 255, 255, 0.1);
        color: white;
        text-decoration: none;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 0.65rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    @keyframes slideInHub {
        from {
            transform: translateY(20px) scale(0.95);
            opacity: 0;
        }

        to {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
    }
}