/**
 * JavaESPORTS - Professional Responsive Design System
 * World-class responsive design following modern web standards
 * Mobile-first approach with progressive enhancement
 * 
 * @author JavaESPORTS Development Team
 * @version 2.0
 * @date 2025
 */

/* ============================================================================
   1. CSS CUSTOM PROPERTIES (RESPONSIVE VARIABLES)
   ============================================================================ */

:root {
    /* Breakpoint tokens */
    --bp-xs: 320px;
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
    --bp-2xl: 1536px;
    
    /* Fluid spacing system */
    --space-3xs: clamp(0.25rem, 0.5vw, 0.5rem);
    --space-2xs: clamp(0.5rem, 1vw, 0.75rem);
    --space-xs: clamp(0.75rem, 1.5vw, 1rem);
    --space-sm: clamp(1rem, 2vw, 1.5rem);
    --space-md: clamp(1.5rem, 3vw, 2rem);
    --space-lg: clamp(2rem, 4vw, 3rem);
    --space-xl: clamp(3rem, 6vw, 4rem);
    --space-2xl: clamp(4rem, 8vw, 6rem);
    --space-3xl: clamp(6rem, 12vw, 8rem);
    
    /* Fluid typography */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --text-3xl: clamp(2rem, 1.7rem + 1.5vw, 3rem);
    --text-4xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
    --text-5xl: clamp(3rem, 2.5rem + 2.5vw, 5rem);
    
    /* Container sizes */
    --container-xs: 100%;
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1400px;
    
    /* Responsive padding */
    --container-padding: clamp(1rem, 4vw, 2rem);
    --section-padding-block: clamp(2rem, 8vw, 6rem);
    --section-padding-inline: clamp(1rem, 4vw, 2rem);
    
    /* Grid columns */
    --grid-columns: 12;
    --grid-gap: clamp(1rem, 2vw, 2rem);
    
    /* Safe areas for notched devices */
    --safe-top: max(0px, env(safe-area-inset-top));
    --safe-bottom: max(0px, env(safe-area-inset-bottom));
    --safe-left: max(0px, env(safe-area-inset-left));
    --safe-right: max(0px, env(safe-area-inset-right));
}

/* ============================================================================
   2. BASE RESPONSIVE LAYOUT
   ============================================================================ */

html {
    /* Prevent horizontal scroll */
    overflow-x: hidden;
    
    /* Smooth scrolling */
    scroll-behavior: smooth;
    
    /* Better font rendering on mobile */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Disable smooth scroll for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    /* Prevent overscroll on mobile */
    overscroll-behavior-y: none;
    
    /* Add safe area padding for notched devices */
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    
    /* Minimum width to prevent layout breaking */
    min-width: var(--bp-xs);
}

/* ============================================================================
   3. RESPONSIVE CONTAINER SYSTEM
   ============================================================================ */

.container {
    width: 100%;
    max-width: var(--container-2xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.container--narrow {
    max-width: var(--container-lg);
}

.container--wide {
    max-width: 100%;
}

/* ============================================================================
   4. FLEXIBLE GRID SYSTEM
   ============================================================================ */

.grid {
    display: grid;
    gap: var(--grid-gap);
    width: 100%;
}

/* Mobile first: 1 column */
.grid {
    grid-template-columns: 1fr;
}

/* Tablet: 2 columns */
@media (min-width: 640px) {
    .grid--2-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 3-4 columns */
@media (min-width: 1024px) {
    .grid--3-cols {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid--4-cols {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Auto-fit responsive grid */
.grid--auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.grid--auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

/* ============================================================================
   5. RESPONSIVE TYPOGRAPHY
   ============================================================================ */

h1, .h1 {
    font-size: var(--text-4xl);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.02em;
}

h2, .h2 {
    font-size: var(--text-3xl);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
}

h3, .h3 {
    font-size: var(--text-2xl);
    line-height: 1.3;
    font-weight: 600;
}

h4, .h4 {
    font-size: var(--text-xl);
    line-height: 1.4;
    font-weight: 600;
}

h5, .h5 {
    font-size: var(--text-lg);
    line-height: 1.5;
    font-weight: 500;
}

h6, .h6 {
    font-size: var(--text-base);
    line-height: 1.5;
    font-weight: 500;
}

p, .text-base {
    font-size: var(--text-base);
    line-height: 1.6;
}

.text-sm {
    font-size: var(--text-sm);
}

.text-xs {
    font-size: var(--text-xs);
}

/* ============================================================================
   6. HERO SECTION RESPONSIVE DESIGN
   ============================================================================ */

.hero {
    display: grid;
    gap: var(--space-lg);
    padding: var(--section-padding-block) var(--section-padding-inline);
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
    align-items: center;
}

/* Mobile: Stack vertically */
@media (max-width: 767px) {
    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-top: calc(var(--section-padding-block) + 60px);
    }
    
    .hero__text {
        order: 1;
        text-align: center;
    }
    
    .hero__highlights {
        order: 2;
        min-height: 50vh;
        min-height: 50dvh;
    }
    
    .hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }
    
    .hero__actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .hero__stats {
        justify-content: center;
        gap: var(--space-md);
    }
}

/* Tablet: Side by side */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }
    
    .hero__highlights {
        min-height: 60vh;
    }
}

/* Desktop: Optimized layout */
@media (min-width: 1024px) {
    .hero {
        grid-template-columns: 1.2fr 1fr;
        gap: var(--space-2xl);
        min-height: calc(100vh - 70px);
    }
    
    .hero__highlights {
        min-height: 70vh;
    }
}

/* ============================================================================
   7. CARDS GRID RESPONSIVE
   ============================================================================ */

.cards-grid {
    display: grid;
    gap: var(--grid-gap);
    width: 100%;
}

/* Mobile: 1 column */
.cards-grid {
    grid-template-columns: 1fr;
}

/* Small tablet: 2 columns */
@media (min-width: 640px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large tablet and desktop: 3 columns */
@media (min-width: 1024px) {
    .cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Extra large: 4 columns for some grids */
@media (min-width: 1280px) {
    .cards-grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Card responsive design */
.card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: rgba(30, 27, 75, 0.5);
    border-radius: var(--radius-lg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(139, 92, 246, 0.2);
}

.card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-md);
}

/* Mobile optimization */
@media (max-width: 639px) {
    .card {
        padding: var(--space-md);
    }
}

/* ============================================================================
   8. SECTION SPACING RESPONSIVE
   ============================================================================ */

.section {
    padding: var(--section-padding-block) var(--section-padding-inline);
    max-width: var(--container-2xl);
    margin-left: auto;
    margin-right: auto;
}

.section__header {
    text-align: center;
    margin-bottom: var(--space-xl);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .section__header {
        margin-bottom: var(--space-lg);
    }
}

/* ============================================================================
   9. BUTTON RESPONSIVE DESIGN
   ============================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-base);
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    
    /* Touch target size */
    min-height: 44px;
    min-width: 44px;
}

.btn-primary {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.5);
}

/* Light mode - ensure button text is always white on purple background */
[data-theme="light"] .btn-primary {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

[data-theme="light"] .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
    color: white !important;
}

.btn-outline {
    background: transparent;
    border: 2px solid rgba(139, 92, 246, 0.5);
    color: var(--color-text);
}

.btn-outline:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: #8b5cf6;
}

/* Mobile button adjustments */
@media (max-width: 767px) {
    .btn {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--text-sm);
    }
    
    /* Full width buttons on mobile when in a flex container */
    .hero__actions .btn,
    .section__actions .btn {
        width: 100%;
    }
}

/* ============================================================================
   10. NAVIGATION BAR RESPONSIVE (Enhancement)
   International Web Standards: Mobile < 1024px | Desktop >= 1024px
   ============================================================================ */

/* Desktop - Always visible navigation, no hamburger */
@media (min-width: 1024px) {
    .topbar__inner {
        padding: 0 var(--container-padding);
        height: 70px;
    }
    
    .nav {
        display: flex;
        flex-direction: row;
        position: static;
        background: transparent;
        transform: none;
    }
    
    .nav__link {
        padding: var(--space-xs) var(--space-md);
        font-size: var(--text-sm);
        min-height: auto;
    }
    
    .mobile-toggle {
        display: none;
    }
}

/* Tablet - Hamburger menu for better UX */
@media (min-width: 768px) and (max-width: 1023px) {
    .topbar__inner {
        padding: 0.75rem var(--container-padding);
        height: 65px;
    }
    
    /* Mobile menu improvements */
    .nav.is-open {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    
    .nav__link {
        padding: var(--space-md) var(--space-lg);
        font-size: var(--text-base);
        min-height: 52px;
    }
}

/* Mobile - Hamburger menu */
@media (max-width: 767px) {
    .topbar__inner {
        padding: 0.75rem var(--container-padding);
        height: 60px;
    }
    
    /* Mobile menu overlay improvements */
    .nav.is-open {
        /* Better mobile menu scrolling */
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Improve tap targets on mobile */
    .nav__link {
        padding: var(--space-md);
        font-size: var(--text-base);
        min-height: 52px;
    }
}

/* ============================================================================
   11. FOOTER RESPONSIVE
   ============================================================================ */

.footer {
    padding: var(--section-padding-block) var(--section-padding-inline);
    background: rgba(15, 17, 35, 0.8);
    border-top: 1px solid rgba(139, 92, 246, 0.2);
}

.footer__inner {
    max-width: var(--container-2xl);
    margin: 0 auto;
    display: grid;
    gap: var(--space-xl);
}

/* Mobile: Stack vertically */
@media (max-width: 767px) {
    .footer__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer__social-links {
        justify-content: center;
    }
}

/* Tablet and up: Side by side */
@media (min-width: 768px) {
    .footer__inner {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

/* Desktop: Optimized spacing */
@media (min-width: 1024px) {
    .footer__inner {
        grid-template-columns: 1.5fr 1fr;
    }
}

/* ============================================================================
   12. IMAGE RESPONSIVE DESIGN
   ============================================================================ */

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Responsive images with aspect ratio */
.img-responsive {
    width: 100%;
    height: auto;
}

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Picture element responsive setup */
picture {
    display: block;
    width: 100%;
}

/* ============================================================================
   13. UTILITY CLASSES FOR RESPONSIVE DESIGN
   ============================================================================ */

/* Display utilities */
.hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: block;
    }
}

.show-mobile {
    display: block;
}

@media (min-width: 768px) {
    .show-mobile {
        display: none;
    }
}

/* Spacing utilities */
.mt-responsive {
    margin-top: var(--space-md);
}

@media (min-width: 1024px) {
    .mt-responsive {
        margin-top: var(--space-xl);
    }
}

/* Text alignment */
.text-center-mobile {
    text-align: center;
}

@media (min-width: 768px) {
    .text-center-mobile {
        text-align: left;
    }
}

/* ============================================================================
   14. TOUCH DEVICE OPTIMIZATIONS
   ============================================================================ */

/* Better touch targets for all interactive elements */
@media (pointer: coarse) {
    a, button, input, select, textarea, [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Larger tap targets */
    .nav__link,
    .btn,
    .card,
    .footer__social-link {
        padding: var(--space-md);
    }
}

/* Remove hover effects on touch devices */
@media (hover: none) {
    .btn:hover,
    .card:hover,
    .nav__link:hover {
        transform: none;
    }
    
    /* Add active state instead */
    .btn:active,
    .card:active,
    .nav__link:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* ============================================================================
   15. HIGH RESOLUTION DISPLAY SUPPORT
   ============================================================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders on retina displays */
    .card,
    .btn,
    .section {
        border-width: 0.5px;
    }
}

/* ============================================================================
   16. ORIENTATION RESPONSIVE
   ============================================================================ */

/* Landscape mobile phones */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
    }
    
    .section {
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
    }
}

/* ============================================================================
   17. PRINT STYLES
   ============================================================================ */

@media print {
    .topbar,
    .footer,
    .btn,
    .mobile-toggle,
    .theme-toggle,
    .lang-selector {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .section,
    .card {
        page-break-inside: avoid;
        box-shadow: none !important;
    }
    
    a {
        text-decoration: underline;
    }
}

/* ============================================================================
   18. ACCESSIBILITY RESPONSIVE ENHANCEMENTS
   ============================================================================ */

/* Focus visible for keyboard navigation */
:focus-visible {
    outline: 3px solid #8b5cf6;
    outline-offset: 2px;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #8b5cf6;
    color: white;
    padding: var(--space-sm) var(--space-md);
    text-decoration: none;
    z-index: 9999;
}

.skip-link:focus {
    top: 0;
}

/* ============================================================================
   19. PERFORMANCE OPTIMIZATIONS
   ============================================================================ */

/* Use GPU acceleration for animations */
.card,
.btn,
.nav__link {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimize image loading */
img[loading="lazy"] {
    content-visibility: auto;
}

/* ============================================================================
   20. DARK MODE RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
    }
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
    }
}

/* ============================================================================
   21. REDUCED MOTION SUPPORT
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   22. CUSTOM BREAKPOINT SPECIFIC STYLES
   ============================================================================ */

/* Extra small devices (phones, less than 480px) */
@media (max-width: 479px) {
    :root {
        font-size: 14px;
    }
    
    .hero {
        padding: var(--space-md);
    }
    
    .section {
        padding: var(--space-lg) var(--space-md);
    }
}

/* Small devices (landscape phones, 480px to 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    :root {
        font-size: 15px;
    }
}

/* Medium devices (tablets, 768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        font-size: 16px;
    }
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
    :root {
        font-size: 16px;
    }
}

/* Extra large devices (large desktops, 1280px and up) */
@media (min-width: 1280px) {
    body {
        font-size: 1.0625rem; /* 17px */
    }
}

/* Ultra wide screens (1920px and up) */
@media (min-width: 1920px) {
    .container,
    .section {
        max-width: 1600px;
    }
}

/* ============================================================================
   END OF RESPONSIVE STYLES
   ============================================================================ */