/*
 * trbc/link-card — the quiet, reusable directory tier.
 *
 * Directory is the default: two cards across, a generous identity stage on
 * the left, and readable copy on the right. The fixed stage makes landscape
 * wordmarks, square marks, low-resolution art, and files with baked-in white
 * space feel like one collection without cropping or one-off selectors.
 *
 * Logo Presence is an authoring choice rather than an image hack. Compact,
 * Standard, and Expanded tune optical size while preserving the same frame,
 * alignment, and card geometry. Tile remains available for smaller logo-led
 * sets, but it is not the default for descriptive directories.
 */

.trbc-linkcard {
	--trbc-linkcard-well: 76px;
	--trbc-linkcard-image-inset: var(--trbc-space-3);
	--trbc-linkcard-image-scale: 1;

	display: flex;
	align-items: center;
	gap: var(--trbc-space-4);
	width: 100%;
	height: 100%;
	min-height: var(--trbc-tap);
	padding: var(--trbc-space-3);
	border: 1px solid var(--trbc-line);
	border-radius: var(--trbc-radius-lg);
	background: var(--trbc-surface);
	box-shadow: none;
	font-family: var(--trbc-face);
	color: var(--trbc-ink);
	text-align: left;
	text-decoration: none;
	transition:
		border-color var(--trbc-ease-quick),
		transform var(--trbc-ease-quick),
		box-shadow var(--trbc-ease-slow);
}

a.trbc-linkcard:hover {
	border-color: var(--trbc-brand-border);
	transform: translateY(-2px);
	box-shadow: var(--trbc-shadow-1);
	color: var(--trbc-ink);
}

a.trbc-linkcard:active {
	transform: none;
}

a.trbc-linkcard:focus-visible {
	outline: 3px solid var(--trbc-focus);
	outline-offset: 3px;
}

/* ---------- directory ----------
 * A wide identity stage gives the art enough area to be legible without
 * letting it decide the card height. Copy remains short and left aligned.
 */
.trbc-linkcard--row {
	align-items: stretch;
	gap: var(--trbc-space-5);
	min-height: 148px;
	padding: var(--trbc-space-3) var(--trbc-space-4) var(--trbc-space-3) var(--trbc-space-3);
}

.trbc-linkcard--row .trbc-linkcard__media {
	flex-basis: clamp(148px, 34%, 184px);
	width: clamp(148px, 34%, 184px);
	height: auto;
	min-height: 122px;
}

.trbc-linkcard--row .trbc-linkcard__body {
	justify-content: center;
	gap: var(--trbc-space-2);
	padding-block: var(--trbc-space-2);
}

.trbc-linkcard--row .trbc-linkcard__title {
	font-size: var(--trbc-text-lg);
}

.trbc-linkcard--row .trbc-linkcard__meta {
	max-width: 38ch;
	font-size: var(--trbc-text-base);
}

/* ---------- tile ---------- */
.trbc-linkcard--tile {
	flex-direction: column;
	align-items: center;
	gap: var(--trbc-space-3);
	padding: var(--trbc-space-5) var(--trbc-space-4);
	text-align: center;
}

.trbc-linkcard--tile .trbc-linkcard__body {
	align-items: center;
	gap: 3px;
}

.trbc-linkcard--tile .trbc-linkcard__media {
	flex: 0 0 auto;
	width: 100%;
	height: 88px;
}

.trbc-linkcard--tile .trbc-linkcard__meta {
	max-width: 30ch;
}

/* ---------- media stage ---------- */
.trbc-linkcard__media {
	flex: 0 0 var(--trbc-linkcard-well);
	width: var(--trbc-linkcard-well);
	height: var(--trbc-linkcard-well);
	border-radius: var(--trbc-radius-media);
	background: var(--trbc-surface-sunk);
	overflow: hidden;
}

.trbc-linkcard__image {
	display: block;
	width: 100%;
	height: 100%;
	padding: var(--trbc-linkcard-image-inset);
	object-fit: contain;
	object-position: center;
	transform: scale(var(--trbc-linkcard-image-scale));
	transition: transform var(--trbc-ease-slow);
}

.trbc-linkcard--scale-compact {
	--trbc-linkcard-image-inset: var(--trbc-space-4);
	--trbc-linkcard-image-scale: 0.9;
}

.trbc-linkcard--scale-standard {
	--trbc-linkcard-image-inset: var(--trbc-space-3);
	--trbc-linkcard-image-scale: 1;
}

.trbc-linkcard--scale-expanded {
	--trbc-linkcard-image-inset: var(--trbc-space-1);
	--trbc-linkcard-image-scale: 1.1;
}

/* Raster artwork with its own ground sits on the card surface. Transparent
 * marks use the sunk stage, which gives mismatched logo files one shared
 * visual field without drawing a second box around white-backed artwork. */
.trbc-linkcard--plain .trbc-linkcard__media {
	background: var(--trbc-surface);
	box-shadow: inset 0 0 0 1px var(--trbc-line);
}

.trbc-linkcard--sunk .trbc-linkcard__media {
	background: var(--trbc-surface-sunk);
}

.trbc-linkcard--fit-cover .trbc-linkcard__image {
	padding: 0;
	object-fit: cover;
	transform: none;
}

.trbc-linkcard--no-media .trbc-linkcard__media {
	background-image: linear-gradient(150deg, #1f6699 0%, #143c5a 100%);
}

/* ---------- words ---------- */
.trbc-linkcard__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.trbc-linkcard__title {
	margin: 0;
	font-size: var(--trbc-text-md);
	font-weight: var(--trbc-weight-semibold);
	line-height: var(--trbc-leading-snug);
	letter-spacing: var(--trbc-tracking-tight);
	color: var(--trbc-ink);
}

.trbc-linkcard__meta {
	display: -webkit-box;
	overflow: hidden;
	font-size: var(--trbc-text-sm);
	line-height: var(--trbc-leading-snug);
	color: var(--trbc-ink-soft);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.trbc-linkcard__chev {
	align-self: center;
	flex: 0 0 auto;
	font-size: 24px;
	line-height: 1;
	color: var(--trbc-ink-faint);
	transition: transform var(--trbc-ease-quick), color var(--trbc-ease-quick);
}

a.trbc-linkcard:hover .trbc-linkcard__chev {
	transform: translateX(3px);
	color: var(--trbc-brand-deep);
}

/* ---------- collection grid ---------- */
.et_pb_row:has(> .et_pb_column .trbc-linkcard) {
	--trbc-linkcard-columns: 3;
	--trbc-linkcard-gap: var(--trbc-space-4);

	display: flex;
	flex-wrap: wrap;
	gap: var(--trbc-linkcard-gap);
}

.et_pb_row:has(> .et_pb_column .trbc-linkcard--row) {
	--trbc-linkcard-columns: 2;
}

.et_pb_row:has(> .et_pb_column .trbc-linkcard) > .et_pb_column.et_pb_column {
	display: flex;
	flex-direction: column;
	width: calc(
		(100% - (var(--trbc-linkcard-gap) * (var(--trbc-linkcard-columns) - 1)))
		/ var(--trbc-linkcard-columns)
	) !important;
	margin: 0 !important;
}

.et_pb_row:has(> .et_pb_column .trbc-linkcard) > .et_pb_column > .et_pb_module {
	flex: 1 1 auto;
	width: 100%;
}

@media (max-width: 980px) {
	.et_pb_row:has(> .et_pb_column .trbc-linkcard) {
		--trbc-linkcard-columns: 2;
	}
}

@media (max-width: 768px) {
	.et_pb_row:has(> .et_pb_column .trbc-linkcard) {
		--trbc-linkcard-columns: 1;
		--trbc-linkcard-gap: var(--trbc-space-3);
	}

	.trbc-linkcard--row {
		gap: var(--trbc-space-4);
		min-height: 128px;
		padding: var(--trbc-space-2) var(--trbc-space-3) var(--trbc-space-2) var(--trbc-space-2);
	}

	.trbc-linkcard--row .trbc-linkcard__media {
		flex-basis: clamp(112px, 32%, 136px);
		width: clamp(112px, 32%, 136px);
		min-height: 108px;
	}

	.trbc-linkcard--row .trbc-linkcard__title {
		font-size: var(--trbc-text-md);
	}

	.trbc-linkcard--row .trbc-linkcard__meta {
		font-size: var(--trbc-text-sm);
	}
}

@media (max-width: 480px) {
	.trbc-linkcard--row {
		gap: var(--trbc-space-2);
	}

	.trbc-linkcard--row .trbc-linkcard__media {
		flex-basis: 96px;
		width: 96px;
		min-height: 96px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.trbc-linkcard,
	.trbc-linkcard__image,
	.trbc-linkcard__chev {
		transition: none;
	}

	a.trbc-linkcard:hover,
	a.trbc-linkcard:hover .trbc-linkcard__chev {
		transform: none;
	}
}