/* ============================================================
   e-wrestling.org hub — layout for the museum front page.
   Loads after museum.css and uses its variables and page chrome.
   ============================================================ */

.hub-main {
	max-width: var(--width-page);
	margin-inline: auto;
	padding: var(--sp-6) var(--sp-4) var(--sp-8);
}

@media (min-width: 720px) {
	.hub-main {
		padding: var(--sp-8) var(--sp-6);
	}
}

/* --- Intro ---------------------------------------------------- */

.hub-intro {
	max-width: var(--width-content);
	margin-bottom: var(--sp-8);
}

.hub-intro h1 {
	font-size: var(--fs-h1);
	margin-bottom: var(--sp-3);
}

.hub-tagline {
	font-size: var(--fs-lg);
	color: var(--color-text-muted);
	margin: 0 0 var(--sp-4);
}

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

.hub-feds {
	margin-bottom: var(--sp-8);
}

.hub-feds h2,
.hub-news h2,
.hub-shows h2 {
	font-size: var(--fs-h3);
	padding-bottom: var(--sp-2);
	border-bottom: var(--bw-thick) solid var(--color-border-strong);
	margin-bottom: var(--sp-5);
}

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

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

.fed-item {
	border: var(--bw-thin) solid var(--color-border);
	border-left: var(--bw-thick) solid var(--color-accent);
	background: var(--color-bg-elevated);
	padding: var(--sp-5);
}

.fed-name {
	font-size: var(--fs-h4);
	margin: 0 0 var(--sp-1);
}

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

.fed-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-5);
	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;
}

/* --- Two-column body ------------------------------------------ */

.hub-columns {
	display: grid;
	gap: var(--sp-7);
}

@media (min-width: 1024px) {
	.hub-columns {
		grid-template-columns: 1fr var(--width-sidebar);
	}
}

/* --- Cross-fed news ------------------------------------------- */

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

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

.hub-news .news-item-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 .news-item-title {
	font-size: var(--fs-lg);
	margin: 0;
}

.fed-tag {
	display: inline-block;
	padding: 2px var(--sp-2);
	background: var(--color-accent);
	color: var(--color-accent-text);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
	border-radius: var(--radius);
}

/* --- Recent shows --------------------------------------------- */

.show-list {
	list-style: none;
	margin: 0;
	padding: 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);
}

/* --- Footer --------------------------------------------------- */

.site-footer {
	border-top: var(--bw-thin) solid var(--color-border);
	padding: var(--sp-5) var(--sp-4);
	text-align: center;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}