/**
 * Homepage styles (front-page.php only) — Premium Editorial composition:
 * big read + "Also this week" aside, single Index table, explainer row,
 * dark "By the numbers" band, Guides & reviews. Mobile-first.
 */

/* ── Lead ─────────────────────────────────────────────────────────── */

.bc-lead { padding-block: 34px 0; }
.bc-lead__grid { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: start; }

.bc-lead__hed {
	margin: 12px 0 0;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(32px, 3.6vw, 46px);
	line-height: 1.04;
	letter-spacing: -0.018em;
	color: var(--ink);
}
.bc-lead__big a:hover .bc-lead__hed, .bc-lead__big h2:hover { color: var(--ink); }
.bc-lead__dek { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--body); max-width: 60ch; }
.bc-lead__byline {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 15px;
	font-size: 13px;
	color: var(--muted);
}
.bc-lead__byline b { color: var(--ink); font-weight: 600; }
.bc-lead__sep { color: var(--rule-strong); }
.bc-lead__img { display: block; margin-top: 20px; }
.bc-lead__img img, .bc-imgph {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border: 1px solid var(--rule);
}
.bc-imgph {
	background: var(--paper-2);
}
.bc-lead__more {
	display: inline-block;
	margin-top: 16px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--teal);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bc-lead__aside { min-width: 0; }
.bc-lead__aside > .bc-kicker { margin-bottom: 4px; letter-spacing: 0.12em; }
.bc-lead__list { display: flex; flex-direction: column; }
.bc-lead__item { display: block; padding: 18px 0; border-top: 1px solid var(--rule); }
.bc-lead__itemkicker { font-size: 10px; letter-spacing: 0.1em; }
.bc-lead__itemtitle {
	margin: 7px 0 0;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.16;
	color: var(--ink);
}
.bc-lead__item:hover .bc-lead__itemtitle { color: var(--teal); }
.bc-lead__itemdek { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

@media (min-width: 901px) {
	.bc-lead__grid { grid-template-columns: 1.62fr 1fr; gap: 44px; }
	.bc-lead__aside { border-left: 1px solid var(--rule-strong); padding-left: 44px; }
}

/* ── The Index (single ratings table) ─────────────────────────────── */

.bc-idx { padding-block: 52px 0; scroll-margin-top: 60px; }
.bc-idx__head { margin-bottom: 0; }
.bc-idx__tablebox { border: 1px solid var(--rule-strong); border-top: none; background: var(--surface); overflow-x: auto; }
.bc-idx__table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 600px; }
.bc-idx__table th[scope="col"] {
	padding: 12px 16px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: left;
	border-bottom: 1px solid var(--rule-strong);
	white-space: nowrap;
}
.bc-idx__thnum { width: 7%; padding-left: 20px; }
.bc-idx__table td, .bc-idx__table th[scope="row"] { padding: 15px 16px; vertical-align: middle; border-top: 1px solid var(--rule); text-align: left; }
.bc-idx__table tbody tr:first-child td, .bc-idx__table tbody tr:first-child th { border-top: none; }
.bc-idx__row--best { background: var(--highlight); }

.bc-idx__rank {
	font-family: var(--font-serif);
	font-size: 19px;
	color: var(--faint);
	padding-left: 20px !important;
	width: 7%;
}
.bc-idx__row--best .bc-idx__rank { color: var(--ink); }

.bc-idx__platform { font-weight: 400; width: 36%; }
.bc-idx__platform > a { font-weight: 700; font-size: 15.5px; color: var(--ink); }
.bc-idx__platform > a:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.bc-idx__platform .bc-badge { margin-left: 9px; vertical-align: middle; }
.bc-idx__take { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 400; color: var(--muted); }

.bc-idx__cat { width: 27%; }
.bc-idx__catchip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--body); }
.bc-idx__catchip i { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }

.bc-idx__rating { width: 30%; padding-right: 20px !important; }
.bc-idx__ratingin { display: flex; align-items: center; gap: 12px; }
.bc-idx__score {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 20px;
	color: var(--score-c, var(--ink));
	min-width: 38px;
}
.bc-idx__meter { flex: 1; height: 5px; background: var(--rule); max-width: 180px; }
.bc-idx__meter i { display: block; height: 100%; background: var(--score-c, var(--teal)); }

.bc-idx__note { margin: 12px 0 0; font-size: 11.5px; color: var(--muted); }

@media (max-width: 760px) {
	.bc-idx__take { display: none; }
	.bc-idx__cat { display: none; }
	.bc-idx__thcat { display: none; }
	.bc-idx__table { min-width: 0; }
}

/* ── Explainers ("Understanding …") ───────────────────────────────── */

.bc-explainers { padding-block: 52px 0; }
.bc-explainers__hed {
	margin: 0 0 22px;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 24px;
	color: var(--ink);
	border-bottom: 1px solid var(--rule-strong);
	padding-bottom: 12px;
}
.bc-explainers__grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.bc-explainers__item { display: block; }
.bc-explainers__title {
	margin: 9px 0 0;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.15;
	color: var(--ink);
}
.bc-explainers__item:hover .bc-explainers__title { color: var(--teal); }
.bc-explainers__dek { margin: 9px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }

@media (min-width: 761px) {
	.bc-explainers__grid { grid-template-columns: repeat(3, 1fr); gap: 0; }
	.bc-explainers__item { padding: 0 28px; border-right: 1px solid var(--rule); }
	.bc-explainers__item:first-child { padding-left: 0; }
	.bc-explainers__item:last-child { padding-right: 0; border-right: none; }
}

/* ── By the numbers band ──────────────────────────────────────────── */

.bc-numbers { background: var(--band-bg); margin-top: 52px; }
.bc-numbers__in { padding-block: 38px; }
.bc-numbers__kicker {
	margin: 0 0 22px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--band-kicker);
}
.bc-numbers__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.bc-numbers__stat { min-width: 0; }
.bc-numbers__value {
	display: block;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 46px;
	line-height: 1;
	color: #fff;
}
.bc-numbers__label { margin: 8px 0 0; font-size: 13px; color: var(--band-text); }

@media (min-width: 761px) {
	.bc-numbers__grid { grid-template-columns: repeat(4, 1fr); }
	.bc-numbers__stat + .bc-numbers__stat { border-left: 1px solid var(--band-rule); padding-left: 28px; }
}

/* ── Guides & reviews ─────────────────────────────────────────────── */

.bc-guides { padding-block: 52px 0; }
.bc-guides__hed {
	margin: 0 0 22px;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 24px;
	color: var(--ink);
	border-bottom: 1px solid var(--rule-strong);
	padding-bottom: 12px;
}
.bc-guides__grid { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: start; }
.bc-guides__featured { display: block; }
.bc-guides__img img, .bc-guides__img .bc-imgph {
	aspect-ratio: 3 / 2;
	width: 100%;
	object-fit: cover;
	border: 1px solid var(--rule);
}
.bc-guides__kicker { margin: 14px 0 0; font-size: 10px; letter-spacing: 0.1em; }
.bc-guides__title {
	margin: 8px 0 0;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 26px;
	line-height: 1.12;
	color: var(--ink);
}
.bc-guides__featured:hover .bc-guides__title { color: var(--teal); }
.bc-guides__dek { margin: 9px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); max-width: 52ch; }
.bc-guides__list { display: flex; flex-direction: column; }
.bc-guides__item { display: block; padding: 16px 0; border-top: 1px solid var(--rule); }
.bc-guides__item:last-child { border-bottom: 1px solid var(--rule); }
.bc-guides__item .bc-kicker { font-size: 10px; letter-spacing: 0.1em; }
.bc-guides__itemtitle {
	margin: 6px 0 0;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.16;
	color: var(--ink);
}
.bc-guides__item:hover .bc-guides__itemtitle { color: var(--teal); }

@media (min-width: 901px) {
	.bc-guides__grid { grid-template-columns: 1.3fr 1fr; gap: 44px; }
}

/* Newsletter band flush spacing before footer */
.home .bc-footer { margin-top: 56px; }