/*
 * Areas Covered — scoped styles
 * -----------------------------------------------------------------------------
 * HAND-WRITTEN. This is NOT build output.
 *
 * Why this file exists: dist/main.min.css is a *purged* Tailwind build from
 * 2025-04-04, and this server has no shell, so `gulp styles` cannot be run to
 * add classes to it. Every Tailwind class used by the Areas Covered templates
 * was checked to already exist in that bundle; the handful of things Tailwind
 * would otherwise provide live here instead.
 *
 * Gulp never touches this file — its styles task compiles only
 * _assets/styles/main.css into dist/main.min.css.
 *
 * Enqueued by _functions/Areas.php, and only on:
 *   - single areas       (/areas-covered/<town>/)
 *   - the hub page       (/areas-covered/)
 *   - any page containing the acf/areas-covered block
 *
 * Everything is namespaced under .areas-covered-* so it cannot leak into the
 * rest of the site. Safe to delete along with the rest of the feature.
 */

/* Intro paragraph above a grid — Tailwind's max-w-prose / mx-auto pairing
   isn't in the purged bundle, so centre-constrain it here. */
.areas-covered-intro {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
}

/* The heading/intro sit directly above the card grid; give the grid air. */
.areas-covered-grid {
	margin-top: 2rem;
}

/* "View all areas" button under a grid. */
.areas-covered-viewall {
	margin-top: 2.5rem;
}

/* Postcode line on a single area page. */
.areas-covered-postcodes {
	padding-top: 1.5rem;
	margin-bottom: 0.5rem;
	font-size: 0.95rem;
}

/* Hero standfirst on a single area page — keep it readable over the image
   overlay and stop it running the full width on large screens. */
.areas-covered-hero-intro {
	max-width: 38rem;
	margin-top: 0.5rem;
	line-height: 1.5;
}

/* The cards are w-full below the sm breakpoint; on very small screens the
   fixed max-w-sm can leave them looking narrow next to the container. */
@media (max-width: 640px) {
	.areas-covered-grid > a {
		max-width: 100%;
	}
}