/* responsive.css — responsive overrides for classes used in JS-generated HTML
   These classes appear in JS template literals so Tailwind scanner misses them.
   This file is appended after main.css in all HTML pages. */

@media (min-width: 640px) {
    .sm\:block { display: block !important; }
    .sm\:p-6 { padding: 1.5rem !important; }
    .sm\:text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
    .sm\:mb-8 { margin-bottom: 2rem !important; }
}

@media (min-width: 768px) {
    .md\:flex { display: flex !important; }
    .md\:hidden { display: none !important; }
    .md\:flex-row { flex-direction: row !important; }
    .md\:block { display: block !important; }
    .md\:inline { display: inline !important; }
    .md\:grid { display: grid !important; }
    .md\:py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .md\:py-8 { padding-top: 2rem !important; padding-bottom: 2rem !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\:p-5 { padding: 1.25rem !important; }
    .md\:p-6 { padding: 1.5rem !important; }
    .md\:p-8 { padding: 2rem !important; }
    .md\:p-12 { padding: 3rem !important; }
    .md\:px-0 { padding-left: 0 !important; padding-right: 0 !important; }
    .md\:mb-4 { margin-bottom: 1rem !important; }
    .md\:mb-6 { margin-bottom: 1.5rem !important; }
    .md\:mb-8 { margin-bottom: 2rem !important; }
    .md\:mb-10 { margin-bottom: 2.5rem !important; }
    .md\:mb-12 { margin-bottom: 3rem !important; }
    .md\:mb-16 { margin-bottom: 4rem !important; }
    .md\:mb-20 { margin-bottom: 5rem !important; }
    .md\:text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
    .md\:text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
    .md\:text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
    .md\:text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
    .md\:text-5xl { font-size: 3rem !important; line-height: 1 !important; }
    .md\:text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
    .md\:text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
    .md\:rounded-\[3rem\] { border-radius: 3rem !important; }
    .md\:rounded-\[2rem\] { border-radius: 2rem !important; }
    .md\:gap-4 { gap: 1rem !important; }
    .md\:gap-6 { gap: 1.5rem !important; }
    .md\:gap-8 { gap: 2rem !important; }
    .md\:gap-16 { gap: 4rem !important; }
    .md\:space-x-6 > :not([hidden]) ~ :not([hidden]) { margin-left: 1.5rem !important; }
    .md\:leading-\[1\.15\] { line-height: 1.15 !important; }
}

@media (min-width: 1024px) {
    .lg\:flex { display: flex !important; }
    .lg\:hidden { display: none !important; }
    .lg\:block { display: block !important; }
    .lg\:flex-row { flex-direction: row !important; }
    .lg\:w-2\/3 { width: 66.666667% !important; }
    .lg\:w-1\/3 { width: 33.333333% !important; }
    .lg\:w-full { width: 100% !important; }
    .lg\:gap-8 { gap: 2rem !important; }
    .lg\:gap-16 { gap: 4rem !important; }
    .lg\:text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
    .lg\:text-5xl { font-size: 3rem !important; line-height: 1 !important; }
    .lg\:leading-\[1\.15\] { line-height: 1.15 !important; }
    .lg\:sticky { position: sticky !important; }
    .lg\:top-32 { top: 8rem !important; }
}