/**
 * JUDÔ360 - Mobile Fixes
 * Correções críticas de responsividade para dispositivos móveis
 * Este arquivo deve ser carregado APÓS todos os outros CSS
 */

/* ===== FIX GLOBAL: Prevenir Overflow Horizontal ===== */
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

/* Fix para elementos absolutos que causam overflow */
.hero-floating-kanji,
.floating-kanji,
.parallax-bg,
.hero-overlay {
    overflow: hidden;
}

/* ===== MOBILE: max-width 768px ===== */
@media (max-width: 768px) {
    /* === Global Mobile Fixes === */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative;
    }

    /* Esconder elementos decorativos que causam overflow */
    .hero-section::before,
    .why-section::before,
    .parallax-bg.kano-bg,
    .parallax-bg.filosofia-bg,
    .parallax-bg.brasil-bg {
        display: none !important;
    }

    /* === Hero Sections Fix === */
    .historia-hero,
    .sobre-hero,
    .glossario-hero,
    .tecnicas-hero,
    .regras-hero {
        height: auto !important;
        min-height: auto !important;
        padding: 120px 20px 60px !important;
    }

    /* === Floating Kanji - Reduzir ou esconder === */
    .floating-kanji {
        display: none !important;
    }

    /* === Hero Content Fix === */
    .hero-content,
    .historia-hero .hero-content,
    .sobre-hero .hero-content,
    .glossario-hero .hero-content,
    .tecnicas-hero .hero-content,
    .regras-hero .hero-content {
        padding: 0 15px !important;
        max-width: 100% !important;
    }

    /* === Hero Title Fix === */
    .hero-title .title-highlight,
    .title-highlight {
        font-size: clamp(2.5rem, 10vw, 4rem) !important;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .hero-title .title-line,
    .title-line {
        font-size: clamp(0.9rem, 3vw, 1.2rem) !important;
        letter-spacing: 3px !important;
    }

    /* === Hero Stats Fix === */
    .hero-stats {
        gap: 30px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding: 0 10px !important;
    }

    .hero-stats .stat-item {
        min-width: 80px;
    }

    .hero-stats .stat-number {
        font-size: 1.8rem !important;
    }

    .hero-stats .stat-label {
        font-size: 0.65rem !important;
    }

    /* === Hero Badge Fix === */
    .hero-badge {
        padding: 8px 16px !important;
        margin-bottom: 20px !important;
        flex-wrap: wrap;
        justify-content: center;
    }

    .badge-kanji {
        font-size: 1.2rem !important;
    }

    .badge-text {
        font-size: 0.7rem !important;
        letter-spacing: 1px !important;
    }

    /* === Hero Japanese Text Fix === */
    .hero-japanese {
        font-size: clamp(1rem, 4vw, 1.5rem) !important;
        letter-spacing: 6px !important;
    }

    /* === Scroll CTA Fix === */
    .scroll-cta {
        margin-top: 30px !important;
    }

    .scroll-line {
        height: 40px !important;
    }

    /* === Section Container Fix === */
    .section-container {
        padding: 0 15px !important;
        max-width: 100% !important;
    }

    /* === Cards/Grids Fix === */
    .cards-container,
    .tecnicas-grid,
    .glossario-content,
    .regras-content {
        padding: 0 15px !important;
    }

    /* === Parallax Dividers Fix === */
    .parallax-divider {
        height: auto !important;
        min-height: 200px !important;
        padding: 40px 20px !important;
    }

    .divider-kanji,
    .kanji-large {
        font-size: clamp(2rem, 8vw, 4rem) !important;
    }

    /* === Timeline Fix === */
    .timeline-container {
        height: auto !important;
        min-height: auto !important;
        padding: 40px 0 !important;
    }

    .timeline-track {
        padding: 20px 10px !important;
    }

    .timeline-item {
        flex: 0 0 260px !important;
    }

    /* === Quote Section Fix === */
    .quote-section {
        padding: 60px 20px !important;
    }

    .quote-kanji {
        font-size: 4rem !important;
    }

    .quote-section blockquote {
        font-size: 1.1rem !important;
    }

    /* === CTA Section Fix === */
    .cta-section {
        padding: 60px 20px !important;
    }

    .cta-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }

    .btn-cta {
        width: 100% !important;
        max-width: 280px !important;
        justify-content: center !important;
    }

    /* === Filosofia Grid Fix === */
    .filosofia-grid,
    .valores-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* === Brasil Stats Fix === */
    .brasil-stats,
    .legends-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* === Features Grid Fix === */
    .features-grid {
        grid-template-columns: 1fr !important;
    }

    /* === Dev Profile Fix === */
    .dev-profile {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    /* === Contribua Cards Fix === */
    .contribua-cards {
        grid-template-columns: 1fr !important;
    }

    /* === Kanji Display Fix === */
    .kanji-display {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .kanji-card {
        min-width: unset !important;
        width: 100% !important;
        max-width: 200px !important;
    }

    .kanji-char {
        font-size: 2rem !important;
    }

    /* === Kano Grid Fix === */
    .kano-grid {
        grid-template-columns: 1fr !important;
    }

    .kano-image-wrapper {
        position: static !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }

    .kano-dates {
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* === Significado Grid Fix === */
    .significado-grid {
        grid-template-columns: 1fr !important;
    }

    /* === Section Grid Fix === */
    .section-grid {
        grid-template-columns: 1fr !important;
    }

    /* === Footer Quote Fix === */
    .footer-kanji {
        font-size: 4rem !important;
    }

    .footer-quote {
        font-size: 1.1rem !important;
    }

    /* === Técnicas Cards Fix === */
    .tecnica-card,
    .glossario-card {
        padding: 20px !important;
    }
}

/* ===== MOBILE PEQUENO: max-width 480px ===== */
@media (max-width: 480px) {
    /* === Hero Sections Extra Small === */
    .historia-hero,
    .sobre-hero,
    .glossario-hero,
    .tecnicas-hero,
    .regras-hero {
        padding: 100px 15px 40px !important;
    }

    /* === Title Extra Small === */
    .hero-title .title-highlight,
    .title-highlight {
        font-size: clamp(2rem, 12vw, 3rem) !important;
    }

    .hero-title .title-line,
    .title-line {
        font-size: clamp(0.75rem, 2.5vw, 1rem) !important;
        letter-spacing: 2px !important;
    }

    /* === Stats Extra Small === */
    .hero-stats {
        gap: 20px !important;
    }

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

    .hero-stats .stat-label {
        font-size: 0.6rem !important;
    }

    /* === Hero Badge Extra Small === */
    .hero-badge {
        padding: 6px 12px !important;
    }

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

    .badge-text {
        font-size: 0.6rem !important;
    }

    /* === Japanese Text Extra Small === */
    .hero-japanese {
        font-size: 1rem !important;
        letter-spacing: 4px !important;
    }

    /* === Hero Subtitle Extra Small === */
    .hero-subtitle {
        font-size: 0.9rem !important;
    }

    /* === Section Labels/Titles Extra Small === */
    .section-label {
        font-size: 0.7rem !important;
        letter-spacing: 2px !important;
    }

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

    /* === Cards Extra Small === */
    .tecnica-card,
    .glossario-card,
    .filosofia-card,
    .valor-card,
    .stat-card,
    .legend-card,
    .feature-card,
    .contribua-card {
        padding: 15px !important;
    }

    /* === Buttons Extra Small === */
    .btn-cta {
        padding: 12px 24px !important;
        font-size: 0.9rem !important;
    }

    /* === Quote Extra Small === */
    .quote-kanji {
        font-size: 3rem !important;
    }

    .quote-section blockquote {
        font-size: 1rem !important;
    }

    /* === Parallax Dividers Extra Small === */
    .parallax-divider {
        min-height: 150px !important;
        padding: 30px 15px !important;
    }

    .divider-kanji,
    .kanji-large {
        font-size: clamp(1.5rem, 6vw, 3rem) !important;
    }

    .divider-name {
        font-size: 1.2rem !important;
    }

    .divider-role,
    .divider-translation,
    .divider-quote {
        font-size: 0.85rem !important;
    }

    /* === Dev Section Extra Small === */
    .avatar-placeholder {
        width: 120px !important;
        height: 120px !important;
    }

    .avatar-ring {
        width: 140px !important;
        height: 140px !important;
    }

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

    .dev-name {
        font-size: 1.6rem !important;
    }

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

    /* === Skill Tags Extra Small === */
    .skill-tag {
        padding: 8px 14px !important;
        font-size: 0.8rem !important;
    }
}

/* ===== MOBILE MUITO PEQUENO: max-width 360px ===== */
@media (max-width: 360px) {
    /* === Hero Extra Extra Small === */
    .historia-hero,
    .sobre-hero,
    .glossario-hero,
    .tecnicas-hero,
    .regras-hero {
        padding: 90px 10px 30px !important;
    }

    .hero-title .title-highlight,
    .title-highlight {
        font-size: 1.8rem !important;
    }

    .hero-title .title-line,
    .title-line {
        font-size: 0.7rem !important;
    }

    .hero-stats .stat-number {
        font-size: 1.3rem !important;
    }

    .hero-stats .stat-label {
        font-size: 0.55rem !important;
    }

    .hero-badge {
        padding: 5px 10px !important;
    }

    .section-title {
        font-size: 1.3rem !important;
    }

    /* === Content Extra Small === */
    .section-container,
    .hero-content {
        padding: 0 10px !important;
    }
}

/* ===== LANDSCAPE MODE FIX ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .historia-hero,
    .sobre-hero,
    .glossario-hero,
    .tecnicas-hero,
    .regras-hero {
        min-height: auto !important;
        height: auto !important;
        padding: 80px 20px 40px !important;
    }
}

/* ===== iOS SAFARI SPECIFIC FIXES ===== */
@supports (-webkit-touch-callout: none) {
    /* iOS specific */
    .historia-hero,
    .sobre-hero,
    .glossario-hero,
    .tecnicas-hero,
    .regras-hero {
        min-height: -webkit-fill-available;
    }
}

/* ===== SAFE AREA INSETS (Notch Fix) ===== */
@supports (padding: max(0px)) {
    .modern-header {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .modern-footer {
        padding-bottom: max(2rem, env(safe-area-inset-bottom));
    }

    @media (max-width: 768px) {
        .hero-content {
            padding-left: max(15px, env(safe-area-inset-left));
            padding-right: max(15px, env(safe-area-inset-right));
        }
    }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects que não funcionam bem em touch */
    .tecnica-card:hover,
    .glossario-card:hover,
    .filosofia-card:hover,
    .valor-card:hover,
    .feature-card:hover,
    .contribua-card:hover {
        transform: none !important;
    }

    /* Aumentar área de toque para botões */
    .btn-cta,
    .scroll-cta,
    .btn-contact {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ===== PREVENT ZOOM ON INPUT FOCUS (iOS) ===== */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ===== FIX: STICKY HEADER PADDING ===== */
@media (max-width: 768px) {
    body {
        padding-top: 0;
    }

    main {
        padding-top: 0;
    }
}

/* ===== FORMULÁRIOS FIX (Login/Registro) ===== */
@media (max-width: 768px) {
    .login-container,
    .registro-container {
        padding: 15px !important;
        padding-top: 80px !important;
    }

    .login-content,
    .registro-content {
        max-width: 100% !important;
    }

    .login-box,
    .registro-box {
        padding: 1.5rem 1.2rem !important;
        border-radius: 16px !important;
    }

    .login-decoration,
    .registro-decoration {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .login-container,
    .registro-container {
        padding: 10px !important;
        padding-top: 70px !important;
    }

    .login-box,
    .registro-box {
        padding: 1.2rem 1rem !important;
    }

    .form-row.two-columns {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
}

/* ===== PRINT STYLES (opcional) ===== */
@media print {
    .modern-header,
    .modern-footer,
    .scroll-cta,
    .mobile-menu-btn,
    .mobile-menu {
        display: none !important;
    }
}