/* ================================================================
   Official Category Details — Module Stylesheet.
   V13.1 REDESIGN — rebuilt to match the uploaded mockup: breadcrumb,
   compact hero, single-column layout (no sidebar), compact nominee
   cards with Submitted Work, a real winners timeline, and a six-box
   statistics grid.

   Shared tokens (colors, radii, glass, gold) come from
   lma-design-system.css. Nominee/category card reuse from other
   modules has been removed from this page — Related Categories and
   the directory-style nominee card are no longer used here.
   ================================================================ */

.lma-catdetails { max-width: 1040px; margin: 0 auto; padding: 0 24px 64px; }

/* ── Breadcrumb ───────────────────────────────────────────────────── */
.lma-catdetails-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 24px 0 8px;
	font-size: 0.82rem;
}
.lma-catdetails-breadcrumb-link {
	color: var(--lma-text-faint);
	text-decoration: none;
	transition: color 0.2s ease;
}
.lma-catdetails-breadcrumb-link:hover { color: var(--lma-gold); }
.lma-catdetails-breadcrumb-sep { color: var(--lma-text-faint); opacity: 0.5; }
.lma-catdetails-breadcrumb-current { color: var(--lma-gold); font-weight: 600; }

/* ── Hero (compact — badge + title + subtitle over a banner photo) ──── */
.lma-catdetails-hero {
	position: relative;
	border-radius: var(--lma-radius-lg);
	overflow: hidden;
	margin: 16px 0 40px;
	min-height: 220px;
	display: flex;
	align-items: flex-end;
}
.lma-catdetails-hero-banner { position: absolute; inset: 0; z-index: 0; }
.lma-catdetails-hero-banner img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.lma-catdetails-hero-banner-default {
	background:
		radial-gradient(ellipse 480px 260px at 20% 10%, var(--lma-gold-glow), transparent 70%),
		linear-gradient(160deg, var(--lma-bg-elevated) 0%, var(--lma-bg) 70%);
}
.lma-catdetails-hero-banner::after,
.lma-catdetails-hero-banner-default::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(26,26,32,0.35) 0%, var(--lma-bg) 92%);
}
.lma-catdetails-hero-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 40px;
	width: 100%;
}
.lma-catdetails-hero-copy { flex: 1; min-width: 0; }
.lma-catdetails-hero-badge {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--lma-bg);
	border: 2px solid var(--lma-gold);
	box-shadow: 0 0 24px var(--lma-gold-glow);
	color: var(--lma-gold);
	fill: var(--lma-gold);
}
.lma-catdetails-hero-badge svg { width: 32px; height: 32px; }
.lma-catdetails-hero-badge-img { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; }
.lma-catdetails-hero-title {
	margin: 0 0 6px;
	font-size: clamp(1.7rem, 3.4vw, 2.4rem);
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--lma-gold);
	text-transform: uppercase;
}

@media (max-width: 640px) {
	.lma-catdetails-hero-inner { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
}

/* ── Generic section shell ───────────────────────────────────────── */
.lma-catdetails-section { margin-bottom: 48px; }
.lma-catdetails-heading {
	margin: 0 0 20px;
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--lma-text);
}

/* ── About ────────────────────────────────────────────────────────── */
.lma-catdetails-about {
	background: var(--lma-glass);
	border: 1px solid var(--lma-glass-bd);
	border-radius: var(--lma-radius-md);
	padding: 32px;
}
.lma-catdetails-about-desc { color: var(--lma-text-dim); line-height: 1.7; }
.lma-catdetails-about-block { margin-top: 20px; }
.lma-catdetails-about-subheading {
	margin: 0 0 6px;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--lma-gold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.lma-catdetails-about-block > div { color: var(--lma-text-dim); line-height: 1.7; }

/* ── Section headers (V13.4 — icon + gold divider + subtitle) ────────
   Applied to the Nominees and Hall of Fame headings only, per the
   V13.4 brief — the "About This Category" and "Statistics" headings
   above/below are untouched (out of scope; About is explicitly frozen
   in place, Statistics wasn't part of this redesign). */
.lma-catdetails-heading-block {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
}
.lma-catdetails-heading-block .lma-catdetails-heading { margin: 0; }
.lma-catdetails-heading-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--lma-gold);
	fill: var(--lma-gold);
}
.lma-catdetails-heading-icon svg { width: 100%; height: 100%; }
.lma-catdetails-heading-divider {
	flex: 1;
	height: 1px;
	min-width: 32px;
	background: linear-gradient(90deg, var(--lma-gold-soft), transparent);
}
.lma-catdetails-heading-subtitle {
	margin: 0 0 28px;
	color: var(--lma-text-faint);
	font-size: 0.9rem;
}

/* ── Current Edition Nominees (V13.4 — premium showcase cards) ──────
   flex-wrap + justify-content:center (not a grid) so a handful of
   nominees hug together instead of stretching across empty grid
   cells — this is what keeps 1–2 nominees from reading as a big
   empty area. */
.lma-catdetails-nominees-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}
.lma-catdetails-nomcard {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	flex: 0 1 190px;
	padding: 30px 20px 24px;
	background: var(--am-card);
	border: 1px solid var(--lma-border-soft);
	border-radius: var(--lma-radius-md);
	transition: transform var(--am-transition), border-color var(--am-transition), box-shadow var(--am-transition);
}
.lma-catdetails-nomcard:hover {
	transform: translateY(-4px);
	border-color: var(--lma-gold-soft);
	box-shadow: 0 16px 32px rgba(0,0,0,0.35), 0 0 20px var(--lma-gold-glow);
}
.lma-catdetails-nomcard-photo-wrap { margin-bottom: 18px; }
.lma-catdetails-nomcard-photo {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--lma-gold);
	box-shadow: 0 0 0 4px var(--lma-gold-glow);
	transition: transform var(--am-transition);
}
.lma-catdetails-nomcard:hover .lma-catdetails-nomcard-photo { transform: scale(1.05); }
.lma-catdetails-nomcard-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lma-catdetails-nomcard-photo-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--lma-glass);
	color: var(--lma-gold);
	font-weight: 700;
	font-size: 1.6rem;
	text-transform: uppercase;
}
.lma-catdetails-nomcard-name {
	font-size: 1.02rem;
	font-weight: 800;
	color: var(--lma-text);
	line-height: 1.3;
	margin-bottom: 4px;
}
.lma-catdetails-nomcard-caption {
	font-size: 0.82rem;
	color: var(--lma-text-dim);
	line-height: 1.4;
	margin-bottom: 16px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.lma-catdetails-nomcard-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--lma-gold-glow);
	border: 1px solid var(--lma-gold-soft);
	color: var(--lma-gold);
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}
.lma-catdetails-nomcard-badge svg { width: 10px; height: 10px; fill: var(--lma-gold); flex-shrink: 0; }

/* ── Hall of Fame timeline (V13.4 — formerly "Winners Timeline") ────
   A single vertical gold rail scales to any number of editions with
   zero markup changes — each entry is just another .lma-catdetails-
   timeline-item pushed onto the same rail, so future editions extend
   the list automatically. */
.lma-catdetails-timeline {
	background: var(--am-card);
	border: 1px solid var(--lma-border-soft);
	border-radius: var(--lma-radius-md);
	padding: 36px 32px;
}
.lma-catdetails-timeline-item { display: flex; gap: 20px; }
.lma-catdetails-timeline-rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
}
.lma-catdetails-timeline-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--lma-gold);
	box-shadow: 0 0 12px var(--lma-gold-glow);
	margin-top: 10px;
	flex-shrink: 0;
	transition: all var(--am-transition);
}
.lma-catdetails-timeline-item.is-current .lma-catdetails-timeline-dot {
	width: 18px;
	height: 18px;
	margin-top: 6px;
	box-shadow: 0 0 0 5px var(--lma-gold-glow), 0 0 22px var(--lma-gold-soft);
}
.lma-catdetails-timeline-line {
	flex: 1;
	width: 2px;
	min-height: 32px;
	background: var(--lma-gold-soft);
	margin: 6px 0;
}
.lma-catdetails-timeline-content { flex: 1; padding-bottom: 28px; }
.lma-catdetails-timeline-item:last-child .lma-catdetails-timeline-content,
.lma-catdetails-timeline-item:last-child .lma-catdetails-wincard { padding-bottom: 0; }
.lma-catdetails-timeline-year {
	display: block;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--lma-gold);
	margin-bottom: 6px;
}
.lma-catdetails-timeline-winner {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--lma-text);
	transition: color var(--am-transition);
}
.lma-catdetails-timeline-winner:hover { color: var(--lma-gold); }
.lma-catdetails-timeline-photo {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 1px solid var(--lma-gold-soft);
}
.lma-catdetails-timeline-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--lma-glass);
	color: var(--lma-gold);
	font-weight: 700;
	text-transform: uppercase;
}
.lma-catdetails-timeline-name { font-weight: 700; }

/* ── Featured Winner Card (the current edition's timeline node) ─────
   Deliberately more elaborate than the compact milestones above/below
   it in the same rail — this is the "premium emphasis" the brief asks
   for, achieved without repeating the winner's info anywhere else on
   the page. */
.lma-catdetails-wincard {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	text-decoration: none;
	padding: 26px 28px 30px;
	background: linear-gradient(160deg, var(--lma-gold-glow), transparent 65%), var(--am-card);
	border: 1px solid var(--lma-gold-soft);
	border-radius: var(--lma-radius-md);
	transition: transform var(--am-transition), box-shadow var(--am-transition), border-color var(--am-transition);
}
a.lma-catdetails-wincard:hover {
	transform: translateY(-3px);
	border-color: var(--lma-gold);
	box-shadow: 0 16px 36px rgba(0,0,0,0.4), 0 0 26px var(--lma-gold-glow);
}
.lma-catdetails-wincard-photo-wrap { position: relative; margin-bottom: 16px; }
.lma-catdetails-wincard-photo {
	display: block;
	width: 108px;
	height: 108px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--lma-gold);
	box-shadow: 0 0 0 5px var(--lma-gold-glow);
}
.lma-catdetails-wincard-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lma-catdetails-wincard-photo-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--lma-glass);
	color: var(--lma-gold);
	font-weight: 700;
	font-size: 1.8rem;
	text-transform: uppercase;
}
.lma-catdetails-wincard-trophy {
	position: absolute;
	right: -4px;
	bottom: -4px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--lma-gold);
	border-radius: 50%;
	border: 2px solid var(--am-card);
	color: var(--lma-bg);
	fill: var(--lma-bg);
}
.lma-catdetails-wincard-trophy svg { width: 16px; height: 16px; }
.lma-catdetails-wincard-badge {
	display: inline-block;
	margin-bottom: 10px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--lma-gold);
	color: var(--lma-bg);
	font-size: 0.65rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.lma-catdetails-wincard-name {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--lma-text);
	line-height: 1.2;
	margin-bottom: 4px;
}
.lma-catdetails-wincard-work {
	font-size: 0.92rem;
	color: var(--lma-text-dim);
	margin-bottom: 10px;
}
.lma-catdetails-wincard-edition {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--lma-gold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

@media (max-width: 640px) {
	/* V14.3.2 — Issue: nominee cards were rendering one per line on
	   mobile. Switching to an explicit 2-column CSS Grid (rather than
	   relying on flex-basis percentages, which could lose the fight
	   against min-content sizing on narrow phones) guarantees exactly
	   two cards per row regardless of screen width or content length. */
	.lma-catdetails-nominees-row {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		justify-content: stretch;
		gap: 14px;
	}
	.lma-catdetails-nomcard {
		flex: none;
		width: 100%;
		min-width: 0;
		padding: 20px 12px 18px;
	}
	.lma-catdetails-nomcard-photo { width: 76px; height: 76px; }
	.lma-catdetails-nomcard-name { font-size: 0.92rem; }
	.lma-catdetails-timeline { padding: 28px 20px; }
	.lma-catdetails-wincard { padding: 22px 20px 26px; }
}

/* ── Statistics (six boxes, reflowing grid) ──────────────────────── */
.lma-catdetails-statgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 16px;
}
.lma-catdetails-statbox {
	background: var(--lma-glass);
	border: 1px solid var(--lma-glass-bd);
	border-radius: var(--lma-radius-md);
	padding: 22px 20px;
	text-align: center;
}
.lma-catdetails-statbox-value {
	display: block;
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--lma-text);
	line-height: 1.1;
}
.lma-catdetails-statbox-label {
	display: block;
	margin-top: 6px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--lma-text-faint);
}