/* Featured Blogs — Latest Articles grid
   The numbered bento block that sits under the featured card. */

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

.af-latest {
	--af-accent: #FFC04A;
	--af-ink: #0B0B0C;
	--af-ink-rgb: 11, 11, 12;
	--af-content: 1366px;
	--af-gap: 20px;
	--af-row-a: 440px;
	--af-row-b: 250px;
	--af-pad-top: 72px;
	--af-pad-bottom: 10px;

	display: block;
	width: 100%;
	padding: var(--af-pad-top) 0 var(--af-pad-bottom);
	background: #fff;
}

/* The block takes its side margins from whatever Breakdance section it is
   dropped into, so the cards line up with anything else in that section —
   a post list, a columns block — at every screen size instead of sitting
   inside a second, narrower gutter of their own. */
.af-latest .af-l-inner {
	max-width: calc(var(--af-content) - 80px);
	margin: 0 auto;
	padding: 0;
}

/* ---- Heading row ------------------------------------------------------- */

.af-latest .af-l-head {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0 0 32px;
}

.af-latest .af-l-title {
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
	color: var(--af-ink);
	font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.af-latest .af-l-rule {
	flex: 1 1 auto;
	height: 1px;
	background: var(--af-ink);
	opacity: 0.85;
}

.af-latest .af-l-all {
	flex: 0 0 auto;
	color: var(--af-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.af-latest .af-l-all:hover,
.af-latest .af-l-all:focus-visible {
	color: #8a6a1f;
	text-decoration: none;
}

/* ---- Grid -------------------------------------------------------------- */

/* The row heights are minimums, not fixed. If a longer headline or excerpt
   needs more room the row grows instead of cutting the words off. */
.af-latest .af-l-grid {
	display: grid;
	grid-template-columns: 2.8fr 1fr;
	grid-template-rows: minmax(var(--af-row-a), auto) minmax(var(--af-row-b), auto);
	gap: var(--af-gap);
}

.af-latest .af-card {
	position: relative;
	display: grid;
	overflow: hidden;
	background: var(--af-ink);
	min-width: 0;
}

/* 1 — photo left, panel right */
.af-latest .af-card-1 {
	grid-column: 1;
	grid-row: 1;
	grid-template-columns: 0.83fr 1fr;
}

/* 2 — panel left, photo right */
.af-latest .af-card-2 {
	grid-column: 1;
	grid-row: 2;
	grid-template-columns: 0.83fr 1fr;
}

/* 3 — photo on top, panel below, full height of the block */
.af-latest .af-card-3 {
	grid-column: 2;
	grid-row: 1 / span 2;
	grid-template-rows: 42% 1fr;
}

.af-latest .af-card-photo {
	position: relative;
	background-color: #232326;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	min-height: 0;
}

.af-latest .af-card-2 .af-card-photo {
	order: 2;
}

.af-latest .af-card-panel {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 34px 36px;
	min-width: 0;
	pointer-events: none;
}

/* Card 2 leads with the panel, so the number needs a gutter to sit in. */
.af-latest .af-card-2 .af-card-panel {
	order: 1;
	justify-content: center;
	padding: 26px 32px 26px 78px;
}

.af-latest .af-card-3 .af-card-panel {
	padding: 30px 30px 32px;
	justify-content: flex-start;
}

/* ---- Number badge ------------------------------------------------------ */

.af-latest .af-num {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	background: var(--af-accent);
	color: var(--af-ink);
	font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}

/* ---- Whole card is a link --------------------------------------------- */

/* Sits under the panel so Read Article stays clickable on its own,
   but the panel passes clicks straight through to it. */
.af-latest .af-card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	text-decoration: none;
	border: 0;
}

/* ---- Panel contents ---------------------------------------------------- */

.af-latest .af-c-chip {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	align-self: flex-start;
	padding: 8px 14px;
	margin: 0 0 20px;
	border: 1px solid var(--af-accent);
	color: var(--af-accent);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	max-width: 100%;
}

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

.af-latest .af-c-title {
	margin: 0 0 14px;
	padding: 0;
	color: #fff;
	font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.01em;
}

.af-latest .af-card-2 .af-c-title {
	font-size: 19px;
	margin-bottom: 10px;
}

.af-latest .af-card-3 .af-c-title {
	font-size: 21px;
}

.af-latest .af-c-excerpt {
	margin: 0 0 20px;
	color: rgba(255, 255, 255, 0.74);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
}

.af-latest .af-card-2 .af-c-excerpt {
	font-size: 13.5px;
	margin-bottom: 14px;
}

/* Card 2 is short and wide on the big layouts, so the date line waits until
   the narrower layouts where that card becomes a normal tall card. */
.af-latest .af-card-2 .af-c-meta {
	display: none;
}

.af-latest .af-card-2 .af-c-chip {
	margin-bottom: 14px;
}

.af-latest .af-c-more {
	pointer-events: auto;
	position: relative;
	z-index: 5;
	align-self: flex-start;
	color: var(--af-accent);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 3px;
	transition: border-color 0.2s ease;
}

.af-latest .af-c-more:hover,
.af-latest .af-c-more:focus-visible {
	border-bottom-color: var(--af-accent);
	text-decoration: none;
	color: var(--af-accent);
}

.af-latest .af-c-meta {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	white-space: nowrap;
	gap: 11px;
	margin: 26px 0 0;
	color: rgba(255, 255, 255, 0.62);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.af-latest .af-c-meta-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	flex: 0 0 auto;
}

/* ---- Narrow right hand column ------------------------------------------
   Card 3 sits in the skinny column, so its chip tightens before it would
   ever wrap onto two lines. */

@media (max-width: 1300px) {
	.af-latest .af-card-2 .af-c-chip,
	.af-latest .af-card-3 .af-c-chip {
		gap: 9px;
		padding: 7px 11px;
		font-size: 10px;
		letter-spacing: 0.11em;
	}
	.af-latest .af-card-3 .af-c-meta {
		gap: 9px;
		font-size: 9.5px;
		letter-spacing: 0.05em;
	}
}

/* ---- Tablet landscape -------------------------------------------------- */

@media (max-width: 1119px) {
	.af-latest {
		--af-row-a: 380px;
		--af-row-b: 240px;
	}
	.af-latest .af-l-title {
		font-size: 28px;
	}
	.af-latest .af-card-panel {
		padding: 26px 26px;
	}
	.af-latest .af-card-2 {
		grid-template-columns: 0.95fr 1fr;
	}
	.af-latest .af-card-2 .af-card-panel {
		padding-left: 74px;
	}
	.af-latest .af-card-2 .af-c-chip {
		gap: 9px;
		padding: 7px 11px;
		font-size: 10px;
		letter-spacing: 0.11em;
	}
	.af-latest .af-c-title {
		font-size: 20px;
	}
	.af-latest .af-card-3 .af-c-title {
		font-size: 18px;
	}
	.af-latest .af-card-2 .af-c-title {
		font-size: 17px;
	}
	.af-latest .af-c-excerpt {
		font-size: 14px;
	}
	/* The right hand column is narrow here, so the chip tightens up
	   rather than wrapping onto two lines. */
	.af-latest .af-card-3 .af-c-chip {
		gap: 7px;
		padding: 6px 9px;
		font-size: 8.5px;
		letter-spacing: 0.08em;
	}
	.af-latest .af-card-3 .af-c-meta {
		gap: 7px;
		font-size: 8.5px;
		letter-spacing: 0.03em;
	}
}

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

@media (max-width: 1023px) {
	.af-latest {
		padding: calc(var(--af-pad-top) * 0.78) 0 calc(var(--af-pad-bottom) * 0.78);
		--af-row-a: 340px;
		--af-row-b: 210px;
	}
	.af-latest .af-l-head {
		gap: 18px;
		margin-bottom: 26px;
	}
	.af-latest .af-l-title {
		font-size: 26px;
	}

	/* Still a bento, just rebalanced: card 1 runs the full width, and
	   cards 2 and 3 sit side by side beneath it as a matched pair. */
	.af-latest .af-l-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
	}
	.af-latest .af-card-1 {
		grid-column: 1 / span 2;
		grid-row: 1;
		grid-template-columns: 0.92fr 1fr;
		min-height: 330px;
	}
	.af-latest .af-card-2 {
		grid-column: 1;
		grid-row: 2;
	}
	.af-latest .af-card-3 {
		grid-column: 2;
		grid-row: 2;
	}
	.af-latest .af-card-2,
	.af-latest .af-card-3 {
		grid-template-columns: 1fr;
		grid-template-rows: 210px auto;
	}
	/* Photo leads on both, so the numbers land on the picture and the
	   panels no longer need a gutter beside them. */
	.af-latest .af-card-2 .af-card-photo,
	.af-latest .af-card-3 .af-card-photo {
		order: 1;
	}
	.af-latest .af-card-2 .af-card-panel,
	.af-latest .af-card-3 .af-card-panel {
		order: 2;
		justify-content: flex-start;
		padding: 26px 26px 30px;
	}
	.af-latest .af-card-1 .af-card-panel {
		padding: 30px 34px;
	}
	.af-latest .af-card-2 .af-c-meta {
		display: flex;
	}
	.af-latest .af-c-title,
	.af-latest .af-card-2 .af-c-title,
	.af-latest .af-card-3 .af-c-title {
		font-size: 20px;
	}
	.af-latest .af-card-1 .af-c-title {
		font-size: 24px;
	}
	.af-latest .af-card-2 .af-c-excerpt,
	.af-latest .af-card-3 .af-c-excerpt {
		font-size: 14.5px;
	}
	.af-latest .af-card-2 .af-c-chip,
	.af-latest .af-card-3 .af-c-chip {
		margin-bottom: 16px;
		padding: 7px 11px;
		font-size: 10px;
		letter-spacing: 0.12em;
	}
	.af-latest .af-card-2 .af-c-meta,
	.af-latest .af-card-3 .af-c-meta {
		margin-top: 20px;
		font-size: 10.5px;
		letter-spacing: 0.06em;
	}
}

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

@media (max-width: 767px) {
	.af-latest {
		padding: calc(var(--af-pad-top) * 0.62) 0 calc(var(--af-pad-bottom) * 0.62);
	}
	/* On a phone the heading, the rule and the link cannot share one line as
	   three separate pieces without the rule shrinking to a stub. So the rule
	   becomes the underline of the whole row: title on the left, the link on
	   the right, one clean line beneath both. If the wording ever gets long
	   enough not to fit, the link drops to its own line and the underline
	   still holds the row together. */
	.af-latest .af-l-head {
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 10px 18px;
		margin-bottom: 22px;
		padding-bottom: 14px;
		border-bottom: 1px solid rgba(var(--af-ink-rgb), 0.85);
	}
	.af-latest .af-l-title {
		font-size: 24px;
		flex: 0 1 auto;
	}
	.af-latest .af-l-rule {
		display: none;
	}
	.af-latest .af-l-all {
		flex: 0 0 auto;
	}

	/* Every card becomes photo on top, words below. */
	.af-latest .af-l-grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		gap: 16px;
	}
	.af-latest .af-card,
	.af-latest .af-card-1,
	.af-latest .af-card-2,
	.af-latest .af-card-3 {
		grid-column: 1;
		grid-row: auto;
		grid-template-columns: 1fr;
		grid-template-rows: 210px auto;
	}
	.af-latest .af-card-photo,
	.af-latest .af-card-2 .af-card-photo,
	.af-latest .af-card-3 .af-card-photo {
		order: 1;
	}
	/* Photo is on top on phones, so the number never lands on the words. */
	.af-latest .af-card-panel,
	.af-latest .af-card-2 .af-card-panel,
	.af-latest .af-card-3 .af-card-panel {
		order: 2;
		justify-content: flex-start;
		padding: 24px 22px 26px;
	}
	.af-latest .af-c-chip {
		margin-bottom: 16px;
		padding: 7px 12px;
		font-size: 10.5px;
	}
	.af-latest .af-c-title,
	.af-latest .af-card-2 .af-c-title,
	.af-latest .af-card-3 .af-c-title {
		font-size: 20px;
		margin-bottom: 12px;
	}
	.af-latest .af-c-excerpt,
	.af-latest .af-card-2 .af-c-excerpt {
		font-size: 14.5px;
		margin-bottom: 18px;
	}
	.af-latest .af-c-meta {
		margin-top: 20px;
		font-size: 11px;
	}
	.af-latest .af-num {
		width: 46px;
		height: 46px;
		font-size: 19px;
	}
}

@media (max-width: 400px) {
	.af-latest .af-c-title,
	.af-latest .af-card-2 .af-c-title,
	.af-latest .af-card-3 .af-c-title {
		font-size: 18.5px;
	}
}

@media (max-width: 365px) {
	.af-latest .af-c-chip,
	.af-latest .af-card-3 .af-c-chip {
		gap: 7px;
		padding: 6px 9px;
		font-size: 9px;
		letter-spacing: 0.09em;
	}
	.af-latest .af-c-meta,
	.af-latest .af-card-3 .af-c-meta {
		gap: 8px;
		font-size: 9.5px;
		letter-spacing: 0.05em;
	}
}

/* ---- Big monitors ------------------------------------------------------
   The grid stays inside the page content width, so it does not stretch. The
   cards just get a little more height so they do not look squat next to the
   taller hero above them. */

@media (min-width: 1441px) {
	.af-latest {
		--af-row-a: 470px;
		--af-row-b: 265px;
		padding: calc(var(--af-pad-top) * 1.16) 0 calc(var(--af-pad-bottom) * 1.16);
	}
	.af-latest .af-l-title {
		font-size: 34px;
	}
}