/* ============================================================
   Homepage sections. Consumes var(--bbc-*) only; the search card
   and results grid are styled by the plugin's results.css — this
   file only lays out the hero, trust strip and section frames.
   ============================================================ */

/* Let the home sections run full-width; Hello constrains .site-main. */
body.home .site-main {
	max-width: none;
	margin: 0;
	padding: 0;
}

.bbc-home__section,
.bbc-hero__inner,
.bbc-trust__inner {
	margin-inline: auto;
	padding-inline: var(--bbc-space-4);
}

/* ---- Hero --------------------------------------------------- */
.bbc-hero {
	background:
		radial-gradient(120% 100% at 50% 0%,
			var(--bbc-surface-2) 0%,
			var(--bbc-bg) 70%);
	border-bottom: 1px solid var(--bbc-border);
	padding-block: clamp(var(--bbc-space-7), 6vw, var(--bbc-space-9));
	text-align: center;
}

.bbc-hero__inner {
	max-width: 60rem;
}

.bbc-hero__eyebrow {
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-sm);
	font-weight: var(--bbc-weight-semi);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bbc-brand-primary, #a4004b);
	margin: 0 0 var(--bbc-space-3);
}

.bbc-hero__title {
	font-family: var(--bbc-font-serif);
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--bbc-text);
	margin: 0 auto var(--bbc-space-4);
	max-width: 18ch;
	text-wrap: balance;
}

.bbc-hero__lead {
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-lg);
	line-height: var(--bbc-lh-lg);
	color: var(--bbc-text-muted);
	margin: 0 auto var(--bbc-space-6);
	max-width: 46ch;
	text-wrap: pretty;
}

/* The search card is left-aligned inside the centred hero column. */
.bbc-hero__search {
	max-width: 40rem;
	margin-inline: auto;
	text-align: left;
}

.bbc-hero__reassure {
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-sm);
	line-height: var(--bbc-lh-sm);
	color: var(--bbc-text-muted);
	margin: var(--bbc-space-5) auto 0;
	max-width: 52ch;
}

/* ---- Trust strip -------------------------------------------- */
.bbc-trust {
	background: var(--bbc-surface);
	border-bottom: 1px solid var(--bbc-border);
	padding-block: clamp(var(--bbc-space-6), 4vw, var(--bbc-space-8));
}

.bbc-trust__inner {
	max-width: 64rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bbc-space-6);
}

.bbc-trust__item {
	border-top: 2px solid var(--bbc-brand-primary, #a4004b);
	padding-top: var(--bbc-space-3);
}

.bbc-trust__item h2 {
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-md);
	font-weight: var(--bbc-weight-semi);
	color: var(--bbc-text);
	margin: 0 0 var(--bbc-space-2);
}

.bbc-trust__item p {
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-sm);
	line-height: var(--bbc-lh-sm);
	color: var(--bbc-text-muted);
	margin: 0;
}

/* ---- Compare section --------------------------------------- */
.bbc-home__section {
	max-width: 68rem;
	padding-block: clamp(var(--bbc-space-7), 5vw, var(--bbc-space-8));
}

.bbc-home__section-head {
	margin-bottom: var(--bbc-space-5);
}

.bbc-home__section-head h2 {
	font-family: var(--bbc-font-serif);
	font-size: var(--bbc-text-2xl);
	line-height: var(--bbc-lh-2xl);
	color: var(--bbc-text);
	margin: 0 0 var(--bbc-space-2);
}

.bbc-home__section-head p {
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-md);
	color: var(--bbc-text-muted);
	margin: 0;
	max-width: var(--bbc-measure);
}

/* ---- Pager --------------------------------------------------- */
.bbc-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--bbc-space-2);
	margin-top: var(--bbc-space-5);
	padding-top: var(--bbc-space-4);
	border-top: 1px solid var(--bbc-border);
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-sm);
}

.bbc-pager__pages {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-wrap: wrap;
}

.bbc-pager__step,
.bbc-pager__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem; /* 40px touch target */
	padding: 0 var(--bbc-space-2);
	border: 1px solid var(--bbc-border);
	border-radius: var(--bbc-radius, 8px);
	color: var(--bbc-text);
	text-decoration: none;
	background: var(--bbc-bg);
}

a.bbc-pager__step:hover,
a.bbc-pager__num:hover,
a.bbc-pager__step:focus-visible,
a.bbc-pager__num:focus-visible {
	border-color: var(--bbc-brand-primary, #a4004b);
}

.bbc-pager__num--current {
	border: 2px solid var(--bbc-brand-primary, #a4004b);
	font-weight: var(--bbc-weight-semi);
}

.bbc-pager__step--off {
	opacity: 0.45;
}

.bbc-pager__gap {
	padding: 0 4px;
	color: var(--bbc-text-muted);
}

@media (max-width: 30rem) {
	/* Numbers are secondary on a phone; prev/next carry the interaction. */
	.bbc-pager__pages {
		order: 3;
		width: 100%;
		justify-content: center;
	}
}

/* ---- /at/ results page --------------------------------------
   Vertical budget matters here: h1 + one-line sub + toolbar, then
   row one. The postcode was the question; the top price is the
   answer and must sit above the fold on a ~700px viewport.       */
.bbc-at__grid {
	display: grid;
	grid-template-columns: 19rem minmax(0, 1fr);
	grid-template-rows: auto auto auto 1fr;
	grid-template-areas:
		"pc      main"
		"panel   main"
		"filters main"
		".       main";
	gap: var(--bbc-space-4) var(--bbc-space-5);
	max-width: 80rem;
	margin-inline: auto;
	padding: var(--bbc-space-4);
	align-items: start;
}

.bbc-side__pc      { grid-area: pc; }
.bbc-side__panel   { grid-area: panel; }
.bbc-side__filters { grid-area: filters; }
.bbc-at__main      { grid-area: main; }

.bbc-at__head {
	margin-bottom: var(--bbc-space-3);
}

.bbc-at__title {
	font-family: var(--bbc-font-serif);
	font-size: var(--bbc-text-xl);
	line-height: 1.15;
	color: var(--bbc-text);
	margin: 0 0 var(--bbc-space-1);
}

.bbc-at__sub {
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-sm);
	line-height: var(--bbc-lh-sm);
	color: var(--bbc-text-muted);
	margin: 0;
	max-width: 70ch;
}

/* ---- Sidebar cards -------------------------------------------
   Deliberately NOT sticky: the stack (postcode + panel + filters)
   is taller than many viewports, and a sticky column that overflows
   pins the filters permanently off-screen.                       */
.bbc-side__pc,
.bbc-side__panel,
.bbc-side__filters {
	background: var(--bbc-surface);
	border: 1px solid var(--bbc-border);
	border-radius: var(--bbc-radius, 8px);
	padding: var(--bbc-space-4);
}

.bbc-side__heading {
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-md);
	font-weight: var(--bbc-weight-semi);
	color: var(--bbc-text);
	margin: 0 0 var(--bbc-space-2);
}

.bbc-side__pc-label {
	display: block;
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-sm);
	font-weight: var(--bbc-weight-semi);
	margin-bottom: var(--bbc-space-1);
}

.bbc-side__pc-row {
	display: flex;
	gap: var(--bbc-space-2);
}

.bbc-side__pc-row .bbc-search__input {
	min-width: 0;
	flex: 1;
}

.bbc-side__basis,
.bbc-side__fastest {
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-sm);
	line-height: var(--bbc-lh-sm);
	color: var(--bbc-text-muted);
	margin: 0 0 var(--bbc-space-2);
}

.bbc-side__source {
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-xs, 0.75rem);
	line-height: 1.45;
	color: var(--bbc-text-muted);
	margin: var(--bbc-space-3) 0 0;
}

/* Tier buttons: whole row is the hit target; state chip keeps the
   availability semantics (text + shape via the chip, not colour alone). */
.bbc-side__tiers {
	display: grid;
	gap: var(--bbc-space-2);
	margin-block: var(--bbc-space-3);
}

.bbc-tierbtn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bbc-space-2);
	padding: var(--bbc-space-2) var(--bbc-space-3);
	border: 1px solid var(--bbc-border);
	border-radius: var(--bbc-radius, 8px);
	background: var(--bbc-bg);
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-sm);
	color: var(--bbc-text);
	text-decoration: none;
}

a.bbc-tierbtn:hover,
a.bbc-tierbtn:focus-visible {
	border-color: var(--bbc-brand-primary, #a4004b);
}

.bbc-tierbtn--active {
	border: 2px solid var(--bbc-brand-primary, #a4004b);
	font-weight: var(--bbc-weight-semi);
}

.bbc-tierbtn--active .bbc-tierbtn__label::after {
	content: " ✓";
}

.bbc-tierbtn--off {
	opacity: 0.6;
	background: var(--bbc-surface-2);
}

.bbc-tierbtn__state {
	font-size: var(--bbc-text-xs, 0.75rem);
	color: var(--bbc-text-muted);
	white-space: nowrap;
}

/* Sidebar filter form */
.bbc-side__filters {
	display: grid;
	gap: var(--bbc-space-2);
}

.bbc-side__filters label {
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-sm);
	font-weight: var(--bbc-weight-semi);
}

.bbc-side__filters select {
	width: 100%;
}

/* Keep the /at/ toolbar slim — counts and notes only, no form. */
.bbc-at .bbc-toolbar {
	padding-block: var(--bbc-space-2);
}

/* ---- Responsive -------------------------------------------- */
@media (max-width: 64rem) {
	/* One column: postcode, speeds, results, filters — which is the
	   DOM order too, so tab order and visual order agree. The top
	   price stays near the top; the detail filters follow results. */
	.bbc-at__grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-template-areas:
			"pc"
			"panel"
			"main"
			"filters";
	}
}

@media (max-width: 48rem) {
	.bbc-trust__inner {
		grid-template-columns: 1fr;
		gap: var(--bbc-space-5);
	}
}

/* ---- /isp/ and /area/ landing pages -------------------------- */
.bbc-landing__inner {
	max-width: 72rem;
	margin-inline: auto;
	padding: var(--bbc-space-5) var(--bbc-space-4) var(--bbc-space-8);
}

.bbc-isp__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--bbc-space-5);
	align-items: start;
	padding-bottom: var(--bbc-space-5);
	border-bottom: 1px solid var(--bbc-border);
}

.bbc-isp__logo {
	width: 8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--bbc-space-3);
	background: var(--bbc-surface);
	border: 1px solid var(--bbc-border);
	border-radius: var(--bbc-radius-1, 8px);
}
.bbc-isp__logo img { max-width: 100%; height: auto; max-height: 4rem; object-fit: contain; }

.bbc-isp__title,
.bbc-area h1 {
	font-family: var(--bbc-font-serif);
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	line-height: 1.15;
	margin: 0 0 var(--bbc-space-3);
	color: var(--bbc-text);
}

.bbc-isp__blurb,
.bbc-area__intro {
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-md);
	line-height: var(--bbc-lh-md);
	color: var(--bbc-text-muted);
	max-width: 62ch;
	margin: 0 0 var(--bbc-space-4);
}

.bbc-isp__section { margin-top: var(--bbc-space-7); }
.bbc-isp__section > h2,
.bbc-area h2 {
	font-family: var(--bbc-font-serif);
	font-size: var(--bbc-text-xl);
	margin: 0 0 var(--bbc-space-3);
	color: var(--bbc-text);
}

.bbc-isp__caveat,
.bbc-area__caveat {
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-sm);
	line-height: var(--bbc-lh-sm);
	color: var(--bbc-text-muted);
	background: var(--bbc-fun-amber-bg, var(--bbc-surface-2));
	border-left: 3px solid var(--bbc-fun-amber-fg, var(--bbc-border-strong));
	padding: var(--bbc-space-3) var(--bbc-space-4);
	margin: 0 0 var(--bbc-space-4);
	max-width: 70ch;
}

/* ---- Coverage schematic -------------------------------------- */
.bbc-map { margin: 0; display: grid; gap: var(--bbc-space-4); }
.bbc-map__band--empty { opacity: 0.5; }
.bbc-map__band-name {
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-sm);
	font-weight: var(--bbc-weight-semi);
	color: var(--bbc-text);
	margin: 0 0 var(--bbc-space-2);
	display: flex;
	gap: var(--bbc-space-2);
	align-items: baseline;
}
.bbc-map__band-count { font-weight: var(--bbc-weight-regular); color: var(--bbc-text-muted); font-variant-numeric: tabular-nums; }
.bbc-map__cells { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.bbc-map__cell {
	min-width: 2.75rem;
	text-align: center;
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-xs);
	font-weight: var(--bbc-weight-semi);
	line-height: 1;
	border: 1px solid var(--bbc-border);
	border-radius: 4px;
	background: var(--bbc-surface-2);
	color: var(--bbc-text-muted);
}
.bbc-map__cell a, .bbc-map__cell span { display: block; padding: 8px 6px; text-decoration: none; color: inherit; }
/* Covered cells carry weight + a border as well as fill, so the state does
   not depend on colour alone. */
.bbc-map__cell.is-on {
	background: var(--bbc-brand-primary, #a4004b);
	border-color: var(--bbc-brand-primary, #a4004b);
	color: #fff;
}
.bbc-map__note {
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-xs);
	line-height: 1.5;
	color: var(--bbc-text-muted);
	max-width: 70ch;
	margin-top: var(--bbc-space-2);
}

/* ---- Town + area link lists ---------------------------------- */
.bbc-townlist, .bbc-arealinks {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: var(--bbc-space-2);
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-sm);
}
.bbc-townlist li, .bbc-arealinks li {
	display: flex; justify-content: space-between; gap: var(--bbc-space-2);
	padding: var(--bbc-space-2) var(--bbc-space-3);
	border: 1px solid var(--bbc-border);
	border-radius: var(--bbc-radius-1, 8px);
	background: var(--bbc-surface);
}
.bbc-townlist span, .bbc-arealinks span { color: var(--bbc-text-muted); font-size: var(--bbc-text-xs); }

/* ---- Provider list on /area/uk/ ------------------------------- */
.bbc-plist { list-style: none; margin: 0 0 var(--bbc-space-6); padding: 0; display: grid; gap: var(--bbc-space-2); }
.bbc-plist__item {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
	gap: var(--bbc-space-3);
	padding: var(--bbc-space-3) var(--bbc-space-4);
	border: 1px solid var(--bbc-card-border, var(--bbc-border));
	border-radius: var(--bbc-radius-2, 10px);
	background: var(--bbc-card-bg, var(--bbc-surface));
}
.bbc-plist__name { display: flex; align-items: center; gap: var(--bbc-space-2); flex-wrap: wrap; font-family: var(--bbc-font-sans); font-weight: var(--bbc-weight-semi); }
.bbc-plist__price { text-align: right; font-family: var(--bbc-font-sans); }
.bbc-plist__price strong { display: block; font-size: var(--bbc-text-lg); font-variant-numeric: tabular-nums; }
.bbc-plist__price span { font-size: var(--bbc-text-xs); color: var(--bbc-text-muted); }
.bbc-plist__noprice { font-size: var(--bbc-text-sm); color: var(--bbc-text-muted); }

@media (max-width: 40rem) {
	.bbc-isp__head { grid-template-columns: 1fr; }
	.bbc-isp__logo { width: 6rem; }
}