/* Mobile Enhancements for Teremok Platform */

/* ===== MOBILE NAVIGATION ===== */

/* Mobile Menu Button Styles */
.mobile-menu-btn {
    display: none;
    /* Hidden by default on desktop */
    flex-direction: column;
    justify-content: space-around;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    position: relative;
}

.mobile-menu-btn span {
    width: 100%;
    height: 3px;
    background: var(--text-primary);
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
    transform-origin: center;
}

/* Animated hamburger to X */
.mobile-menu-btn.open span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-btn.open span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.open span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Navigation Overlay */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 997;
    opacity: 0;
    pointer-events: none !important;
    /* ВСЕГДА none - не блокирует клики */
    transition: opacity 0.3s ease;
}

.nav-overlay.open {
    opacity: 1;
    /* pointer-events остаётся none! */
}

/* ===== MOBILE BREAKPOINTS ===== */

/* Very Small Devices (≤576px) */
@media (max-width: 576px) {

    /* Container padding */
    .container {
        padding: 0 1rem;
    }

    .section {
        padding: 3rem 0;
    }

    /* Hero section */
    .hero {
        min-height: auto;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* Buttons - full width stack */
    .hero-actions {
        width: 100%;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }

    /* Typography adjustments */
    h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.5rem;
    }

    /* Modal adjustments - nearly fullscreen */
    .modal-window {
        width: 95%;
        max-width: none;
        padding: 1.5rem;
        max-height: 95vh;
    }

    .modal-close {
        top: 0.5rem;
        right: 0.5rem;
        font-size: 1.5rem;
    }

    /* Form adjustments */
    .input,
    .select,
    textarea {
        padding: 0.7rem 0.9rem;
        font-size: 0.95rem;
    }

    /* Test options - better touch targets */
    .test-option-btn {
        padding: 1rem;
        font-size: 0.95rem;
        min-height: 48px;
        /* Better touch target */
    }

    /* Level cards */
    .level-card {
        padding: 1.5rem;
    }

    .card-icon {
        font-size: 2.5rem;
    }
}

/* Mobile Devices (≤768px) */
@media (max-width: 768px) {

    /* Show mobile menu button */
    .mobile-menu-btn {
        display: flex;
    }

    /* Mobile Navigation - FULLSCREEN на весь экран */
    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        background: #0f172a;
        /* Полностью непрозрачный */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2rem;
        gap: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-100%);
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
        z-index: 2000;
        /* Очень высокий z-index */
        box-shadow: none;
        border-bottom: none;
    }

    .nav-links.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        max-height: none;
        /* Reset max-height from previous styles if any */
        padding: 2rem;
    }

    .nav-links a,
    .nav-links a:visited,
    .nav-links a:hover,
    .nav-links a:active {
        font-size: 1.4rem;
        font-weight: 600;
        padding: 1.5rem 2rem;
        width: 100%;
        max-width: 400px;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        color: #ffffff !important;
        opacity: 1 !important;
        display: block;
        text-decoration: none;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .nav-links a:last-child {
        border-bottom: none;
    }

    /* CTA button in mobile menu */
    .nav-cta {
        margin-top: 1rem;
        padding: 1rem !important;
        text-align: center;
        border-bottom: none !important;
    }

    /* Logo adjustments */
    .logo-mark {
        width: 36px;
        height: 36px;
    }

    .logo-text-primary {
        font-size: 1rem;
    }

    .logo-text-secondary {
        font-size: 0.75rem;
    }

    /* Header padding */
    .nav {
        padding: 0.875rem 1rem;
    }

    /* Testimonials */
    .testimonial-header {
        padding: 1.25rem;
    }

    .testimonial-body {
        padding: 0 1.25rem 1.25rem;
    }

    /* Event card */
    .event-card {
        padding: 1.25rem;
    }

    /* Form wrapper */
    .form-wrapper {
        padding: 2rem 1.5rem;
    }

    /* Teremok image wrapper */
    .teremok-wrapper {
        padding: 1rem;
    }
}

/* Tablet Devices (769px - 992px) */
@media (min-width: 769px) and (max-width: 992px) {
    .container {
        padding: 0 1.5rem;
    }

    /* Two column grids become single column */
    .two-cols {
        grid-template-columns: 1fr;
    }

    /* Three column grids become two columns */
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */

/* Ensure minimum touch target size of 44x44px (Apple HIG) */
@media (hover: none) and (pointer: coarse) {

    /* Touch-friendly buttons */
    button,
    .btn-primary,
    .btn-secondary,
    .test-option-btn,
    .testimonial-header {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover effects on touch devices */
    .level-card:hover,
    .card:hover,
    .test-option-btn:hover {
        transform: none;
        box-shadow: inherit;
    }

    /* Add active states instead */
    .level-card:active,
    .card:active {
        transform: translateY(-3px);
        opacity: 0.9;
    }

    .test-option-btn:active {
        transform: scale(0.98);
        background: rgba(255, 255, 255, 0.15);
    }

    /* Larger tap targets for close buttons */
    .modal-close {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Better touch scrolling */
    .modal-window,
    .nav-links {
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== LANDSCAPE ORIENTATION OPTIMIZATIONS ===== */

@media (max-width: 768px) and (orientation: landscape) {

    /* Reduce vertical padding in landscape */
    .section {
        padding: 2rem 0;
    }

    .hero {
        min-height: auto;
        padding: 1.5rem 0;
    }

    /* Modal adjustments for landscape */
    .modal-window {
        max-height: 90vh;
        padding: 1.5rem;
    }

    /* Navigation - reduce height */
    .nav-links {
        padding-top: 3rem;
    }

    /* Compact hero layout */
    .hero-brand-badge {
        margin-bottom: 0.75rem;
    }

    .hero-kicker {
        margin-bottom: 0.5rem;
        font-size: 0.8rem;
    }

    h1 {
        margin-bottom: 1rem;
    }

    .hero-subtitle,
    .hero-text {
        margin-bottom: 1rem;
    }

    .hero-actions {
        margin-bottom: 1rem;
    }
}

/* ===== iOS SPECIFIC FIXES ===== */

/* Prevent iOS Safari from zooming on input focus */
@supports (-webkit-touch-callout: none) {

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

/* Safe area insets for iPhone X+ */
@supports (padding: max(0px)) {
    .nav {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .container {
        padding-left: max(2rem, env(safe-area-inset-left));
        padding-right: max(2rem, env(safe-area-inset-right));
    }

    .nav-links {
        padding-right: max(2rem, env(safe-area-inset-right));
    }
}

/* Prevent bounce scroll on iOS when modal is open */
body.modal-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Reduce animations on low-end devices */
@media (prefers-reduced-motion: reduce) {

    .nav-links,
    .nav-overlay,
    .mobile-menu-btn span {
        transition: none;
    }
}

/* GPU acceleration for smooth animations */
.nav-links,
.nav-overlay,
.mobile-menu-btn span {
    will-change: transform, opacity;
}