/**
 * City pages, W6 (2026-10-26): /service-areas/<city>-<st>/, built by inc/city-sections.php. Every rule
 * is inside the page group "hub ct ct--<city>" (.ct), so nothing reaches other pages. The shared parts
 * come from their own files, unchanged: the Layout 01 hero, FAQ and estimate band (service-layout.css),
 * R / Kicker, HYDRO / Process / Shared and R / City Map (hub.css), the homepage reviews section
 * (sections.css and home.css, inside its own "hydro-home" group) and the form card (estimate-form.css).
 *
 * References: master 667:853; Jeffersonville desktop 671:1243, tablet 793:19286, phone 793:19885,
 * small 793:20465 (the other five cities follow the same frames); R / Section Heading, R / Service Card,
 * R / City Map · <City>, R / Nearby Chip. Mobile first: the base rules are the 390 frames (W1 tokens,
 * base.css), then ≤ 380, tablet (768–1099) and desktop (≥ 1100).
 */

/* ------------------------------------------------------------------ shared */
.ct :is(.ct-lead, .ct-intro, .ct-services, .ct-map) > .wrap {
	width: min(80rem, 100% - 2 * var(--hydro-gutter));
}

/* R / Section Heading, Align=Center: kicker, H2 and the sub line, 12 px apart. */
.ct .ct-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	text-align: center;
}

.ct .ct-head > h2 {
	margin: 0;
	font-size: var(--hydro-h2);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--ink);
	text-wrap: balance;
}

.ct .ct-head__sub {
	margin: 0;
	max-width: 43.75rem;
	font: 400 var(--hydro-body) / 1.7 var(--sans);
	color: var(--muted);
	text-wrap: pretty;
}

/* ------------------------------------------------------------------ hero (Layout 01, centred) */
.ct .sl-hero__in > .sl-hero__title {
	max-width: 53.75rem;
}

/* ------------------------------------------------------------------ lead photo (R / Photo Figure) */
.ct .ct-lead {
	padding: 0 0 0.5rem;
	background: var(--page);
}

.ct .ct-lead__figure {
	margin: 0;
}

.ct .ct-lead__figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 358 / 269;
	object-fit: cover;
	object-position: var(--focal, 50% 50%);
	border-radius: var(--radius);
	background: var(--paper-2);
}

.ct .ct-lead__figure .wp-element-caption {
	margin: 0.5rem 0 0;
	font: 400 var(--hydro-caption) / 1.5 var(--sans);
	color: var(--muted);
	text-align: left;
}

/* ------------------------------------------------------------------ introduction */
.ct .ct-intro {
	padding: var(--hydro-section) 0;
	background: var(--page);
}

.ct .ct-intro__in {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.ct .ct-intro__text {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.ct .ct-intro__text > p {
	margin: 0;
	font: 400 var(--hydro-body) / 1.7 var(--sans);
	color: var(--muted);
}

/* ------------------------------------------------------------------ services (R / Service Card) */
.ct .ct-services {
	padding: var(--hydro-section) 0;
	background: var(--paper);
}

.ct .ct-services__in {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.ct .ct-cards {
	display: grid;
	gap: 0.625rem;
}

/* Phone: name and description beside the arrow; the whole card is the link (the title's link covers it). */
.ct .ct-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 1rem;
	row-gap: 0.25rem;
	margin: 0;
	padding: 1.125rem 1rem 1.125rem 1.25rem;
	border: 1px solid var(--line-cool);
	border-radius: var(--radius);
	background: #fff;
	transition: border-color 0.15s var(--ease);
}

.ct .ct-card:hover {
	border-color: var(--ocean);
}

.ct .ct-card::after {
	content: "";
	grid-column: 2;
	grid-row: 1 / span 2;
	width: 1.375rem;
	height: 1.375rem;
	background: var(--ocean);
	-webkit-mask: var(--i-arrow) center / contain no-repeat;
	mask: var(--i-arrow) center / contain no-repeat;
}

.ct .ct-card__title {
	grid-column: 1;
	margin: 0;
	font: 600 1.1875rem / 1.25 var(--sans);
	letter-spacing: -0.01em;
	color: var(--ocean);
}

.ct .ct-card__title,
.ct .ct-card__text {
	text-wrap: wrap;
}

.ct .ct-card__title a {
	color: inherit;
	text-decoration: none;
}

.ct .ct-card__title a::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: var(--radius);
}

.ct .ct-card__title a:focus-visible {
	outline: none;
}

.ct .ct-card__title a:focus-visible::before {
	outline: var(--hydro-focus);
	outline-offset: 2px;
}

.ct .ct-card__text {
	grid-column: 1;
	margin: 0;
	font: 400 var(--hydro-body) / 1.6 var(--sans);
	color: var(--muted);
}

.ct .ct-services__note {
	margin: 0;
	font: 400 var(--hydro-small) / 1.6 var(--sans);
	color: var(--muted);
	text-align: center;
}

.ct .ct-services__note a {
	color: var(--ocean);
	font-weight: 600;
}

/* ------------------------------------------------------------------ map, state lists, nearby */
.ct .ct-map {
	padding: var(--hydro-section) 0;
	background: var(--page);
}

.ct .ct-map__in {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* This city's label on the map (R / City Map · <City>): navy with white text. */
.ct .hub-map__chip.is-here {
	border-color: var(--navy);
	background: var(--navy);
	color: #fff;
}

.ct .ct-areas {
	display: flex;
	flex-direction: column;
	gap: 0.6875rem;
	margin-top: -0.375rem;
}

.ct .ct-areas__base {
	margin: 0;
	font: 500 var(--hydro-small) / 1.6 var(--sans);
	color: var(--ink);
}

.ct .ct-areas__lists {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.ct .ct-areas__state h3 {
	margin: 0 0 0.5rem;
	font: 600 var(--hydro-caption) / 1.5 var(--sans);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.ct .ct-areas__state ul {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct .ct-areas__state li {
	font: 400 var(--hydro-small) / 1.9 var(--sans);
	color: var(--muted);
}

.ct .ct-areas__state li.is-here {
	font-weight: 600;
	color: var(--ink);
}

.ct .ct-areas__state li.is-link a {
	display: inline-block;
	min-height: 1.5rem;
	font-weight: 600;
	color: var(--ocean);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* "Nearby" (R / Nearby Chip): published city pages only, then All service areas. */
.ct .ct-nearby {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: -0.375rem;
}

.ct .ct-nearby__label {
	margin: 0 0.5rem 0 0;
	font: 500 var(--hydro-small) / 1.5 var(--sans);
	color: var(--muted);
}

.ct .ct-nearby ul {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct .ct-nearby li {
	display: block;
}

.ct .ct-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0 1rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	font: 600 var(--hydro-small) / 1.5 var(--sans);
	color: var(--ocean);
	text-decoration: none;
	white-space: nowrap;
}

.ct .ct-chip::after {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: var(--i-arrow) center / contain no-repeat;
	mask: var(--i-arrow) center / contain no-repeat;
}

.ct .ct-chip:hover {
	border-color: var(--ocean);
}

/* ------------------------------------------------------------------ reviews (the homepage section) */
/* The page group carries "hub", whose R / Arrow Link rules (hub.css) would restyle the section's
   "Read all reviews on Google" link; these restore the homepage values (base.css, sections.css,
   home.css), so the section is identical to the homepage at every width. */
.ct .ct-reviews .reviews__cta a {
	padding: 0;
	text-decoration: underline;
}

.ct .ct-reviews .reviews__cta a::after {
	width: 1.15em;
	height: 1.15em;
}

/* ------------------------------------------------------------------ small phones (≤ 380) */
@media (max-width: 380px) {
	.ct .ct-lead__figure img {
		aspect-ratio: 4 / 3;
	}

	.ct .ct-card__title {
		font-size: 1.125rem;
	}
}

/* ------------------------------------------------------------------ tablets (768–1099) */
@media (min-width: 768px) and (max-width: 1099px) {
	.ct .ct-head > h2,
	.ct .ct-head__sub,
	.ct .ct-intro__text {
		max-width: 40rem;
	}

	.ct .ct-head {
		align-self: center;
	}

	.ct .ct-lead__figure img {
		aspect-ratio: 704 / 395;
	}

	.ct .ct-intro__text {
		align-self: center;
		text-align: center;
	}

	/* R / Service Card, tablet: two columns; cyan bar, name, description, the arrow below. */
	.ct .ct-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 1fr;
		gap: 1rem;
	}

	.ct .ct-card {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		align-items: start;
		row-gap: 0.625rem;
		padding: 1.75rem;
	}

	.ct .ct-card::before {
		content: "";
		width: 2.5rem;
		height: 3px;
		background: var(--teal);
	}

	.ct .ct-card::after {
		grid-column: 1;
		grid-row: auto;
		width: 1.25rem;
		height: 1.25rem;
		margin-top: 0.125rem;
	}

	.ct .ct-card__title {
		font-size: 1.25rem;
	}

	.ct .ct-services__note {
		align-self: center;
		max-width: 35rem;
	}

	.ct .ct-map__in {
		gap: 1.5rem;
	}

	.ct .ct-areas {
		margin-top: -0.25rem;
	}

	.ct .ct-nearby {
		margin-top: -0.625rem;
	}

	.ct .hub-map__chip.no-t {
		display: none;
	}

	.ct .ct-areas__base {
		font-size: 0.9375rem;
	}

	/* The frames give the questions their own top space after the reviews (the hubs' FAQ follows a
	   section on the same background and starts at its top). */
	.ct .sl-faq {
		padding-top: var(--hydro-section);
	}
}

@media (max-width: 767px) {
	.ct .sl-faq {
		padding-top: var(--hydro-section);
	}

	.ct .ct-reviews .reviews__cta {
		margin-top: 0.5rem;
	}
}

/* ------------------------------------------------------------------ desktop (≥ 1100): 671:1243 */
@media (min-width: 1100px) {
	.ct :is(.ct-intro, .ct-services, .ct-map) {
		padding: 6.5rem 0;
	}

	.ct .ct-head {
		gap: 0;
	}

	.ct .ct-head > .is-style-kicker {
		margin-bottom: 0.9375rem;
	}

	.ct .ct-head > h2 {
		font-size: 2.5rem;
		line-height: 1.12;
		letter-spacing: -0.035em;
	}

	.ct .ct-head__sub {
		margin-top: 1rem;
		font-size: 1.0625rem;
	}

	.ct .ct-lead {
		padding: 0;
	}

	.ct .ct-lead__figure img {
		aspect-ratio: 1280 / 520;
	}

	.ct .ct-lead__figure .wp-element-caption {
		margin-top: 0.75rem;
	}

	.ct :is(.ct-intro__in, .ct-services__in, .ct-map__in) {
		gap: 3rem;
	}

	.ct .ct-intro__text {
		align-self: center;
		gap: 1.125rem;
		max-width: 48.75rem;
		text-align: center;
	}

	.ct .ct-intro__text > p {
		font-size: 1.125rem;
		line-height: 1.72;
	}

	/* R / Service Card, desktop: four columns, 24 px apart, rows 48 px apart. */
	.ct .ct-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: 1fr;
		gap: 3rem 1.5rem;
	}

	.ct .ct-card {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		align-items: start;
		row-gap: 0.875rem;
		padding: 2rem;
	}

	.ct .ct-card::before {
		content: "";
		width: 3rem;
		height: 3px;
		background: var(--teal);
	}

	.ct .ct-card::after {
		grid-column: 1;
		grid-row: auto;
		width: 1.5rem;
		height: 1.5rem;
	}

	.ct .ct-card__title {
		font-size: 1.375rem;
	}

	.ct .ct-card__text {
		font-size: 1rem;
		line-height: 1.65;
	}

	.ct .ct-services__note {
		font-size: 0.9375rem;
	}

	/* The framed desktop map; its sub line already says what the pins mark, so no note below it. */
	.ct .hub-map__note,
	.ct .ct-areas {
		display: none;
	}

	.ct .ct-nearby {
		justify-content: center;
		gap: 0.75rem;
		margin-top: -0.0625rem;
	}

	.ct .ct-nearby__label {
		margin-right: 0;
		font-size: 0.9375rem;
		font-weight: 600;
	}

	.ct .ct-chip {
		min-height: 2.5625rem;
		padding: 0 1.0625rem;
		font-size: 0.9375rem;
	}

	.ct .ct-reviews .reviews__cta {
		margin-top: 1.5rem;
	}

	.ct .ct-reviews .reviews__cta a {
		font: 700 1rem / 1.3 var(--sans);
	}
}