/* ===== FOXNOVA MOBILE ===== */

@media (max-width: 768px) {
    *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0.15s !important; }
    html, body { overflow-x: hidden !important; max-width: 100vw !important; }

    .stars { display: block !important; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; }
    .star { position: absolute; background: #fff; border-radius: 50%; animation: none !important; opacity: 0.4; }

    .hero::after { display: block !important; content: ''; position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); width: 350px; height: 350px; background: radial-gradient(circle, rgba(255,240,180,1) 0%, rgba(255,200,80,0.9) 8%, rgba(255,140,40,0.65) 20%, rgba(255,80,30,0.4) 32%, rgba(200,50,180,0.25) 48%, rgba(100,20,200,0.12) 65%, transparent 100%); border-radius: 50%; animation: none !important; pointer-events: none; z-index: 0; filter: blur(12px); }
    .hero::before { display: block !important; content: ''; position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); width: 480px; height: 480px; background: radial-gradient(circle, rgba(255,200,80,0.15) 0%, rgba(200,100,255,0.08) 40%, transparent 70%); border-radius: 50%; animation: none !important; pointer-events: none; z-index: 0; }

    .hero { min-height: 85vh !important; padding: 30px 0 !important; }
    .hero__content { padding: 20px 0 !important; text-align: center !important; }
    .hero__title { font-size: clamp(2rem, 8vw, 2.6rem) !important; font-weight: 900 !important; line-height: 1.1 !important; margin-bottom: 16px !important; background: linear-gradient(135deg, #ffffff 0%, #ffe0c0 20%, #ff9933 40%, #ff5500 60%, #ff4488 80%, #aa33ff 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; letter-spacing: -1px !important; filter: drop-shadow(0 0 25px rgba(255,140,0,0.7)) drop-shadow(0 0 50px rgba(255,60,0,0.5)) drop-shadow(0 0 80px rgba(200,60,255,0.4)) !important; }
    .hero__tagline { font-size: clamp(0.9rem, 3vw, 1.05rem) !important; margin-bottom: 36px !important; max-width: 300px !important; margin-left: auto !important; margin-right: auto !important; }
    .hero__actions { flex-direction: column !important; gap: 14px !important; align-items: center !important; }
    .hero__actions .btn { width: 85% !important; text-align: center !important; padding: 16px 28px !important; font-size: 1.05rem !important; }
    .hero__placeholder { display: block !important; position: absolute; right: -30px; top: 50%; transform: translateY(-50%); font-size: 10rem; opacity: 0.05; z-index: 0; filter: blur(2px); }

    .header { position: sticky !important; top: 0 !important; }
    .nav { padding: 0 16px !important; height: 56px !important; }
    .nav__logo { font-size: clamp(1rem, 4vw, 1.2rem) !important; }
    .nav__logo-img { height: clamp(20px, 6vw, 24px) !important; }
    .nav__burger { display: flex !important; }
    .nav__list { display: flex !important; flex-direction: column !important; position: fixed !important; top: 56px !important; right: -100% !important; width: 70% !important; max-width: 280px !important; height: calc(100vh - 56px) !important; background: rgba(2, 0, 16, 0.97) !important; backdrop-filter: blur(30px) !important; padding: 24px !important; gap: 20px !important; transition: right 0.3s ease !important; z-index: 99 !important; }
    .nav__list.active { right: 0 !important; }
    .nav__link { font-size: 1.1rem !important; }

    .container { padding: 0 clamp(12px, 4vw, 20px) !important; max-width: 100% !important; box-sizing: border-box !important; }
    .section { padding: 35px 0 !important; }
    .section__title { font-size: clamp(1.4rem, 5vw, 1.6rem) !important; margin-bottom: 20px !important; }

    .about { padding: 25px 0 !important; }
    .about__content { flex-direction: column !important; gap: 10px !important; max-width: min(85vw, 380px) !important; margin: 0 auto !important; }
    .about__avatar { width: clamp(90px, 22vw, 100px) !important; height: clamp(90px, 22vw, 100px) !important; }
    .about__text { font-size: clamp(0.8rem, 2.5vw, 0.85rem) !important; line-height: 1.55 !important; text-align: left !important; }
    .skills__list { justify-content: flex-start !important; gap: 5px !important; }
    .skill-tag { font-size: clamp(0.65rem, 2vw, 0.7rem) !important; padding: 4px 10px !important; }

    .featured { padding: 25px 0 !important; }
    .projects-grid { grid-template-columns: 1fr !important; gap: 14px !important; max-width: min(90vw, 450px) !important; margin: 0 auto !important; }
    .project-card { border-radius: 14px !important; border: 1px solid rgba(249,115,22,0.3) !important; box-shadow: 0 0 20px rgba(249,115,22,0.1) !important; transition: none !important; }
    .project-card__image { height: clamp(140px, 35vw, 160px) !important; }
    .project-card__body { padding: 14px !important; }
    .project-card__body h3 { font-size: clamp(1rem, 3.5vw, 1.1rem) !important; }
    .project-card__body p { font-size: clamp(0.8rem, 2.5vw, 0.85rem) !important; }
    .btn--live { padding: 12px 18px !important; font-size: clamp(0.9rem, 3vw, 0.95rem) !important; }

    .news-card { padding: 14px !important; }
    .news-list { max-width: min(90vw, 450px) !important; margin: 0 auto !important; }
    .news-card h2 { font-size: clamp(1.1rem, 4vw, 1.3rem) !important; }
    .news-card__image { height: clamp(150px, 40vw, 170px) !important; }
    .news-card__text { font-size: clamp(0.8rem, 2.5vw, 0.85rem) !important; }

    .news-preview .news-list { gap: 10px !important; max-width: min(90vw, 450px) !important; margin: 0 auto !important; }
    .news-preview .news-card { padding: 10px 14px !important; border-radius: 14px !important; }
    .news-preview .news-card h3 { font-size: 0.9rem !important; margin-bottom: 2px !important; }
    .news-preview .news-card p { font-size: 0.75rem !important; line-height: 1.4 !important; }

    .stories-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

    .donate__links { grid-template-columns: 1fr !important; gap: 12px !important; max-width: 360px !important; margin: 0 auto !important; }
    .donate__info { max-width: 360px !important; margin: 0 auto 24px !important; padding: 0 4px !important; font-size: clamp(0.85rem, 2.5vw, 0.95rem) !important; text-align: left !important; }
    .donate-card { padding: 26px 20px !important; }
    .donate-card__label { font-size: clamp(1.2rem, 4.5vw, 1.4rem) !important; }

    .page-header { padding: 35px 0 10px !important; }
    .page-header h1 { font-size: clamp(1.8rem, 6vw, 2.2rem) !important; }
    .page-header p { font-size: clamp(0.9rem, 3vw, 1rem) !important; }

    .filter-bar { gap: 4px !important; margin-bottom: 20px !important; }
    .filter-btn { padding: 10px 16px !important; font-size: clamp(0.8rem, 2.5vw, 0.9rem) !important; }

    .footer { margin-top: 35px !important; padding: 14px 0 !important; }
    .footer__content { flex-direction: column !important; gap: 8px !important; text-align: center !important; font-size: clamp(0.75rem, 2.5vw, 0.8rem) !important; }

    .fin-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .fin-card { padding: 14px !important; }
    .fin-card__num { font-size: 1.4rem !important; }
    .fin-card--total { grid-column: span 2 !important; }
    .fin-card--total .fin-card__num { font-size: 1.6rem !important; }

    .cp-wrapper { padding: 16px 0 !important; }
    .cp-container { padding: 0 12px !important; }
    .cp-header { flex-wrap: wrap !important; gap: 8px !important; }
    .cp-header h1 { font-size: 1.2rem !important; }
    .cp-header .cp-btn { font-size: 0.7rem !important; padding: 5px 10px !important; }
    .cp-nav { gap: 4px !important; }
    .cp-nav a { font-size: 0.65rem !important; padding: 5px 8px !important; border-radius: 16px !important; }
    .cp-card { padding: 12px !important; border-radius: 12px !important; margin-bottom: 12px !important; }
    .cp-card h2 { font-size: 0.95rem !important; }
    .cp-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .cp-stat__number { font-size: 1.5rem !important; }
    .cp-stat__label { font-size: 0.65rem !important; }
    .cp-table { font-size: 0.65rem !important; }
    .cp-card:has(table) { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
    .cp-card table { min-width: 500px !important; }
    .cp-table th, .cp-table td { padding: 6px 4px !important; font-size: 0.65rem !important; }
    .cp-actions { gap: 3px !important; }
    .cp-btn { font-size: 0.65rem !important; padding: 5px 10px !important; border-radius: 16px !important; }
    .cp-btn--back { font-size: 0.7rem !important; padding: 4px 10px !important; }
    .cp-form-group { margin-bottom: 10px !important; }
    .cp-form-group label { font-size: 0.75rem !important; }
    .cp-form-group input, .cp-form-group textarea, .cp-form-group select, input[type="text"], input[type="url"], input[type="number"], input[type="date"] { font-size: 16px !important; padding: 8px 12px !important; }

    #lightbox-actions { flex-direction: column !important; gap: 10px !important; align-items: center !important; }
    #lightbox-actions button { width: 80% !important; }
    #comments-block { width: 95% !important; padding: 0 8px !important; }
    #comments-block form { flex-direction: column !important; gap: 6px !important; }
    #comments-block form input { width: 100% !important; box-sizing: border-box !important; }
    #comment-name, #comment-text { font-size: 16px !important; }
    #comments-block form button { width: 100% !important; padding: 10px !important; }
    #lightbox-media { bottom: 180px !important; }
    #lightbox-info { bottom: 140px !important; font-size: 1.1rem !important; }
    #lightbox-actions { bottom: 95px !important; flex-direction: row !important; gap: 8px !important; }
    #lightbox-actions button { font-size: 0.8rem !important; padding: 5px 12px !important; }
    #chat-panel { right: 5% !important; left: 5% !important; top: 10% !important; bottom: 10% !important; width: auto !important; max-width: 100% !important; border-radius: 16px !important; z-index: 25 !important; }
    #lightbox-actions { z-index: 15 !important; }
    #lightbox-info { z-index: 15 !important; }
    .section[style*="max-width"] { padding: 30px 0 !important; max-width: min(90vw, 450px) !important; margin: 0 auto !important; }
    .section[style*="max-width"] h2 { font-size: 1.15rem !important; margin: 24px 0 10px !important; }
    .section[style*="max-width"] p, .section[style*="max-width"] li { font-size: 0.88rem !important; line-height: 1.55 !important; padding: 0 !important; text-align: left !important; overflow-wrap: break-word !important; word-break: break-word !important; }
    .section[style*="max-width"] ul { padding-left: 18px !important; }

    .news-list, .page-news-list { grid-template-columns: 1fr !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .projects-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .stories-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .hero__title { font-size: 4rem !important; }
}