/**
 * Single blog post — Figma 1137:985 (desktop) / 1137:1446 (mobile).
 *
 * LAYERED OVER guide.css, which supplies the article chrome the two designs
 * share pixel for pixel: the 526px hero gradient, the 316px "ON THIS PAGE"
 * panel, the 32px h2 prose column, the boring-part card and the FAQ block.
 * This file is only the delta — the byline row, the panel's newsletter CTA, the
 * author card, the tag row's heading and the "Keep reading" cards.
 *
 * Tokens from base.css. MFSA / newsletter / FAQ / pills from sections-shared.css.
 */

/* The hero is fixed-height in the guide (one known title); a post title is any
   length, so it grows instead of clipping. */
.bpost-page .guide-hero,
.bpost-page .guide-hero__inner {
	height: auto;
	min-height: 526px;
}

/* ---------- Hero background: the post's featured image ---------- */

/*
 * The guide places a fixed 631×421 prop in this slot; on a post the image is the
 * hero's ground, so it fills it — at full strength, because a picture the reader
 * cannot make out is not worth the bytes it costs.
 */
.bpost-page .bpost-hero__visual {
	overflow: hidden;
}

.bpost-page .bpost-hero__visual img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	opacity: 1;
	transform: none;
}

/*
 * READABILITY IS DONE IN TWO PLACES, and that split is the whole point: a scrim
 * heavy enough to guarantee legibility on its own has to cover the frame, which
 * is what buries the picture. So the scrim stays light — a short band under the
 * crumb row, near-nothing across the middle, and a ramp under the bottom-anchored
 * copy — and the text carries its own shadow (below) for the local contrast.
 *
 * .guide-hero__shade (left vignette) and __fade (bottom 160px to solid) stack on
 * top of this, which is why these values can stay as low as they are.
 */
.bpost-page .bpost-hero__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(17, 22, 32, .58) 0%, rgba(17, 22, 32, .16) 17%, rgba(17, 22, 32, .04) 38%, rgba(17, 22, 32, .26) 72%, rgba(17, 22, 32, .74) 100%),
		linear-gradient(90deg, rgba(17, 22, 32, .32) 0%, rgba(17, 22, 32, .04) 55%, rgba(17, 22, 32, 0) 100%);
}

/*
 * The hero copy's own contrast, and the reason the scrim above can be as light as
 * it is: a wide soft shadow puts a pool of dark immediately around each glyph, so
 * legibility no longer depends on what the photograph happens to be doing there.
 * Scoped to --media — a post with no featured image keeps the flat gradient hero
 * that shipped, where none of this is needed.
 */
.bpost-hero--media .guide-crumbs,
.bpost-hero--media .guide-hero__copy h1,
.bpost-hero--media .bpost-deck,
.bpost-hero--media .bpost-byline {
	/*
	 * Three stacked shadows at ZERO offset, not one soft drop: the tight pair
	 * crisps the stroke edge, the wide one pools around the whole line. Offset
	 * shadows measured worst at the TOP edge of the headline — the halo has to be
	 * even on every side, because a photograph can be bright above the caps just
	 * as easily as below the baseline.
	 */
	text-shadow:
		0 0 3px rgba(17, 22, 32, .85),
		0 0 14px rgba(17, 22, 32, .92),
		0 0 34px rgba(17, 22, 32, .92);
}

/* Slate-on-photograph is the one colour that cannot survive out here — measured
   at 1.4:1 over a bright sky. The trail keeps its hierarchy, one step lighter. */
.bpost-hero--media .guide-crumbs,
.bpost-hero--media .guide-crumbs a {
	color: #cfd6e2;
}

/* Figma 1137:1261 — the H1 spans the full 1184 container here, not the guide's
   500px column, because there is no hero art beside it. */
.bpost-page .guide-hero h1 {
	max-width: 1184px;
}

/* Figma 1137:1259 — the copy block sits against the bottom of the hero (the box
   ends 51px above it), not against the crumbs. A post title is any length and a
   post may have no deck, so anchoring it to the top left a short article with
   ~180px of dead gradient; anchoring it to the bottom holds the frame's
   relationship to the fade band whatever the copy does. */
.bpost-page .guide-hero__copy {
	max-width: none;
	width: 100%;
	margin-top: auto;
}

/* Figma 1137:1262 — deck under the H1 (only when a takeaway fills the box). */
.bpost-deck {
	margin: 0;
	max-width: 633px;
	font-family: var(--xc-body);
	font-size: 16px;
	line-height: 1.25;
	color: #cfd6e2;
}

.bpost-page .guide-hero__intro {
	max-width: 757px;
}

/* ---------- Byline — Figma 1137:1263 ---------- */
.bpost-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	padding-top: 4.7px;
	font-family: var(--xc-body);
	font-size: 12.5px;
	line-height: 18.75px;
	color: var(--xc-slate, #788196);
}

/* Figma 1137:1264 — 30px ring; the frame's "IMG" is a placeholder, so with no
   avatar this stays an empty ring rather than printing a fake initial. */
.bpost-byline__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-sizing: border-box;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border: 1px solid var(--xc-bright-blue, #1a9cfc);
	border-radius: 15px;
	background: rgba(120, 129, 150, .1);
}

.bpost-byline__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.bpost-byline__items {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

.bpost-byline__item {
	white-space: nowrap;
}

.bpost-byline__em {
	font-weight: 600;
	color: #cfd6e2;
}

.bpost-byline__review {
	color: var(--xc-slate, #788196);
}

/* Desktop frame has no MFSA review line in the byline — it is a mobile-only
   reassurance (Figma 1137:1487). */
.bpost-byline__review {
	display: none;
}

/* ---------- TOC panel — Figma 1137:1045 ---------- */
/*
 * The guide pins the panel to the full sticky height because its TOC is long
 * enough to fill it. A post's can be three lines, and a 743px box with three
 * links and a button stranded at the bottom is not what the frame draws (486px
 * for nine items — it hugs its content). So: height by content, capped at the
 * viewport, and the list scrolls only once it actually overflows.
 */
.bpost-page .guide-toc {
	height: auto;
	max-height: var(--guide-toc-max);
}

@media (min-width: 961px) {
	/*
	 * THE CAP HAS TO BE REPEATED ON THE PANEL, NOT WRITTEN AS `max-height: 100%`.
	 * A percentage max-height resolves against the parent's HEIGHT, and this
	 * parent's height is auto (that is the whole point of hugging), so the
	 * percentage resolved to none: a long TOC — an imported post with 20 headings
	 * — grew the panel to 999px inside a 609px sticky aside and painted the
	 * overflow over the "Keep reading" section below it. Same cap, stated again.
	 *
	 * Flex, not the guide's grid, because a clamped grid container sizes its auto
	 * rows to content and overflows; flex items shrink. The nav is the only child
	 * that gives way (`min-height: 0` + `overflow-y: auto` are already on it in
	 * guide.css), so label and CTA stay put and the list scrolls.
	 */
	.bpost-page .guide-toc__panel {
		display: flex;
		flex-direction: column;
		height: auto;
		max-height: var(--guide-toc-max);
		padding-bottom: 0;
	}

	.bpost-page .guide-toc__summary,
	.bpost-page .bpost-toc__cta {
		flex: 0 0 auto;
	}

	.bpost-page .guide-toc__nav {
		flex: 0 1 auto;
	}
}

.bpost-toc__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	margin: 12px 22px 22px;
	padding: 11px 16px;
	border-radius: 999px;
	background: var(--xc-blue, #015adf);
	font-family: var(--xc-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	color: #fff;
	text-align: center;
	text-decoration: none;
	transition: background-color .15s ease;
}

.bpost-toc__cta:hover,
.bpost-toc__cta:focus-visible {
	background: #0a6bf5;
	color: #fff;
}

/* ---------- Standing disclaimer — Figma 1137:1188 ---------- */
.bpost-disclaimer {
	box-sizing: border-box;
	margin: 24px 0 0;
	padding: 11px 17px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 8px;
	background: rgba(255, 255, 255, .05);
	font-family: var(--xc-body);
	font-size: 12px;
	line-height: 19.2px;
	color: var(--xc-slate, #788196);
}

/* ---------- Author card — Figma 1137:1190 ---------- */
.bpost-author {
	display: flex;
	align-items: center;
	gap: 38px;
	box-sizing: border-box;
	margin-top: 22px;
	padding: 24px 32px;
	min-height: 161px;
	border: 1px solid rgba(249, 253, 255, .1);
	border-radius: 12px;
	background: rgba(249, 253, 255, .05);
}

.bpost-author__avatar {
	display: block;
	overflow: hidden;
	flex: 0 0 76px;
	width: 76px;
	height: 76px;
	border: 1px solid var(--xc-bright-blue, #1a9cfc);
	border-radius: 1000px;
	background: rgba(100, 162, 255, .12);
}

.bpost-author__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.bpost-author__copy {
	min-width: 0;
}

.bpost-author__name {
	margin: 0;
	font-family: var(--xc-display);
	font-weight: 800;
	font-size: 24px;
	line-height: 36px;
	letter-spacing: -.24px;
	color: var(--xc-off-white);
	font-variation-settings: "wdth" 100;
}

.bpost-author__role {
	margin: 10px 0 0;
	font-family: var(--xc-body);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.25;
	color: var(--xc-bright-blue, #1a9cfc);
}

.bpost-author__bio {
	margin: 10px 0 0;
	max-width: 622px;
	font-family: var(--xc-body);
	font-size: 13px;
	line-height: 20.8px;
	color: #cfd6e2;
}

.bpost-author__bio a {
	color: var(--xc-bright-blue, #1a9cfc);
	text-decoration: none;
	white-space: nowrap;
}

.bpost-author__bio a:hover {
	text-decoration: underline;
}

/* ---------- Tags — Figma 1137:1198 ---------- */
/* The pill row is the shared component; only the heading differs here (44px
   ExtraBold, matching "Keep reading" below it, not the 32px Bold the pill
   component ships with). */
.bpost-page .guide-body .xc-pills {
	margin-top: 32px;
}

.bpost-page .guide-body .xc-pills .xc-pills__heading {
	font-weight: 800;
	font-size: 44px;
	margin-bottom: 24px;
}

/* ---------- Keep reading — Figma 1137:1217 ---------- */
.bpost-related {
	padding: 64px 0;
	background: var(--xc-rich-black);
}

.bpost-related__heading {
	margin: 0 0 40px;
	font-family: var(--xc-display);
	font-weight: 800;
	font-size: 44px;
	line-height: 1;
	color: var(--xc-off-white);
	font-variation-settings: "wdth" 100;
}

.bpost-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

/* Figma 1137:1223 — the hub's card with this frame's chrome: 12px radius and a
   lighter fill than .blog-article, and no thumbnail band. */
.bpost-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	min-height: 218px;
	padding: 26px 19px;
	border: 1px solid rgba(249, 253, 255, .1);
	border-radius: 12px;
	background: rgba(249, 253, 255, .05);
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, background-color .15s ease;
}

.bpost-card:hover,
.bpost-card:focus-visible {
	border-color: rgba(26, 156, 252, .35);
	background: rgba(26, 156, 252, .06);
}

.bpost-card .blog-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bpost-card__title {
	font-family: var(--xc-display);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.1;
	color: var(--xc-off-white);
	font-variation-settings: "wdth" 100;
}

.bpost-card__excerpt {
	font-family: var(--xc-body);
	font-size: 16px;
	line-height: 1.25;
	color: var(--xc-slate, #788196);
}

.bpost-card__meta {
	margin-top: auto;
	font-family: var(--xc-body);
	font-size: 14px;
	line-height: 1.25;
	color: var(--xc-slate, #788196);
}

/* ---------- Mobile — Figma 1137:1446 ---------- */
@media (max-width: 960px) {
	/* Hero grows with the title: the frame's 595px is one five-line H1, not a cap. */
	.bpost-page .guide-hero,
	.bpost-page .guide-hero__inner {
		height: auto;
		min-height: 595px;
	}

	/* Figma 1137:1473 — the bottom fade is 260px here, not the guide's 207px. */
	.bpost-page .guide-hero__shade {
		height: 260px;
	}

	.bpost-page .guide-hero h1 {
		font-size: 40px;
		max-width: none;
	}

	/* The mobile frame drops the deck and keeps the box (1137:1489). */
	.bpost-deck {
		display: none;
	}

	.bpost-page .guide-hero__intro p {
		font-size: 14px;
		line-height: 22.4px;
	}

	/* Figma 1137:1480 — byline stacks, and the MFSA review line appears under it. */
	.bpost-byline {
		gap: 8px 14px;
		font-size: 11px;
		line-height: 16.5px;
	}

	.bpost-byline__items {
		gap: 8px 14px;
	}

	.bpost-byline__avatar {
		display: none;
	}

	.bpost-byline__review {
		display: block;
		flex: 1 0 100%;
	}

	/* The mobile frame's panel (1137:1501) is the label + the list and nothing
	   else — the newsletter CTA is desktop-only. It is also a fixed-height flex
	   column here, so a third child would just strand a button under a gap. */
	.bpost-toc__cta {
		display: none;
	}

	.bpost-author {
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding: 28px 20px;
		text-align: center;
	}

	.bpost-author__bio {
		max-width: none;
	}

	.bpost-page .guide-body .xc-pills .xc-pills__heading {
		font-size: 24px;
		margin-bottom: 16px;
	}

	.bpost-related {
		padding: 32px 0;
	}

	.bpost-related__heading {
		margin-bottom: 20px;
		font-size: 24px;
	}

	.bpost-related__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.bpost-card {
		min-height: 0;
		padding: 20px;
	}
}