/*
 * The presenter page (templates/pages/presenter.php), on pages-show.css: the page frame, the top
 * with the cut-out standing on the red line, the sections, Listen again, the stories, the app
 * strip and the toast are the show page's (`skdr-show-*`). This file adds what only the presenter
 * page has: the "Presents" line's show name, About (PresenterAbout-Styles B: bio and pull quote,
 * quick facts, the Q&A cards) and the Shows grid.
 *
 * Ported from PresenterPage3 (.pres, .skdr-about-*, .skdr-presenter-shows) and, for phones,
 * ShowPresenter3-Mobile (.fr--m .skdr-about-*, .skdr-presenter-shows, the 256 × 144 cut-out);
 * BRIEF §17–§18s. Show names are Radio Christmas Red in every state, with no hover colour or
 * underline (client, 18 Oct). Colours are tokens only.
 */

.skdr-presenter :is(.skdr-presenter-top__show, .skdr-about-bio a, .skdr-presenter-show):focus-visible {
	outline: var(--skdr-focus-outline);
	outline-offset: var(--skdr-focus-offset);
	box-shadow: var(--skdr-focus-shadow);
}

/* ---------------------------------------------------------------- top: "Presents X and N more shows" (§18c, §18e) */

.skdr-presenter .skdr-show-top__by .skdr-presenter-top__show,
.skdr-presenter .skdr-show-top__by .skdr-presenter-top__show:visited,
.skdr-presenter .skdr-show-top__by .skdr-presenter-top__show:hover {
	border-radius: 2px;
	color: var(--skdr-red);
	font-weight: var(--skdr-fw-semibold);
	text-decoration: none;
}

.skdr-presenter .skdr-show-top__by .skdr-show-top__more {
	white-space: nowrap;
}

/* ---------------------------------------------------------------- About: bio + pull quote, Follow + Share, facts, Q&A (§18e, §18k) */

.skdr-presenter .skdr-about-h2 {
	margin-bottom: var(--skdr-sp-32);
}

.skdr-presenter .skdr-about-b--quote {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--skdr-sp-64);
	align-items: center;
}

.skdr-presenter .skdr-about-bio {
	max-width: 760px;
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-body-l);
	line-height: var(--skdr-lh-body-l);
}

.skdr-presenter .skdr-about-bio > * {
	margin: 0;
	padding: 0;
}

.skdr-presenter .skdr-about-bio > * + * {
	margin-top: var(--skdr-sp-12);
}

.skdr-presenter .skdr-about-bio :is(ul, ol) {
	padding-left: var(--skdr-sp-24);
}

.skdr-presenter .skdr-about-bio :is(h2, h3) {
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-h3);
	line-height: var(--skdr-lh-h3);
	font-weight: var(--skdr-fw-bold);
}

.skdr-presenter .skdr-about-bio a {
	border-radius: 2px;
	color: var(--skdr-dark);
}

.skdr-presenter .skdr-about-bio a:hover {
	color: var(--skdr-red);
}

/* The theme styles bare blockquotes; the board's is plain: a big red “ over the words */
.skdr-presenter .skdr-about-quote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--skdr-ink);
	font-style: normal;
	quotes: none;
}

.skdr-presenter .skdr-about-quote::before,
.skdr-presenter .skdr-about-quote::after {
	content: none;
}

.skdr-presenter .skdr-about-mark {
	display: block;
	height: 28px;
	color: var(--skdr-red);
	font-size: 56px;
	line-height: 56px;
	font-weight: var(--skdr-fw-bold);
}

.skdr-presenter .skdr-about-quote p {
	margin: 4px 0 0;
	color: var(--skdr-ink);
	font-size: 24px;
	line-height: 34px;
	font-style: normal;
	font-weight: var(--skdr-fw-semibold);
}

.skdr-presenter .skdr-about-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--skdr-sp-12);
	margin: var(--skdr-sp-32) 0 0;
	padding: 0;
	list-style: none;
}

.skdr-presenter .skdr-about-fact {
	display: flex;
	align-items: center;
	gap: var(--skdr-sp-12);
	min-height: 56px;
	margin: 0;
	padding: var(--skdr-sp-12) var(--skdr-sp-16);
	border: 1px solid var(--skdr-line);
	border-radius: var(--skdr-r-card);
	background: var(--skdr-white);
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-small);
	line-height: var(--skdr-lh-small);
	font-weight: var(--skdr-fw-semibold);
}

.skdr-presenter .skdr-about-fact svg {
	flex: none;
	color: var(--skdr-dark);
}

.skdr-presenter .skdr-about-h3 {
	margin: 48px 0 var(--skdr-sp-16);
	padding: 0;
	color: var(--skdr-ink);
	font-size: 22px;
	line-height: 30px;
	font-weight: var(--skdr-fw-bold);
}

/* Q&A cards: two columns, the song card two rows tall, an odd last card full width */
.skdr-presenter .skdr-about-qgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--skdr-sp-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

.skdr-presenter .skdr-about-qc {
	margin: 0;
	padding: 20px var(--skdr-sp-24) var(--skdr-sp-24);
	border: 1px solid var(--skdr-line);
	border-radius: var(--skdr-r-panel);
	background: var(--skdr-white);
}

.skdr-presenter .skdr-about-qc--song {
	grid-row: span 2;
}

.skdr-presenter .skdr-about-qc--wide {
	grid-column: 1 / -1;
}

.skdr-presenter .skdr-about-qc__q {
	margin: 0;
	padding: 0;
	color: var(--skdr-muted);
	font-size: var(--skdr-fs-caption);
	line-height: var(--skdr-lh-caption);
	font-weight: var(--skdr-fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.skdr-presenter .skdr-about-qc__a {
	margin: var(--skdr-sp-8) 0 0;
	color: var(--skdr-ink);
	font-size: 20px;
	line-height: 28px;
	font-weight: var(--skdr-fw-semibold);
}

.skdr-presenter .skdr-about-songwrap {
	max-width: 420px;
	margin-top: var(--skdr-sp-16);
}

/* ---------------------------------------------------------------- Shows (§18c): every show, the same 1:1 tile, name and usual time */

.skdr-presenter .skdr-presenter-shows {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--skdr-sp-24);
	margin: 0;
	padding: 0;
	list-style: none;
}

.skdr-presenter .skdr-presenter-shows li {
	margin: 0;
	padding: 0;
}

.skdr-presenter-show {
	display: block;
	border-radius: var(--skdr-r-card);
	text-decoration: none;
}

.skdr-presenter-show__img {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--skdr-r-card);
}

img.skdr-presenter-show__img {
	display: block;
	height: auto;
	object-fit: cover;
}

.skdr-presenter .skdr-presenter-show__n,
.skdr-presenter a.skdr-presenter-show:hover .skdr-presenter-show__n {
	display: block;
	margin-top: var(--skdr-sp-12);
	color: var(--skdr-red);
	font-size: var(--skdr-fs-body);
	line-height: 24px;
	font-weight: var(--skdr-fw-semibold);
	text-decoration: none;
}

.skdr-presenter .skdr-presenter-show__t {
	display: block;
	margin-top: 2px;
	color: var(--skdr-gray);
	font-size: var(--skdr-fs-small);
	line-height: var(--skdr-lh-small);
}

@media (max-width: 900px) {
	.skdr-presenter .skdr-about-b--quote {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--skdr-sp-24);
	}

	.skdr-presenter .skdr-presenter-shows {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------- phones (ShowPresenter3-Mobile) */

@media (max-width: 760px) {
	.skdr-presenter .skdr-show-top__cut {
		width: 256px;
	}

	.skdr-presenter .skdr-about-h2 {
		margin-bottom: var(--skdr-sp-24);
	}

	.skdr-presenter .skdr-about-bio {
		font-size: 17px;
		line-height: 28px;
	}

	.skdr-presenter .skdr-about-quote p {
		font-size: 20px;
		line-height: 30px;
	}

	.skdr-presenter .skdr-about-facts {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--skdr-sp-8);
		margin-top: var(--skdr-sp-24);
	}

	.skdr-presenter .skdr-about-h3 {
		margin-top: var(--skdr-sp-40);
	}

	.skdr-presenter .skdr-about-qgrid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--skdr-sp-12);
	}

	.skdr-presenter .skdr-about-qc--song {
		grid-row: auto;
	}

	.skdr-presenter .skdr-about-qc {
		padding: var(--skdr-sp-16) 20px 20px;
	}

	.skdr-presenter .skdr-about-songwrap {
		max-width: none;
	}

	.skdr-presenter .skdr-presenter-shows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--skdr-sp-24) var(--skdr-sp-12);
	}

	.skdr-presenter .skdr-presenter-show__n,
	.skdr-presenter a.skdr-presenter-show:hover .skdr-presenter-show__n {
		margin-top: 10px;
		font-size: 15px;
		line-height: 22px;
	}

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