/* ============================================
   RESPONSIVE GRID UTILITIES
   Manual fix for Tailwind JIT not generating lg: classes
   ============================================ */

/* sm: breakpoint (640px) - Mobile */
@media (min-width: 640px) {
  .sm\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !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\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .sm\:flex-row {
    flex-direction: row !important;
  }
  .sm\:block {
    display: block !important;
  }
  .sm\:table-cell {
    display: table-cell !important;
  }
  .sm\:hidden {
    display: none !important;
  }
}

/* md: breakpoint (768px) - Tablet */
@media (min-width: 768px) {
  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !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\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  .md\:col-span-1 {
    grid-column: span 1 / span 1 !important;
  }
  .md\:col-span-2 {
    grid-column: span 2 / span 2 !important;
  }
  .md\:col-span-3 {
    grid-column: span 3 / span 3 !important;
  }
  .md\:block {
    display: block !important;
  }
  .md\:flex {
    display: flex !important;
  }
  .md\:hidden {
    display: none !important;
  }
  .md\:table-cell {
    display: table-cell !important;
  }
  .md\:p-6 {
    padding: 1.5rem !important;
  }
  .md\:pt-4 {
    padding-top: 1rem !important;
  }
  .md\:px-5 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  .md\:gap-4 {
    gap: 1rem !important;
  }
  .md\:gap-6 {
    gap: 1.5rem !important;
  }
  .md\:mb-6 {
    margin-bottom: 1.5rem !important;
  }
  .md\:p-8 {
    padding: 2rem !important;
  }
  .md\:w-auto {
    width: auto !important;
  }
  .md\:text-3xl {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
  }
  .md\:text-sm {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
  }
  .md\:text-base {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
  }
  .md\:text-lg {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
  }
  .md\:items-center {
    align-items: center !important;
  }
  .md\:justify-between {
    justify-content: space-between !important;
  }
  .md\:flex-row {
    flex-direction: row !important;
  }
  .md\:gap-4 {
    gap: 1rem !important;
  }
  .md\:inline {
    display: inline !important;
  }
}

/* lg: breakpoint (1024px) - Desktop */
@media (min-width: 1024px) {
  .lg\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !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\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }
  .lg\:col-span-1 {
    grid-column: span 1 / span 1 !important;
  }
  .lg\:col-span-2 {
    grid-column: span 2 / span 2 !important;
  }
  .lg\:col-span-3 {
    grid-column: span 3 / span 3 !important;
  }
  .lg\:col-span-6 {
    grid-column: span 6 / span 6 !important;
  }
  .lg\:col-span-8 {
    grid-column: span 8 / span 8 !important;
  }
  .lg\:col-span-full {
    grid-column: 1 / -1 !important;
  }
  .lg\:block {
    display: block !important;
  }
  .lg\:flex {
    display: flex !important;
  }
  .lg\:hidden {
    display: none !important;
  }
}

/* xl: breakpoint (1280px) - Large Desktop */
@media (min-width: 1280px) {
  .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\:col-span-1 {
    grid-column: span 1 / span 1 !important;
  }
  .xl\:col-span-2 {
    grid-column: span 2 / span 2 !important;
  }
  .xl\:col-span-3 {
    grid-column: span 3 / span 3 !important;
  }
  .xl\:block {
    display: block !important;
  }
  .xl\:flex {
    display: flex !important;
  }
  .xl\:hidden {
    display: none !important;
  }
  .xl\:sticky {
    position: sticky !important;
  }
  .xl\:top-20 {
    top: 5rem !important;
  }
  .xl\:pb-0 {
    padding-bottom: 0 !important;
  }
  .xl\:flex-row {
    flex-direction: row !important;
  }
  .xl\:flex-col {
    flex-direction: column !important;
  }
  .xl\:items-start {
    align-items: flex-start !important;
  }
  .xl\:w-1\/3 {
    width: 33.333333% !important;
  }
  .xl\:w-2\/3 {
    width: 66.666667% !important;
  }
}

/* Mobile-first responsive helpers */
@media (max-width: 639px) {
  .mobile-stack {
    flex-direction: column !important;
  }
  .mobile-full {
    width: 100% !important;
  }
  .mobile-hidden {
    display: none !important;
  }
}

/* Touch-friendly sizing for mobile */
@media (max-width: 768px) {
  .touch-target {
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

/* Scrollbar utilities for cleaner mobile look */
.scrollbar-hide {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none !important;
}

/* ============================================
   ORDER UTILITIES
   For reordering flex/grid children responsively
   ============================================ */

/* Mobile-first: move sidebar above content on mobile */
.mobile-order-first {
  order: -1 !important;
}
.mobile-order-last {
  order: 999 !important;
}

/* lg: order utilities */
@media (min-width: 1024px) {
  .lg\:order-first {
    order: -1 !important;
  }
  .lg\:order-last {
    order: 999 !important;
  }
  .lg\:order-none {
    order: 0 !important;
  }
  .lg\:order-1 {
    order: 1 !important;
  }
  .lg\:order-2 {
    order: 2 !important;
  }
}

/* md: order utilities */
@media (min-width: 768px) {
  .md\:order-first {
    order: -1 !important;
  }
  .md\:order-last {
    order: 999 !important;
  }
  .md\:order-none {
    order: 0 !important;
  }
}

/* ============================================
   ADDITIONAL RESPONSIVE UTILITIES
   ============================================ */

/* lg: additional display + flex */
@media (min-width: 1024px) {
  .lg\:inline-flex {
    display: inline-flex !important;
  }
  .lg\:flex-col {
    flex-direction: column !important;
  }
  .lg\:items-start {
    align-items: flex-start !important;
  }
  .lg\:items-center {
    align-items: center !important;
  }
  .lg\:justify-between {
    justify-content: space-between !important;
  }
  .lg\:gap-4 {
    gap: 1rem !important;
  }
  .lg\:gap-6 {
    gap: 1.5rem !important;
  }
  .lg\:gap-8 {
    gap: 2rem !important;
  }
  .lg\:p-6 {
    padding: 1.5rem !important;
  }
  .lg\:p-8 {
    padding: 2rem !important;
  }
  .lg\:px-8 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .lg\:py-16 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  .lg\:text-2xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }
  .lg\:text-3xl {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
  }
  .lg\:text-4xl {
    font-size: 2.25rem !important;
    line-height: 2.5rem !important;
  }
  .lg\:w-1\/3 {
    width: 33.333333% !important;
  }
  .lg\:w-2\/3 {
    width: 66.666667% !important;
  }
  .lg\:w-1\/4 {
    width: 25% !important;
  }
  .lg\:w-3\/4 {
    width: 75% !important;
  }
  .lg\:w-1\/2 {
    width: 50% !important;
  }
  .lg\:w-full {
    width: 100% !important;
  }
  .lg\:max-w-3xl {
    max-width: 48rem !important;
  }
  .lg\:max-w-4xl {
    max-width: 56rem !important;
  }
  .lg\:max-w-5xl {
    max-width: 64rem !important;
  }
  .lg\:sticky {
    position: sticky !important;
  }
  .lg\:top-24 {
    top: 6rem !important;
  }
  .lg\:top-20 {
    top: 5rem !important;
  }
}

/* md: additional utilities */
@media (min-width: 768px) {
  .md\:flex-col {
    flex-direction: column !important;
  }
  .md\:inline-flex {
    display: inline-flex !important;
  }
  .md\:gap-8 {
    gap: 2rem !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-4xl {
    font-size: 2.25rem !important;
    line-height: 2.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\:w-1\/2 {
    width: 50% !important;
  }
  .md\:w-1\/3 {
    width: 33.333333% !important;
  }
  .md\:w-2\/3 {
    width: 66.666667% !important;
  }
  .md\:w-full {
    width: 100% !important;
  }
  .md\:max-w-2xl {
    max-width: 42rem !important;
  }
  .md\:max-w-3xl {
    max-width: 48rem !important;
  }
  .md\:sticky {
    position: sticky !important;
  }
}

/* sm: additional utilities */
@media (min-width: 640px) {
  .sm\:text-lg {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
  }
  .sm\:text-xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }
  .sm\:text-2xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }
  .sm\:text-3xl {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
  }
  .sm\:px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !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\:w-full {
    width: 100% !important;
  }
  .sm\:w-auto {
    width: auto !important;
  }
  .sm\:items-center {
    align-items: center !important;
  }
  .sm\:justify-between {
    justify-content: space-between !important;
  }
}

/* ============================================
   MOBILE TYPOGRAPHY IMPROVEMENTS
   Ensure readable text sizes on small screens
   ============================================ */
@media (max-width: 639px) {
  /* Prevent text from being too large on mobile headings */
  h1.mobile-heading {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }
  h2.mobile-heading {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }
  /* Prevent overflow on long words */
  .prose, .article-content, .content-body {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* ============================================
   SEARCH PAGE SIDEBAR RESPONSIVE FIX
   Show category/tag filters before results on mobile
   ============================================ */
@media (max-width: 1023px) {
  .search-aside-mobile {
    order: -1 !important;
  }
}

/* ============================================
   TABLE RESPONSIVE WRAPPER
   Ensure tables scroll horizontally on mobile
   ============================================ */
.table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.table-responsive table {
  min-width: 600px;
}

/* ============================================
   COOKIE NOTICE BODY PADDING
   Prevents content from being hidden behind cookie bar
   ============================================ */
body.cookie-notice-visible {
  padding-bottom: 72px !important;
}
@media (max-width: 639px) {
  body.cookie-notice-visible {
    padding-bottom: 100px !important;
  }
}