/* ==========================================================================
   "Updates" blog archive + single templates.
   Design tokens (--tbt-*) and .tbt-tag / .tbt-filter-pill / .tbt-btn come
   from the tbt-elementor-widgets plugin's tbt-global.css, enqueued as a
   dependency of this stylesheet — see functions.php.
   ========================================================================== */

/* ── Founders Grotesk ───────────────────────────────────────────────────── */
/* Elementor's Custom Fonts feature only generates @font-face CSS for pages
   it scans for font usage (its own rendered documents) — these templates
   are raw PHP, not an Elementor document, so var(--tbt-font-heading) points
   at the right family name but the font file itself never gets enqueued.
   Self-hosting the declaration here sidesteps that rather than depending on
   Elementor's per-page detection. Only one weight/file exists in the media
   library (bold) — if other weights exist in production but not in this
   local copy, add their @font-face blocks here too. */

@font-face {
	font-family: 'Founders Grotesk';
	src: url('/wp-content/uploads/2025/05/foundersgroteskx-condensed-bold_1-webfont.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ── Shared centered container ─────────────────────────────────────────── */
/* Theme-owned equivalent of the plugin's .site-boxed-container, which is
   scoped to specific plugin widget classes and not usable from the theme. */

.tbt-updates-band-inner,
.tbt-updates-container {
	max-width: 1300px;
	width: 90%;
	margin-inline: auto;
}


.tbt-updates-band-inner-wide,
.tbt-updates-container-wide {
	max-width: 1500px;
	width: 90%;
	margin-inline: auto;
}

@media (max-width: 768px) {
	.tbt-updates-band-inner-wide,
	.tbt-updates-container-wide,
	.tbt-updates-band-inner,
	.tbt-updates-container {
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}
}

/* ── Navy band: heading + pills (+ latest post, on the blog index) ────── */

.tbt-updates-band {
	background: var(--tbt-navy);
	padding:  145px 0 40px;
}
@media (max-width: 768px) {
	.tbt-updates-band {
		padding:  220px 0 20px;
	}

}

.tbt-updates-single-band {
	background: var(--tbt-navy);
	padding: 145px 0 140px;
	margin-bottom: -130px;
}

@media (max-width: 768px) {
	.tbt-updates-single-band {
		padding: 220px 0 140px;
	}

}


.tbt-updates-heading {
	font-family: var(--tbt-font-heading);
	font-size: var(--tbt-font-display);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 0.9;
	color: var(--tbt-acid);
	margin: 0 0 24px;
}

@media (max-width: 1024px) {
	.tbt-updates-heading {
		font-size: var(--tbt-font-3xl);
	}
}

@media (max-width: 768px) {
	.tbt-updates-heading {
		font-size: var(--tbt-font-2xl);
	}
}

.tbt-updates-pills {

}

/* ── Badges — reuse .tbt-tag--acid as-is; this just normalises spacing ── */

.tbt-updates-badge {
	display: inline-block;
	/* margin-bottom: 16px; */
}

/* ── Byline ─────────────────────────────────────────────────────────────  */

.tbt-updates-byline {
	display: flex;
	align-items: center;
	gap: 18px;
	font-size: var(--tbt-font-base-lg);
	font-family: var(--tbt-font-body);
}

.tbt-updates-byline-photo {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

/* ── Featured (latest) post — big two-column block inside the navy band ─ */

.tbt-updates-featured {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--tbt-white);
	border-radius: var(--tbt-radius-base-lg);
	min-height: 600px;
	overflow: hidden;
	margin-top: 30px;
}

.tbt-updates-featured-content {
	padding: 35px 56px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}

.tbt-updates-date {
	display: block;
	font-family: var(--tbt-font-body);
	font-size: var(--tbt-font-base-lg);
	color: var(--tbt-ui-4);
	margin-bottom: 12px;
}

.tbt-updates-featured-title {
	font-family: var(--tbt-font-heading);
	font-size: var(--tbt-font-3xl);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 0.95;
	color: var(--tbt-navy);
	margin: 0 0 16px;
	text-wrap-style: balance;
}

.tbt-updates-featured-title a {
	color: inherit;
	text-decoration: none;
}

.tbt-updates-featured-title a:hover {
	text-decoration: underline;
}

.tbt-updates-excerpt {
	font-family: var(--tbt-font-body);
	font-size: var(--tbt-font-base-lg);
	line-height: 1.6;
	color: var(--tbt-navy);
	margin: 0 0 24px;
	text-wrap-style: balance;
}

.tbt-updates-featured .tbt-updates-byline {
	color: var(--tbt-navy);
}

.tbt-updates-featured-image {
	display: block;
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

.tbt-updates-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 1024px) {
	.tbt-updates-featured {
		grid-template-columns: 1fr;
	}

	.tbt-updates-featured-content {
		order: 1;
		padding: 32px;
	}

	.tbt-updates-featured-image {
		order: 2;
		aspect-ratio: 16 / 9;
	}

	.tbt-updates-featured-title {
		font-size: var(--tbt-font-xl);
	}
}

/* ── Post list (blog index + category archives) ────────────────────────── */

.tbt-updates-list {
	margin: 40px 0;
	display: flex;
	flex-direction: column;
}

.tbt-updates-row {
	display: flex;
	align-items: stretch;
	gap: 32px;
	margin:10px 0;
	background: var(--tbt-white);
	/* border-bottom: 1px solid var(--tbt-ui-2); */
	text-decoration: none;
	transition: background-color var(--tbt-transition);
}

.tbt-updates-row:hover {
	background: var(--tbt-acid);
}

.tbt-updates-row:hover .tbt-updates-badge,
.tbt-updates-row:hover .tbt-tag--acid {
	background: var(--tbt-white);
	color: var(--tbt-navy);
}

.tbt-updates-row-image {
	flex-shrink: 0;
	width: 440px;
	aspect-ratio: 8 / 5;
	display: block;
	overflow: hidden;
	border-radius: var(--tbt-radius-base-lg);
}

.tbt-updates-row-image img {
	width: 100%;
	height: 100%;
	min-height: 180px;
	object-fit: cover;
	display: block;
	transition: opacity var(--tbt-transition);
}

.tbt-updates-row:hover .tbt-updates-row-image img {
	opacity: 0.85;
}

.tbt-updates-row-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	padding: 24px 32px;
}

.tbt-updates-row-title {
	font-family: var(--tbt-font-heading);
	font-size: var(--tbt-font-2xl);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 0.95;
	color: var(--tbt-navy);
	margin: 0 0 12px;
	text-wrap-style: balance;
}

.tbt-updates-row:hover .tbt-updates-row-title {
	text-decoration: underline;
}

.tbt-updates-row .tbt-updates-byline {
	color: var(--tbt-navy);
}

.tbt-updates-empty {
	font-family: var(--tbt-font-body);
	font-size: var(--tbt-font-md);
	color: var(--tbt-navy);
	padding: 40px 0;
}

@media (max-width: 1024px) {
	.tbt-updates-row-image {
		width: 220px;
	}

	.tbt-updates-row-title {
		font-size: var(--tbt-font-xl);
	}
}

@media (max-width: 768px) {
	.tbt-updates-row {
		flex-direction: column;
		gap: 16px;
	}

	.tbt-updates-row-image,
	.tbt-updates-row-image img {
		width: 100%;
		aspect-ratio: 4 / 3;
	}

	.tbt-updates-row-content {
		padding: 16px;
	}

	.tbt-updates-row-content .tbt-updates-byline {
		font-size: var(--tbt-font-base);
	}
}

/* ── Pagination ─────────────────────────────────────────────────────────  */

.tbt-updates-pagination {
	display: flex;
	justify-content: center;
	padding: 20px 0 60px;
}

.tbt-updates-pagination .nav-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 32px;
}

.tbt-updates-pagination .page-numbers {
	font-family: var(--tbt-font-heading);
	font-size: var(--tbt-font-xl);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--tbt-navy);
	text-decoration: none;
}

.tbt-updates-pagination a.page-numbers:hover {
	color: var(--tbt-ui-4);
}

.tbt-updates-pagination .page-numbers.current {
	text-decoration: underline;
}

@media (max-width: 768px) {
	.tbt-updates-pagination .nav-links {
		gap: 16px;
	}

	.tbt-updates-pagination .page-numbers {
		font-size: var(--tbt-font-base-lg);
	}
}

/* ── Single post ────────────────────────────────────────────────────────  */

.tbt-updates-single-title {
	font-family: var(--tbt-font-heading);
	font-size: var(--tbt-font-5xl);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 0.95;
	color: var(--tbt-acid);
	margin: 0 0 32px;
	text-wrap-style: balance;
}

@media (max-width: 1024px) {
	.tbt-updates-single-title {
		font-size: var(--tbt-font-3xl);
	}
}

@media (max-width: 768px) {
	.tbt-updates-single-title {
		font-size: var(--tbt-font-2xl);
	}
}

.tbt-updates-single-meta {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

/* 1/3 (meta) : 2/3 (dek) split — flex-grow ratio rather than percentages so
   the existing 40px gap is handled automatically. */
.tbt-updates-single-meta-left {
	flex: 1;
	min-width: 0;
}

.tbt-updates-single-meta-left time {
	display: block;
	font-family: var(--tbt-font-body);
	font-size: var(--tbt-font-base-lg);
	color: var(--tbt-white);
	margin-bottom: 10px;
}

.tbt-updates-single-meta .tbt-updates-byline {
	color: var(--tbt-white);
}

.tbt-updates-dek {
	flex: 2;
	min-width: 0;
	font-family: var(--tbt-font-body);
	font-size: var(--tbt-font-lg);
	line-height: 1.6;
	color: var(--tbt-white);
	margin: 0;
	opacity: 0.7;
}

@media (max-width: 768px) {
	.tbt-updates-single-meta {
		flex-direction: column;
		gap: 20px;
	}

	.tbt-updates-dek {
		font-size: var(--tbt-font-md);
	}
}

.tbt-updates-single-body {
	padding-top: 40px;
}

.tbt-updates-single-image {
	margin-bottom: 40px;
	border-radius: var(--tbt-radius-base-lg);
	overflow: hidden;
	aspect-ratio: 20 / 12;
}

.tbt-updates-single-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tbt-updates-single-content {
	max-width: 760px;
	margin: 110px auto 110px;
	font-family: var(--tbt-font-body);
	font-size: var(--tbt-font-md-lg);
	line-height: 1.7;
	color: var(--tbt-navy);
}

.tbt-updates-single-content p {
	margin: 0 0 1.3em;
}

.tbt-updates-single-content p:last-child {
	margin-bottom: 0;
}

.tbt-updates-single-content a {
	color: var(--tbt-navy);
	text-decoration: underline;
}

@media (max-width: 768px) {
	.tbt-updates-single-content {
		margin: 50px auto 50px;
		font-size: var(--tbt-font-base-lg);
	}
}

.tbt-updates-divider {
	border: none;
	border-top: 1px solid var(--tbt-ui-2);
	margin: 20px 0;
}