/**
 * Location Page — layout on top of the BLOG design system (css/blog.css).
 * The page is wrapped in .ks-blog.ks-loc, so all --ks-* tokens and the flat
 * .ks-card / .ks-btn / .ks-prose / .ks-section-title styles are inherited.
 * This file only adds location-specific LAYOUT (full-width bands, the intro/
 * solutions split, the service-card grid, the why-choose features, the CTA
 * band, and ghost button variants). Flat aesthetic: zero radius, no shadows —
 * hierarchy comes from borders + tint bands, matching the blog + single.php.
 * Loaded after 'ks-blog', so same-specificity rules win by order; where the
 * theme's .ks-blog a (0,1,1) would interfere, rules are scoped under .ks-loc.
 */

.ks-loc { padding: 0; }                 /* bands own the vertical rhythm */

/* ---- Full-width bands + centred inner --------------------------------- */
.loc-band { padding-block: clamp(2.25rem, 1.5rem + 3.4vw, 4.5rem); }
.loc-band--tint { background: var(--ks-bg); }
.loc-band--cta {
	background: var(--ks-navy);
	background-image: radial-gradient(circle at 100% 0%, rgba(255, 204, 0, .16), transparent 45%);
}
.loc-inner { width: 100%; max-width: var(--ks-maxw); margin-inline: auto; }
.loc-center { text-align: center; }

/* blog.css .ks-prose adds container padding (var(--ks-pad)) + margin-inline:auto
   + max-width meant for the full article body; inside our columns that double-
   indents/narrows the copy. Reset the BOX here and keep only the typography. */
.ks-loc .ks-prose { max-width: none; margin-inline: 0; padding: 0; }

/* ---- Hero band (navy — mirrors the blog .ks-hero; breadcrumb sits inside) */
.loc-hero-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--ks-navy);
	color: #fff;
	padding-block: clamp(1.6rem, 1.1rem + 2.6vw, 3.25rem);
}
.loc-hero-band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(120% 130% at 100% 0%, rgba(255, 204, 0, .22), transparent 55%);
	pointer-events: none;
}
/* Breadcrumb — "/" separators via CSS (not read by screen readers), colours
   tuned to the hero: light-blue links (like the subtitle) → gold on hover
   (like the eyebrow), muted current page + separators. */
.loc-crumbs { margin-bottom: clamp(.9rem, 2vw, 1.45rem); }
.loc-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: .55rem;
	row-gap: .3rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--ks-sans);
	font-size: .8rem;
	line-height: 1.4;
	letter-spacing: .01em;
}
.loc-crumbs li { display: inline-flex; align-items: center; gap: .55rem; }
.loc-crumbs li:not(:first-child)::before { content: "/"; color: rgba(255, 255, 255, .4); font-weight: 400; }
.ks-loc .loc-crumbs a { color: #c9d3ff; text-decoration: none; transition: color .15s ease; }
.ks-loc .loc-crumbs a:hover,
.ks-loc .loc-crumbs a:focus-visible { color: var(--ks-gold); }
.loc-crumbs [aria-current="page"] { color: rgba(255, 255, 255, .62); }
.loc-hero-band__eyebrow {
	display: inline-flex; align-items: center; gap: .5rem;
	margin: 0 0 .8rem;
	color: var(--ks-gold);
	font-family: var(--ks-sans); font-weight: 700;
	font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase;
}
.ks-loc .loc-hero-band__eyebrow .fa { color: var(--ks-gold); }
.loc-hero-band__title {
	margin: 0; max-width: 20ch;
	font-family: var(--ks-display); color: #fff; font-weight: 800;
	line-height: 1.05; letter-spacing: -0.015em;
	font-size: clamp(2rem, 1.3rem + 3.2vw, 3.4rem);
}
.loc-hero-band__sub { margin: 1rem 0 0; max-width: 58ch; color: #c9d3ff; font-size: 1.0625rem; line-height: 1.6; }

/* Hero 2-col: heading text + trust card */
.loc-hero-band__grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .loc-hero-band__grid { grid-template-columns: 1fr minmax(300px, 350px); } }
.loc-hero-band__main { min-width: 0; }

/* Trust card (white, flat) sitting on the navy hero */
.loc-hero-card { background: #fff; color: var(--ks-ink); padding: clamp(1.35rem, 2.2vw, 1.9rem); }
.loc-hero-card__rating {
	display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
	margin: 0 0 1.1rem;
	font-family: var(--ks-display); font-weight: 700; color: var(--ks-navy); font-size: .95rem;
}
.loc-hero-card__stars { display: inline-flex; gap: 2px; color: var(--ks-gold); font-size: .95rem; }
.loc-hero-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.loc-hero-card__list li { display: flex; align-items: flex-start; gap: .65rem; font-size: .95rem; line-height: 1.4; color: var(--ks-body); }
.ks-loc .loc-hero-card__list .fa { color: var(--ks-navy); font-size: 1rem; margin-top: .1rem; flex: 0 0 auto; }
.loc-hero-band__actions { margin-top: clamp(1.4rem, 2.5vw, 1.9rem); }

/* ---- Intro (2-col; media is a background-cover panel) ----------------- */
.loc-hero { display: grid; gap: clamp(1.5rem, 3.5vw, 3.25rem); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 860px) { .loc-hero { grid-template-columns: 1.05fr .95fr; } }
.loc-hero__copy { display: flex; flex-direction: column; }
.loc-hero__media {
	background: var(--ks-tint) url("../images/locations/local-plumber.webp") center / cover no-repeat;
	border: 1px solid var(--ks-line);
	min-height: 300px;
}

/* ---- Solutions split (copy + map) ------------------------------------- */
.loc-split { display: grid; gap: clamp(1.5rem, 3vw, 3rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .loc-split--solutions { grid-template-columns: 1fr 1fr; } }

/* ---- Buttons: base .ks-btn (gold square) from blog.css; add ghosts ---- */
.loc-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.6rem; }
.loc-actions--center { justify-content: center; }
.ks-loc .ks-btn--ghost-navy { background: transparent; color: var(--ks-navy); box-shadow: inset 0 0 0 2px var(--ks-navy); }
.ks-loc .ks-btn--ghost-navy:hover,
.ks-loc .ks-btn--ghost-navy:focus-visible { background: var(--ks-navy); color: #fff; box-shadow: inset 0 0 0 2px var(--ks-navy); }
.ks-loc .ks-btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); }
.ks-loc .ks-btn--ghost:hover,
.ks-loc .ks-btn--ghost:focus-visible { background: #fff; color: var(--ks-navy); box-shadow: inset 0 0 0 2px #fff; }

/* ---- Section heading + sub -------------------------------------------- */
.loc-band .ks-section-title { margin-bottom: .55rem; }
.loc-center.ks-section-title { margin-inline: auto; }
.loc-sub { max-width: 62ch; margin: 0 auto; color: var(--ks-muted); font-size: 1.05rem; line-height: 1.6; }
.loc-center.loc-sub { margin-inline: auto; }

/* ---- Service cards (explicit 1/2/3-col grid) -------------------------- */
.loc-grid { display: grid; margin-top: clamp(1.6rem, 3vw, 2.5rem); gap: var(--ks-gap); grid-template-columns: 1fr; }
@media (min-width: 620px)  { .loc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .loc-grid { grid-template-columns: repeat(3, 1fr); } }

/* Full service description — shown in full (no clamp / fade). Grid stretch keeps
   cards in a row equal height and pins "View service" to the bottom. */
.loc-card__desc { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--ks-body); }
.ks-loc .loc-card { border: 0; }                 /* borderless cards (softer, on the tint band) */
.ks-loc .ks-card__more { color: var(--ks-navy); text-transform: none; letter-spacing: 0; }

/* ---- Solutions map (flat, bordered) ----------------------------------- */
.loc-map { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--ks-line); overflow: hidden; background: var(--ks-tint); }
.loc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Why-choose features (flat bordered blocks, tint icon squares) ---- */
.loc-why__intro { margin-bottom: clamp(1.6rem, 3vw, 2.5rem); }
.loc-features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ks-gap); grid-template-columns: 1fr; }
@media (min-width: 720px) { .loc-features { grid-template-columns: repeat(2, 1fr); } }
.loc-feature {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	background: var(--ks-card);
	padding: 1.2rem 1.35rem;
	margin: 0;
}
.loc-feature__icon { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; background: var(--ks-tint); color: var(--ks-navy); }
.ks-loc .loc-feature__icon .fa { font-size: 20px; line-height: 1; }
.loc-feature__text { display: flex; flex-direction: column; gap: .25rem; }
.loc-feature__head { font-family: var(--ks-display); font-weight: 700; color: var(--ks-navy); font-size: 1.05rem; letter-spacing: -0.01em; }
.loc-feature__body { color: var(--ks-body); font-size: .95rem; line-height: 1.6; }

/* ---- CTA band content ------------------------------------------------- */
.loc-cta { max-width: 780px; margin-inline: auto; text-align: center; }
.loc-cta__title {
	font-family: var(--ks-display);
	font-weight: 800;
	color: #fff;
	line-height: 1.15;
	letter-spacing: -0.01em;
	font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
	margin: 0;
	text-wrap: balance;
}
.loc-cta__text { max-width: 54ch; margin: .9rem auto 0; color: #d6ddff; font-size: 1.0625rem; line-height: 1.55; }
.loc-cta .loc-actions { margin-top: 1.9rem; }

@media (prefers-reduced-motion: reduce) {
	.ks-loc *, .ks-loc *::before, .ks-loc *::after { transition: none !important; }
}