/* ==========================================================================
   BLOG CSS - blog index, single blog post.
   ========================================================================== */

.blog-header {
	padding-block: 32px 8px;
}
.blog-header__title {
	font-size: 26px;
	font-weight: 800;
	color: var(--color-navy-900);
	margin: 0;
}

.post-grid {
	padding-block: 24px 48px;
	grid-template-columns: 1fr;
}
.post-card {
	overflow: hidden;
}
.post-card__thumb {
	width: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
}
.post-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.post-card__body {
	padding: 18px;
}
.post-card__meta {
	font-size: 12.5px;
	color: var(--color-text-muted);
	margin-bottom: 8px;
}
.post-card__title {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 8px;
}
.post-card__excerpt {
	font-size: 14px;
	color: var(--color-text-muted);
	margin: 0;
}

@media (min-width: 640px) {
	.post-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.post-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   SINGLE ARTICLE - single.php (blog posts and guidance).

   Namespaced .article-*, not .blog-*. Both this template and page-blogs.php
   were using .blog-hero, so the index's rules were landing on the article and
   half of what was written for the article never applied. Two templates, two
   namespaces.

   The prose itself is styled in base.css, shared with opportunity postings.
   That sharing is most of what changed here: these pages did not need a new
   layout so much as the typesetting the opportunities already had.
   ========================================================================== */

.article-hero {
	position: relative;
	/* No overflow: hidden. The wash below is inset:0 so it cannot escape, and
	   hiding overflow here would clip the cover exactly where it is supposed
	   to hang past the bottom edge. */
	padding-block: clamp(30px, 4.5vw, 52px) clamp(28px, 4vw, 44px);
	background: var(--color-navy-dark);
	color: #fff;
}
/* The same wash as the blog index hero, so moving from the list into an
   article does not feel like landing on a different site. */
.article-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(700px 300px at 8% 0%, rgba(2, 139, 147, 0.3), transparent 66%),
		radial-gradient(460px 240px at 96% 110%, rgba(241, 143, 19, 0.13), transparent 62%);
}
.article-hero__inner {
	position: relative;
	z-index: 1;
}
/* Padding-bottom off when a cover is present, so the overhang below is the
   whole story and not the difference between two clamps that scale at
   different rates. */
.article-hero--cover {
	padding-bottom: 0;
}

.article-hero__breadcrumb {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.62);
}
.article-hero__breadcrumb a {
	color: inherit;
	text-decoration: none;
}
.article-hero__breadcrumb a:hover {
	color: #fff;
}

.article-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.article-tag {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.08);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}
.article-tag:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* Capped short of the container width. A headline set across a wide screen as
   one long line stops reading as a single unit - the eye loses its place on
   the return sweep. */
.article-hero__title {
	margin: 0 0 14px;
	max-width: min(100%, 18em);
	font-size: clamp(28px, 4.4vw, 44px);
	line-height: 1.1;
	letter-spacing: -0.028em;
	color: #fff;
}
.article-hero__lead {
	margin: 0 0 18px;
	max-width: 62ch;
	font-size: clamp(15px, 1.9vw, 17.5px);
	line-height: 1.7;
	color: #C2DDE0;
}

.article-hero__meta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin: 0;
	padding: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.72);
}
.article-hero__meta li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.article-hero__meta svg {
	color: var(--color-accent);
}

/* --- Cover ----------------------------------------------------------------
   Full width on a fixed crop, rather than floated beside the title.

   Featured images arrive at whatever size the author had. Beside the text, a
   tall one squeezed the headline into a column and a wide one left the row
   half empty - the layout changed shape per article. A fixed ratio with
   object-fit means every article opens identically whatever was uploaded.

   It hangs past the bottom of the dark band onto the white below, which is
   what ties the two together. The overshoot is a named amount and the body
   adds the same amount back as padding, so the two cannot drift apart.
   -------------------------------------------------------------------------- */
.article-cover {
	position: relative;
	z-index: 1;
	padding: 40px 0px;
	overflow: hidden;
	box-shadow: 0 22px 50px rgba(1, 34, 79, 0.28);
}
.article-cover img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 1050px;
	object-fit: cover;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
}

.article-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 34px;
	padding-block: clamp(28px, 4vw, 46px);
}
/* Only when there is a cover to make room for. Without a cover the hero's own
   padding already closes the gap and the extra would read as a hole. */
.article-layout.has-cover {
	/* padding-top: calc(clamp(34px, 6vw, 76px) + clamp(24px, 3.4vw, 40px)); */
}
.article-main {
	min-width: 0;
}

/* --- Share ----------------------------------------------------------------
   Under the article, not in the rail: sharing is a decision made after
   reading, and down here the row gets the full column width.
   -------------------------------------------------------------------------- */
.article-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: clamp(32px, 4vw, 48px);
	padding: 20px 22px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	background: var(--color-bg-alt);
}
.article-share__label {
	margin: 0 0 3px;
	font-size: 15.5px;
	font-weight: 800;
	color: var(--color-navy-900);
}
.article-share__sub {
	margin: 0;
	font-size: 13px;
	color: var(--color-text-muted);
}
.article-share__links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}
.article-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 1px solid var(--color-border);
	background: #fff;
	color: var(--color-navy-900);
	transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}
/* Each platform takes its own colour on hover and the icon turns white with
   it. Both are set in the same rule for that reason - the last time these
   were split, one won on source order and the icon stayed white on white. */
.article-share__link:hover {
	transform: translateY(-2px);
	color: #fff;
	border-color: transparent;
}
.article-share__link--whatsapp:hover { background: #25D366; }
.article-share__link--telegram:hover { background: #229ED9; }
.article-share__link--facebook:hover { background: #1877F2; }
.article-share__link--x:hover        { background: #000000; }
.article-share__link--linkedin:hover { background: #0A66C2; }
.article-share__link--reddit:hover   { background: #FF4500; }
.article-share__link--email:hover    { background: var(--color-primary); }

/* --- The rail -------------------------------------------------------------
   What replaced "Article Info". That card listed the publish date, the
   reading time and the category - all three already in the hero, three lines
   up. It occupied the column without adding to it, which is why the right
   side read as empty even though something was in it.

   These three earn the space: where you are in the article, what to read
   next, and where to go afterwards.
   -------------------------------------------------------------------------- */
.article-aside {
	min-width: 0;
}
.article-rail {
	display: grid;
	gap: 18px;
	align-content: start;
	height: 100%;
}

.article-toc {
	padding: 16px 18px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	background: #fff;
}
.article-toc__label,
.article-next__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.article-toc__label svg,
.article-next__label svg {
	color: var(--color-primary-ink);
}
/* Capped and scrollable. A twenty-section guide would otherwise make the rail
   taller than the screen, and once the rail sticks everything below the fold
   is pinned permanently out of reach. */
.article-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 38vh;
	overflow-y: auto;
	counter-reset: article-toc;
}
.article-toc__list li {
	counter-increment: article-toc;
}
.article-toc__list li + li {
	margin-top: 2px;
}
.article-toc__list a {
	display: flex;
	gap: 9px;
	padding: 6px 8px;
	border-radius: 8px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--color-text-muted);
	text-decoration: none;
}
.article-toc__list a::before {
	content: counter(article-toc);
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 800;
	color: var(--color-primary-ink);
	opacity: 0.55;
}
.article-toc__list a:hover {
	background: var(--color-bg-alt);
	color: var(--color-navy-900);
}

.article-next {
	padding: 16px 18px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	background: #fff;
	margin-bottom: 18px;
}
.article-next__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.article-next__list li + li {
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid var(--color-border);
}
.article-next__list a {
	display: flex;
	gap: 11px;
	align-items: center;
	padding: 4px;
	border-radius: 10px;
	text-decoration: none;
}
.article-next__list a:hover {
	background: var(--color-bg-alt);
}
.article-next__thumb {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--color-bg-alt);
}
.article-next__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.article-next__body {
	min-width: 0;
}
.article-next__title {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--color-navy-900);
}
.article-next__list a:hover .article-next__title {
	color: var(--color-primary-ink);
}
.article-next__meta {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	color: var(--color-text-muted);
}

.article-cta {
	padding: 20px;
	border-radius: var(--radius-lg);
	background: var(--color-navy-dark);
	color: #fff;
}
.article-cta__title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
}
.article-cta__text {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.6;
	color: #C2DDE0;
}
.article-cta__btn {
	width: 100%;
	justify-content: center;
	gap: 8px;
}

@media (min-width: 1000px) {
	.article-layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 48px;
	}
	/* Sticky at the same offset as the opportunity rail. The contents list is
	   the only block here that can grow and it is capped above, so the rail
	   stays shorter than the viewport and nothing is pinned out of reach. */
	.article-sticky {
		position: sticky;
		top: 24px;
	}
}

/* Nothing in the rail is worth a screenful of scrolling past the article on a
   phone. Contents goes; what to read next and where to go stay. */
@media (max-width: 999px) {
	.article-toc {
		display: none;
	}
}

.related-articles {
	padding-block: 40px;
	border-top: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
	.blog-body {
		grid-template-columns: 2fr 1fr;
	}
}

/* ==========================================================================
   BLOG INDEX

   Editorial, not a library. The Guidance hub is a flat grid of equal cards
   because you scan it for the one thing you need; the blog has an order and
   the newest matters most, so it leads with one large article and drops to a
   reading list. Same components, deliberately different rhythm.
   ========================================================================== */
.blog-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(40px, 5.5vw, 66px);
	background: var(--color-navy-dark);
	color: #fff;
}
.blog-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(700px 300px at 8% 0%, rgba(2, 139, 147, 0.3), transparent 66%),
		radial-gradient(460px 240px at 96% 110%, rgba(241, 143, 19, 0.13), transparent 62%);
}
.blog-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 680px;
}
.blog-hero__label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
}
.blog-hero__title {
	margin: 0 0 12px;
	font-size: clamp(30px, 5vw, 46px);
	line-height: 1.06;
	letter-spacing: -0.028em;
	max-width: 900px;
}
.blog-hero__lead {
	margin: 0 0 18px;
	font-size: clamp(15px, 1.9vw, 17px);
	line-height: 1.7;
	color: #C2DDE0;
}
/* A signpost to the other section, because "blog" and "guidance" is exactly
   the distinction a first-time visitor has no way to guess. */
.blog-hero__cross {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}
.blog-hero__cross:hover {
	background: rgba(255, 255, 255, 0.12);
}
.blog-hero__cross svg:first-child {
	color: var(--color-accent);
}

.blog-topics {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 30px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--color-border);
}
.blog-topics__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	background: #fff;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--color-navy-900);
	text-decoration: none;
}
.blog-topics__item:hover,
.blog-topics__item.is-active {
	border-color: var(--color-primary-ink);
	color: var(--color-primary-ink);
}
.blog-topics__count {
	font-size: 11.5px;
	font-weight: 800;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--color-bg-alt);
	color: var(--color-text-muted);
}

/* --- The index grid -------------------------------------------------------
   Equal cards, three to a row on a desktop. This was a single column of
   full-width horizontal rows under one large lead article - so every article
   after the first spent an entire screen row showing one title, and a blog
   with eight posts scrolled like a blog with thirty.

   Same column counts as .post-grid, which the Guidance hub and the related
   articles already use, so the three listings on this site now step down
   through the same breakpoints.
   -------------------------------------------------------------------------- */
.blog-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: stretch;
}

.blog-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.07);
	border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.blog-card:hover {
	transform: translateY(-3px);
	border-color: rgba(2, 139, 147, 0.28);
	box-shadow: 0 2px 4px rgba(16, 24, 40, 0.05), 0 18px 40px rgba(16, 24, 40, 0.11);
}

/* --- The image ------------------------------------------------------------
   The opportunity-card treatment: full width, height from a 16:9 ratio rather
   than a fixed pixel value. The card renders at three widths across the
   breakpoints and a fixed height only ever matched one of them - at the
   others the crop tightened or loosened on its own.

   16:9 because it is the ratio press photos, campus shots and stock imagery
   already come in, so it crops least of whatever an editor uploads. The
   tinted ground shows while the image loads and behind anything transparent.
   -------------------------------------------------------------------------- */
.blog-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-bg-alt);
}
.blog-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.blog-card:hover .blog-card__media img {
	transform: scale(1.04);
}

/* Flex, so "Read article" can be pushed to the bottom and line up across
   cards whose titles run to different numbers of lines. */
.blog-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	padding: 18px;
}
.blog-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 12px;
	color: var(--color-text-muted);
}
.blog-card__cat {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--color-bg-alt);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-primary-ink);
}
.blog-card__read::before {
	content: "·";
	margin-right: 8px;
}
.blog-card__title {
	margin: 0 0 8px;
	font-size: 17.5px;
	line-height: 1.28;
	letter-spacing: -0.015em;
}
.blog-card__title a {
	color: var(--color-navy-900);
	text-decoration: none;
}
.blog-card__title a:hover {
	color: var(--color-primary-ink);
}
.blog-card__excerpt {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--color-text-muted);
}
.blog-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* auto pushes it to the bottom of the card; the padding above it keeps it
	   off the excerpt when the card happens to be exactly full. */
	margin-top: auto;
	padding-top: 14px;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--color-primary-ink);
}
.blog-card__more svg {
	transition: transform 0.18s ease;
}
.blog-card:hover .blog-card__more svg {
	transform: translateX(3px);
}

.blog-empty {
	padding: 56px 28px;
	text-align: center;
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
}
.blog-empty h2 {
	margin: 0 0 8px;
	font-size: 22px;
	color: var(--color-navy-900);
}
.blog-empty p {
	margin: 0 0 20px;
	color: var(--color-text-muted);
}

@media (min-width: 640px) {
	.blog-list {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.blog-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.blog-card,
	.blog-card__media img,
	.blog-card__more svg {
		transition: none;
	}
	.blog-card:hover,
	.blog-card:hover .blog-card__media img,
	.blog-card:hover .blog-card__more svg {
		transform: none;
	}
}

/* Anchored headings must clear the sticky site header, or a contents link
   lands with its heading hidden under it. */
.entry-content h2 {
	scroll-margin-top: 90px;
}