/* ===================================================================
   QUANCHOATV - COMPREHENSIVE RESPONSIVE DESIGN
   ================================================================= */

/* ===================================================================
   MOBILE FIRST APPROACH
   ================================================================= */

/* Base Mobile Styles (320px and up) */
@media (max-width: 1919px) {
    /* Container adjustments for smaller screens */
    .bg-neutral-950.relative.min-h-screen {
        width: 100% !important;
        min-width: 320px;
    }

    /* Background adjustments */
    .absolute.bg-neutral-950.h-\[1080px\] {
        width: 100% !important;
        height: auto !important;
        min-height: 100vh;
    }

    /* Stadium background responsive */
    .absolute.h-\[1408px\] {
        width: 200% !important;
        height: auto !important;
        min-height: 100vh;
        left: -50% !important;
        top: -20% !important;
    }

    /* Decorative circles hide on mobile */
    .absolute.left-\[2054px\],
    .absolute.left-\[-1131px\] {
        display: none;
    }

    /* Content container responsive */
    .absolute.flex.flex-col.gap-\[24px\].w-\[1920px\] {
        width: 100% !important;
        position: relative !important;
        padding: 0 16px;
    }

    /* Footer responsive */
    .absolute.bg-neutral-900.bottom-0.w-\[1920px\] {
        width: 100% !important;
        position: relative !important;
        padding: 24px 16px !important;
        left: 0 !important;
        transform: none !important;
    }
}

/* ===================================================================
   TABLET BREAKPOINTS (768px - 1023px)
   ================================================================= */

@media (min-width: 768px) and (max-width: 1023px) {
    /* Header responsive */
    .bg-neutral-900.h-\[80px\].px-\[298px\] {
        padding-left: 32px !important;
        padding-right: 32px !important;
        flex-wrap: wrap;
        height: auto !important;
        min-height: 80px;
    }

    /* Logo adjustments */
    .h-\[48px\].w-\[158px\] {
        height: 40px !important;
        width: 126px !important;
    }

    /* Navigation responsive */
    .flex.flex-1.gap-\[16px\].items-center.justify-center {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 16px 0;
    }

    /* Social and contact buttons */
    .flex.gap-\[24px\].items-center:last-child {
        flex-direction: column !important;
        gap: 16px !important;
        width: 100%;
    }

    /* Hero section responsive */
    .box-border.px-\[298px\].py-\[16px\] {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    /* Title responsive */
    .w-\[950px\],
    .w-\[826px\] {
        width: 100% !important;
        max-width: none !important;
    }

    /* CTA buttons responsive */
    .flex.gap-\[24px\].items-start {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 16px !important;
    }

    /* Cards responsive */
    .w-\[311px\] {
        width: calc(50% - 12px) !important;
        min-width: 280px;
    }

    /* Sports categories responsive */
    .w-\[312px\] {
        width: calc(50% - 12px) !important;
        min-width: 280px;
    }

    /* Commentators responsive */
    .size-\[249px\] {
        width: 200px !important;
        height: 200px !important;
    }

    /* Content section responsive */
    .w-\[872px\] {
        width: 100% !important;
    }

    .w-\[424px\] {
        width: 100% !important;
        margin-top: 24px;
    }

    .flex.gap-\[24px\].items-center.justify-center {
        flex-direction: column !important;
        gap: 24px !important;
    }

    /* Image content responsive */
    .w-\[760px\] {
        width: 100% !important;
    }

    .h-\[428px\] {
        height: auto !important;
        aspect-ratio: 16/9;
    }
}

/* ===================================================================
   LARGE CTA TEXT SECTION FIXES
   ================================================================= */

/* Large CTA Text responsive */
@media (max-width: 479px) {
    .text-\[24px\] {
        font-size: 20px !important;
        line-height: 1.2;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .text-\[32px\] {
        font-size: 28px !important;
    }
}

/* Content section layout fixes */
@media (max-width: 1023px) {
    .lg\:flex-row {
        flex-direction: column !important;
    }

    .lg\:w-\[872px\] {
        width: 100% !important;
    }

    .lg\:max-w-\[65\%\] {
        max-width: 100% !important;
    }

    .lg\:w-\[424px\] {
        width: 100% !important;
    }

    .lg\:max-w-\[35\%\] {
        max-width: 100% !important;
    }

    .hidden.lg\:flex {
        display: none !important;
    }
}

/* Footer spacing fix */
footer {
    margin-top: 4rem;
}

@media (max-width: 767px) {
    footer {
        margin-top: 2rem;
    }
}

/* ===================================================================
   MOBILE BREAKPOINTS (320px - 767px)
   ================================================================= */

@media (max-width: 767px) {
    /* Header mobile */
    .bg-neutral-900.h-\[80px\].px-\[298px\] {
        padding: 16px !important;
        flex-direction: column !important;
        height: auto !important;
        gap: 16px;
    }

    /* Logo mobile */
    .h-\[48px\].w-\[158px\] {
        height: 36px !important;
        width: 118px !important;
    }

    /* Navigation mobile */
    .flex.flex-1.gap-\[16px\].items-center.justify-center {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .font-semibold.text-\[16px\] {
        font-size: 14px !important;
    }

    /* Social buttons mobile */
    .flex.gap-\[16px\].items-center {
        justify-content: center !important;
    }

    .size-\[40px\] {
        width: 36px !important;
        height: 36px !important;
    }

    /* Contact button mobile */
    .px-\[16px\].py-\[8px\] {
        padding: 6px 12px !important;
    }

    .text-\[14px\] {
        font-size: 12px !important;
    }

    /* Hero section mobile */
    .box-border.px-\[298px\].py-\[16px\] {
        padding: 16px !important;
    }

    /* Title mobile */
    .text-\[32px\] {
        font-size: 24px !important;
        line-height: 1.3;
    }

    .text-\[28px\] {
        font-size: 20px !important;
        line-height: 1.3;
    }

    .text-\[48px\] {
        font-size: 28px !important;
        line-height: 1.2;
    }

    /* CTA buttons mobile */
    .flex.gap-\[24px\].items-start {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100%;
    }

    .px-\[24px\].py-\[16px\] {
        padding: 12px 20px !important;
        width: 100%;
        min-width: 0;
        max-width: 280px;
    }

    .text-\[18px\] {
        font-size: 16px !important;
    }

    /* Cards mobile */
    .w-\[311px\] {
        width: 100% !important;
        max-width: 320px;
    }

    .px-\[64px\] {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* Sports categories mobile */
    .w-\[312px\] {
        width: 100% !important;
        max-width: 320px;
    }

    .flex.gap-\[24px\].items-start {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }

    .h-\[171px\],
    .aspect-\[1920\/1052\] {
        height: 180px !important;
        aspect-ratio: 16/9;
    }

    /* Commentators mobile */
    .flex.flex-wrap.gap-\[24px\] {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }

    .size-\[249px\] {
        width: 150px !important;
        height: 150px !important;
    }

    .h-\[312px\].w-\[250px\] {
        height: 190px !important;
        width: 150px !important;
    }

    .text-\[20px\] {
        font-size: 16px !important;
    }

    /* Content section mobile */
    .flex.gap-\[24px\].items-center.justify-center {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .w-\[872px\] {
        width: 100% !important;
    }

    .w-\[424px\] {
        width: 100% !important;
    }

    .p-\[24px\] {
        padding: 16px !important;
    }

    .w-\[760px\] {
        width: 100% !important;
    }

    .h-\[428px\] {
        height: 200px !important;
    }

    .text-\[24px\] {
        font-size: 18px !important;
    }

    .text-\[16px\] {
        font-size: 14px !important;
    }

    /* Sidebar mobile */
    .h-\[1156px\] {
        height: auto !important;
    }

    .gap-\[25px\] {
        gap: 16px !important;
    }

    .text-\[32px\] {
        font-size: 20px !important;
    }

    /* Footer mobile */
    .px-\[348px\] {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .w-\[346px\] {
        width: 200px !important;
        height: 48px !important;
    }

    .w-\[1224px\] {
        width: 100% !important;
    }
}

/* ===================================================================
   LARGE MOBILE BREAKPOINTS (480px - 767px)
   ================================================================= */

@media (min-width: 480px) and (max-width: 767px) {
    /* Slightly larger mobile adjustments */
    .text-\[32px\] {
        font-size: 26px !important;
    }

    .text-\[28px\] {
        font-size: 22px !important;
    }

    .text-\[48px\] {
        font-size: 32px !important;
    }

    .w-\[311px\],
    .w-\[312px\] {
        width: 100% !important;
        max-width: 400px;
    }

    .size-\[249px\] {
        width: 180px !important;
        height: 180px !important;
    }

    .h-\[312px\].w-\[250px\] {
        height: 225px !important;
        width: 180px !important;
    }
}

/* ===================================================================
   DESKTOP BREAKPOINTS (1024px - 1439px)
   ================================================================= */

@media (min-width: 1024px) and (max-width: 1439px) {
    .px-\[298px\] {
        padding-left: 80px !important;
        padding-right: 80px !important;
    }

    .px-\[348px\] {
        padding-left: 80px !important;
        padding-right: 80px !important;
    }

    /* Cards adjustments */
    .w-\[311px\] {
        width: calc(33.333% - 16px) !important;
        min-width: 280px;
    }

    .w-\[312px\] {
        width: calc(25% - 18px) !important;
        min-width: 280px;
    }
}

/* ===================================================================
   LARGE DESKTOP BREAKPOINTS (1440px - 1919px)
   ================================================================= */

@media (min-width: 1440px) and (max-width: 1919px) {
    .px-\[298px\] {
        padding-left: 150px !important;
        padding-right: 150px !important;
    }

    .px-\[348px\] {
        padding-left: 150px !important;
        padding-right: 150px !important;
    }

    /* Maintain card sizes but with better spacing */
    .gap-\[24px\] {
        gap: 20px !important;
    }
}

/* ===================================================================
   UTILITY CLASSES FOR RESPONSIVE BEHAVIOR
   ================================================================= */

/* Hide elements on mobile */
@media (max-width: 767px) {
    .mobile-hide {
        display: none !important;
    }
}

/* Show only on mobile */
.mobile-only {
    display: none !important;
}

@media (max-width: 767px) {
    .mobile-only {
        display: block !important;
    }
}

/* Responsive text scaling */
.responsive-text {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
}

.responsive-heading {
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.responsive-title {
    font-size: clamp(2rem, 6vw, 3rem);
}

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

/* GPU acceleration for smooth animations */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
}

/* Optimize images for responsive */
img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* Ensure buttons are touch-friendly */
@media (max-width: 767px) {
    button,
    a[role="button"],
    .cursor-pointer {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ===================================================================
   ACCESSIBILITY IMPROVEMENTS
   ================================================================= */

/* Focus states for keyboard navigation */
button:focus,
a:focus {
    outline: 2px solid #83ff65;
    outline-offset: 2px;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .text-neutral-500 {
        color: #ffffff !important;
    }

    .bg-neutral-900 {
        border: 1px solid #83ff65 !important;
    }
}