/* ============================================
   Responsive Utilities
   ============================================ */

/* Breakpoints */
/* sm: 640px */
/* md: 768px */
/* lg: 1024px */
/* xl: 1280px */
/* 2xl: 1536px */

/* Mobile First Approach */

/* Extra small devices (phones, less than 640px) */
@media (max-width: 639px) {
    .xs\:hidden {
        display: none !important;
    }
    
    .xs\:block {
        display: block !important;
    }
    
    .xs\:flex {
        display: flex !important;
    }
    
    .xs\:grid {
        display: grid !important;
    }
    
    .xs\:text-xs {
        font-size: 0.75rem !important;
    }
    
    .xs\:text-sm {
        font-size: 0.875rem !important;
    }
    
    .xs\:text-base {
        font-size: 1rem !important;
    }
    
    .xs\:text-lg {
        font-size: 1.125rem !important;
    }
    
    .xs\:text-xl {
        font-size: 1.25rem !important;
    }
    
    .xs\:text-2xl {
        font-size: 1.5rem !important;
    }
    
    .xs\:p-2 {
        padding: 0.5rem !important;
    }
    
    .xs\:p-4 {
        padding: 1rem !important;
    }
    
    .xs\:px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .xs\:py-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    .xs\:m-2 {
        margin: 0.5rem !important;
    }
    
    .xs\:m-4 {
        margin: 1rem !important;
    }
    
    .xs\:mx-auto {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .xs\:my-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
}

/* Small devices (landscape phones, 640px and up) */
@media (min-width: 640px) {
    .sm\:block {
        display: block !important;
    }
    
    .sm\:flex {
        display: flex !important;
    }
    
    .sm\:grid {
        display: grid !important;
    }
    
    .sm\:hidden {
        display: none !important;
    }
    
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    
    .sm\:text-sm {
        font-size: 0.875rem !important;
    }
    
    .sm\:text-base {
        font-size: 1rem !important;
    }
    
    .sm\:text-lg {
        font-size: 1.125rem !important;
    }
    
    .sm\:text-xl {
        font-size: 1.25rem !important;
    }
    
    .sm\:text-2xl {
        font-size: 1.5rem !important;
    }
    
    .sm\:text-3xl {
        font-size: 1.875rem !important;
    }
    
    .sm\:text-4xl {
        font-size: 2.25rem !important;
    }
    
    .sm\:p-4 {
        padding: 1rem !important;
    }
    
    .sm\:p-6 {
        padding: 1.5rem !important;
    }
    
    .sm\:p-8 {
        padding: 2rem !important;
    }
    
    .sm\:px-6 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    .sm\:py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    .sm\:py-8 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .sm\:gap-4 {
        gap: 1rem !important;
    }
    
    .sm\:gap-6 {
        gap: 1.5rem !important;
    }
    
    .sm\:gap-8 {
        gap: 2rem !important;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .md\:block {
        display: block !important;
    }
    
    .md\:flex {
        display: flex !important;
    }
    
    .md\:grid {
        display: grid !important;
    }
    
    .md\:hidden {
        display: none !important;
    }
    
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    
    .md\:flex-row {
        flex-direction: row !important;
    }
    
    .md\:flex-col {
        flex-direction: column !important;
    }
    
    .md\:text-lg {
        font-size: 1.125rem !important;
    }
    
    .md\:text-xl {
        font-size: 1.25rem !important;
    }
    
    .md\:text-2xl {
        font-size: 1.5rem !important;
    }
    
    .md\:text-3xl {
        font-size: 1.875rem !important;
    }
    
    .md\:text-4xl {
        font-size: 2.25rem !important;
    }
    
    .md\:text-5xl {
        font-size: 3rem !important;
    }
    
    .md\:text-6xl {
        font-size: 3.75rem !important;
    }
    
    .md\:p-6 {
        padding: 1.5rem !important;
    }
    
    .md\:p-8 {
        padding: 2rem !important;
    }
    
    .md\:p-12 {
        padding: 3rem !important;
    }
    
    .md\:px-8 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    
    .md\:py-6 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    .md\:py-12 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    .md\:py-16 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    
    .md\:py-20 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
    
    .md\:gap-6 {
        gap: 1.5rem !important;
    }
    
    .md\:gap-8 {
        gap: 2rem !important;
    }
    
    .md\:gap-12 {
        gap: 3rem !important;
    }
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
    .lg\:block {
        display: block !important;
    }
    
    .lg\:flex {
        display: flex !important;
    }
    
    .lg\:grid {
        display: grid !important;
    }
    
    .lg\:hidden {
        display: none !important;
    }
    
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    
    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
    
    .lg\:flex-row {
        flex-direction: row !important;
    }
    
    .lg\:flex-col {
        flex-direction: column !important;
    }
    
    .lg\:text-xl {
        font-size: 1.25rem !important;
    }
    
    .lg\:text-2xl {
        font-size: 1.5rem !important;
    }
    
    .lg\:text-3xl {
        font-size: 1.875rem !important;
    }
    
    .lg\:text-4xl {
        font-size: 2.25rem !important;
    }
    
    .lg\:text-5xl {
        font-size: 3rem !important;
    }
    
    .lg\:text-6xl {
        font-size: 3.75rem !important;
    }
    
    .lg\:text-7xl {
        font-size: 4.5rem !important;
    }
    
    .lg\:p-8 {
        padding: 2rem !important;
    }
    
    .lg\:p-12 {
        padding: 3rem !important;
    }
    
    .lg\:p-16 {
        padding: 4rem !important;
    }
    
    .lg\:p-20 {
        padding: 5rem !important;
    }
    
    .lg\:px-12 {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
    
    .lg\:py-8 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .lg\:py-12 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    .lg\:py-16 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    
    .lg\:py-20 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
    
    .lg\:py-24 {
        padding-top: 6rem !important;
        padding-bottom: 6rem !important;
    }
    
    .lg\:py-32 {
        padding-top: 8rem !important;
        padding-bottom: 8rem !important;
    }
    
    .lg\:gap-8 {
        gap: 2rem !important;
    }
    
    .lg\:gap-12 {
        gap: 3rem !important;
    }
    
    .lg\:gap-16 {
        gap: 4rem !important;
    }
}

/* Extra large devices (large desktops, 1280px and up) */
@media (min-width: 1280px) {
    .xl\:block {
        display: block !important;
    }
    
    .xl\:flex {
        display: flex !important;
    }
    
    .xl\:grid {
        display: grid !important;
    }
    
    .xl\:hidden {
        display: none !important;
    }
    
    .xl\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    
    .xl\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
    
    .xl\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
    
    .xl\:text-2xl {
        font-size: 1.5rem !important;
    }
    
    .xl\:text-3xl {
        font-size: 1.875rem !important;
    }
    
    .xl\:text-4xl {
        font-size: 2.25rem !important;
    }
    
    .xl\:text-5xl {
        font-size: 3rem !important;
    }
    
    .xl\:text-6xl {
        font-size: 3.75rem !important;
    }
    
    .xl\:text-7xl {
        font-size: 4.5rem !important;
    }
    
    .xl\:text-8xl {
        font-size: 6rem !important;
    }
    
    .xl\:p-12 {
        padding: 3rem !important;
    }
    
    .xl\:p-16 {
        padding: 4rem !important;
    }
    
    .xl\:p-20 {
        padding: 5rem !important;
    }
    
    .xl\:p-24 {
        padding: 6rem !important;
    }
    
    .xl\:px-16 {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }
    
    .xl\:py-12 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    .xl\:py-16 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    
    .xl\:py-20 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
    
    .xl\:py-24 {
        padding-top: 6rem !important;
        padding-bottom: 6rem !important;
    }
    
    .xl\:py-32 {
        padding-top: 8rem !important;
        padding-bottom: 8rem !important;
    }
    
    .xl\:gap-12 {
        gap: 3rem !important;
    }
    
    .xl\:gap-16 {
        gap: 4rem !important;
    }
    
    .xl\:gap-20 {
        gap: 5rem !important;
    }
}

/* 2XL devices (larger desktops, 1536px and up) */
@media (min-width: 1536px) {
    .2xl\:block {
        display: block !important;
    }
    
    .2xl\:flex {
        display: flex !important;
    }
    
    .2xl\:grid {
        display: grid !important;
    }
    
    .2xl\:hidden {
        display: none !important;
    }
    
    .2xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    
    .2xl\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
    
    .2xl\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
    
    .2xl\:text-3xl {
        font-size: 1.875rem !important;
    }
    
    .2xl\:text-4xl {
        font-size: 2.25rem !important;
    }
    
    .2xl\:text-5xl {
        font-size: 3rem !important;
    }
    
    .2xl\:text-6xl {
        font-size: 3.75rem !important;
    }
    
    .2xl\:text-7xl {
        font-size: 4.5rem !important;
    }
    
    .2xl\:text-8xl {
        font-size: 6rem !important;
    }
    
    .2xl\:text-9xl {
        font-size: 8rem !important;
    }
    
    .2xl\:p-16 {
        padding: 4rem !important;
    }
    
    .2xl\:p-20 {
        padding: 5rem !important;
    }
    
    .2xl\:p-24 {
        padding: 6rem !important;
    }
    
    .2xl\:p-32 {
        padding: 8rem !important;
    }
    
    .2xl\:px-20 {
        padding-left: 5rem !important;
        padding-right: 5rem !important;
    }
    
    .2xl\:py-16 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    
    .2xl\:py-20 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
    
    .2xl\:py-24 {
        padding-top: 6rem !important;
        padding-bottom: 6rem !important;
    }
    
    .2xl\:py-32 {
        padding-top: 8rem !important;
        padding-bottom: 8rem !important;
    }
    
    .2xl\:gap-16 {
        gap: 4rem !important;
    }
    
    .2xl\:gap-20 {
        gap: 5rem !important;
    }
    
    .2xl\:gap-24 {
        gap: 6rem !important;
    }
}

/* Container utilities */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container {
    max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
    max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
    max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
    max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .container {
    max-width: 1536px;
    }
}

/* Print utilities */
@media print {
    .print\:hidden {
        display: none !important;
    }
    
    .print\:block {
        display: block !important;
    }
    
    .print\:text-black {
        color: #000 !important;
    }
    
    .print\:bg-white {
        background-color: #fff !important;
    }
}