/**
 * Hubs (Phase 6): dark "theatre" bands, video hub player + rail, photo-story slider,
 * opinion/interview (serif), province map, columnists, local-government feed.
 * Loaded on hub pages and on video/photo stories (inc/assets.php).
 */

/* Dark full-width band. Full-bleed via box-shadow + clip-path: no 100vw, so no horizontal scroll. */
.theater {
	margin-block: var(--s-6);
	padding-block: var(--s-6);
	background: var(--navy);
	box-shadow: 0 0 0 100vmax var(--navy);
	clip-path: inset(0 -100vmax);
	color: var(--on-navy-muted);
}
.theater .card__excerpt { color: var(--on-navy-muted); }
.theater .l-divided > * + * { border-top-color: color-mix(in srgb, var(--white) 14%, transparent); }
.theater .card__time { color: var(--sky); }

/* Story pages: player / slider centred, not the full 1240px (it would be taller than the screen). */
.theater > .article__media,
.theater > .photo-slider {
	max-width: 960px;
	margin: 0 auto;
}
.theater > .article__media figcaption { color: var(--on-navy-muted); }

/* Video hub ----------------------------------------------------------------- */
.hub-player__main {
	display: grid;
	gap: var(--s-3);
	align-content: start;
}
.hub-player__title {
	margin: 0;
	font-size: var(--fs-2);
	line-height: var(--lh-tight);
}
.hub-player__title a { color: var(--on-navy); }
@media (hover: hover) { .hub-player__title a:hover { text-decoration: underline; text-decoration-color: var(--brand); } }
.hub-player__rail-title {
	margin: 0 0 var(--s-3);
	color: var(--on-navy);
	font-size: var(--fs-4);
}

/* Photo stories ------------------------------------------------------------- */
.hub-photos__side {
	display: grid;
	gap: var(--gutter);
	align-content: start;
}

.photo-slider__track {
	position: relative; /* offsetLeft of slides is measured from here (single.js) */
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	border-radius: var(--radius);
}
.photo-slider__track::-webkit-scrollbar { display: none; }
.photo-slider__track:focus-visible { outline: 2px solid var(--sky); outline-offset: 4px; }

.photo-slider__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}
.photo-slider figure { margin: 0; }
.photo-slider img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: contain; /* never crop a news photo */
	background: var(--letterbox); /* dark bars in both themes: --ink flips to near-white in dark */
}
.photo-slider figcaption {
	margin-top: var(--s-2);
	color: var(--on-navy-muted);
	font-size: var(--fs-7);
}

.photo-slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-4);
	margin-top: var(--s-3);
	color: var(--on-navy);
}
.photo-slider__btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid color-mix(in srgb, var(--white) 35%, transparent);
	border-radius: 50%;
	color: var(--on-navy);
}
@media (hover: hover) { .photo-slider__btn:hover:not([aria-disabled="true"]) { background: var(--brand); border-color: var(--brand); } }
.photo-slider__btn[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: default; }
.photo-slider__btn--prev .icon { transform: scaleX(-1); }
.photo-slider__count {
	min-width: 5ch;
	margin: 0;
	font: 700 var(--fs-7) / 1 var(--font-ui);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.photo-slider__track { scroll-behavior: auto; }
}

/* Opinion / interview: serif headlines, portrait-led (D-47) ----------------- */
.hub--voices .card__title,
.voices-lead__title {
	font-family: var(--font-serif);
	font-weight: 700;
	line-height: 1.5;
}

.voices-lead {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-5);
	align-items: center;
	margin-bottom: var(--s-7);
	padding: var(--s-6);
	border-radius: var(--radius-lg);
	background: var(--bg-soft);
}
@media (min-width: 768px) {
	.voices-lead { grid-template-columns: auto minmax(0, 1fr); }
}
.voices-lead__portrait { display: block; justify-self: center; }
.voices-lead__portrait img,
.voices-lead__portrait .avatar {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	object-fit: cover;
}
.voices-lead .card__quote {
	display: block;
	height: 0.5em;
	color: var(--brand);
	font: 700 4rem / 1 Georgia, "Times New Roman", serif; /* decorative quote glyph, not text: a system serif, outside the type scale */
}
.voices-lead__title {
	margin: 0 0 var(--s-3);
	font-size: var(--fs-1);
}
.voices-lead__title a { color: var(--heading); }
@media (hover: hover) { .voices-lead__title a:hover { text-decoration: underline; text-decoration-color: var(--brand); } }
.voices-lead__excerpt {
	margin: 0 0 var(--s-3);
	color: var(--text);
	font-size: var(--fs-body);
}
.voices-lead__author { color: var(--heading); font-weight: 700; }

.voices-grid { margin-bottom: var(--s-6); }

/* Columnists (opinion sidebar) */
.columnists__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.columnists__item {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: var(--s-3);
	align-items: start;
}
.columnists__name { color: var(--heading); font-weight: 700; }
.columnists__bio {
	margin: 0;
	color: var(--text);
	font-size: var(--fs-7);
	line-height: var(--lh-ui);
}
.columnists__count {
	margin: var(--s-1) 0 0;
	color: var(--muted);
	font: 500 var(--fs-7) / 1.4 var(--font-ui);
}

/* Province pages: map beside the title (D-46) -------------------------------- */
.archive-head__row--map { align-items: center; justify-content: flex-start; }
.archive-head__row--map .archive-head__main { flex: 1 1 280px; }
.archive-head__map { flex: 0 0 240px; }

.province-map {
	display: block;
	width: 100%;
	height: auto;
}
.province-map__area {
	fill: var(--tint);
	stroke: var(--bg);
	stroke-width: 3;
	stroke-linejoin: round;
	transition: fill 0.15s;
}
@media (hover: hover) { .province-map a:hover .province-map__area { fill: var(--sky); } }
.province-map a:focus-visible .province-map__area { fill: var(--sky); }
.province-map .province-map__area.is-current { fill: var(--brand); }
/* Keyboard focus: a dark outline on the shape itself (the sky fill alone is 1.75:1 on tint). */
.province-map a:focus-visible .province-map__area { stroke: var(--focus); stroke-width: 4; }
.province-map a:focus-visible { outline: none; }

@media (max-width: 767px) {
	.archive-head__map { flex-basis: 100%; max-width: 200px; }
}