/* ==========================================================================
   Technology Record article list (template: listArticleTR / List_Article_TR_Grid.htm)
   Fresh stylesheet, separate from the GCA files.
   Grid: phone 1 column | tablet 2 | desktop 4, with the first two cards
   on every page spanning two columns (large). Summaries show on the two
   large cards only, keeping the small cards as clean as the current TR list.
   Fonts: inherited from the skin classes in the template (font-sans etc.),
   so only sizes, spacing and layout are set here.
   Breakpoints: <37.5rem phone | 37.5–61.9375rem tablet | >=62rem desktop
   (62rem = Bootstrap's lg breakpoint, which the TR skin already uses)
   ========================================================================== */

/* EasyDNN's own wrapper (edn_XXXX_article_list_wrapper, often with Bootstrap .row)
   is made invisible to layout so the cards become grid items. */
.tr-list [class*="_article_list_wrapper"],
.tr-list [class*="_article_list_wrapper"] > div:not([class]) {
	display: contents;
}

/* ---------- Grid ---------- */
.tr-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	width: 100%;
	margin: 0 0 2.5rem;
}
@media (min-width: 37.5rem) {
	.tr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 2.5rem; }
}
@media (min-width: 62rem) {
	.tr-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.75rem; }
	.tr-list .tr-card:nth-child(-n+2) { grid-column: span 2; }
}

/* ---------- Card ---------- */
.tr-card {
	position: relative;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.tr-card .edn_adminActions {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 2;
}

.tr-card__media {
	display: block;
	overflow: hidden;
	margin-bottom: 0.85rem;
}
.tr-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 950 / 534;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.tr-card:hover .tr-card__media img { transform: scale(1.03); }

/* Category · date line */
.tr-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.4rem;
	margin: 0 0 0.4rem;
	font-size: 0.8rem;
	line-height: 1.3;
	letter-spacing: 0.04em;
}
.tr-card__meta a { color: inherit; text-decoration: none; }
.tr-card__meta a:hover { text-decoration: underline; }
.tr-card__date { white-space: nowrap; }

/* Headline */
.tr-card__title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.25;
}
.tr-card__title a {
	color: inherit;
	text-decoration: none;
}
.tr-card__title a:hover,
.tr-card__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* Summary: large cards only */
.tr-card__summary {
	display: none;
	margin-top: 0.5rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #3a3a3a;
}
.tr-card__summary p { margin: 0; }

/* ---------- First two cards: large ---------- */
@media (min-width: 37.5rem) {
	.tr-list .tr-card:nth-child(-n+2) .tr-card__title { font-size: 1.45rem; line-height: 1.2; }
	.tr-list .tr-card:nth-child(-n+2) .tr-card__summary { display: block; }
}
@media (min-width: 62rem) {
	.tr-list .tr-card:nth-child(-n+2) .tr-card__title { font-size: 1.85rem; }
	.tr-list .tr-card:nth-child(-n+2) .tr-card__summary { font-size: 1.1rem; }
	.tr-list .tr-card:nth-child(-n+2) .tr-card__meta { font-size: 0.85rem; }
}
/* Phones: show the summary on the first card only */
@media (max-width: 37.4375rem) {
	.tr-list .tr-card:first-child .tr-card__summary { display: block; }
	.tr-list .tr-card:first-child .tr-card__title { font-size: 1.4rem; }
}

/* ---------- Numbered pagination (EasyDNN .article_pager) ---------- */
.tr-list + .article_pager,
.article_pager {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 3rem;
}
.article_pager a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.75rem;
	border: 1px solid #d0d0d0;
	color: #1a1a1a;
	text-decoration: none;
	font-size: 0.95rem;
}
.article_pager a:hover { border-color: #1a1a1a; }
.article_pager a.active {
	background: #1a1a1a;
	border-color: #1a1a1a;
	color: #ffffff;
}

/* ---------- Phones: compact rows after the first card ----------
   Small thumbnail beside the headline, so readers see more stories
   without endless scrolling. */
@media (max-width: 37.4375rem) {
	.tr-list { row-gap: 1.25rem; }
	.tr-list .tr-card:not(:first-child) {
		display: grid;
		grid-template-columns: 7.5rem minmax(0, 1fr);
		gap: 0.85rem;
		align-items: start;
	}
	.tr-list .tr-card:not(:first-child) .tr-card__media { margin-bottom: 0; }
	.tr-list .tr-card:not(:first-child) .tr-card__title { font-size: 1rem; }
	.tr-list .tr-card:not(:first-child) .tr-card__meta { font-size: 0.72rem; margin-bottom: 0.25rem; }
	.tr-list .tr-card:first-child { padding-bottom: 0.5rem; }
}
.article_pager a { font-family: inherit; }

/* ---------- Image credits ----------
   Shown on every card, including phone thumbnails, so picture credits are
   always visible where the image appears. Hidden only when the field is empty. */
.tr-card__media { position: relative; }
.tr-card__media > a { display: block; }
.tr-card__credit {
	position: absolute;
	right: 0;
	bottom: 0;
	max-width: 100%;
	padding: 0.2rem 0.45rem;
	background: rgba(0, 0, 0, 0.55);
	color: #ffffff;
	font-size: 0.65rem;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}
.tr-card__credit:empty { display: none; }
.tr-list .tr-card:nth-child(-n+2) .tr-card__credit { font-size: 0.72rem; }
@media (max-width: 37.4375rem) {
	/* compact rows: tiny credit still legible */
	.tr-list .tr-card:not(:first-child) .tr-card__credit { font-size: 0.55rem; padding: 0.1rem 0.3rem; }
}

/* ---------- Eyebrow (category | date): one size on every card ----------
   Matches the TR homepage: same size on large and small cards,
   light weight, wide letter spacing, pipe dividers. */
.tr-card__meta,
.tr-list .tr-card:nth-child(-n+2) .tr-card__meta {
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	gap: 0 0.5rem;
}
.tr-card__sep { font-weight: 300; }
@media (max-width: 37.4375rem) {
	.tr-list .tr-card:not(:first-child) .tr-card__meta { font-size: 0.75rem; letter-spacing: 0.1em; }
}

/* ---------- Small (4-column) card eyebrows: match the homepage .tag-s ----------
   Homepage small cards: 0.65rem, 0.1rem letter spacing at >=80rem.
   Large cards keep the bigger eyebrow, as on the homepage lead story. */
.tr-list .tr-card:nth-child(n+3) .tr-card__meta {
	font-size: 0.7rem;
	letter-spacing: 0.1rem;
}
@media (min-width: 80rem) {
	.tr-list .tr-card:nth-child(n+3) .tr-card__meta { font-size: 0.65rem; }
}

/* If an article has more than one PhotoCredit field filled in, show only the first */
.tr-card__credit ~ .tr-card__credit { display: none; }

/* ---------- Credits: one size, whatever the field contains ----------
   Some credit fields hold rich text (e.g. <p>Microsoft</p>), and the skin's
   paragraph styles were making those credits much larger than plain-text ones.
   Everything inside the credit now uses the credit's own size and style. */
.tr-card__media .tr-card__credit {
	font-family: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
	font-size: 0.65rem !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
}
.tr-list .tr-card:nth-child(-n+2) .tr-card__media .tr-card__credit { font-size: 0.72rem !important; }
@media (max-width: 37.4375rem) {
	.tr-list .tr-card:not(:first-child) .tr-card__media .tr-card__credit { font-size: 0.55rem !important; }
}
.tr-card__credit *,
.tr-card__credit p,
.tr-card__credit span,
.tr-card__credit div {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	font: inherit !important;
	color: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
	background: none !important;
}
.tr-card__credit br { display: none; }


/* ==========================================================================
   Recommended row (template: listArticleTRRec / List_Article_TR_Recommended.htm)
   Equal cards: phone compact rows | tablet 2 | desktop 4 per row.
   ========================================================================== */
.tr-rec [class*="_article_list_wrapper"],
.tr-rec [class*="_article_list_wrapper"] > div:not([class]) {
	display: contents;
}
.tr-rec {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	width: 100%;
	margin: 1.5rem 0 2.5rem;
}
@media (min-width: 37.5rem) {
	.tr-rec { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 2.5rem; }
}
@media (min-width: 62rem) {
	.tr-rec { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2rem; row-gap: 3rem; }
}
.tr-rec .tr-card__meta {
	font-size: 0.7rem;
	letter-spacing: 0.1rem;
}
@media (min-width: 80rem) {
	.tr-rec .tr-card__meta { font-size: 0.65rem; }
}
.tr-rec .tr-card__title { font-size: 1.15rem; }
@media (min-width: 62rem) {
	.tr-rec .tr-card__title { font-size: 1.25rem; }
}
/* Phones: compact rows, like the main list */
@media (max-width: 37.4375rem) {
	.tr-rec .tr-card {
		display: grid;
		grid-template-columns: 7.5rem minmax(0, 1fr);
		gap: 0.85rem;
		align-items: start;
	}
	.tr-rec .tr-card__media { margin-bottom: 0; }
	.tr-rec .tr-card__title { font-size: 1rem; }
	.tr-rec .tr-card__media .tr-card__credit { font-size: 0.55rem !important; }
}

/* Recommended: show only the FIRST category in the eyebrow.
   EasyDNN outputs all categories as links separated by " | ";
   the container is shrunk to 0 so the separators vanish, and only
   the first link is given a readable size again. */
.tr-rec .tr-card__cat { font-size: 0; }
.tr-rec .tr-card__cat a:first-of-type { font-size: 0.7rem; }
.tr-rec .tr-card__cat a:not(:first-of-type) { display: none; }
@media (min-width: 80rem) {
	.tr-rec .tr-card__cat a:first-of-type { font-size: 0.65rem; }
}
/* hidden separators must not keep their letter spacing (it left a gap) */
.tr-rec .tr-card__cat { letter-spacing: 0; display: inline-flex; }
.tr-rec .tr-card__cat a:first-of-type { letter-spacing: 0.1rem; }

/* ---------- Main grid: show only the FIRST category in the eyebrow ----------
   Same technique as Recommended: separators shrink to nothing and only the
   first category link keeps a readable size. The size follows each card's
   eyebrow size via --tr-eyebrow. */
.tr-list .tr-card__meta { --tr-eyebrow: 0.85rem; }
.tr-list .tr-card:nth-child(n+3) .tr-card__meta { --tr-eyebrow: 0.7rem; }
@media (min-width: 80rem) {
	.tr-list .tr-card:nth-child(n+3) .tr-card__meta { --tr-eyebrow: 0.65rem; }
}
@media (max-width: 37.4375rem) {
	.tr-list .tr-card:not(:first-child) .tr-card__meta { --tr-eyebrow: 0.75rem; }
}
.tr-list .tr-card__cat {
	font-size: 0;
	letter-spacing: 0;
	display: inline-flex;
}
.tr-list .tr-card__cat a:first-of-type {
	font-size: var(--tr-eyebrow);
	letter-spacing: inherit;
}
.tr-list .tr-card__meta .tr-card__cat a:first-of-type { letter-spacing: 0.1rem; }
.tr-list .tr-card:nth-child(-n+2) .tr-card__meta .tr-card__cat a:first-of-type { letter-spacing: 0.12em; }
.tr-list .tr-card__cat a:not(:first-of-type) { display: none; }