/*
 * The episode page.
 *
 * Two columns on desktop. Below 1024 it becomes one column in the order the
 * spec gives: player, listen and share, title, content, sponsors. That
 * reordering is why the grid children are released with display:contents
 * rather than being moved in the markup.
 */

.ep {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--aside);
	gap: 56px;
	align-items: start;
	padding-top: var(--space-md);
}

.ep__main { min-width: 0; }

.ep__aside {
	position: sticky;
	top: calc(var(--header-h) + var(--space-sm));
	display: flex;
	flex-direction: column;
	gap: 36px;
}

/* =========================================================
   Player
   =========================================================
   The poster is a button, and the iframe only replaces it once the visitor
   presses play. Nothing from YouTube loads before that.
   ========================================================= */

.player { position: relative; margin-top: var(--space-sm); }

.player__screen {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	background: var(--c-blue);
	overflow: hidden;
	cursor: pointer;
}

.player__media { position: absolute; inset: 0; overflow: hidden; transition: scale .8s cubic-bezier(.2, .7, .2, 1); }

.player__screen:hover .player__media { scale: 1.04; }

.player__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* A navy veil that lifts on hover, so the orange button stays legible over
 * any thumbnail. */
.player__screen::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 36 71 / .32);
	transition: background .3s var(--ease);
}

.player__screen:hover::after { background: rgb(0 36 71 / .15); }

.player__play {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--text-invert);
	box-shadow: var(--shadow-play);
}

.player__frame-video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* =========================================================
   Title
   ========================================================= */

.ep-head { margin-top: 32px; }

.ep-title {
	margin: 0;
	font-size: clamp(34px, 3.4vw, 56px);
	font-weight: var(--w-ultrabold);
	line-height: 1.1;
}

/* The meta line is running text with separators, not tags. */
.ep .meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 10px;
	font-size: var(--fs-body);
	font-weight: var(--w-demibold);
}

/* =========================================================
   Sections
   =========================================================
   Capped at 820px so a line of Hebrew stays comfortable even when the
   column is wider.
   ========================================================= */

.sec { margin-top: 52px; max-width: 820px; }

/*
 * The opening section runs a size larger than the body, as the design does.
 * The text comes from a rich text field, so these are plain paragraphs and
 * cannot carry a class of their own.
 */
.lead,
.sec--about p { margin-top: 14px; font-size: 19px; line-height: var(--lh-body); }

.lead + .lead,
.sec--about p + p { margin-top: 12px; }

/*
 * "מה יש בפרק" is six numbered paragraphs, not six short bullets: the real
 * copy runs to about 130 characters each. The number is held in its own
 * column so the text block stays aligned when an item wraps to three lines.
 */
.topics {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-body);
	line-height: 1.5;
}

.topics li { display: flex; gap: 14px; }

.topics b {
	flex: none;
	min-width: 28px;
	color: var(--accent);
	font-weight: var(--w-ultrabold);
	font-variant-numeric: tabular-nums;
}

/* ---- Transcript ----------------------------------------------------- */

.transcript { margin-top: var(--space-lg); }
.transcript > summary { justify-content: flex-start; gap: 14px; padding: 22px 0; font-size: 21px; }

.transcript__body {
	max-height: 280px;
	padding-bottom: 12px;
	overflow: auto;
	font-size: 17px;
	line-height: 1.75;
	color: var(--text-soft);
	overscroll-behavior: contain;
}

/* ---- Questions ------------------------------------------------------ */

.faq { margin-top: 12px; }
.faq .acc { border-bottom: 1px solid var(--rule); }
.faq > .acc > summary { padding: 20px 0; font-size: 19px; }
.faq .acc p { padding-bottom: 20px; font-size: 17px; line-height: 1.65; color: var(--text-soft); }

/* ---- Links from the episode ----------------------------------------- */

.links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-body);
}

/* An inset shadow rather than an underline, so the rule clears descenders. */
.links a { box-shadow: inset 0 -1px 0 currentColor; }
.links a:hover { color: var(--accent); }
.links svg { width: 14px; height: 14px; vertical-align: -1px; margin-inline-start: 4px; }

/* =========================================================
   Featured asset
   =========================================================
   The one place the navy slant appears on this page, behind the graphic.
   ========================================================= */

.feature { position: relative; margin-top: 56px; background: var(--surface); overflow: hidden; }

.feature__navy {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 38%;
	background: var(--c-blue);
	clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}

.feature__in {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px var(--space-lg);
	padding: 48px var(--space-lg);
}

.feature__text { flex: 1 1 280px; min-width: 0; }
.feature__title { margin: 0; font-size: 32px; font-weight: var(--w-ultrabold); line-height: 1.15; }
.feature__desc { margin-top: 14px; font-size: var(--fs-body); line-height: 1.55; color: var(--text-soft); }
.feature .btn { margin-top: 26px; padding-inline: 30px; }
.feature__visual { flex: 1 1 240px; min-width: 0; }

.feature__slot {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: var(--page);
	box-shadow: var(--shadow-float);
	color: var(--text-soft);
	font-size: 15px;
}

.feature__slot img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   Previous and next
   ========================================================= */

.pn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-xl); }
.pn a { display: flex; align-items: center; gap: 22px; padding: var(--space-md) 0; }
.pn a:last-child { justify-content: flex-end; text-align: left; }
.pn__arrow { flex: none; width: 24px; height: 24px; color: var(--accent); transform: scaleX(-1); }
.pn__arrow--next { transform: none; }
.pn__small { display: block; font-size: var(--fs-meta); color: var(--text-soft); }
.pn__big { display: block; margin-top: 4px; font-size: 24px; font-weight: var(--w-ultrabold); }
.pn a:hover .pn__big { color: var(--accent); }

/* =========================================================
   More from the same stage
   ========================================================= */

.stage { margin-top: 88px; }

/* =========================================================
   Below 1024: one column, in the spec's order
   ========================================================= */

@media (max-width: 1279px) {
	.ep { grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-lg); }
}

@media (max-width: 1023px) {
	.ep { display: flex; flex-direction: column; gap: 0; }
	.ep__main, .ep__aside { display: contents; }

	.player   { order: 1; width: 100%; }
	.actions  { order: 2; margin-top: var(--space-md); flex-direction: row; flex-wrap: wrap; gap: 20px var(--space-lg); align-items: flex-end; }
	.ep-head  { order: 3; margin-top: 28px; }
	.ep-body  { order: 4; width: 100%; }
	.sponsors { order: 5; margin-top: 56px; width: 100%; }

	.actions .icon-row { margin-top: 10px; }
	.sec { max-width: none; }
}

@media (max-width: 767px) {
	.player { margin-top: 10px; }
	.player__play { width: 60px; height: 60px; }
	.ep-title { font-size: 32px; }
	.ep .meta { font-size: var(--fs-meta); margin-bottom: 6px; }

	/* The about section climbs above listen and share on a phone, so the
	 * first thing after the title is still a sentence about the episode. */
	.ep-body { display: contents; }
	.ep-body > * { order: 6; width: 100%; }
	.ep-body > .sec--about { order: 4; }
	.actions { order: 5; margin-top: 32px; flex-wrap: nowrap; gap: var(--space-sm); justify-content: space-between; }
	.actions .icon-row { gap: 8px; flex-wrap: nowrap; }
	.sponsors { order: 7; }

	.sec { margin-top: var(--space-lg); }
	.lead { font-size: var(--fs-body); }
	.topics { font-size: 17px; }

	.feature { margin-top: 44px; }
	.feature__navy { width: 100%; height: 46%; top: auto; clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 100%); }
	.feature__in { padding: 32px 20px; }
	.feature__title { font-size: 26px; }

	.pn { grid-template-columns: 1fr; gap: 0; margin-top: 44px; }
	.pn a { padding: 18px 0; }
	.pn a:last-child { justify-content: space-between; text-align: right; }
	.pn__big { font-size: var(--fs-card-title); }
}

/* =========================================================
   Article page (single-tool.php)
   ========================================================= */

/* The cover is half the column width. */
.ep--article .article__cover { width: 50%; margin: 0 0 var(--space-sm); }
.ep--article .article__cover img { display: block; width: 100%; height: auto; }

/*
 * Share links: the glyphs alone, no circle. Blue at rest and orange on
 * hover and keyboard focus. The icons draw in currentColor, so colour on
 * the control is all it takes.
 */
.ep--article .ibtn--share {
	width: auto;
	height: auto;
	padding: 4px;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--c-blue);
}

.ep--article .ibtn--share:hover,
.ep--article .ibtn--share:focus-visible {
	background: none;
	box-shadow: none;
	color: var(--c-orange);
}

@media (max-width: 767px) {
	.ep--article .article__cover { width: 100%; }
	.ep--article .ibtn--share { width: auto; height: auto; }
}

/* =========================================================
   Full transcript: its own page, scrolling inside its own frame
   ========================================================= */

.transcript-link { margin: var(--space-lg) 0 0; }

.tr { padding-block: var(--space-lg); }

.tr__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

.tr__title { margin: 0; font-size: clamp(24px, 2.4vw, 36px); font-weight: var(--w-ultrabold); line-height: 1.2; }

.tr__close {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 2px solid var(--c-blue);
	color: var(--c-blue);
	font-weight: var(--w-bold);
}

.tr__close:hover { background: var(--c-blue); color: var(--text-invert); }

.tr__scroll {
	max-height: 70vh;
	padding: var(--space-md);
	overflow-y: auto;
	border: 1px solid var(--c-sky);
	font-size: 18px;
	line-height: 1.8;
}

/* The triangle sits inside the circle, not across it, and is nudged toward
 * its point so it looks centred (a triangle's centre of mass is not its box). */
.player__play svg {
	display: block;
	width: auto;
	height: 40%;
	translate: 6% 0;
}