/*
 * The season page.
 *
 * A navy bar with the season switcher, an intro, a filter row, and the grid.
 * Search and sort were added to the spec on 05.10.2026, after the design
 * file was drawn, so they are built here in the same language: the same
 * chip height, the same navy, no borders.
 */

.a { padding-top: var(--space-md); }

/* =========================================================
   Season switcher
   ========================================================= */

.sbar {
	--sbar-h: 72px;
	--sbar-pad: 30px;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	min-height: var(--sbar-h);
	padding: 0 var(--sbar-pad);
	background: var(--c-blue);
	color: var(--text-invert);
}

/* The control is a <details>, so the list it opens hangs off it. Stretched to
 * the bar's full height, so the list can simply sit at its bottom edge rather
 * than reach it with a number that has to be kept in step with the bar. */
.sbar__nav {
	position: relative;
	display: flex;
	align-self: stretch;
	align-items: center;
}

.sbar__btn {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: var(--w-bold);
	font-size: clamp(20px, 1.56vw, 28px);
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
}

/* A <summary> carries a disclosure triangle of its own in both engines. The
 * design has its own caret, so both defaults go. */
.sbar__btn::-webkit-details-marker { display: none; }
.sbar__btn::marker { content: ""; }

/* The podcast and the season are one name with a mark between them. */
.sbar__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* 13 by 7: a wide, flat triangle, as drawn. A square box would letterbox it. */
.sbar__caret {
	display: block;
	width: 13px;
	height: 7px;
	margin-inline-start: 6px;
	color: var(--accent);
	transition: transform var(--dur-fast) var(--ease);
}

.sbar__caret svg { display: block; width: 100%; height: 100%; }

[open] > .sbar__btn .sbar__caret { transform: rotate(180deg); }


/*
 * Search, on the left of the bar. The icon opens a field in place; the field
 * grows out of it and the episode count steps aside. Without JavaScript the
 * field is simply open (the .js class is added by main.js).
 */
.sbar__right { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }

.sbar__search-btn {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--text-invert);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.sbar__search-btn:hover { background: rgba(255, 255, 255, .14); }
.sbar__search-btn svg { width: 18px; height: 18px; }
.sbar.is-searching .sbar__search-btn { color: var(--accent); }

.sbar__search {
	display: flex;
	flex: 0;
	align-items: center;
	gap: 10px;
	width: 0;
	min-width: 0;
	overflow: hidden;
	transition: width .3s var(--ease);
}

.sbar.is-searching .sbar__search { flex: 1 1 0; width: auto; max-width: 360px; }

.sbar__search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 36px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .4);
	border-radius: 0;
	background: none;
	color: var(--text-invert);
	font: inherit;
	font-size: 17px;
	appearance: none;
}

.sbar__search input::placeholder { color: var(--c-sky); }
.sbar__search input:focus { outline: 0; border-bottom-color: var(--accent); }
.sbar__search input::-webkit-search-cancel-button { display: none; }

.sbar__search-close {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0;
	background: none;
	color: var(--c-sky);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.sbar__search-close:hover { color: var(--text-invert); }

/* No script: the field is open, there is nothing to toggle or close. */
html:not(.js) .sbar__search-btn,
html:not(.js) .sbar__search-close { display: none; }
html:not(.js) .sbar__search { flex: 1 1 0; width: auto; max-width: 360px; }

/* Where in the transcript the words were said. Only a transcript match has one. */
.card__hit {
	margin: 10px 0 0;
	padding-inline-start: 12px;
	border-inline-start: 3px solid var(--accent);
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-soft);
}

.card__hit[hidden] { display: none; }

/*
 * The open list, drawn as the home page's picker is drawn in the design file.
 * `03-season_1.html` only ever shows this control closed, so the one place the
 * design states what the open menu looks like is `01-home_1.html`: a navy
 * panel the width of a season name plus its count, a check on the row you are
 * on, and an orange edge down the right of the highlighted row.
 *
 * There it is the glide-select script that moves that highlight from row to
 * row. Here the rows are plain links inside a <details>, so the highlight is
 * the hover and current state instead. Same picture, and the picker still
 * opens, moves and navigates with JavaScript off.
 */
.sbar__list {
	position: absolute;
	/* Hangs off the bar's bottom edge, and opens out of the bar's own padding:
	 * in RTL the start side is the right one, which is where it is drawn. */
	top: 100%;
	inset-inline-start: calc(-1 * var(--sbar-pad));
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 280px;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--c-blue);
	box-shadow: 0 18px 40px rgb(15 37 70 / 28%);
	transform-origin: top right; /* RTL start: it opens out of the button */
	animation: sbar-pop var(--dur-fast) cubic-bezier(.2, .9, .3, 1.15) both;
}

@keyframes sbar-pop {
	from { opacity: 0; transform: translateY(-6px) scale(.96); }
}

.sbar__opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 46px;
	padding: 0 22px;
	color: var(--text-invert);
	font-weight: var(--w-bold);
	font-size: 20px;
	white-space: nowrap;
	transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.sbar__opt-name { flex: 1; }

.sbar__opt-tag {
	font-weight: var(--w-regular);
	font-size: 14px;
	opacity: .6;
}

/* Kept in the row at every state so the names stay on one line. */
.sbar__opt-check {
	display: grid;
	place-items: center;
	width: 16px;
	color: var(--accent);
	opacity: 0;
	transform: scale(.4);
	transition: opacity .2s, transform .25s cubic-bezier(.3, 1.5, .5, 1);
}

.sbar__opt-check svg { display: block; width: 14px; height: 14px; }

.sbar__opt[aria-current] { color: var(--accent); }
.sbar__opt[aria-current] .sbar__opt-tag { color: var(--text-invert); }
.sbar__opt[aria-current] .sbar__opt-check { opacity: 1; transform: none; }

/* The highlight: a tenth of white with an orange edge on the reading side. */
.sbar__opt:hover,
.sbar__opt:focus-visible,
.sbar__opt[aria-current] {
	background: rgb(255 255 255 / 10%);
	box-shadow: inset -3px 0 0 var(--accent);
}

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

/* =========================================================
   Intro
   ========================================================= */

.a__intro { display: flex; align-items: flex-start; gap: 56px; margin-top: var(--space-md); }
.a__text { flex: 1 1 0; min-width: 0; }

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

.a__text .lead { margin-top: var(--space-sm); font-size: 19px; line-height: var(--lh-body); max-width: 640px; }

.a__text .meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--fs-body); font-weight: var(--w-demibold); }

.a__img {
	flex: 0 0 min(32%, 400px);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--surface);
}

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

/* =========================================================
   Chips and sort, in one row
   ========================================================= */

.a__filters { margin-top: 56px; }

.chips-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.sort-btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 2px;
	color: var(--c-slate, var(--text-soft));
	font-size: 16px;
	font-weight: var(--w-demibold);
	white-space: nowrap;
}

.sort-btn:hover { color: var(--accent); }
.sort-btn svg { width: 16px; height: 16px; flex: none; transition: transform var(--dur-fast) var(--ease); }
.sort-btn.is-reversed svg { transform: scaleY(-1); }

/* ---- Chips ---------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; flex: 1; min-width: 0; gap: 10px; }

.chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 77px;
	height: 36px;
	padding: 0 14px;
	border: 0;
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: 17px;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.chip:hover { background: #E3E3E3; color: var(--text); }
.chip[aria-pressed="true"], .chip[aria-current] { background: var(--c-blue); color: var(--text-invert); }

.chip--s { min-width: 0; height: 28px; padding: 0 10px; font-size: 15px; }

.card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

/* =========================================================
   Grid
   ========================================================= */

.grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 30px;
	margin-top: 32px;
}

.grid .card[hidden] { display: none; }

.a__empty { margin-top: var(--space-lg); font-size: 19px; color: var(--text-soft); }
.a__empty[hidden] { display: none; }

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

@media (max-width: 1023px) {
	.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.a__intro { flex-direction: column; align-items: stretch; gap: 28px; }
	.a__img { flex: none; width: 100%; max-width: 420px; }
}

@media (max-width: 767px) {
	.sbar { --sbar-h: 60px; --sbar-pad: 18px; }
	.sbar.is-searching .sbar__btn { font-size: 15px; }
	.sbar.is-searching .sbar__brand { display: none; }
	.sbar.is-searching .sbar__search { max-width: none; }
	.sbar__right { gap: 2px; }
	.sbar__search { gap: 4px; }
	.sbar__search-btn { width: 32px; height: 32px; }
	.sbar__search-close { width: 28px; height: 28px; }


	.a__text .title { font-size: 32px; }
	.a__text .lead { font-size: var(--fs-body); }
	.grid { grid-template-columns: 1fr; gap: var(--space-lg); }
	.a__filters { margin-top: 32px; }

	/* A chip that does not fit the row goes under the previous one, whole,
	 * and never runs off the edge of the screen. */
	.chips { flex-wrap: wrap; }
	.chip { flex: none; max-width: 100%; white-space: normal; height: auto; min-height: 30px; padding-block: 4px; }

	.chips-row { gap: 14px; }
	.chips { flex-basis: 100%; }
	.sort-btn { margin-inline-start: auto; }

}

div.sbar__nav > .sbar__btn { cursor: default; }

/* The bar now follows the intro, so it needs air above it. */
.a .sbar { margin-top: var(--space-xl); }