/*
 * TR Immigration - editorial article ledger
 *
 * A lead article with a large image, then a card grid. Every value is an
 * Elementor kit token, so this stays tied to the design system.
 *
 * Breakpoints: 1180 (large desktop to laptop), 960 (laptop to tablet),
 * 640 (tablet to mobile).
 */

.tr-ed {
	font-family: var(--font-body);
	color: var(--ink);
}

/* ---- Filter tabs ----------------------------------------------------- */

.tr-ed-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-6);
	border-block-end: var(--hair) solid var(--rule);
	margin-block-end: var(--sp-8);
}

.tr-ed-tab {
	display: inline-block;
	padding-block: var(--sp-3);
	font-size: var(--fs-tag);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: var(--ink-soft);
	text-decoration: none;
	border-block-end: 2px solid transparent;
	margin-block-end: -1px;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.tr-ed-tab:hover,
.tr-ed-tab:focus-visible {
	color: var(--navy-900);
	border-block-end-color: var(--rule);
}

.tr-ed-tab.is-on {
	color: var(--navy-900);
	border-block-end-color: var(--gold);
}

/* ---- Shared article furniture ---------------------------------------- */

.tr-ed-item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	min-width: 0;
}

.tr-ed-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-1);
	background: var(--paper-dim);
	aspect-ratio: 16 / 9;
}

.tr-ed-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.tr-ed-body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	min-width: 0;
}

.tr-ed-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-3);
	margin: 0;
	font-size: var(--fs-tag);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	line-height: var(--lh-fine);
}

.tr-ed-cat { color: var(--gold-deep); }
.tr-ed-cat--courts { color: var(--brick); }
.tr-ed-cat--visas  { color: var(--green); }
.tr-ed-cat--policy { color: var(--gold-deep); }

.tr-ed-date {
	color: var(--ink-soft);
	font-weight: 500;
	letter-spacing: 0.06em;
}

/* Titles are the strongest element on the page. */
.tr-ed-title {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 500;
	line-height: var(--lh-head);
	letter-spacing: -0.012em;
	color: var(--navy-900);
}

.tr-ed-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.18s ease;
}

/* Stretches the title link across the card so the whole thing is clickable,
   while the accessibility tree keeps one link per article. */
.tr-ed-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tr-ed-dek {
	margin: 0;
	font-size: var(--fs-note);
	line-height: var(--lh-fine);
	color: var(--ink-soft);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tr-ed-cue {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin-block-start: var(--sp-1);
	font-size: var(--fs-tag);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: var(--gold-deep);
}

.tr-ed-arrow {
	width: 15px;
	height: 15px;
	transition: transform 0.24s ease;
}

/* ---- Hover and focus ------------------------------------------------- */

.tr-ed-item:hover .tr-ed-img,
.tr-ed-item:focus-within .tr-ed-img {
	transform: scale(1.04);
}

.tr-ed-item:hover .tr-ed-title a,
.tr-ed-item:focus-within .tr-ed-title a {
	color: var(--gold-deep);
}

.tr-ed-item:hover .tr-ed-arrow,
.tr-ed-item:focus-within .tr-ed-arrow {
	transform: translateX(4px);
}

.tr-ed-item:focus-within {
	outline: 2px solid var(--gold-deep);
	outline-offset: 6px;
}

.tr-ed-title a:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
	.tr-ed-img,
	.tr-ed-arrow,
	.tr-ed-tab,
	.tr-ed-title a { transition: none; }
	.tr-ed-item:hover .tr-ed-img,
	.tr-ed-item:focus-within .tr-ed-img { transform: none; }
}

/* ---- The lead article ------------------------------------------------ */

.tr-ed-item--lead {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: center;
	column-gap: var(--sp-8);
	row-gap: var(--sp-5);
	padding-block-end: var(--sp-8);
	margin-block-end: var(--sp-8);
	border-block-end: var(--hair) solid var(--rule);
}

.tr-ed-item--lead .tr-ed-media { aspect-ratio: 16 / 10; }

.tr-ed-item--lead .tr-ed-title { font-size: var(--fs-h2); }

.tr-ed-item--lead .tr-ed-dek {
	font-size: var(--fs-lede);
	line-height: var(--lh-body);
	color: var(--ink);
	-webkit-line-clamp: 4;
}

/* ---- The grid -------------------------------------------------------- */

.tr-ed-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--sp-7);
	row-gap: var(--sp-8);
}

.tr-ed--cols-2 .tr-ed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.tr-ed-item--card .tr-ed-title { font-size: var(--fs-card); }

.tr-ed-empty {
	margin: 0;
	font-size: var(--fs-lede);
	color: var(--ink-soft);
}

/* ---- Pagination ------------------------------------------------------ */

.tr-ed-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin-block-start: var(--sp-9);
	padding-block-start: var(--sp-6);
	border-block-start: var(--hair) solid var(--rule);
}

.tr-ed-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--page-btn);
	height: var(--page-btn);
	padding-inline: var(--sp-3);
	font-size: var(--fs-meta);
	color: var(--ink-soft);
	text-decoration: none;
	border: var(--hair) solid var(--rule);
	border-radius: var(--r-1);
	transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.tr-ed-page:hover,
.tr-ed-page:focus-visible {
	color: var(--navy-900);
	border-color: var(--navy-900);
}

.tr-ed-page.is-on {
	background: var(--navy-900);
	border-color: var(--navy-900);
	color: var(--paper);
}

.tr-ed-page--step {
	text-transform: uppercase;
	font-size: var(--fs-tag);
	letter-spacing: 0.1em;
	font-weight: 600;
}

/* ---- Laptop ---------------------------------------------------------- */

@media (max-width: 1180px) {
	.tr-ed-item--lead { column-gap: var(--sp-7); }
	.tr-ed-item--lead .tr-ed-title { font-size: var(--fs-h2-t); }
	.tr-ed-grid { column-gap: var(--sp-6); row-gap: var(--sp-7); }
	.tr-ed-item--card .tr-ed-title { font-size: var(--fs-h4); }
}

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

@media (max-width: 960px) {
	.tr-ed-item--lead {
		grid-template-columns: minmax(0, 1fr);
		padding-block-end: var(--sp-7);
		margin-block-end: var(--sp-7);
	}
	.tr-ed-item--lead .tr-ed-media { aspect-ratio: 16 / 9; }
	.tr-ed-item--lead .tr-ed-dek { font-size: var(--fs-body); -webkit-line-clamp: 3; }
	.tr-ed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tr-ed-tabs { gap: var(--sp-5); }
}

/* ---- Mobile ---------------------------------------------------------- */

@media (max-width: 640px) {
	.tr-ed-grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--sp-7);
	}
	.tr-ed-item--lead .tr-ed-title { font-size: var(--fs-h2-m); }
	.tr-ed-item--card .tr-ed-title { font-size: var(--fs-h4); }
	.tr-ed-tabs {
		gap: var(--sp-4);
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.tr-ed-tabs::-webkit-scrollbar { display: none; }
	.tr-ed-tab { white-space: nowrap; }
	.tr-ed-pager { margin-block-start: var(--sp-8); }
}

/* ---- Related articles block ------------------------------------------ */

.tr-related {
	margin-block-start: var(--sp-9);
	padding-block-start: var(--sp-6);
	border-block-start: var(--edge) solid var(--gold);
}

.tr-related-head {
	margin: 0 0 var(--sp-6);
	font-family: var(--font-head);
	font-size: var(--fs-h4);
	font-weight: 500;
	color: var(--navy-900);
	letter-spacing: -0.01em;
	text-transform: none;
}

.tr-related .tr-ed-title { font-size: var(--fs-h4); }
.tr-related .tr-ed-dek { -webkit-line-clamp: 2; }

/*
 * The related block is rendered inside .entry-content, because that is where
 * Astra fires the hook. Theme and article rules for headings, paragraphs and
 * lists therefore reach it. These restate the ledger's own values at a
 * specificity those rules cannot beat. Without them the card titles pick up
 * the article's uppercase gold subhead treatment and a 1.5em top margin, which
 * is what opened a gap between each thumbnail and its title.
 */
.tr-ed .tr-ed-title,
.tr-related .tr-related-head {
	margin-block-start: 0;
}

.tr-ed .tr-ed-title {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 500;
	text-transform: none;
	letter-spacing: -0.012em;
	line-height: var(--lh-head);
	color: var(--navy-900);
}

.tr-ed .tr-ed-title a {
	color: inherit;
	text-decoration: none;
}

.tr-ed .tr-ed-meta,
.tr-ed .tr-ed-dek {
	margin: 0;
}

.tr-ed .tr-ed-media,
.tr-ed .tr-ed-img {
	box-shadow: none;
	margin: 0;
}

.tr-ed .tr-ed-body { gap: var(--sp-3); }