/* Legacy-Safari compatibility, served verbatim.
 *
 * WHY THIS IS NOT IN src/index.css: Tailwind v4's pipeline rewrites media
 * queries into CSS RANGE SYNTAX - `@media (min-width: 640px)` comes out the
 * other side as `@media (width>=640px)`. That was tried, and the built CSS was
 * checked: the rewrite happens, so a fallback written there is not a fallback at
 * all. Files in public/ are copied without processing, which is the only way to
 * guarantee the syntax that ships is the syntax that was written.
 *
 * WHAT IT IS FOR: Safari parses range syntax only from 16.4 (March 2023). On an
 * older iPadOS the query fails to parse and the browser drops the WHOLE block -
 * every breakpoint at once, no error, nothing in the console. Tailwind v4 targets
 * Safari 16.4+ by design, so that is expected behaviour rather than a build bug.
 *
 * SCOPED TO ONE GRID ON PURPOSE. If the device really is pre-16.4 then far more
 * of the stylesheet is already being dropped, and the answer is updating the
 * device rather than downlevelling the whole build the night before a demo. This
 * exists so tomorrow does not depend on the device's age.
 *
 * Where range syntax also works, both rules apply and say the same thing, so
 * there is nothing to reconcile.
 */
@media (min-width: 640px) {
  .demo-landing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }
}

/* `hidden sm:block` is a TRAP on Safari 15.
 *
 * `.hidden{display:none}` is unconditional, while `.sm\:block{display:block}`
 * lives inside `@media (width>=640px)` - the block Safari 15 drops whole. So the
 * element is display:none at EVERY width, and it presents as "a thing that isn't
 * showing" rather than as a breakpoint fault, which is why it took a bug report
 * from a stand to find.
 *
 * Add `compat-sm-block` alongside `hidden sm:block` anywhere the hidden state has
 * no fallback - i.e. where nothing else takes its place below the breakpoint.
 * Paired patterns (`hidden lg:block` next to a `lg:hidden` mobile variant)
 * degrade gracefully on their own: the mobile variant simply stays visible.
 *
 * This works despite compat.css being linked FIRST because Tailwind's utilities
 * sit in `@layer utilities`, and unlayered CSS beats layered CSS regardless of
 * source order. Do not "fix" the link order on the assumption that it matters.
 */
@media (min-width: 640px) {
  .compat-sm-block {
    display: block;
  }
}