/* Newsroom index — article cards (Replit news.tsx). */
.te-news-card {
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.te-news-card:hover {
	background: #f8f9fb;
}
.te-news-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.te-news-card--hidden {
	display: none;
}

/* Shared newsroom hero — used by the index (home.php) and archives (archive.php). */
.te-news-bg {
	background: #0d1f3c;
	background-image: repeating-linear-gradient(160deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 32px);
}
.te-news-hero {
	padding-top: 10rem;
	padding-bottom: 5rem;
}
.te-news-eyebrow {
	color: #FF6900;
	line-height: 20px;
	letter-spacing: 2.8px;
}
.te-news-title {
	font-family: "DM Serif Display", serif;
	font-size: 64px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
}
.te-news-dot { color: #FF6900; }

/* Article-card accents (constant for every card). */
.te-news-card__bar { background: #FF6900; }
/* Muted blue pill — matches the homepage news-card category badge
   (quiet metadata; the orange Read-more pill stays the action color). */
.te-news-card__badge { background: #eff4fb; color: #4a5565; }
.te-news-card__foot { border-top: 1px solid rgba(0,0,0,0.08); }

/* ── WCAG AA orange pass ── "Read more" pill has white text: needs 4.5:1,
   so the AA button token overrides the markup's bg-[#FF6900]/hover. */
.te-news-card__foot span { background: #BF4E00; }
.te-news-card__foot span:hover { background: #A84600; }

/* Mobile: card body text steps up (site-wide card pattern). */
@media (max-width: 767.98px) {
	.te-news-excerpt { font-size: 16px; line-height: 1.6; }
}

/* Mobile: Read-more pills step up (site-wide card pattern). */
@media (max-width: 767.98px) {
	.te-news-card__foot span { font-size: 15px; padding: 8px 20px; }
}

/* Mobile: Load More matches the homepage CTA buttons' 18px label (site-wide). */
@media (max-width: 767.98px) {
	#te-news-loadmore { font-size: 18px; }
}

/* Mobile: less dead space between the header and the hero copy (site-wide);
   H1 matches the other pages' 32px/1.15 (it held its 64px desktop size);
   half the space below the hero sub and below the last card. */
@media (max-width: 767.98px) {
	.te-news-hero { padding-top: 4rem; padding-bottom: 40px; }
	/* The grid section below carries its own 64px top padding — halve it
	   too, or the hero-side cut barely shows. */
	.te-news-hero + .te-news-bg { padding-top: 32px; }
	/* Navy-band hero — matches the Our Team hero's 40px/1.1 H1 + 18px lede
	   (not the 32px below-banner standard). */
	.te-news-title { font-size: 40px; line-height: 1.1; }
	.te-news-hero .text-xl { font-size: 18px; }
	.te-news-bg.pb-32 { padding-bottom: 64px; }
}

/* Mobile: card typography steps up (site-wide card pattern) — the excerpt
   is handled above; title and badge join it. */
@media (max-width: 767.98px) {
	.te-news-card h3 { font-size: 18px; }
	.te-news-card__badge { font-size: 13px; }
}

/* Excerpts clamp to fill: base 5 lines (the no-JS fallback); news-grid.js
   grows each card's clamp into its row-stretch slack so short-titled cards
   fill the space a long-titled row-mate creates. */
.te-news-excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
}

/* Multi-column: every row (including a lone last card) matches the tallest
   row's height, and the clamp-to-fill sizing fills the difference. Mobile
   stacks 1-up, where forcing equal heights would just pad short cards. */
@media (min-width: 768px) {
	.te-news-grid { grid-auto-rows: 1fr; }
}