/* Featured Blogs — Athena Bitcoin
   Full width featured blog card. Every color and size comes from the
   variables printed by the plugin, so the settings screen controls it all. */

.af-featured,
.af-featured *,
.af-featured *::before,
.af-featured *::after {
	box-sizing: border-box;
}

.af-featured {
	--af-accent: #FFC04A;
	--af-ink: #0B0B0C;
	--af-ink-rgb: 11, 11, 12;
	--af-shade: 0.88;
	--af-content: 1366px;
	--af-h-desktop: 660px;
	--af-h-tablet: 640px;
	--af-h-mobile: 600px;

	position: relative;
	display: block;
	width: 100%;
	min-height: var(--af-h-desktop);
	background-color: var(--af-ink);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
	isolation: isolate;
}

/* ---- Contained variant -------------------------------------------------
   Lines the card up with the Latest Articles grid underneath, so the left
   edge of the photo sits exactly where card 1 starts. The width maths mirror
   the grid's container at every breakpoint. */

.af-featured.af-contained {
	width: calc(100% - 40px);
	max-width: calc(var(--af-content) - 80px);
	margin-left: auto;
	margin-right: auto;
}

.af-featured.af-contained .af-inner {
	max-width: none;
	margin: 0;
	padding-left: 48px;
	padding-right: 48px;
}

/* Dark wash so the copy stays readable over any photo. */
.af-featured .af-shade {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		96deg,
		rgba(var(--af-ink-rgb), calc(var(--af-shade) * 1.06)) 0%,
		rgba(var(--af-ink-rgb), calc(var(--af-shade) * 0.94)) 30%,
		rgba(var(--af-ink-rgb), calc(var(--af-shade) * 0.5)) 52%,
		rgba(var(--af-ink-rgb), calc(var(--af-shade) * 0.14)) 72%,
		rgba(var(--af-ink-rgb), 0) 88%
	);
}

/* The whole card is one big link. The button sits on top of it. */
.af-featured .af-cover-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	text-decoration: none;
	border: 0;
	outline: 0;
}

.af-featured .af-inner {
	position: relative;
	z-index: 2;
	max-width: calc(var(--af-content) + 80px);
	margin: 0 auto;
	padding: 56px 40px;
	min-height: var(--af-h-desktop);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	pointer-events: none;
}

.af-featured .af-content {
	max-width: 660px;
	width: 100%;
}

/* ---- Tag chip ---------------------------------------------------------- */

.af-featured .af-chip {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 9px 16px;
	margin: 0 0 26px;
	border: 1px solid var(--af-accent);
	background: rgba(var(--af-ink-rgb), 0.55);
	color: var(--af-accent);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.af-featured .af-chip-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--af-accent);
	flex: 0 0 auto;
}

/* ---- Headline ---------------------------------------------------------- */

.af-featured .af-title {
	margin: 0 0 20px;
	padding: 0;
	color: #fff;
	font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: clamp(34px, 3.2vw, 50px);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.015em;
	max-width: 100%;
}

/* ---- Excerpt ----------------------------------------------------------- */

.af-featured .af-excerpt {
	margin: 0 0 30px;
	color: rgba(255, 255, 255, 0.92);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.6;
	max-width: 100%;
}

.af-featured .af-excerpt p {
	margin: 0 0 10px;
}

.af-featured .af-excerpt p:last-child {
	margin-bottom: 0;
}

/* ---- Button ------------------------------------------------------------ */

.af-featured .af-btn {
	pointer-events: auto;
	position: relative;
	z-index: 3;
	display: inline-block;
	padding: 14px 24px;
	border: 1px solid var(--af-accent);
	background: transparent;
	color: var(--af-accent);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.22s ease, color 0.22s ease;
}

.af-featured .af-btn:hover,
.af-featured .af-btn:focus-visible {
	background: var(--af-accent);
	color: var(--af-ink);
	text-decoration: none;
}

.af-featured .af-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ---- Date and read time ------------------------------------------------ */

.af-featured .af-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 28px 0 0;
	color: rgba(255, 255, 255, 0.78);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.af-featured .af-meta-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	flex: 0 0 auto;
}

/* ---- Tablet and below --------------------------------------------------
   Below 1200px there is not enough width to put the copy beside the person
   in the photo without the headline crossing their face, and the subject
   moves every time the image is swapped. So the copy drops to the bottom on
   its own gradient and the photo keeps the top of the card to itself. No
   overlap is possible at any width, with any picture. */

@media (max-width: 1199px) {
	.af-featured,
	.af-featured .af-inner {
		min-height: var(--af-h-tablet);
	}
	.af-featured {
		background-position: center 18%;
	}
	.af-featured .af-shade {
		background: linear-gradient(
			to top,
			rgba(var(--af-ink-rgb), calc(var(--af-shade) * 1.05)) 0%,
			rgba(var(--af-ink-rgb), var(--af-shade)) 30%,
			rgba(var(--af-ink-rgb), calc(var(--af-shade) * 0.66)) 52%,
			rgba(var(--af-ink-rgb), calc(var(--af-shade) * 0.26)) 74%,
			rgba(var(--af-ink-rgb), 0.08) 100%
		);
	}
	.af-featured .af-inner {
		justify-content: flex-end;
		padding: 48px 40px 44px;
	}
	.af-featured .af-content {
		max-width: 100%;
	}
	.af-featured .af-title {
		font-size: 38px;
		max-width: 22ch;
		margin-bottom: 16px;
	}
	.af-featured .af-excerpt {
		font-size: 17px;
		max-width: 62ch;
		margin-bottom: 28px;
	}
	.af-featured .af-chip {
		margin-bottom: 20px;
	}
	.af-featured .af-meta {
		margin-top: 24px;
	}
}

/* ---- Tablet portrait --------------------------------------------------- */

@media (max-width: 1023px) {
	.af-featured .af-inner {
		padding: 44px 32px 40px;
	}
	.af-featured.af-contained .af-inner {
		padding-left: 40px;
		padding-right: 40px;
	}
	.af-featured .af-title {
		font-size: 34px;
		max-width: 20ch;
	}
	.af-featured .af-excerpt {
		font-size: 16px;
		max-width: 58ch;
		margin-bottom: 26px;
	}
}

/* ---- Phone portrait ---------------------------------------------------- */

@media (max-width: 767px) {
	.af-featured,
	.af-featured .af-inner {
		min-height: var(--af-h-mobile);
	}
	.af-featured {
		background-position: 62% 12%;
	}
	/* Subject stays visible up top, copy reads off a dark base. */
	.af-featured .af-shade {
		background: linear-gradient(
			to top,
			rgba(var(--af-ink-rgb), calc(var(--af-shade) * 1.05)) 0%,
			rgba(var(--af-ink-rgb), var(--af-shade)) 34%,
			rgba(var(--af-ink-rgb), calc(var(--af-shade) * 0.62)) 58%,
			rgba(var(--af-ink-rgb), calc(var(--af-shade) * 0.22)) 78%,
			rgba(var(--af-ink-rgb), 0.1) 100%
		);
	}
	.af-featured .af-inner {
		justify-content: flex-end;
		padding: 40px 24px 36px;
	}
	.af-featured.af-contained .af-inner {
		padding-left: 24px;
		padding-right: 24px;
	}
	.af-featured .af-content {
		max-width: 100%;
	}
	/* Pinned to the top corner on a phone. In the bottom stack it landed
	   across the subject's face, and up here it earns the empty part of the
	   photo and echoes the numbered corners on the cards below. Slightly
	   more opaque, since it sits over sky rather than the dark band. */
	.af-featured .af-chip {
		position: absolute;
		top: 22px;
		left: 22px;
		z-index: 4;
		margin: 0;
		gap: 9px;
		padding: 8px 13px;
		font-size: 10.5px;
		letter-spacing: 0.14em;
		background: rgba(var(--af-ink-rgb), 0.72);
	}
	.af-featured .af-title {
		font-size: 28px;
		line-height: 1.2;
		max-width: 100%;
		margin-bottom: 14px;
	}
	.af-featured .af-excerpt {
		font-size: 15px;
		line-height: 1.55;
		max-width: 100%;
		margin-bottom: 22px;
	}
	.af-featured .af-btn {
		display: block;
		width: 100%;
		max-width: 320px;
		padding: 15px 20px;
		text-align: center;
	}
	.af-featured .af-meta {
		gap: 10px;
		margin-top: 20px;
		font-size: 11.5px;
	}
}

@media (max-width: 400px) {
	.af-featured .af-title {
		font-size: 25px;
	}
	.af-featured .af-btn {
		max-width: none;
	}
}

/* ---- Small screens in landscape --------------------------------------- */

@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
	.af-featured,
	.af-featured .af-inner {
		min-height: 420px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.af-featured .af-btn {
		transition: none;
	}
}

/* ---- Big monitors ------------------------------------------------------
   On a very wide screen a fixed height turns the hero into a letterbox, and
   background-size:cover answers that by scaling the photo up and cropping it
   into a close-up. So the height grows with the viewport, up to a ceiling,
   and the crop sits higher to keep faces out of the top edge. */

@media (min-width: 1441px) {
	/* Only the full bleed card letterboxes on a wide screen. The contained
	   one keeps its own width, so it keeps its own height too. */
	.af-featured.af-full,
	.af-featured.af-full .af-inner {
		min-height: clamp(660px, 40vw, 940px);
	}
	.af-featured {
		background-position: center 30%;
	}
	/* A wide screen shows the whole photo with no side cropping, so the wash
	   eases off and lets the storefront and the bokeh read instead of sitting
	   under a black slab. */
	.af-featured .af-shade {
		background:
			/* keeps the lower left dark under the date line, where the
			   photo has warm bokeh that thin grey text disappears into */
			linear-gradient(
				to top,
				rgba(var(--af-ink-rgb), calc(var(--af-shade) * 0.5)) 0%,
				rgba(var(--af-ink-rgb), calc(var(--af-shade) * 0.28)) 26%,
				rgba(var(--af-ink-rgb), 0) 52%
			),
			linear-gradient(
				96deg,
				rgba(var(--af-ink-rgb), calc(var(--af-shade) * 0.86)) 0%,
				rgba(var(--af-ink-rgb), calc(var(--af-shade) * 0.8)) 22%,
				rgba(var(--af-ink-rgb), calc(var(--af-shade) * 0.72)) 42%,
				rgba(var(--af-ink-rgb), calc(var(--af-shade) * 0.4)) 60%,
				rgba(var(--af-ink-rgb), calc(var(--af-shade) * 0.1)) 78%,
				rgba(var(--af-ink-rgb), 0) 92%
			);
	}
	.af-featured .af-inner {
		padding-top: 72px;
		padding-bottom: 72px;
	}
	.af-featured.af-full .af-content {
		max-width: 760px;
	}
	.af-featured.af-full .af-title {
		font-size: clamp(50px, 2.7vw, 64px);
	}
	.af-featured .af-excerpt {
		font-size: 19px;
		margin-bottom: 34px;
	}
	.af-featured .af-chip {
		padding: 10px 18px;
		font-size: 13px;
		margin-bottom: 30px;
	}
	.af-featured .af-btn {
		padding: 16px 28px;
		font-size: 13px;
	}
	.af-featured .af-meta {
		margin-top: 32px;
		font-size: 14px;
	}
}

@media (min-width: 2000px) {
	.af-featured.af-full .af-content {
		max-width: 840px;
	}
}