/* ── Tailwind v4 Responsive Layout Fix ────────────────────── */
/* Tailwind v4 cascade layers can cause base utilities like    */
/* .flex-col to override responsive variants like lg:flex-row. */
/* These overrides sit outside Tailwind's compilation.         */

@media (min-width: 640px) {
    .sm\:flex-row {
        flex-direction: row !important;
    }

    .sm\:flex-col {
        flex-direction: column !important;
    }

    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 768px) {
    .md\:flex-row {
        flex-direction: row !important;
    }

    .md\:flex-col {
        flex-direction: column !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;
    }
}

@media (min-width: 1024px) {
    .lg\:flex-row {
        flex-direction: row !important;
    }

    .lg\:flex-row-reverse {
        flex-direction: row-reverse !important;
    }

    .lg\:flex-col {
        flex-direction: column !important;
    }

    .lg\:w-1\/2 {
        width: 50% !important;
    }

    .lg\:w-80 {
        width: 20rem !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\:order-1 {
        order: 1 !important;
    }

    .lg\:order-2 {
        order: 2 !important;
    }

    .lg\:block {
        display: block !important;
    }

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

    .lg\:flex {
        display: flex !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\:gap-10 {
        gap: 2.5rem !important;
    }

    .lg\:pt-32 {
        padding-top: 8rem !important;
    }

    .lg\:pb-40 {
        padding-bottom: 10rem !important;
    }

    .lg\:mb-0 {
        margin-bottom: 0 !important;
    }

    .lg\:mt-0 {
        margin-top: 0 !important;
    }

    .lg\:ml-0 {
        margin-left: 0 !important;
    }

    .lg\:text-6xl {
        font-size: 3.75rem !important;
        line-height: 1 !important;
    }

    .lg\:text-7xl {
        font-size: 4.5rem !important;
        line-height: 1 !important;
    }
}

@media (min-width: 1280px) {
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}