/* Responsive Design Fixes for Homepage */

/* Base responsive container */
@media (max-width: 1920px) {
    .w-\[1920px\] {
        width: 100vw !important;
    }

    .px-\[298px\] {
        padding-left: min(298px, 5vw) !important;
        padding-right: min(298px, 5vw) !important;
    }

    .px-\[348px\] {
        padding-left: min(348px, 5vw) !important;
        padding-right: min(348px, 5vw) !important;
    }
}

/* Tablet and smaller screens */
@media (max-width: 1200px) {
    .px-\[298px\] {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

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

    /* Hero title responsive */
    .text-\[32px\] {
        font-size: 24px !important;
    }

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

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

    /* Cards stack on smaller screens */
    .flex.gap-\[24px\] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .w-\[311px\] {
        width: 280px !important;
        min-width: 280px;
    }

    .w-\[312px\] {
        width: 280px !important;
        min-width: 280px;
    }

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

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

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

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

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

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

/* Mobile screens */
@media (max-width: 768px) {
    .px-\[298px\] {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

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

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

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

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

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

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

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

    /* Header mobile */
    .h-\[80px\] {
        height: auto !important;
        min-height: 60px;
        padding: 10px 0;
    }

    .h-\[48px\] {
        height: 40px !important;
    }

    .w-\[158px\] {
        width: 120px !important;
    }

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

    .size-\[24px\] {
        width: 20px !important;
        height: 20px !important;
    }

    /* Navigation mobile - stack vertically */
    .flex.gap-\[16px\].items-center.justify-center {
        flex-wrap: wrap;
        gap: 8px;
    }

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

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

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

    .size-\[96px\] {
        width: 60px !important;
        height: 60px !important;
    }

    .h-\[80px\] {
        height: 60px !important;
    }

    .w-\[264px\] {
        width: 200px !important;
    }

    .h-\[64px\] {
        height: 50px !important;
    }

    .w-\[212px\] {
        width: 160px !important;
    }

    /* Commentator images mobile */
    .size-\[249px\] {
        width: 150px !important;
        height: 150px !important;
    }

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

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

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

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

    .h-\[1156px\] {
        height: auto !important;
        min-height: 400px;
    }

    .h-\[1108px\] {
        height: 300px !important;
    }

    .w-\[950px\], .w-\[826px\], .w-\[760px\], .w-\[1224px\], .w-\[346px\] {
        width: 100% !important;
        max-width: none;
    }

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

    /* Sports category images mobile */
    .h-\[171px\] {
        height: 140px !important;
    }

    /* Footer mobile */
    .w-\[346px\] {
        width: 200px !important;
    }
}

/* Small mobile screens */
@media (max-width: 480px) {
    .px-\[298px\], .px-\[348px\] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

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

    .px-\[24px\], .py-\[24px\] {
        padding: 15px !important;
    }

    .px-\[16px\] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .gap-\[24px\] {
        gap: 15px !important;
    }

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

    .gap-\[8px\] {
        gap: 6px !important;
    }

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

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

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

    /* Header very small */
    .h-\[48px\] {
        height: 35px !important;
    }

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

    /* Cards very small */
    .w-\[311px\], .w-\[312px\] {
        width: 100% !important;
    }

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

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

    .w-\[250px\] {
        width: 120px !important;
    }
}

/* Fix for very wide screens */
@media (min-width: 1921px) {
    .w-\[1920px\] {
        width: 1920px !important;
        margin: 0 auto;
    }
}

/* Ensure images don't break */
img {
    max-width: 100%;
    height: auto;
}

/* Fixed image container sizes */
.size-\[96px\] img,
.size-\[249px\] img,
.h-\[80px\] img,
.h-\[64px\] img,
.h-\[48px\] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ensure proper text wrapping on mobile */
@media (max-width: 768px) {
    .whitespace-nowrap {
        white-space: normal !important;
    }

    p, div {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* Hide overflow on main container */
body, html {
    overflow-x: hidden;
}

/* Ensure proper stacking */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

/* Fix for decoration circles on mobile */
@media (max-width: 768px) {
    .left-\[2054px\],
    .left-\[-1131px\] {
        display: none !important;
    }
}