/*
 * Tailwind compat layer for responsive variants that are not present in assets/css/theme.css
 * (because theme.css was compiled from the React app and purged PHP-only classes).
 *
 * This file adds only the variants used by this WordPress theme + theme.js.
 */

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:flex-row { flex-direction: row; }
  .md\:items-center { align-items: center; }
  .md\:justify-between { justify-content: space-between; }

  .md\:w-auto { width: auto; }
  .md\:w-72 { width: 18rem; }  /* 72 * 0.25rem */
  .md\:w-96 { width: 24rem; }  /* 96 * 0.25rem */

  .md\:p-10 { padding: 2.5rem; } /* 10 * 0.25rem */

  .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }

  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }

  .lg\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }

  /* Arbitrary aspect ratio used in hero */
  .lg\:aspect-\[16\/10\] { aspect-ratio: 16 / 10; }
}