/* ============================================================
   e-wrestling.org hub — components for the museum front page and
   the cross-fed pages. Loads after museum.css and uses its tokens.

   Fed colours arrive per element as --fed-accent / --fed-accent-text
   (set inline from efed_site_feds.accentcolor) and always fall back
   to the museum accent. They are used as stripes, bars and tag
   backgrounds only, never as text on the page background.
   ============================================================ */

.hub-section {
	margin-top: var(--sp-7);
}

/* --- Search form ---------------------------------------------- */

.hub-search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-6);
	max-width: var(--width-content);
}

.hub-search-form input[type="search"] {
	flex: 1 1 240px;
	min-height: 44px;
	padding: var(--sp-2) var(--sp-3);
	background: var(--color-bg-elevated);
	border: var(--bw-thin) solid var(--color-border-strong);
	border-radius: var(--radius);
}

.hub-search-form .button {
	min-height: 44px;
}

/* --- Federation list ------------------------------------------ */

/* Each card has four parts - heading, intro (years + tagline), stats, links. On wider screens the
   cards join the list's rows through subgrid, so every part sits level with the same part of its
   neighbours whatever the text length, cards in a row are equal height and the links line up at
   the bottom. Without subgrid the card is its own four-row grid (links pinned to the bottom) and
   the heading and intro get minimum heights instead. Phones: one column, no reserved space. */

.fed-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-5);
}

.fed-item {
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	border: var(--bw-thin) solid var(--color-border);
	border-left: 6px solid var(--fed-accent, var(--color-accent));
	background: var(--color-bg-elevated);
	padding: var(--sp-5);
}

@media (min-width: 720px) {
	.fed-list {
		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	}
}

@supports (grid-template-rows: subgrid) {
	@media (min-width: 720px) {
		.fed-list {
			row-gap: 0;
		}

		.fed-item {
			grid-row: span 4;
			grid-template-rows: subgrid;
			row-gap: 0;
			margin-bottom: var(--sp-5);
		}
	}
}

@supports not (grid-template-rows: subgrid) {
	@media (min-width: 720px) {
		.fed-name {
			min-height: calc(2em * var(--lh-tight));
		}

		.fed-intro {
			min-height: 7.5em;
		}
	}
}

.fed-name {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	gap: var(--sp-1) var(--sp-2);
	font-size: var(--fs-h4);
	line-height: var(--lh-tight);
	margin: 0 0 var(--sp-2);
}

.fed-name .fed-tag {
	margin-top: 2px;
}

.fed-intro {
	margin: 0 0 var(--sp-4);
}

.fed-years {
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	margin: 0 0 var(--sp-2);
}

.fed-tagline {
	font-style: italic;
	color: var(--color-text-muted);
	margin: 0;
}

/* Always three stats to a row, so every card lays its figures out the same way */
.fed-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-4) var(--sp-3);
	margin: 0 0 var(--sp-4);
}

.fed-stats div {
	display: flex;
	flex-direction: column;
}

.fed-stats dt {
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.fed-stats dd {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-lg);
}

.fed-links {
	font-size: var(--fs-sm);
	margin: 0;
}

.fed-tag {
	display: inline-block;
	padding: 2px var(--sp-2);
	background: var(--fed-accent, var(--color-accent));
	color: var(--fed-accent-text, var(--color-accent-text));
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: 0.06em;
	line-height: 1.5;
	border-radius: var(--radius);
	white-space: nowrap;
	vertical-align: middle;
}

/* --- Lists: news, shows, search results ------------------------ */

.hub-news-list,
.show-list,
.day-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hub-news-item {
	padding: var(--sp-4) 0;
	border-bottom: var(--bw-thin) solid var(--color-border);
}

.hub-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	margin-bottom: var(--sp-2);
}

.hub-news-title {
	font-size: var(--fs-lg);
	margin: 0;
}

.show-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-2);
	padding: var(--sp-3) 0;
	border-bottom: var(--bw-thin) solid var(--color-border);
	font-size: var(--fs-sm);
}

.show-date {
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.search-group {
	margin-top: var(--sp-6);
}

.search-career {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* --- On this day ---------------------------------------------- */

.day-item {
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: baseline;
	gap: var(--sp-1) var(--sp-3);
	padding: var(--sp-3) 0;
	border-bottom: var(--bw-thin) solid var(--color-border);
}

.day-year {
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
}

.day-type {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
}

.day-text {
	grid-column: 1 / -1;
}

@media (min-width: 720px) {
	.day-item {
		grid-template-columns: 3.5em auto 8.5em 1fr;
	}

	.day-text {
		grid-column: auto;
	}
}

.day-nav,
.letter-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-5);
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-sm);
}

/* --- Timeline bars -------------------------------------------- */

.scene {
	list-style: none;
	margin: 0;
	padding: 0;
}

.scene-year {
	display: grid;
	grid-template-columns: 3.5em 1fr;
	gap: var(--sp-2) var(--sp-4);
	padding: var(--sp-3) 0;
	border-bottom: var(--bw-thin) solid var(--color-border);
}

.scene-year-label {
	font-family: var(--font-mono);
	font-weight: var(--fw-bold);
}

.scene-bars {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

.scene-bar {
	position: relative;
	display: block;
	min-height: 24px;
	background: var(--color-bg-alt);
	color: var(--color-text);
	text-decoration: none;
}

a.scene-bar:hover .scene-bar-label,
a.scene-bar:focus-visible .scene-bar-label {
	text-decoration: underline;
}

a.scene-bar:hover {
	outline: var(--bw-thin) solid var(--fed-accent, var(--color-accent));
}

tr[id^="fed-"]:target td {
	background: var(--color-bg-alt);
}

.scene-bar-fill {
	position: absolute;
	inset: 0 auto 0 0;
	min-width: 4px;
	background: var(--fed-accent, var(--color-accent));
}

.scene-bar-label {
	position: relative;
	display: inline-block;
	margin: 2px var(--sp-2);
	padding: 0 var(--sp-1);
	background: var(--color-bg-elevated);
	color: var(--color-text);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	line-height: 20px;
}

.scene-empty {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.scene-milestones {
	grid-column: 2;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1) var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

/* --- Wrestlers ------------------------------------------------ */

.letter-head {
	font-size: var(--fs-h3);
	margin: var(--sp-6) 0 var(--sp-2);
}

.career-stint::before {
	background: var(--fed-accent, var(--color-accent));
}

.career-body {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	align-items: flex-start;
}

.career-headshot {
	width: 80px;
	height: auto;
	border: var(--bw-thin) solid var(--color-border);
}

.career-fed {
	font-family: var(--font-body);
	font-size: var(--fs-base);
}

.hub-footer-feds {
	font-size: var(--fs-sm);
}