/**
 * Related-record sections.
 *
 * One presentation, shared by all eight post types. detail-layouts.json calls
 * for a "Stacked section" with a limit of 6 and "Hide when empty", so this is a
 * list rather than a card grid: a related record is a way out of the page, not
 * a thing to browse in place.
 *
 * Loaded on every directory single, because every post type has at least one of
 * these sections.
 */

.gcn-related {
	padding-top: var(--gcn-space-8);
	border-top: 1px solid var(--gcn-rule);
}

/*
 * The header row: the section's title and, for a reader who may add one, the
 * "+ Add …" button (inc/add-related.php). They share a line so the button reads
 * as belonging to this section rather than to the page.
 */
.gcn-related__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gcn-space-3);
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--gcn-space-5);
}

.gcn-related__head .gcn-related__title {
	margin-bottom: 0;
}

.gcn-related__add {
	display: inline-flex;
	align-items: center;
	gap: var(--gcn-space-2);
	padding: 0.4em 0.9em;
	font-size: var(--gcn-text-sm);
	font-weight: var(--gcn-weight-semibold);
	line-height: 1.2;
	color: var(--gcn-brand-strong);
	text-decoration: none;
	white-space: nowrap;
	background: var(--gcn-brand-soft);
	border: 1px solid var(--gcn-brand-border);
	border-radius: var(--gcn-radius-pill);
	transition:
		background var(--gcn-duration) var(--gcn-ease),
		border-color var(--gcn-duration) var(--gcn-ease),
		box-shadow var(--gcn-duration) var(--gcn-ease);
}

.gcn-related__add:hover,
.gcn-related__add:focus-visible {
	color: var(--gcn-brand-contrast);
	background: var(--gcn-brand);
	border-color: var(--gcn-brand);
	box-shadow: var(--gcn-shadow-sm);
}

/* The plus, drawn rather than typed, so it sits on the optical centre. */
.gcn-related__add-plus {
	position: relative;
	width: 0.85em;
	height: 0.85em;
}

.gcn-related__add-plus::before,
.gcn-related__add-plus::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 1.5px;
	background: currentColor;
	transform: translateY(-50%);
	border-radius: 2px;
}

.gcn-related__add-plus::after {
	inset: 0 50% auto auto;
	width: 1.5px;
	height: 100%;
	transform: translateX(50%);
}

.gcn-related__title {
	margin-bottom: var(--gcn-space-5);
	font-size: var(--gcn-text-xl);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: var(--gcn-tracking-tight);
	color: var(--gcn-text);
}

.gcn-related__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--gcn-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gcn-related__link {
	display: flex;
	align-items: center;
	gap: var(--gcn-space-4);
	height: 100%;
	padding: var(--gcn-space-4);
	color: inherit;
	text-decoration: none;
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-md);
	transition:
		border-color var(--gcn-duration) var(--gcn-ease),
		box-shadow var(--gcn-duration) var(--gcn-ease),
		transform var(--gcn-duration) var(--gcn-ease);
}

.gcn-related__link:hover {
	color: inherit;
	border-color: var(--gcn-brand-border);
	box-shadow: var(--gcn-shadow-sm);
	transform: translateY(-1px);
}

.gcn-related__thumb {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	overflow: hidden;
	background: var(--gcn-surface-sunken);
	border-radius: var(--gcn-radius-sm);
}

.gcn-related__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No photograph: the record's initials, drawn rather than left blank. */
.gcn-related__thumb--initials {
	font-size: var(--gcn-text-md);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: var(--gcn-tracking-wide);
	color: var(--gcn-brand-strong);
	background: var(--gcn-brand-soft);
}

.gcn-related__text {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	min-width: 0;
}

.gcn-related__name {
	font-size: var(--gcn-text-md);
	font-weight: var(--gcn-weight-medium);
	line-height: var(--gcn-leading-snug);
	color: var(--gcn-text);
}

.gcn-related__link:hover .gcn-related__name {
	color: var(--gcn-brand-strong);
}

.gcn-related__note {
	overflow: hidden;
	font-size: var(--gcn-text-sm);
	color: var(--gcn-text-muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gcn-related__more,
.gcn-related__empty {
	margin-top: var(--gcn-space-3);
	font-size: var(--gcn-text-sm);
	color: var(--gcn-text-muted);
}