/* ============================================
   LUSSA - Responsive Stylesheet
   Mobile-first breakpoints & adaptations
   ============================================ */

/* ============================================
   BREAKPOINT SYSTEM

   sm:  640px  - Large phones
   md:  768px  - Tablets
   lg:  1024px - Small laptops
   xl:  1280px - Desktops
   2xl: 1536px - Large screens
   ============================================ */

/* ============================================
   MOBILE FIRST (Base styles in main.css)
   Everything below is progressive enhancement
   ============================================ */

/* ============================================
   EXTRA SMALL DEVICES (< 640px)
   Base mobile styles
   ============================================ */

/* Navigation */
@media (max-width: 639px) {

  /* GLOBAL MOBILE ADJUSTMENTS */
  :root {
    --container-padding: 1.5rem;
    --section-padding: 4rem;
  }

  h1,
  .h1 {
    font-size: 2.5rem;
  }

  h2,
  .h2 {
    font-size: 2rem;
  }

  .container {
    padding-inline: var(--container-padding);
  }

  /* UTILS */
  .nav-menu,
  .nav-cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  /* HERO SECTION MOBILE */
  .hero-content-center {
    padding: 6rem 1.5rem 4rem;
    gap: 1.5rem;
    min-height: 100svh;
    /* Improved mobile height */
  }

  .hero-title-glitch.hero-slogan-mode {
    font-size: clamp(1.5rem, 8vw, 2.5rem) !important;
    /* Force smaller size */
    line-height: 1.2;
    margin-bottom: 0.5rem;
  }

  .hero-subtitle-epic {
    font-size: 1rem;
    max-width: 100%;
  }

  /* INTRODUCING - Card Optimization */
  .introducing-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    /* Reduced gap */
  }

  .introducing-text {
    order: 2;
  }

  .introducing-showcase {
    order: 1;
  }

  /* PARTNERS MOBILE - HORIZONTAL SCROLL SNAP */
  .partners-wrapper {
    padding: 0 1rem;
    overflow: visible;
    /* Allow overflowing track */
  }

  .partners-controls {
    display: none;
    /* Hide controls on mobile, use swipe */
  }

  .partners-track {
    flex-direction: row;
    /* Horizontal layout */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 1.5rem;
    /* Space for scrollbar if visible */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
  }

  .partners-track::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
  }

  .partner-card {
    min-width: 280px;
    /* Fixed width for swipe */
    width: 85vw;
    /* Responsive width */
    scroll-snap-align: center;
    flex-shrink: 0;
    /* Prevent squishing */
  }

  /* NEWSLETTER MOBILE */
  #newsletterSection .newsletter-content {
    grid-template-columns: 1fr;
    padding: 2rem 1.5rem;
    gap: 2rem;
  }

  #newsletterSection .newsletter-title {
    font-size: 1.75rem;
  }

  #newsletterSection .newsletter-actions {
    grid-template-columns: 1fr;
  }

  #newsletterSection .newsletter-action-card {
    min-height: 0;
  }

  #newsletterSection .newsletter-status {
    text-align: center;
  }

  /* HIDDEN ELEMENTS ON MOBILE */
  .news-line,
  .hud-corner {
    display: none;
  }

  /* STATS STACKING */
  .hero-stats {
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 1rem;
  }

  .stat-divider {
    width: 50px;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
  }


  /* Features - Grid Polish */
  .features-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    /* Tighter gap */
  }

  .feature-card-large,
  .feature-card-wide {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* Feature Card Mobile Polish */
  .feature-card {
    padding: 1.5rem;
    /* Reduced padding */
  }

  /* Gameplay - Better Flow */
  .gameplay-showcase {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .gameplay-info {
    position: static;
    margin-bottom: 2rem;
  }

  /* Loadout - Compact Grid */
  .loadout-tabs {
    flex-direction: row;
    /* Horizontal tabs generally better if fit, otherwise scroll */
    flex-wrap: wrap;
    /* Allow wrapping */
    gap: 0.5rem;
    justify-content: center;
  }

  .tab-btn {
    width: auto;
    /* Allow auto width */
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
  }

  .weapons-grid,
  .operators-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns for items usually better than 1 huge one */
    gap: 1rem;
  }

  .weapon-card,
  .operator-card {
    padding: 1rem;
    /* Compact padding */
  }

  .equipment-grid {
    grid-template-columns: repeat(3, 1fr);
    /* 3 cols for small equipment */
  }

  /* Community - Stacked & Spaced */
  .community-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0;
    margin-bottom: 2rem;
  }

  .community-links {
    grid-template-columns: 1fr;
  }

  .community-cards {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Roadmap */
  .timeline {
    padding-left: 30px;
  }

  .timeline-marker {
    left: -30px;
    width: 20px;
    height: 20px;
  }

  /* Download */
  .download-buttons {
    flex-direction: column;
  }

  .download-btn {
    width: 100%;
  }

  .requirements-content {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-main {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 3rem;
  }

  .footer-brand {
    align-items: center;
    max-width: 100%;
  }

  .footer-links {
    grid-template-columns: 1fr;
    /* Stack links vertically */
    text-align: center;
    gap: 2rem;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

  .footer-legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
}

/* ============================================
   SMALL DEVICES (640px - 767px)
   Large phones & small tablets
   ============================================ */

@media (min-width: 640px) {

  /* Features */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-card-large {
    grid-column: span 2;
    grid-row: span 1;
  }

  .feature-card-wide {
    grid-column: span 2;
  }

  /* Weapons */
  .weapons-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Equipment */
  .equipment-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Community */
  .community-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   MEDIUM DEVICES (768px - 1023px)
   Tablets
   ============================================ */

@media (min-width: 768px) {

  /* Navigation */
  .nav-menu {
    display: flex;
    gap: 1.25rem;
  }

  .nav-toggle {
    display: none;
  }

  /* Hero */
  .hero-stats {
    flex-direction: row;
  }

  .stat-divider {
    width: 1px;
    height: 40px;
  }

  .hero-cta-group {
    flex-direction: row;
  }

  .hero-cta-group .btn {
    width: auto;
  }

  .hud-corner {
    display: block;
    width: 40px;
    height: 40px;
  }

  /* Features */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-card-large {
    grid-column: span 1;
    grid-row: span 2;
  }

  /* Gameplay */
  .gameplay-showcase {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Loadout */
  .loadout-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .tab-btn {
    width: auto;
  }

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

  /* Download */
  .download-buttons {
    flex-direction: row;
    justify-content: center;
  }

  .download-btn {
    width: auto;
  }

  .requirements-content {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer */
  .footer-content {
    grid-template-columns: 1fr 2fr;
    text-align: left;
  }

  .footer-brand {
    align-items: flex-start;
  }

  .footer-links {
    flex-direction: row;
    justify-content: flex-end;
  }

  .footer-social {
    display: none;
  }

  .footer-bottom {
    flex-direction: row;
  }
}

/* ============================================
   LARGE DEVICES (1024px - 1279px)
   Small laptops & desktops
   ============================================ */

@media (min-width: 1024px) {

  /* Navigation */
  .nav-cta {
    display: flex;
  }

  .nav-menu {
    gap: 1.5rem;
  }

  /* Hero */
  .hud-corner {
    width: 60px;
    height: 60px;
  }

  /* Features */
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .feature-card-large {
    grid-column: span 2;
    grid-row: span 2;
  }

  .feature-card-wide {
    grid-column: span 2;
  }

  /* Gameplay */
  .gameplay-showcase {
    grid-template-columns: 2fr 1fr;
  }

  .gameplay-info {
    position: sticky;
    top: 100px;
  }

  /* Loadout */
  .weapons-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .operators-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Footer */
  .footer-content {
    grid-template-columns: 1fr 2fr 1fr;
  }

  .footer-social {
    display: flex;
  }
}

/* ============================================
   EXTRA LARGE DEVICES (1280px - 1535px)
   Desktops
   ============================================ */

@media (min-width: 1280px) {

  /* Navigation */
  .nav-menu {
    gap: 2rem;
  }

  /* Container */
  .container {
    padding-inline: 2rem;
  }

  /* Cards get more spacing */
  .feature-card {
    padding: 2.5rem;
  }

  /* Video container larger */
  .video-container {
    aspect-ratio: 21 / 9;
  }
}

/* ============================================
   2XL DEVICES (1536px+)
   Large screens
   ============================================ */

@media (min-width: 1536px) {

  /* Larger text sizes */
  :root {
    font-size: 18px;
  }

  /* More grid columns for features */
  .features-grid {
    gap: 2rem;
  }

  /* Equipment gets 5 columns */
  .equipment-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ============================================
   HEIGHT-BASED MEDIA QUERIES
   For landscape mobile & short viewports
   ============================================ */

@media (max-height: 600px) {
  .hero {
    min-height: auto;
    padding: 6rem 0 4rem;
  }

  .hero-scroll-indicator {
    display: none;
  }

  .hero-stats {
    display: none;
  }
}

@media (max-height: 800px) and (min-width: 768px) {
  .hero-stats {
    padding-top: 1rem;
  }

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

/* ============================================
   ORIENTATION QUERIES
   ============================================ */

@media (orientation: landscape) and (max-height: 500px) {

  /* Very short landscape - likely mobile landscape */
  .hero {
    min-height: auto;
    padding: 4rem 0;
  }

  .hero-title .title-line-1 {
    font-size: 3rem;
  }

  .hero-description {
    display: none;
  }

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

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

@media (hover: none) {

  /* Remove hover effects that don't work on touch */
  .feature-card:hover {
    transform: none;
  }

  .weapon-card:hover {
    transform: none;
  }

  /* Make touch targets larger */
  .nav-link {
    padding: 0.5rem 0;
  }

  .mode-item {
    padding: 1rem;
  }

  /* Hide custom cursor */
  .cursor-follower {
    display: none;
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {

  /* Disable all animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Keep some essential visibility transitions */
  .loader {
    transition: opacity 0.3s, visibility 0.3s;
  }

  /* Remove parallax and scroll animations */
  .scroll-parallax {
    animation: none;
    transform: none;
  }

  /* Disable glitch effect */
  .glitch-text::before,
  .glitch-text::after {
    display: none;
  }

  /* Remove marquee */
  .marquee-content {
    animation: none;
  }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */

@media (prefers-contrast: high) {
  :root {
    --glass-border: rgba(255, 255, 255, 0.3);
    --text-secondary: #c0c0c0;
    --text-muted: #808080;
  }

  .btn-secondary {
    border-width: 2px;
  }

  .feature-card,
  .glass-card {
    border-width: 2px;
  }
}

/* ============================================
   DARK MODE (Already dark, but for explicit preference)
   ============================================ */

@media (prefers-color-scheme: light) {

  /* Site is designed for dark mode only */
  /* Force dark mode regardless of system preference */
  :root {
    color-scheme: dark;
  }
}

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

@media print {

  /* Hide non-essential elements */
  .nav-header,
  .cursor-follower,
  .loader,
  .hero-particles,
  .hero-scroll-indicator,
  .back-to-top,
  .video-container,
  .mobile-menu {
    display: none !important;
  }

  /* Reset colors for printing */
  body {
    background: white;
    color: black;
  }

  /* Remove backgrounds */
  .section-bg,
  .hero-gradient-overlay,
  .hero-grid-lines {
    display: none;
  }

  /* Ensure text is visible */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: black;
  }

  p {
    color: #333;
  }

  /* Show links */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  /* Avoid page breaks in cards */
  .feature-card,
  .timeline-item {
    break-inside: avoid;
  }
}

/* ============================================
   CONTAINER QUERIES (Modern CSS)
   ============================================ */

@supports (container-type: inline-size) {
  .features-grid {
    container-type: inline-size;
    container-name: features;
  }

  @container features (max-width: 600px) {
    .feature-card {
      padding: 1.5rem;
    }

    .card-icon {
      width: 36px;
      height: 36px;
    }

    .card-title {
      font-size: 1rem;
    }

    .card-stats {
      flex-direction: column;
      gap: 1rem;
    }
  }

  .weapons-grid {
    container-type: inline-size;
    container-name: weapons;
  }

  @container weapons (max-width: 500px) {
    .weapon-card {
      padding: 1rem;
    }

    .weapon-stats {
      display: none;
    }
  }
}

/* ============================================
   MOBILE NAV ANIMATION
   ============================================ */

@media (max-width: 767px) {
  .nav-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .mobile-menu {
    padding-top: 80px;
  }

  .mobile-nav-list li {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
  }

  .mobile-menu.active .mobile-nav-list li {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-menu.active .mobile-nav-list li:nth-child(1) {
    transition-delay: 0.1s;
  }

  .mobile-menu.active .mobile-nav-list li:nth-child(2) {
    transition-delay: 0.15s;
  }

  .mobile-menu.active .mobile-nav-list li:nth-child(3) {
    transition-delay: 0.2s;
  }

  .mobile-menu.active .mobile-nav-list li:nth-child(4) {
    transition-delay: 0.25s;
  }

  .mobile-menu.active .mobile-nav-list li:nth-child(5) {
    transition-delay: 0.3s;
  }
}

/* ============================================
   MOBILE MENU (Glass Design)
   ============================================ */
@media (max-width: 768px) {
  .mobile-menu {
    position: fixed;
    inset: 0;
    background: rgba(6, 6, 6, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }

  .mobile-menu.active {
    opacity: 1;
    pointer-events: all;
  }

  .mobile-nav-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
    list-style: none;
  }

  .mobile-nav-list a {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.1em;
    position: relative;
    overflow: hidden;
  }

  .mobile-nav-list a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent-primary);
    transform: translateX(-101%);
    transition: transform 0.3s ease;
  }

  .mobile-nav-list a:hover::after {
    transform: translateX(0);
  }
}