/* Local page sections — Top 5 Pests + Local Blogs (2026-08).
   Enqueued on location AND city-service singles (see functions.php).

   WHY THIS FILE EXISTS
   --------------------
   assets/css/tailwind.css is a FROZEN build from 2026-02-13 and the theme has
   no build step right now, so any utility class that is not already compiled
   into that file does literally nothing. Audited 2026-08-20 against
   assets/css/tailwind.css + assets/css/main.css, these are absent:

     grid-cols-3        grid-cols-5        md:grid-cols-5     lg:grid-cols-5
     xs:grid-cols-2     xs:grid-cols-3     line-clamp-*       text-md

   which means neither the 5-up pest grid nor a 3-up intermediate step can be
   expressed in utilities at all, and there is no line clamp for the blog card
   excerpts. Same situation, same answer as assets/css/location-hero-form.css
   on 2026-08-11: hand-written CSS instead of classes that silently no-op.

   The templates still use compiled utilities for everything that IS available
   (spacing, colour, type, borders, radii) — only the grids, the clamps and the
   card chrome live here.

   BREAKPOINTS are the theme's custom scale (tailwind.config.js), NOT Tailwind
   defaults. Anything written here must match:
     xxs 480   xs 640   sm 768   md 960   lg 1024   xl 1280
   Mobile-first, min-width only, so the cascade matches how the utilities that
   sit alongside these rules behave.

   When the Tailwind build is restored, the clamp helpers can go away in favour
   of line-clamp-*; the two grids should stay — a 5-up has no utility spelling
   at the md breakpoint even in a fresh build unless grid-cols-5 is generated. */

/* ---------------------------------------------------------------------------
   Shared helpers
   --------------------------------------------------------------------------- */

/* Line clamps. `line-clamp-*` is not in the frozen build. -webkit-box is still
   the only cross-browser spelling; `display:-webkit-box` is honoured by every
   engine including Firefox 68+ and does not affect the box's own layout here
   because the element is a plain block of text. */
.alta-clamp-2,
.alta-clamp-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.alta-clamp-2 {
	-webkit-line-clamp: 2;
}

.alta-clamp-3 {
	-webkit-line-clamp: 3;
}

/* ---------------------------------------------------------------------------
   Top 5 Pests
   --------------------------------------------------------------------------- */

/* 2 columns → 3 at 640 (xs) → 5 at 960 (md).
   Five never fits below 960 without the labels wrapping to three lines, which
   is why the middle step exists rather than jumping 2 → 5. */
.alta-top-pests__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

@media (min-width: 640px) {
	.alta-top-pests__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

@media (min-width: 960px) {
	.alta-top-pests__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

/* Card. The whole card is the link, so it needs the anchor reset that the
   theme's global `a` styles would otherwise fight. */
.alta-top-pests__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	height: 100%;
	text-align: center;
	text-decoration: none;
	transition:
		box-shadow 0.2s ease,
		transform 0.2s ease,
		border-color 0.2s ease;
}

.alta-top-pests__card:hover,
.alta-top-pests__card:focus-visible {
	border-color: #78d64b; /* secondary.DEFAULT */
	transform: translateY(-2px);
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.alta-top-pests__card {
		transition: none;
	}

	.alta-top-pests__card:hover,
	.alta-top-pests__card:focus-visible {
		transform: none;
	}
}

/* Values deliberately match the w-12 / h-12 / mb-4 / object-contain utilities
   also on the element, so the icon renders identically whether or not the
   frozen Tailwind build is the one serving the page. */
.alta-top-pests__icon {
	display: block;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1rem;
	object-fit: contain;
}

/* Label needs to hold "Stinging Insects" in a 5-up column at 960px without
   the cards going ragged, so the type is fluid rather than a fixed step. */
.alta-top-pests__label {
	font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: #004c45; /* primary.DEFAULT */
	overflow-wrap: break-word;
	hyphens: auto;
}

/* ---------------------------------------------------------------------------
   Local Blogs
   --------------------------------------------------------------------------- */

/* 1 column → 2 at 768 (sm) → 4 at 1024 (lg).
   Four 16:9 thumbnails below 1024 leave each card under ~230px wide, at which
   point the excerpt is unreadable — hence the 2-up plateau across tablet. */
.alta-local-blogs__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.alta-local-blogs__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.alta-local-blogs__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.75rem;
	}
}

/* Card chrome mirrors template-parts/template-loop/loop-post.php so a blog card
   on a location page and the same card in the blog archive read as one
   component. Equal heights come from the grid; the body grows to fill. */
.alta-local-blogs__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	transition:
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.alta-local-blogs__card:hover,
.alta-local-blogs__card:focus-within {
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.alta-local-blogs__card {
		transition: none;
	}

	.alta-local-blogs__card:hover,
	.alta-local-blogs__card:focus-within {
		transform: none;
	}
}

/* 16/9 deliberately matches the `aspect-video` + `object-cover` utilities also
   on the element. Both are single-class selectors, so whichever stylesheet
   lands last would win — keeping the values identical makes that race moot. */
.alta-local-blogs__media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* aspect-ratio fallback for older Safari — a collapsed image is worse than an
   approximate one. */
@supports not (aspect-ratio: 16 / 9) {
	.alta-local-blogs__media {
		height: 190px;
	}
}

.alta-local-blogs__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.alta-local-blogs__title {
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
	font-weight: 700;
	line-height: 1.3;
	color: #004c45; /* primary.DEFAULT */
}

.alta-local-blogs__excerpt {
	flex: 1 1 auto;
	font-size: 1rem;
	line-height: 1.5;
}

/* the_excerpt()-style markup arrives wrapped in <p>; strip its trailing margin
   so the "Read more" link keeps a consistent gap in every card. */
.alta-local-blogs__excerpt > p:last-child {
	margin-bottom: 0;
}