/*
 * Pieces that appear on more than one screen.
 *
 * A component that belongs to exactly one screen lives in that screen's
 * stylesheet instead.
 */

/* =========================================================
   Episode card
   ========================================================= */

.card { display: flex; flex-direction: column; color: var(--text); }

.card__img {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: var(--ratio-episode);
	overflow: hidden;
	background: var(--c-blue);
	color: var(--c-sky);
	font-size: 15px;
}

.card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.card:hover .card__img img { transform: scale(1.04); }

/*
 * The orange Play circle on an episode thumbnail, shared by the season cards
 * (.card__img) and the home cards (.k-ep-card__media). Same circle as the
 * episode player's button, smaller. It is decoration: the thumbnail is
 * already a link to the episode, which is where the player is.
 */
.card__img,
.k-ep-card__media { position: relative; }

.play-badge {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--text-invert);
	box-shadow: var(--shadow-play);
	pointer-events: none;
	transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}

/* The point of the triangle leads, so its box is nudged toward the point (right in RTL)
 * to look centred in the circle. The old inline-start margin pushed it the other way. */
.play-badge svg { display: block; width: auto; height: 38%; translate: 6% 0; }

.card:hover .play-badge,
.k-ep-card:hover .play-badge,
.k-ep-card:focus-within .play-badge { transform: scale(1.1); }

.card__meta {
	display: flex;
	justify-content: space-between;
	margin-top: 18px;
	font-size: var(--fs-meta);
}

.card__meta span:first-child { color: var(--accent); }

.card__title {
	margin: 4px 0 0;
	font-size: 22px;
	font-weight: var(--w-ultrabold);
	transition: color var(--dur-fast) var(--ease);
}

.card:hover .card__title { color: var(--accent); }

.card__text { margin-top: 4px; font-size: 17px; line-height: 1.4; }

.cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg) 30px;
	margin-top: 28px;
}

/* =========================================================
   Article card, used by the toolbox and the episode page
   ========================================================= */

.acard { display: flex; flex-direction: column; color: var(--text); }

.acard__media {
	position: relative;
	display: block;
	aspect-ratio: var(--ratio-article);
	overflow: hidden;
	background: var(--surface);
}

.acard__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s cubic-bezier(.16, 1, .3, 1);
}

.acard:hover .acard__media img { transform: scale(1.06); }

.acard__title {
	margin: 23px 0 0;
	font-size: var(--fs-card-title);
	font-weight: var(--w-bold);
	line-height: 1.45;
	transition: color var(--dur-fast) var(--ease);
}

.acard:hover .acard__title { color: var(--accent); }

.acard__desc { margin-top: 5px; font-size: var(--fs-body); line-height: 1.36; }

.acard__more {
	margin-top: 14px;
	align-self: flex-start;
	font-size: var(--fs-body);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	transition: color var(--dur-fast) var(--ease);
}

.acard__more:hover, .acard:hover .acard__more { color: var(--text); }

.acards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg) 30px;
	margin-top: var(--space-md);
}

/* =========================================================
   Download item
   =========================================================
   No card, no border. An orange document mark, the file name, and an
   underlined "להורדה" beneath it.
   ========================================================= */

.dls {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px 30px;
	margin-top: var(--space-md);
}

.acards + .dls { grid-template-columns: 1fr 1fr; margin-top: 48px; }

.dl { display: flex; align-items: flex-start; gap: var(--space-sm); color: var(--text); }

.dl__icon { flex: none; width: 44px; height: 44px; margin-top: 2px; color: var(--accent); }

.dl__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

.dl__name {
	font-size: var(--fs-card-title);
	font-weight: var(--w-bold);
	line-height: 1.45;
	transition: color var(--dur-fast) var(--ease);
}

.dl:hover .dl__name { color: var(--accent); }

/* The link keeps its colour. Only the name reacts, so the two do not
 * compete for the same hover. */
.dl__link {
	margin-top: 4px;
	font-size: var(--fs-body);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

/* =========================================================
   Accordion, shared by the transcript and the questions
   ========================================================= */

.acc > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	font-weight: var(--w-bold);
	cursor: pointer;
	list-style: none;
}

.acc > summary::-webkit-details-marker { display: none; }

/* A plus that loses its upright stroke when the panel opens. */
.acc__sign { position: relative; flex: none; width: 26px; height: 26px; }

.acc__sign::before,
.acc__sign::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 18px;
	height: 4px;
	border-radius: 1px;
	background: var(--accent);
	transition: transform var(--dur-fast) var(--ease);
}

.acc__sign::after { transform: rotate(90deg); }
.acc[open] > summary .acc__sign::after { transform: rotate(0); }

/* =========================================================
   Icon buttons: listen, and share
   ========================================================= */

/*
 * Listen and share. A column in the desktop rail, and the stylesheet for a
 * narrow screen turns it into one row. Without the display here the media
 * query's flex-direction has nothing to act on and the two groups stack.
 */
.actions { display: flex; flex-direction: column; gap: 26px; }

.label { margin: 0; font-size: 15px; font-weight: var(--w-bold); }

.icon-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.ibtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease),
	            color var(--dur-fast) var(--ease),
	            box-shadow var(--dur-fast) var(--ease);
}

.ibtn svg { width: 24px; height: 24px; }

/*
 * The platform marks are a solid glyph with their detail punched out in the
 * colour behind them, so that colour has to follow the button rather than
 * being baked into the file. Miss this and the Spotify bars stay navy on an
 * orange button.
 */
.ibtn--listen {
	width: var(--icon-btn);
	height: var(--icon-btn);
	background: var(--c-blue);
	color: var(--text-invert);
	--icon-punch: var(--c-blue);
}

.ibtn--listen:hover {
	background: var(--accent);
	color: var(--text-invert);
	--icon-punch: var(--accent);
}

.ibtn--share {
	width: var(--share-btn);
	height: var(--share-btn);
	border-radius: 50%;
	background: var(--page);
	color: var(--text);
	box-shadow: inset 0 0 0 1px var(--rule);
}

.ibtn--share:hover { background: var(--c-blue); color: var(--text-invert); box-shadow: none; }

/* Only offered where the device actually has a share sheet. */
.ibtn--native { display: none; }
.has-share .ibtn--native { display: inline-flex; }

/* Tooltips are a pointer affordance. A touch device gets the aria-label. */
@media (hover: hover) {
	[data-tip]::after {
		content: attr(data-tip);
		position: absolute;
		bottom: calc(100% + 10px);
		left: 50%;
		z-index: 5;
		transform: translate(-50%, 4px);
		padding: 6px 10px;
		background: var(--c-blue);
		color: var(--text-invert);
		font-size: 14px;
		font-weight: var(--w-demibold);
		white-space: nowrap;
		opacity: 0;
		pointer-events: none;
		transition: opacity .15s var(--ease), transform .15s var(--ease);
	}

	[data-tip]:hover::after,
	[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
}

/* =========================================================
   Sponsor banners
   ========================================================= */

.sponsors { display: flex; flex-direction: column; gap: 14px; }
.sponsors__grid { display: flex; flex-direction: column; gap: 14px; }

.banner {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: var(--ratio-banner);
	background: var(--surface);
	color: var(--text-soft);
	font-size: 15px;
}

.banner img { width: 100%; height: 100%; object-fit: contain; }

/* =========================================================
   Section heads
   ========================================================= */

.sh { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }

.sh__all {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 4px;
	font-size: 17px;
	font-weight: var(--w-bold);
}

.sh__all svg { width: 18px; height: 18px; color: var(--accent); transition: transform var(--dur-fast) var(--ease); }
.sh__all:hover svg { transform: translateX(-5px); }

/* =========================================================
   Toast
   ========================================================= */

.toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	z-index: 70;
	transform: translate(-50%, 20px);
	padding: 12px 18px;
	background: var(--c-blue);
	color: var(--text-invert);
	font-size: var(--fs-meta);
	font-weight: var(--w-demibold);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* =========================================================
   Narrow screens
   ========================================================= */

@media (max-width: 1023px) {
	.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cards .card:nth-child(3) { display: none; }
	.dls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sponsors__grid { display: grid; grid-template-columns: 1fr 1fr; }
	.banner { aspect-ratio: 400 / 180; }
}

@media (max-width: 767px) {
	.cards { grid-template-columns: 1fr; }
	.cards .card:nth-child(3) { display: flex; }
	.acards, .acards + .dls, .dls { grid-template-columns: 1fr; }
	.sponsors__grid { grid-template-columns: 1fr; }
	.ibtn--listen { width: 44px; height: 44px; }
	.ibtn--share { width: 42px; height: 42px; }
	.ibtn svg { width: 20px; height: 20px; }
}

/* The same hover as the episode player: a navy veil that lifts, and a gentle zoom. */
.card__img::after,
.k-ep-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 36 71 / .32);
	pointer-events: none;
	transition: background .3s var(--ease);
}

.card:hover .card__img::after,
.k-ep-card:hover .k-ep-card__media::after,
.k-ep-card:focus-within .k-ep-card__media::after { background: rgb(0 36 71 / .15); }

.card__img img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }

/* ---- Content pages: entrance motion --------------------------------
   assets/js/motion-content.js owns the timelines. The header and the hero
   text are hidden before the first paint so the intro can reveal them, and
   the reveal is the class k-motion-shown, never a GSAP inline style. If the
   script never arrives, the head script drops .k-motion and nothing stays
   hidden. The home page has its own rule in home.css.
   ------------------------------------------------------------------- */
.k-motion:not( .k-motion-shown ) .site-header,
.k-motion:not( .k-motion-shown ) .page-hero__text,
.k-motion:not( .k-motion-shown ) .page-hero__img,
.k-motion:not( .k-motion-shown ) :is( .crumbs, .ep-head, .actions, .sbar, .a__intro ) { visibility: hidden; }

/* Reading progress: a thin orange line under the sticky header (episode, tool article). */
.site-header .read-progress {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 3px;
	background: var(--c-orange);
	transform: scaleX( 0 );
	transform-origin: 100% 50%;
	pointer-events: none;
}