/* =============================================================================
   area.css: v2 layout for the area (single town) and areas hub templates.

   Enqueued as `samson-area` on template-area.php AND template-areas.php, after
   samson-pages (see inc/enqueue.php). template-contact.php does NOT load this
   file, so its Leaflet map relies entirely on the map partial's own styling.

   Mobile-first. Breakpoints at 700px and 1080px. Tokens only from
   critical.css :root (palette, --s1..--s12, --sec-pad, --r-tile, --shadow).

   The "Damp & Mould Treatment Services in {Town}" grid reuses template-parts/blocks/related-cards.php
   (the same partial the service templates use), so its component classes
   (.related-cards / .related-card / .related-card__*) are duplicated here
   rather than shared with service.css, because area templates never load that
   stylesheet. Keep both copies in step if the shared partial's markup changes.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Shared heading treatment for this file's H2s.
   ----------------------------------------------------------------------------- */
.area-services__title {
	font-family: var(--ff-display, "Plus Jakarta Sans", system-ui, sans-serif);
	font-weight: 800;
	font-size: clamp(1.875rem, 3.6vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -0.005em;
}

/* -----------------------------------------------------------------------------
   Hero: two columns once there is room, text and CTA pair left, the
   single-town Leaflet map right. v2.2 navy hero restyle: same uniform, tight
   padding recipe as every other inner-page hero (pages.css .page-hero,
   problem.css .problem-hero, service.css .svc-hero); the old rooftops
   backdrop, its house-clearance padding and #E4F0FA ground are retired.

   Neither heading nor lead carries a ch/width cap here: at 1 column they run
   the full .wrap width, at 2 columns they run the full text-column track
   width (section F, "no cap beyond the grid column").
   ----------------------------------------------------------------------------- */
.area-hero {
	padding-block: clamp(48px, 6vw, 84px);
}

.area-hero__inner {
	display: grid;
	gap: var(--s7);
}

.area-hero__title {
	font-family: var(--ff-display, "Plus Jakarta Sans", system-ui, sans-serif);
	font-weight: 800;
	font-size: clamp(2.25rem, 4.5vw, 3.75rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
}

.area-hero__lead {
	margin-top: var(--s5);
	color: var(--on-dark);
}

.area-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s4);
	margin-top: var(--s7);
}

.area-hero__actions .samson-icon {
	width: 1.2em;
	height: 1.2em;
}

/* The map column. isolation: isolate + z-index: 0 contain Leaflet's own
   internal panes (which carry high z-indexes of their own, see map.js/
   vendored Leaflet CSS) inside this element's stacking context, so they can
   never paint over the sticky site header while scrolling regardless of the
   header's own z-index (SPEC-V4.md section H.4). Stands alone: no dependency
   on .site-header's z-index. */
/* Framed as a card so the map reads as sitting intentionally on the navy
   hero (DESIGN.md section 4 card anatomy, 16px radius): --shadow-card is
   tuned for light grounds and all but disappears against navy, so the
   elevation here is a literal dark-appropriate shadow instead; the border
   reads var(--line), which .band--dark already remaps to a translucent
   white hairline (critical.css), giving a light frame edge for free. */
.area-hero__map {
	position: relative;
	isolation: isolate;
	z-index: 0;
	min-height: 380px;
	border-radius: var(--r-card);
	overflow: hidden;
	border: 1px solid var(--line);
	box-shadow: 0 20px 44px -18px rgba(6, 16, 32, .5);
}

.area-hero__map .map-block,
.area-hero__map .map-block__el {
	height: 100%;
	min-height: 380px;
}

/* -----------------------------------------------------------------------------
   "Damp & Mould Treatment Services in {Town}": illustrated service cards
   (related-cards partial).
   ----------------------------------------------------------------------------- */
.area-services__title {
	margin-bottom: var(--s7);
}

.related-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s5);
	list-style: none;
	padding: 0;
	margin: 0;
}

.related-card {
	display: flex;
}

.related-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-decoration: none;
	color: var(--navy);
	background: var(--sky);
	border: 1px solid transparent;
	border-radius: var(--r-card);
	overflow: hidden;
	transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.related-card__link:hover,
.related-card__link:focus-visible {
	border-color: var(--blue);
	transform: translateY(-4px);
	box-shadow: var(--shadow-card);
}

.related-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--sky);
	overflow: hidden;
}

.related-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.related-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	flex: 1;
	padding: var(--s5);
}

.related-card__title {
	font-family: var(--ff-display, "Plus Jakarta Sans", system-ui, sans-serif);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.25;
}

.related-card__snippet {
	color: var(--slate);
	font-size: 0.9375rem;
	flex: 1;
}

.related-card__arrow {
	margin-top: auto;
	display: inline-flex;
	color: var(--blue-deep);
}

.related-card__arrow svg {
	transition: transform 0.18s ease;
}

.related-card__link:hover .related-card__arrow svg {
	transform: translateX(3px);
}

/* Staggered reveal: each card carries its own --rd offset inline (see
   related-cards.php). Only takes effect once the shared [data-reveal] system
   in main.css has applied the base transition. */
@media (scripting: enabled) {
	.related-card[data-reveal] {
		transition-delay: var(--rd, 0ms);
	}
}

/* -----------------------------------------------------------------------------
   Local intro (the_content): full width, flowing into two CSS columns once
   there is room, per DESIGN.md's "no 600px clamp" rule for full-width bands.
   ----------------------------------------------------------------------------- */
.area-intro__content {
	max-width: none;
}

/* The old lower single-town map band (heading + map.php + hours/travel note)
   is gone (SPEC-V4.md section H.3): the map now renders in .area-hero__map
   and the travel note was removed outright, so there is nothing left to
   style here. .area-intro carries band--dark precisely so it does not need a
   shared-edge rule against the band--tint reviews block that now follows it
   directly (section G: adjacent bands must not share a ground). */

/* =============================================================================
   AREAS HUB (template-areas.php), rebuilt round 14.

   Three blocks: the coverage band (jump index + CTA pair beside the Leaflet
   coverage map), the regional cards, and the secondary "Wider North West"
   band. The old .areas-grid pill wall is gone; its town names now live inside
   the regional cards, printed once.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Coverage band (white): copy column + map.
   ----------------------------------------------------------------------------- */
.areas-coverage__inner {
	display: grid;
	gap: var(--s8);
}

.areas-coverage__title {
	margin-top: var(--s3);
}

.areas-coverage__lead {
	margin-top: var(--s4);
	color: var(--slate);
}

/* Region index: a plain directory of rows, name left and count right, rather
   than a second wall of town names. Hairline rules do the separating so the
   rows stay light against the white band. */
.areas-jump {
	margin: var(--s7) 0 0;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--line);
}

.areas-jump li {
	border-block-end: 1px solid var(--line);
}

.areas-jump__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s2) var(--s4);
	padding: var(--s3) var(--s2);
	color: var(--navy);
	font-weight: 700;
	border-radius: var(--r-btn);
	transition: background-color .18s ease, color .18s ease;
}

.areas-jump__link:hover,
.areas-jump__link:focus-visible {
	background: var(--sky);
	color: var(--blue-deep);
}

.areas-jump__name {
	font-family: var(--ff-display, "Plus Jakarta Sans", system-ui, sans-serif);
	font-size: 1.0625rem;
}

.areas-jump__count {
	color: var(--slate);
	font-weight: 400;
	font-size: .9375rem;
}

/* The secondary sixth group reads quieter in the index too. */
.areas-jump__link--wider .areas-jump__name {
	font-weight: 600;
	color: var(--slate);
}

.areas-coverage__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s4);
	margin-top: var(--s7);
}

/* The coverage map panel (map.php, mode "coverage"), framed as a v2 card to
   match the homepage panel. Flex rather than a percentage height so the panel
   can also stretch to a taller copy column at desktop without the Leaflet
   container losing its resolved height. Tiles do not load until it scrolls
   into view (modules/map.js). */
.areas-coverage__map {
	display: flex;
	height: clamp(320px, 42vw, 460px);
	border-radius: var(--r-card);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.areas-coverage__map .map-block {
	display: flex;
	flex: 1;
	border-radius: 0;
}

.areas-coverage__map .map-block__el {
	flex: 1;
	height: auto;
}

/* -----------------------------------------------------------------------------
   2. Regional cards (tint band): one card per region, white card anatomy.
   ----------------------------------------------------------------------------- */
.areas-regions__title {
	margin-top: var(--s3);
}

.areas-regions__grid {
	display: grid;
	gap: var(--s5);
	margin-top: var(--s8);
}

.areas-region {
	padding: var(--s6);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	box-shadow: var(--shadow-card);
}

.areas-region__name {
	font-size: 1.5rem;
}

.areas-region__name a {
	color: var(--navy);
	transition: color .18s ease;
}

.areas-region__name a:hover,
.areas-region__name a:focus-visible {
	color: var(--blue-deep);
	text-decoration: underline;
}

.areas-region__meta {
	margin-top: var(--s1);
	color: var(--slate);
	font-size: .875rem;
}

/* Rows flow inline as chips; a row that carries villages beneath it claims a
   full line of its own so its list has somewhere to sit. */
.areas-region__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2) var(--s2);
	margin: var(--s5) 0 0;
	padding: 0;
	list-style: none;
}

.areas-town--grouped,
.areas-town--cluster {
	flex: 0 0 100%;
}

.areas-town + .areas-town--grouped {
	margin-top: var(--s3);
}

/* Only towns with their own landing page get a chip at all, and the chip is
   unmistakably a link: blue label, blue hairline, chevron. Everything else is
   plain running text beneath (.areas-town__places), which is the customer's
   own instruction and the clearest possible signal of what is clickable. */
.areas-town__name {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	padding: .3em .75em;
	border-radius: var(--r-pill, 999px);
	background: var(--sky);
	color: var(--slate);
	font-weight: 600;
	font-size: .9375rem;
	line-height: 1.35;
}

.areas-town__name--link {
	background: var(--white);
	border: 1px solid #A9C8E7;
	color: var(--blue-deep);
	font-weight: 700;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.areas-town__name--link::after {
	content: "";
	width: .38em;
	height: .38em;
	border-inline-end: 2px solid currentColor;
	border-block-start: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: .75;
}

.areas-town__name--link:hover,
.areas-town__name--link:focus-visible {
	background: var(--sky);
	border-color: var(--blue);
	color: var(--blue-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Parent towns that head a group of villages sit a step up in the hierarchy. */
.areas-town--grouped .areas-town__name {
	font-size: 1rem;
	padding-inline: .85em;
}

.areas-town__tag {
	padding: .1em .5em;
	border-radius: var(--r-pill, 999px);
	background: var(--navy);
	color: var(--white);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
}

.areas-town__places {
	margin-top: var(--s2);
	padding-inline-start: .1em;
	color: var(--slate);
	font-size: .9375rem;
	line-height: 1.6;
}

/* The customer's Liverpool district clusters: six separate rows, each marked
   with a hairline so the groupings they wrote stay legible instead of running
   together into one block of names. */
.areas-town--cluster .areas-town__places {
	margin-top: 0;
	padding-inline-start: var(--s4);
	border-inline-start: 2px solid var(--line);
}

.areas-town__label {
	font-weight: 700;
	color: var(--navy);
}

.areas-place--link {
	color: var(--blue-deep);
	font-weight: 600;
}

.areas-place--link:hover,
.areas-place--link:focus-visible {
	text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   3. Slim dark CTA between the regions and the wider-coverage band.
   Mirrors the .cta-slim recipe (service.css), which this template does not
   enqueue, so the rules are stated here rather than shared.
   ----------------------------------------------------------------------------- */
.areas-cta {
	padding-block: calc(var(--sec-pad) / 2);
}

.areas-cta__inner {
	display: flex;
	flex-direction: column;
	gap: var(--s5);
}

.areas-cta__line {
	margin: 0;
	font-family: var(--ff-display, "Plus Jakarta Sans", system-ui, sans-serif);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.3;
	color: #FFFFFF;
}

.areas-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s4);
}

/* -----------------------------------------------------------------------------
   4. Wider North West (white band): the four towns outside the customer's five
   regions, kept clearly secondary. Half the vertical rhythm of a full band,
   quieter heading, and a real job photograph filling the rest of the row so
   the copy is never a narrow block beside empty space.
   ----------------------------------------------------------------------------- */
.areas-wider {
	padding-block: calc(var(--sec-pad) / 2);
}

.areas-wider__inner {
	display: grid;
	gap: var(--s7);
	align-items: center;
}

.areas-wider__title {
	margin-top: var(--s3);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.areas-wider__body {
	margin-top: var(--s4);
	color: var(--slate);
}

.areas-wider__towns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	margin: var(--s5) 0 0;
	padding: 0;
	list-style: none;
}

.areas-wider__media {
	margin: 0;
	border-radius: var(--r-card);
	overflow: hidden;
	border: 1px solid var(--line);
	box-shadow: var(--shadow-card);
}

.areas-wider__img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 40%;
}

/* -----------------------------------------------------------------------------
   Breakpoint: 700px
   ----------------------------------------------------------------------------- */
@media (min-width: 700px) {
	.related-cards {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Region cards stay one per row through the tablet range. Two columns here
	   pairs the tall Liverpool card (six district clusters) with the short
	   Knowsley one and leaves a deep empty tail in whichever card loses; there
	   is no ordering of five uneven cards that avoids it at this width. The
	   three-column desktop grid below balances properly, so the split waits
	   for it. */
	.areas-regions__grid {
		gap: var(--s6);
	}

	.areas-region {
		padding: var(--s7);
	}

}

/* -----------------------------------------------------------------------------
   Breakpoint: 900px. The slim CTA only goes side by side once the prompt has
   room for a sensible line length beside the button pair; at 768px the two
   buttons squeeze it into a five-line sliver.
   ----------------------------------------------------------------------------- */
@media (min-width: 900px) {
	.areas-cta__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--s6);
	}

	.areas-cta__line {
		flex: 1 1 26ch;
	}

	.areas-cta__actions {
		flex: none;
	}
}

/* -----------------------------------------------------------------------------
   Breakpoint: 1080px (full desktop grids)
   ----------------------------------------------------------------------------- */
@media (min-width: 1080px) {
	.area-hero__inner {
		grid-template-columns: 7fr 5fr;
		gap: var(--s10);
	}

	.related-cards {
		grid-template-columns: repeat(4, 1fr);
	}

	.area-intro__content {
		column-count: 2;
		column-gap: var(--s9);
	}

	.area-intro__content > * {
		break-inside: avoid;
	}

	.area-intro__content > * + * {
		margin-top: var(--s5);
	}

	/* Coverage band: copy 5 columns, map 7 (DESIGN.md section 6.1). The map
	   stretches to the copy column's height instead of leaving a dead strip
	   beneath itself when the jump index runs long. */
	.areas-coverage__inner {
		grid-template-columns: 5fr 7fr;
		gap: var(--s10);
		align-items: stretch;
	}

	.areas-coverage__map {
		height: auto;
		min-height: clamp(380px, 32vw, 540px);
	}

	/* Three region cards per row. Sefton keeps the wide slot: at two thirds its
	   five "including ..." runs each sit on one line, which brings its height
	   close to the Liverpool card beside it instead of towering over it. The
	   remaining three regions form the second row exactly. */
	.areas-regions__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.areas-region--sefton {
		grid-column: span 2;
	}

	.areas-wider__inner {
		grid-template-columns: 7fr 5fr;
		gap: var(--s10);
	}
}

/* -----------------------------------------------------------------------------
   Reduced motion: settle the remaining hover/transition flourishes.
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.related-card__link,
	.related-card__arrow svg {
		transition: none;
	}
}