/*
 * The Shows and Presenters index pages (templates/pages/shows.php, presenters.php;
 * templates/components/shows-index.php, presenters-index.php), on tokens.css, page-head.css and
 * components.css.
 *
 * Ported from the approved boards ShowsIndex-Final (variant c: .skdr-feat-grid--3,
 * .skdr-feat-card, .skdr-tiles, .skdr-tile) and PresentersIndex-Final (variant 1: .skdr-pf-tiles,
 * .skdr-pf-list--3, .skdr-pf-shows); GitHub #103. Show names are Radio Christmas Red in every
 * state, with no hover change or underline (client, 18 Oct). Colours are tokens only.
 */

.skdr-index {
	box-sizing: border-box;
	max-width: var(--skdr-container);
	margin: 0 auto;
	padding: var(--skdr-sp-32) var(--skdr-gutter) var(--skdr-sp-64);
	color: var(--skdr-gray);
	font-family: var(--skdr-font);
}

.skdr-index *,
.skdr-index *::before,
.skdr-index *::after {
	box-sizing: border-box;
}

/* The theme sets its own fonts on bare elements; the boards are Poppins only (§1) */
.skdr-index :is(h1, h2, h3, p, a, li, span) {
	font-family: var(--skdr-font);
}

.skdr-index :is(ul, ol) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.skdr-index :is(h2, h3, p) {
	margin: 0;
	padding: 0;
}

.skdr-ix-sec {
	margin-top: var(--skdr-sp-40);
}

.skdr-ix-h2 {
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-h2);
	line-height: var(--skdr-lh-h2);
	font-weight: var(--skdr-fw-bold);
}

.skdr-ix-msg {
	margin-top: var(--skdr-sp-40);
	font-size: var(--skdr-fs-body);
	line-height: var(--skdr-lh-body);
}

/* ---------------------------------------------------------------- show and presenter links */

.skdr-index a.skdr-ix-show,
.skdr-index a.skdr-ix-show:visited,
.skdr-index a.skdr-ix-show:hover,
.skdr-index span.skdr-ix-show {
	border-radius: 2px;
	color: var(--skdr-red);
	text-decoration: none;
}

.skdr-index a.skdr-ix-who,
.skdr-index a.skdr-ix-who:visited {
	border-radius: 2px;
	color: var(--skdr-dark);
	text-decoration: none;
}

.skdr-index a.skdr-ix-who:hover {
	color: var(--skdr-red);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.skdr-index span.skdr-ix-who {
	color: var(--skdr-dark);
}

.skdr-index :is(a.skdr-ix-show, a.skdr-ix-who):focus-visible {
	outline: var(--skdr-focus-outline);
	outline-offset: var(--skdr-focus-offset);
	box-shadow: var(--skdr-focus-shadow);
}

/* ---------------------------------------------------------------- images (DA's, or the placeholder) */

.skdr-index .skdr-ix-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	object-fit: cover;
}

.skdr-index .skdr-fimg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	object-fit: cover;
}

.skdr-index .skdr-ph.skdr-fimg {
	display: flex;
}

/* ---------------------------------------------------------------- Shows: featured, 3 across and wrapping */

.skdr-feat-grid {
	display: grid;
	gap: var(--skdr-sp-32) var(--skdr-sp-24);
	margin-top: var(--skdr-sp-24);
}

.skdr-feat-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.skdr-feat-card {
	display: block;
	min-width: 0;
}

.skdr-feat-card h3 {
	margin-top: 14px;
	font-size: 20px;
	line-height: 28px;
	font-weight: var(--skdr-fw-bold);
}

/* ---------------------------------------------------------------- Shows: every other show, A to Z */

.skdr-tiles {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--skdr-sp-32) var(--skdr-sp-24);
	margin-top: var(--skdr-sp-24);
}

.skdr-tile {
	min-width: 0;
}

.skdr-tile h3 {
	margin-top: var(--skdr-sp-12);
	font-size: var(--skdr-fs-body);
	line-height: 24px;
	font-weight: var(--skdr-fw-bold);
}

/* ---------------------------------------------------------------- Presenters: featured square tiles */

.skdr-pf-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--skdr-sp-24);
	margin-top: var(--skdr-sp-24);
}

.skdr-pf-tiles li {
	min-width: 0;
}

.skdr-pf-tiles h3 {
	margin-top: 14px;
	font-size: 20px;
	line-height: 28px;
	font-weight: var(--skdr-fw-semibold);
}

.skdr-pf-shows {
	margin-top: var(--skdr-sp-4);
	font-size: var(--skdr-fs-small);
	line-height: var(--skdr-lh-small);
	color: var(--skdr-gray);
}

.skdr-pf-shows .skdr-ix-show {
	font-weight: var(--skdr-fw-semibold);
}

/* ---------------------------------------------------------------- Presenters: everyone else, three columns */

.skdr-pf-list {
	display: grid;
	gap: 0 var(--skdr-sp-32);
	margin-top: var(--skdr-sp-16);
}

.skdr-pf-list--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.skdr-pf-list li {
	min-width: 0;
	padding: var(--skdr-sp-12) 0;
	border-bottom: 1px solid var(--skdr-line);
}

.skdr-pf-list h3 {
	font-size: 17px;
	line-height: 26px;
	font-weight: var(--skdr-fw-semibold);
}

.skdr-pf-list .skdr-pf-shows {
	margin-top: 0;
	font-size: var(--skdr-fs-caption);
	line-height: var(--skdr-lh-caption);
}

/* ---------------------------------------------------------------- tablets: the tiles loosen up first */

@media (max-width: 1000px) {
	.skdr-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------- phones (ShowsIndex-Final, PresentersIndex-Final) */

@media (max-width: 760px) {
	.skdr-index {
		padding: var(--skdr-sp-8) var(--skdr-gutter-phone) var(--skdr-sp-40);
	}

	.skdr-ix-sec {
		margin-top: 28px;
	}

	.skdr-ix-h2 {
		font-size: 22px;
		line-height: 30px;
	}

	.skdr-feat-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px var(--skdr-sp-16);
		margin-top: var(--skdr-sp-16);
	}

	.skdr-feat-card h3 {
		margin-top: var(--skdr-sp-8);
		font-size: 15px;
		line-height: 22px;
	}

	.skdr-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--skdr-sp-24) var(--skdr-sp-16);
		margin-top: var(--skdr-sp-16);
	}

	.skdr-tile h3 {
		margin-top: 10px;
		font-size: 15px;
		line-height: 22px;
	}

	.skdr-pf-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px var(--skdr-sp-16);
		margin-top: var(--skdr-sp-16);
	}

	.skdr-pf-tiles h3 {
		margin-top: 10px;
		font-size: 17px;
		line-height: 24px;
	}

	.skdr-pf-shows {
		font-size: var(--skdr-fs-caption);
		line-height: var(--skdr-lh-caption);
	}

	.skdr-pf-list--3 {
		grid-template-columns: minmax(0, 1fr);
		margin-top: var(--skdr-sp-8);
	}
}