/*
 * The show page (templates/pages/show.php), on tokens.css, page-head.css and components.css.
 * Coming up, the past rows, story cards, Share, the store badges and the placeholders are the
 * shared components; this file lays out the page around them.
 *
 * Ported from ShowPage3 (.skdr-show-top / .red / .cut / .ttl / .by, .skdr-show-sec, .desc,
 * .skdr-show-people, .skdr-show-stories, .skdr-app-strip, .skdr-show-rail) and, for phones,
 * ShowPresenter3-Mobile (.mred, .cut--m, .skdr-show-people, .skdr-m-story, .skdr-show-rail);
 * BRIEF §17–§18s. The cut-out stands exactly on the red line (§4g): nothing here offsets it.
 * Colours are tokens only (the Customizer's branding sets them); every link restates its colour
 * inside the page, above Kreeti's `a, a:visited` (0,1,1).
 */

.skdr-show {
	color: var(--skdr-gray);
	font-family: var(--skdr-font);
}

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

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

.skdr-show [hidden] {
	display: none !important;
}

/*
 * The 1200 container inside the theme's. The bands paint edge to edge with a border-image
 * outset: ink overflow, so the page never scrolls sideways and nothing inside is clipped (the
 * Share menu hangs below its section).
 */
.skdr-show__in {
	max-width: var(--skdr-container);
	margin: 0 auto;
	padding: 0 var(--skdr-gutter);
}

.skdr-show-top,
.skdr-show-sec--w {
	background: var(--skdr-white);
	border-image: conic-gradient(var(--skdr-white) 0 0) fill 0 / / 0 100vmax;
}

.skdr-show-sec--g {
	background: var(--skdr-page);
	border-image: conic-gradient(var(--skdr-page) 0 0) fill 0 / / 0 100vmax;
}

/* The Share menu opens over the next section */
.skdr-show-share {
	position: relative;
	z-index: 2;
}

.skdr-show :is(.skdr-show-top__by a, .skdr-show-desc a, .skdr-show-person, .skdr-show-more, .skdr-show-tile):focus-visible {
	outline: var(--skdr-focus-outline);
	outline-offset: var(--skdr-focus-offset);
	box-shadow: var(--skdr-focus-shadow);
}

/* ---------------------------------------------------------------- top: name, presenters, the cut-out on the red line (§18e, §18c, §4g) */

.skdr-show-top {
	padding-top: var(--skdr-sp-32);
}

.skdr-show-top__row {
	display: flex;
	align-items: stretch;
	gap: 48px;
	border-bottom: 5px solid var(--skdr-red);
}

.skdr-show-top__col {
	flex: 1;
	min-width: 0;
	padding-bottom: var(--skdr-sp-32);
}

.skdr-show-top .skdr-page-head .skdr-page-title {
	max-width: 620px;
	margin-top: var(--skdr-sp-16);
	text-wrap: balance;
}

.skdr-show .skdr-show-top__by {
	margin: var(--skdr-sp-12) 0 0;
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-body-l);
	line-height: 28px;
}

.skdr-show .skdr-show-top__by a {
	border-radius: 2px;
	color: var(--skdr-dark);
	font-weight: var(--skdr-fw-semibold);
	text-decoration: none;
}

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

.skdr-show .skdr-show-top__by .skdr-show-top__more {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.skdr-show .skdr-show-top__pn {
	color: var(--skdr-ink);
	font-weight: var(--skdr-fw-semibold);
}

/*
 * A fixed 16:9 frame (400 × 225, 240 × 135 on phones) whose bottom edge is the line's top edge.
 * Whatever DA sends, whatever its real shape, is contained in it whole and stands on its bottom
 * edge (§4g, §21b): never stretched, cropped or moved. Restated above the theme's own img rules.
 */
.skdr-show .skdr-show-top__cut {
	display: block;
	position: relative;
	flex: none;
	align-self: flex-end;
	width: 400px;
	height: auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.skdr-show .skdr-show-top__cut > .skdr-show-top__img,
.skdr-show .skdr-show-top__cut > .skdr-cutph {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.skdr-show .skdr-show-top__cut > .skdr-show-top__img {
	object-fit: contain;
	object-position: 50% 100%;
}

.skdr-show .skdr-show__msg {
	margin: var(--skdr-sp-24) 0 var(--skdr-sp-64);
	color: var(--skdr-gray);
	font-size: var(--skdr-fs-body);
	line-height: var(--skdr-lh-body);
}

/* ---------------------------------------------------------------- sections: plain headings, white and grey in turn */

.skdr-show-sec {
	padding: var(--skdr-section-inner) 0;
}

.skdr-show .skdr-show-h2 {
	margin: 0 0 var(--skdr-sp-24);
	padding: 0;
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-h2);
	line-height: var(--skdr-lh-h2);
	font-weight: var(--skdr-fw-bold);
}

/* "5 more" lands here and moves focus with it; the heading needs no ring */
.skdr-show .skdr-show-h2:focus {
	outline: none;
}

/* About the show: the description in full (no "Read more", §17c), then Share (§18k) */
.skdr-show .skdr-show-desc {
	max-width: 700px;
	margin: 0;
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-body-l);
	line-height: var(--skdr-lh-body-l);
}

.skdr-show .skdr-show-desc + .skdr-show-desc {
	margin-top: var(--skdr-sp-12);
}

/* DA's rich text (#786): paragraphs, lists, h2/h3 and links, spaced as the plain paragraphs are */
.skdr-show .skdr-show-desc--rich > * {
	margin: 0;
	padding: 0;
}

.skdr-show .skdr-show-desc--rich > * + * {
	margin-top: var(--skdr-sp-12);
}

.skdr-show .skdr-show-desc--rich :is(ul, ol) {
	padding-left: var(--skdr-sp-24);
}

.skdr-show .skdr-show-desc--rich :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-show .skdr-show-desc a {
	border-radius: 2px;
	color: var(--skdr-dark);
}

.skdr-show .skdr-show-desc a:hover {
	color: var(--skdr-red);
}

.skdr-show .skdr-show-share {
	margin-top: var(--skdr-sp-24);
}

/* ---------------------------------------------------------------- Presenters (§18c): every presenter the same tile */

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

.skdr-show .skdr-show-people li,
.skdr-show .skdr-show-rail li,
.skdr-show .skdr-show-stories li {
	margin: 0;
	padding: 0;
}

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

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

img.skdr-show-person__img,
img.skdr-show-tile__img {
	display: block;
	height: auto;
	object-fit: cover;
}

.skdr-show .skdr-show-person__n {
	display: block;
	margin-top: var(--skdr-sp-12);
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-body);
	line-height: 24px;
	font-weight: var(--skdr-fw-semibold);
}

.skdr-show a.skdr-show-person .skdr-show-person__n {
	color: var(--skdr-dark);
}

.skdr-show a.skdr-show-person:hover .skdr-show-person__n {
	color: var(--skdr-red);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- Listen again: the schedule's past rows (§18l) */

.skdr-show .skdr-show-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--skdr-tap);
	margin-top: var(--skdr-sp-8);
	border-radius: 2px;
	color: var(--skdr-dark);
	font-size: var(--skdr-fs-small);
	line-height: var(--skdr-lh-small);
	font-weight: var(--skdr-fw-semibold);
	text-decoration: none;
}

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

/* No listen-again page yet: the same quiet "coming soon" as the rows' pills, not a link */
.skdr-show .skdr-show-more--soon {
	margin-bottom: 0;
	color: var(--skdr-muted);
}

.skdr-show .skdr-show-more--soon .skdr-show-more__soon {
	color: var(--skdr-muted);
	font-weight: var(--skdr-fw-regular);
}

/* ---------------------------------------------------------------- From the show + the slim app strip (App-Desktop §13a) */

.skdr-show .skdr-show-stories {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--skdr-sp-24);
	margin: 0;
	padding: 0;
	list-style: none;
}

.skdr-show .skdr-show-stories li {
	display: flex;
}

.skdr-show-app {
	margin-top: var(--skdr-section-inner);
}

.skdr-show-app:first-child {
	margin-top: 0;
}

.skdr-app-strip {
	display: flex;
	align-items: center;
	gap: var(--skdr-sp-16);
	min-height: 72px;
	padding: 0 var(--skdr-sp-16);
	overflow: hidden;
	border-radius: var(--skdr-r-card);
	background: var(--skdr-white);
	box-shadow: var(--skdr-shadow-ring);
}

.skdr-app-strip__icon {
	display: block;
	flex: none;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 9px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.skdr-app-strip__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.skdr-show .skdr-app-strip__title {
	flex: 1;
	min-width: 0;
	margin: 0;
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-body);
	line-height: 24px;
	font-weight: var(--skdr-fw-bold);
}

.skdr-app-strip .skdr-app-badges {
	flex-wrap: nowrap;
}

/* ---------------------------------------------------------------- More shows: 1:1 tiles, names in Dark Red, no times */

.skdr-show .skdr-show-rail {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--skdr-sp-24);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

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

.skdr-show .skdr-show-tile__n {
	display: block;
	margin-top: var(--skdr-sp-12);
	color: var(--skdr-dark);
	font-size: var(--skdr-fs-body);
	line-height: 24px;
	font-weight: var(--skdr-fw-semibold);
}

.skdr-show .skdr-show-tile:hover .skdr-show-tile__n {
	color: var(--skdr-red);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- "Link copied" (§18k), announced by its live region */

.skdr-show .skdr-show-toast {
	position: fixed;
	bottom: var(--skdr-sp-24);
	left: 50%;
	z-index: 20;
	margin: 0;
	padding: 10px var(--skdr-sp-16);
	border-radius: var(--skdr-r-pill);
	background: var(--skdr-ink);
	color: var(--skdr-white);
	font-size: var(--skdr-fs-small);
	line-height: var(--skdr-lh-small);
	font-weight: var(--skdr-fw-semibold);
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%);
	transition: opacity var(--skdr-hover-fade) ease;
}

.skdr-show .skdr-show-toast[data-on] {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.skdr-show .skdr-show-toast {
		transition: none;
	}
}

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

@media (max-width: 640px) {
	.skdr-app-strip {
		flex-wrap: wrap;
		padding: var(--skdr-sp-16);
	}

	.skdr-show .skdr-app-strip__title {
		flex: 1 1 200px;
	}

	.skdr-app-strip .skdr-app-badges {
		flex-wrap: wrap;
	}
}

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

@media (max-width: 760px) {
	.skdr-show__in {
		padding: 0 var(--skdr-gutter-phone);
	}

	.skdr-show-top {
		padding-top: var(--skdr-sp-16);
	}

	/* The text, then the 240 × 135 cut-out on the right, standing on the line */
	.skdr-show-top__row {
		flex-direction: column;
		gap: var(--skdr-sp-16);
	}

	.skdr-show-top__col {
		padding-bottom: 0;
	}

	.skdr-show-top .skdr-page-head .skdr-page-title {
		margin-top: var(--skdr-sp-8);
		font-size: var(--skdr-fs-title-phone);
		line-height: 38px;
	}

	.skdr-show .skdr-show-top__by {
		margin-top: var(--skdr-sp-8);
		font-size: var(--skdr-fs-body);
		line-height: 24px;
	}

	.skdr-show .skdr-show-top__cut {
		width: 240px;
	}

	.skdr-show-sec {
		padding: var(--skdr-sp-40) 0;
	}

	.skdr-show .skdr-show-h2 {
		font-size: var(--skdr-fs-h2-phone);
		line-height: var(--skdr-lh-h2-phone);
	}

	.skdr-show .skdr-show-desc {
		font-size: var(--skdr-fs-body);
		line-height: var(--skdr-lh-body);
	}

	.skdr-show .skdr-show-people {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px var(--skdr-sp-12);
	}

	.skdr-show .skdr-show-person__n {
		margin-top: var(--skdr-sp-8);
		font-size: var(--skdr-fs-small);
		line-height: 20px;
	}

	/* Stories as compact rows: the image left, chip and title right (.skdr-m-story) */
	.skdr-show .skdr-show-stories {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--skdr-sp-12);
	}

	.skdr-show-stories .skdr-home-story {
		flex-direction: row;
		align-items: center;
		gap: var(--skdr-sp-12);
		padding: var(--skdr-sp-12);
	}

	.skdr-show-stories .skdr-home-story__img,
	.skdr-show-stories .skdr-home-story .skdr-ph {
		flex: none;
		width: 112px;
		height: 84px;
		aspect-ratio: auto;
		border-radius: var(--skdr-r-chip);
	}

	.skdr-show-stories .skdr-home-story__body {
		padding: 0;
	}

	.skdr-show-stories .skdr-home-story__t {
		min-height: 0;
		margin-top: 6px;
		font-size: 15px;
		line-height: 22px;
	}

	/* More shows scroll sideways in 140px tiles, edge to edge */
	.skdr-show .skdr-show-rail {
		display: flex;
		gap: var(--skdr-sp-12);
		margin: 0 calc(-1 * var(--skdr-gutter-phone));
		padding: 0 var(--skdr-gutter-phone) 4px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.skdr-show-rail::-webkit-scrollbar {
		display: none;
	}

	.skdr-show .skdr-show-rail li {
		flex: none;
		width: 140px;
		scroll-snap-align: start;
	}

	.skdr-show .skdr-show-tile__n {
		margin-top: var(--skdr-sp-8);
		line-height: 22px;
	}
}