/**
 * Dr SW Clinics — treatment archive card fix (small screens only)
 * -----------------------------------------------------------------------------
 * THE BUG
 * The theme lays out `.columns` as a wrapping COLUMN-direction flexbox and only
 * switches it to row direction at 30rem (480px):
 *
 *   .columns { display:flex; flex-direction:column; flex-wrap:wrap; }
 *   @media (min-width:30rem) { .columns { flex-direction:row } }
 *
 * On the treatment archives the cards are DIRECT children of that flex
 * container (elsewhere on the site they're wrapped in .block-column divs, which
 * is why only these pages break). Below 480px each card box collapses to the
 * height of its text — the featured image, sized by `aspect-ratio`, stops
 * contributing height and spills over the card beneath it. The result is
 * overlapping images with the titles hidden underneath.
 *
 * Verified against the live page source rendered at 390px: card box 81px tall,
 * image inside it 193px tall, next card starting 105px down — an 88px overlap.
 *
 * THE FIX
 * Below 480px, lay the archive out as a single-column grid. Grid items size to
 * their content, so the aspect-ratio image is measured correctly and the
 * overlap disappears (card box becomes 232px, next card starts at 256px).
 *
 * Scope is deliberately tight:
 *   - only `.archive.columns` (the FacetWP card grid on treatment archives)
 *   - only below 480px, which is exactly the range the theme leaves in
 *     column-direction. From 480px up the theme's own two-column layout is
 *     untouched.
 */

@media only screen and (max-width: 29.999rem) {

	.archive.columns {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--spacing, 1.5rem);
	}
}