/**
 * Publications — library layouts (grid + list) + About-section links
 *  (inc/publications.php → [blg_publications])
 *
 * The organisation publishes a yearly Publication as a magazine hosted off-site (MagCloud).
 * Each entry = a portrait COVER thumbnail + NAME + YEAR + external LINK. Three
 * presentations from one shortcode:
 *   layout="grid"   — publications shelf: responsive grid of cover cards.
 *   layout="list"   — document rows: small cover + name/year + "View" action.
 *   layout="links"  — compact year links for the About "Publications" split
 *                     (Figma 226:2551 — latest 4, text-only).
 *
 * Design system only: --blg-* tokens, Montserrat headings / Inter body, brand
 * purple, --blg-shadow-image. Covers are ~3:4 (the real reviews are 308×401).
 *
 * Auto-enqueued by inc/enqueue.php glob (dep on kd-global).
 */

/* ── Shared section heading (optional, via shortcode eyebrow/heading) ───────── */

.kd-annual {
	width: 100%;
}

/* ════════════════════════════════════════════════════════════════════════════
   GRID — publications shelf
   ════════════════════════════════════════════════════════════════════════════ */

.kd-annual-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--blg-space-xl) var(--blg-space-lg); /* 64px row / 40px col */
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Card = floating cover (book-on-shelf) + year + name below. Whole card links
   out (external) via a stretched ::after overlay — one interactive element. */
.kd-annual-card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
}

.kd-annual-card__cover {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: var(--blg-radius-md); /* 12px */
	overflow: hidden;
	background: var(--blg-color-neutral-100, #f4f4f5);
	box-shadow: var(--blg-shadow-image);
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease;
}

.kd-annual-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kd-annual-card__year {
	font-family: var(--blg-font-body);
	font-size: 0.875rem; /* 14px */
	font-weight: 700;
	letter-spacing: 0.25px;
	text-transform: uppercase;
	color: var(--blg-color-primary);
	margin: var(--blg-space-md) 0 0; /* 24px above */
}

.kd-annual-card__name {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: 1.25rem; /* 20px */
	line-height: 1.25;
	color: var(--blg-color-contrast); /* dark ink, not purple */
	margin: var(--blg-gap-tight) 0 0; /* 8px above */
}

/* Stretched overlay → whole card clickable + keyboard-focusable (single anchor) */
.kd-annual-card__name a {
	color: inherit;
	text-decoration: none;
}

.kd-annual-card__name a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--blg-radius-md);
}

.kd-annual-card:hover .kd-annual-card__cover,
.kd-annual-card:focus-within .kd-annual-card__cover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.kd-annual-card:hover .kd-annual-card__name,
.kd-annual-card:focus-within .kd-annual-card__name {
	color: var(--blg-color-primary);
}

.kd-annual-card__name a:focus-visible::after {
	outline: 3px solid var(--blg-color-primary);
	outline-offset: 4px;
}

/* ════════════════════════════════════════════════════════════════════════════
   LIST — document rows
   ════════════════════════════════════════════════════════════════════════════ */

.kd-annual-list {
	display: flex;
	flex-direction: column;
	gap: var(--blg-space-md); /* 24px */
	margin: 0;
	padding: 0;
	list-style: none;
}

.kd-annual-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--blg-space-lg); /* 40px */
	padding: var(--blg-space-md);
	background: var(--blg-color-base);
	border: 1px solid var(--blg-color-neutral-300, #e4e4e7);
	border-radius: var(--blg-radius-lg); /* 24px */
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		border-color 0.18s ease;
}

.kd-annual-row:hover,
.kd-annual-row:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--blg-shadow-md);
	border-color: var(--blg-color-primary);
}

.kd-annual-row__cover {
	flex-shrink: 0;
	width: 72px;
	aspect-ratio: 3 / 4;
	border-radius: var(--blg-radius-sm); /* 4px */
	overflow: hidden;
	box-shadow: var(--blg-shadow-image);
	background: var(--blg-color-neutral-100, #f4f4f5);
}

.kd-annual-row__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kd-annual-row__text {
	flex: 1 1 auto;
	min-width: 0;
}

.kd-annual-row__year {
	font-family: var(--blg-font-body);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.25px;
	text-transform: uppercase;
	color: var(--blg-color-primary);
	margin: 0;
}

.kd-annual-row__name {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: 1.375rem; /* 22px */
	line-height: 1.2;
	color: var(--blg-color-contrast);
	margin: var(--blg-gap-tight) 0 0;
}

.kd-annual-row__name a {
	color: inherit;
	text-decoration: none;
}

/* Stretched overlay → the row is one click target */
.kd-annual-row__name a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--blg-radius-lg);
}

.kd-annual-row:hover .kd-annual-row__name,
.kd-annual-row:focus-within .kd-annual-row__name {
	color: var(--blg-color-primary);
}

/* Trailing "View Review" affordance (decorative — the whole row links) */
.kd-annual-row__cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: 1rem;
	color: var(--blg-color-primary);
	white-space: nowrap;
}

.kd-annual-row__name a:focus-visible::after {
	outline: 3px solid var(--blg-color-primary);
	outline-offset: -3px;
}

/* ════════════════════════════════════════════════════════════════════════════
   LINKS — compact year links for the About split (Figma 226:2551)
   ════════════════════════════════════════════════════════════════════════════ */

.kd-annual-links {
	display: flex;
	flex-direction: column;
	gap: var(--blg-gap-normal); /* 12px */
	margin: 0;
	padding: 0;
	list-style: none;
}

.kd-annual-links li {
	margin: 0;
}

.kd-annual-links a {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: 1.125rem; /* 18px */
	color: var(--blg-color-primary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	transition: gap 0.15s ease;
}

.kd-annual-links a::after {
	content: "→";
	font-size: 0.9em;
}

.kd-annual-links a:hover,
.kd-annual-links a:focus-visible {
	text-decoration: underline;
	gap: 0.75em;
}

/* ── Tablet (≤1024px) — 3-up grid ──────────────────────────────────────────── */

@media (max-width: 1024px) {
	.kd-annual-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--blg-space-lg);
	}
}

/* ── Mobile (≤768px) — 2-up grid, stacked list rows ────────────────────────── */

@media (max-width: 768px) {
	.kd-annual-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--blg-space-lg) var(--blg-space-md);
	}

	.kd-annual-row {
		gap: var(--blg-space-md);
	}

	/* The trailing CTA label folds away on small screens — the whole row is the
	   link, and the name already turns purple on tap/focus. */
	.kd-annual-row__cta {
		display: none;
	}
}

/* ── Very small phone (≤360px) — single column grid ────────────────────────── */

@media (max-width: 360px) {
	.kd-annual-grid {
		grid-template-columns: minmax(0, 240px);
		justify-content: center;
	}
}