/*
 * Lumel Skills Hub — front-end shortcodes.
 *
 * Every colour and radius is a custom property, so a page (or Oxygen's global CSS) can
 * re-theme the components without overriding selectors, e.g.
 *   .lsh-episodes { --lsh-accent: #0f7b6c; }
 * Fonts are inherited from the page.
 */

.lsh-breadcrumbs,
.lsh-episodes,
.lsh-episode-nav,
.lsh-season-card,
.lsh-player,
.lsh-placeholder,
.lsh-hub,
.lsh-modules,
.lsh-season-menu,
.lsh-season-panels,
.lsh-guide {
	--lsh-text: #1a2227;
	--lsh-text-soft: #4d5a61;
	--lsh-muted: #6f7c83;
	--lsh-faint: #9aa5ab;
	--lsh-border: #e2e7ea;
	--lsh-border-strong: #c9d1d6;
	--lsh-surface: #ffffff;
	--lsh-accent: #4fae92;
	--lsh-accent-hover: #3f9a7f;
	--lsh-accent-strong: #2b6e5c;
	--lsh-accent-link: #2e8a73;
	--lsh-accent-soft: #e7f5f0;
	--lsh-radius: 14px;
	--lsh-radius-sm: 8px;
	--lsh-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	--lsh-amber-soft: #fcf1dc;
	--lsh-amber-border: #edd29c;
	--lsh-amber-text: #8a5a12;
	--lsh-amber-icon: #b7791f;
	--lsh-band: linear-gradient(100deg, #e1f4ef 0%, #b9e5d9 55%, #7ecfba 100%);
	box-sizing: border-box;
	color: var(--lsh-text);
}

.lsh-breadcrumbs *,
.lsh-episodes *,
.lsh-episode-nav *,
.lsh-season-card *,
.lsh-hub *,
.lsh-modules *,
.lsh-season-menu *,
.lsh-season-panels *,
.lsh-guide * {
	box-sizing: border-box;
}

.lsh-icon {
	display: inline-block;
	flex: none;
	vertical-align: middle;
}

.lsh-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.lsh-placeholder {
	padding: 12px 16px;
	border: 1px dashed var(--lsh-border-strong);
	border-radius: var(--lsh-radius-sm);
	color: var(--lsh-muted);
	font-size: 13px;
}

/* ---------------------------------------------------------------------------
 * [lsh_breadcrumbs]
 * ------------------------------------------------------------------------ */

.lsh-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.4;
}

.lsh-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	color: var(--lsh-text-soft);
}

.lsh-breadcrumbs__item::before,
.lsh-breadcrumbs__item::marker {
	content: none;
}

.lsh-breadcrumbs__item .lsh-icon {
	width: 14px;
	height: 14px;
	margin: 0 10px;
	color: var(--lsh-faint);
}

.lsh-breadcrumbs__link {
	color: inherit;
	text-decoration: none;
	border-radius: 4px;
}

.lsh-breadcrumbs__link:hover {
	color: var(--lsh-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lsh-breadcrumbs__current {
	color: var(--lsh-text);
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * [lsh_episode_list]
 * ------------------------------------------------------------------------ */

.lsh-episodes {
	background: var(--lsh-surface);
	border: 1px solid var(--lsh-border);
	border-radius: var(--lsh-radius);
	overflow: hidden;
}

.lsh-episodes__header {
	padding: 20px 20px 16px;
	border-bottom: 1px solid var(--lsh-border);
}

.lsh-episodes .lsh-episodes__title {
	margin: 0;
	color: var(--lsh-text);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
}

.lsh-episodes__meta {
	margin: 6px 0 0;
	color: var(--lsh-muted);
	font-size: 14px;
	line-height: 1.4;
}

.lsh-episodes__list {
	margin: 0;
	padding: 8px;
	list-style: none;
	position: relative;
	max-height: var(--lsh-list-max-height, none);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.lsh-episodes__item {
	margin: 0;
	padding: 0;
}

.lsh-episodes__item::before,
.lsh-episodes__item::marker {
	content: none;
}

.lsh-episodes__link {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--lsh-radius-sm);
	color: var(--lsh-text-soft);
	font-size: 15px;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.lsh-episodes__link:hover {
	background: #f3f6f7;
	color: var(--lsh-text);
}

.lsh-episodes__link:focus-visible,
.lsh-breadcrumbs__link:focus-visible,
.lsh-season-card__link:focus-visible,
.lsh-btn:focus-visible {
	outline: 2px solid var(--lsh-accent);
	outline-offset: 2px;
}

.lsh-episodes__num,
.lsh-episodes__time {
	color: var(--lsh-muted);
	font-family: var(--lsh-mono);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.lsh-episodes__num {
	display: inline-flex;
	align-items: center;
}

.lsh-episodes__time {
	text-align: right;
	white-space: nowrap;
}

.lsh-episodes__name {
	overflow-wrap: anywhere;
}

.lsh-episodes__item.is-current .lsh-episodes__link {
	background: var(--lsh-accent-soft);
	color: var(--lsh-accent-strong);
	font-weight: 600;
}

.lsh-episodes__item.is-current .lsh-episodes__num,
.lsh-episodes__item.is-current .lsh-episodes__time {
	color: var(--lsh-accent-strong);
	font-weight: 700;
}

.lsh-episodes__item.is-current .lsh-icon--playing {
	width: 18px;
	height: 18px;
	color: var(--lsh-accent);
}

/* ---------------------------------------------------------------------------
 * [lsh_episode_nav]
 * ------------------------------------------------------------------------ */

.lsh-episode-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.lsh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var(--lsh-radius-sm);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lsh-btn .lsh-icon {
	width: 18px;
	height: 18px;
}

.lsh-btn--outline {
	background: var(--lsh-surface);
	border-color: var(--lsh-border-strong);
	color: var(--lsh-text-soft);
}

.lsh-btn--outline:hover {
	background: #f6f8f9;
	border-color: var(--lsh-faint);
	color: var(--lsh-text);
}

.lsh-btn--primary {
	background: var(--lsh-accent);
	color: #ffffff;
}

.lsh-btn--primary:hover {
	background: var(--lsh-accent-hover);
	color: #ffffff;
}

.lsh-copy-link__icon {
	display: inline-flex;
}

.lsh-copy-link__icon[hidden] {
	display: none;
}

.lsh-copy-link.is-copied {
	border-color: var(--lsh-accent);
	color: var(--lsh-accent-strong);
}

/* ---------------------------------------------------------------------------
 * [lsh_season_card]
 * ------------------------------------------------------------------------ */

.lsh-season-card {
	padding: 28px 24px;
	background: var(--lsh-surface);
	border: 1px solid var(--lsh-border);
	border-radius: var(--lsh-radius);
}

.lsh-season-card__eyebrow {
	margin: 0 0 10px;
	color: var(--lsh-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.lsh-season-card .lsh-season-card__title {
	margin: 0;
	color: var(--lsh-text);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

.lsh-season-card__description {
	max-width: 72ch;
	margin-top: 12px;
	color: var(--lsh-text-soft);
	font-size: 16px;
	line-height: 1.6;
}

.lsh-season-card__description > :first-child {
	margin-top: 0;
}

.lsh-season-card__description > :last-child {
	margin-bottom: 0;
}

.lsh-season-card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	color: var(--lsh-accent-link);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.lsh-season-card__link .lsh-icon {
	width: 16px;
	height: 16px;
	transition: transform 0.15s ease;
}

.lsh-season-card__link:hover {
	color: var(--lsh-accent-strong);
}

.lsh-season-card__link:hover .lsh-icon {
	transform: translateX(3px);
}

@media (max-width: 480px) {
	.lsh-episode-nav .lsh-btn {
		flex: 1 1 auto;
	}

	.lsh-season-card {
		padding: 22px 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lsh-episodes__link,
	.lsh-btn,
	.lsh-season-card__link .lsh-icon {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * [lsh_player]
 * ------------------------------------------------------------------------ */

.lsh-player__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--lsh-radius);
	background: linear-gradient(135deg, #24343a 0%, #111a1d 100%);
}

.lsh-player__frame iframe,
.lsh-player__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.lsh-player__frame video {
	object-fit: contain;
	background: #000;
}

/* Cover shown until the viewer presses play. */
.lsh-player__facade {
	position: absolute;
	inset: 0;
	display: block;
	color: #ffffff;
	text-decoration: none;
	cursor: pointer;
}

.lsh-player__facade::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8, 16, 18, 0.6) 0%, rgba(8, 16, 18, 0) 45%);
	pointer-events: none;
}

.lsh-player__facade:focus-visible {
	outline: 3px solid var(--lsh-accent);
	outline-offset: -3px;
}

.lsh-player__cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lsh-player__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(56px, 9vw, 80px);
	height: clamp(56px, 9vw, 80px);
	border-radius: 50%;
	background: rgba(245, 247, 248, 0.94);
	color: var(--lsh-accent-strong);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
	transform: translate(-50%, -50%);
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.lsh-player__play .lsh-icon {
	width: 40%;
	height: 40%;
	margin-left: 6%; /* optical centring of the triangle */
	fill: currentColor;
}

.lsh-player__facade:hover .lsh-player__play,
.lsh-player__facade:focus-visible .lsh-player__play {
	background: #ffffff;
	transform: translate(-50%, -50%) scale(1.06);
}

.lsh-player__num {
	position: absolute;
	left: clamp(14px, 2.5vw, 24px);
	bottom: clamp(10px, 2vw, 18px);
	z-index: 1;
	font-family: var(--lsh-mono);
	font-size: clamp(32px, 5vw, 60px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.lsh-player__time {
	position: absolute;
	right: clamp(12px, 2vw, 20px);
	bottom: clamp(12px, 2vw, 20px);
	z-index: 1;
	padding: 4px 10px;
	border-radius: 7px;
	background: rgba(8, 16, 18, 0.72);
	font-family: var(--lsh-mono);
	font-size: clamp(13px, 1.4vw, 15px);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
	.lsh-player__play {
		transition: none;
	}
}

/* ===========================================================================
 * Skills Hub page — [lsh_hub], [lsh_module_tabs], [lsh_season_menu],
 * [lsh_season_panel], [lsh_hub_guide]
 * ======================================================================== */

/* Every list the plugin renders is structural. Site/Oxygen CSS often styles li
   (display: list-item, margins, bullets) with selectors more specific than ours, so
   the reset is !important and no layout ever depends on an li's own display: grids
   and flex rows live on the element inside each li. */
:is(.lsh-modules__list, .lsh-season-menu__list, .lsh-ep-cards, .lsh-guide__list, .lsh-breadcrumbs__list, .lsh-episodes__list) > li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: none;
	border: 0;
}

:is(.lsh-modules__list, .lsh-season-menu__list, .lsh-ep-cards, .lsh-guide__list, .lsh-breadcrumbs__list, .lsh-episodes__list) > li::before,
:is(.lsh-modules__list, .lsh-season-menu__list, .lsh-ep-cards, .lsh-guide__list, .lsh-breadcrumbs__list, .lsh-episodes__list) > li::marker {
	content: none !important;
}

/* Hidden panels must stay hidden whatever display a theme gives these classes. */
[data-lsh-seasons-for][hidden],
[data-lsh-panel-module][hidden] {
	display: none !important;
}

.lsh-hub {
	--lsh-hub-max: 1400px;
	/* Distance from the top of the viewport the sidebar sticks at (clears the site header). */
	--lsh-sidebar-top: 100px;
}

.lsh-hub__inner {
	max-width: var(--lsh-hub-max);
	margin: 0 auto;
	padding: 0 24px;
}

.lsh-hub__band,
.lsh-modules--band {
	background: var(--lsh-band);
	padding: 24px 0;
}

.lsh-modules--band {
	padding: 24px;
}

.lsh-hub__body {
	display: grid;
	grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
	gap: 40px;
	padding-top: 40px;
	padding-bottom: 64px;
	align-items: start;
}

/* [lsh_hub tabs="no"]: the Oxygen section supplies width and spacing. */
.lsh-hub--no-tabs .lsh-hub__body {
	padding-top: 0;
	padding-bottom: 0;
}

.lsh-hub__sidebar {
	display: grid;
	gap: 24px;
	align-content: start;
	/* Sticky while the season panel scrolls (the grid row uses align-items: start, so
	   the column is only as tall as its content). A long season list scrolls inside the
	   sidebar instead of running off the bottom of the screen; the 2px padding keeps
	   the active card's outline from being clipped by that scroll box. */
	position: sticky;
	top: var(--lsh-sidebar-top);
	max-height: calc(100vh - var(--lsh-sidebar-top) - 24px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	padding: 2px;
	margin: -2px;
}

/* Badges ------------------------------------------------------------------ */

.lsh-badge {
	display: inline-flex;
	align-items: center;
	flex: none;
	padding: 3px 10px;
	border: 1px solid;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
}

.lsh-badge--available {
	background: #effaf6;
	border-color: #a3d9c7;
	color: var(--lsh-accent-strong);
}

.lsh-badge--soon {
	background: var(--lsh-amber-soft);
	border-color: var(--lsh-amber-border);
	color: var(--lsh-amber-text);
}

/* Module cards -------------------------------------------------------------- */

.lsh-modules__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lsh-modules__item {
	display: flex;
	margin: 0;
	padding: 0;
}

.lsh-modules__item::before,
.lsh-modules__item::marker {
	content: none;
}

.lsh-module-card {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	align-content: start;
	gap: 16px;
	width: 100%;
	height: 100%;
	padding: 18px 20px;
	background: var(--lsh-surface);
	border: 1px solid var(--lsh-border);
	border-radius: var(--lsh-radius);
	color: var(--lsh-text);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.lsh-module-card:hover {
	border-color: var(--lsh-border-strong);
	box-shadow: 0 4px 14px rgba(20, 60, 50, 0.08);
	color: var(--lsh-text);
}

.lsh-module-card.is-active {
	background: #e9f6f2;
	border-color: var(--lsh-accent);
	box-shadow: 0 0 0 1px var(--lsh-accent);
}

.lsh-module-card:focus-visible,
.lsh-season-item:focus-visible,
.lsh-view-toggle__btn:focus-visible,
.lsh-ep-card__link:focus-visible {
	outline: 2px solid var(--lsh-accent);
	outline-offset: 2px;
}

.lsh-module-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: #eef2f4;
	color: #56636a;
}

.lsh-module-card.is-active .lsh-module-card__icon {
	background: var(--lsh-accent);
	color: #ffffff;
}

.lsh-module-card__body {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.lsh-module-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
}

.lsh-module-card__name {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.lsh-module-card__desc {
	color: var(--lsh-text-soft);
	font-size: 15px;
	line-height: 1.5;
}

.lsh-module-card__meta {
	color: var(--lsh-muted);
	font-size: 14px;
	line-height: 1.5;
}

/* Season menu ---------------------------------------------------------------- */

.lsh-season-menu__label {
	margin: 0 0 12px;
	color: var(--lsh-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.lsh-season-menu__empty {
	margin: 0;
	color: var(--lsh-muted);
	font-size: 14px;
}

.lsh-season-menu__list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lsh-season-menu__item {
	margin: 0;
	padding: 0;
}

.lsh-season-menu__item::before,
.lsh-season-menu__item::marker {
	content: none;
}

.lsh-season-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: var(--lsh-surface);
	border: 1px solid var(--lsh-border);
	border-radius: 12px;
	color: var(--lsh-text);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lsh-season-item:hover {
	border-color: var(--lsh-border-strong);
	color: var(--lsh-text);
}

.lsh-season-item.is-active {
	border-color: var(--lsh-accent);
	box-shadow: 0 0 0 1px var(--lsh-accent);
}

.lsh-season-item__badge {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 8px;
	background: #f0f3f5;
	color: #3b474d;
	font-size: 14px;
	font-weight: 600;
}

.lsh-season-item.is-active .lsh-season-item__badge {
	background: var(--lsh-accent-soft);
	color: var(--lsh-accent-strong);
}

.lsh-season-item__body {
	display: grid;
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.4;
}

.lsh-season-item__name {
	font-size: 15px;
	font-weight: 600;
}

.lsh-season-item__title {
	color: #3b474d;
	font-size: 15px;
}

.lsh-season-item__meta {
	color: var(--lsh-muted);
	font-size: 14px;
}

.lsh-season-item__chevron {
	flex: none;
	color: var(--lsh-faint);
}

/* Guide ----------------------------------------------------------------------- */

.lsh-guide {
	padding: 22px 22px 24px;
	background: var(--lsh-surface);
	border: 1px solid var(--lsh-border);
	border-radius: var(--lsh-radius);
}

.lsh-guide .lsh-guide__title {
	margin: 0 0 16px;
	color: var(--lsh-text);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
}

.lsh-guide__list {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lsh-guide__row {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 12px;
	color: var(--lsh-text-soft);
	font-size: 15px;
	line-height: 1.55;
}

.lsh-guide__row .lsh-icon {
	margin-top: 2px;
	color: var(--lsh-accent-strong);
}

.lsh-guide__row strong {
	color: var(--lsh-text);
	font-weight: 600;
}

/* Season panel ------------------------------------------------------------------- */

.lsh-season-panel__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 16px 32px;
}

.lsh-season-panel__eyebrow {
	margin: 0;
	color: var(--lsh-accent-link);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.lsh-season-panels .lsh-season-panel__title {
	margin: 8px 0 0;
	color: var(--lsh-text);
	font-size: clamp(34px, 4.2vw, 56px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.08;
	text-transform: none;
}

.lsh-season-panel__desc {
	max-width: 72ch;
	margin-top: 16px;
	color: var(--lsh-text-soft);
	font-size: 18px;
	line-height: 1.65;
}

.lsh-season-panel__desc > :first-child {
	margin-top: 0;
}

.lsh-season-panel__desc > :last-child {
	margin-bottom: 0;
}

.lsh-season-panel__meta {
	margin: 14px 0 0;
	color: var(--lsh-muted);
	font-size: 16px;
	line-height: 1.5;
}

.lsh-season-panel__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.lsh-view-toggle {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: var(--lsh-surface);
	border: 1px solid var(--lsh-border);
	border-radius: 10px;
}

.lsh-view-toggle__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 36px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 7px;
	color: #56636a;
	cursor: pointer;
}

.lsh-view-toggle__btn:hover {
	color: var(--lsh-text);
}

.lsh-view-toggle__btn[aria-pressed="true"] {
	background: #eef2f4;
	color: var(--lsh-text);
}

.lsh-play-season {
	min-height: 48px;
	padding: 12px 22px;
}

/* Episode cards --------------------------------------------------------------------------
 * Grid is the base layout at every width. The list layout is an option on tablet and
 * desktop only (min-width: 641px, `.is-list`); on phones the toggle is hidden and the
 * cards are always a grid.
 * ---------------------------------------------------------------------------------------- */

.lsh-ep-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.lsh-ep-cards__item {
	display: block;
	min-width: 0;
}

.lsh-ep-card {
	position: relative;
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin: 0;
	padding: 0;
	background: var(--lsh-surface);
	border: 1px solid var(--lsh-border);
	border-radius: var(--lsh-radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.lsh-ep-card:hover,
.lsh-ep-card:focus-within {
	border-color: var(--lsh-accent);
	box-shadow: 0 0 0 1px var(--lsh-accent), 0 10px 24px rgba(16, 48, 40, 0.12);
	transform: translateY(-2px);
}

/* Cover runs edge to edge across the top of the card. */
.lsh-ep-card__thumb {
	position: relative;
	flex: none;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: calc(var(--lsh-radius) - 1px) calc(var(--lsh-radius) - 1px) 0 0;
	background: linear-gradient(135deg, #24343a 0%, #111a1d 100%);
}

.lsh-ep-card__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8, 16, 18, 0.55) 0%, rgba(8, 16, 18, 0) 50%);
	pointer-events: none;
}

.lsh-ep-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lsh-ep-card__num {
	position: absolute;
	left: 14px;
	bottom: 10px;
	z-index: 1;
	color: #ffffff;
	font-family: var(--lsh-mono);
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.lsh-ep-card__thumb-play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: -23px 0 0 -23px;
	border-radius: 50%;
	background: rgba(245, 247, 248, 0.94);
	color: var(--lsh-accent-strong);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.lsh-ep-card__thumb-play .lsh-icon {
	margin-left: 2px; /* optical centring of the triangle */
	fill: currentColor;
}

.lsh-ep-card:hover .lsh-ep-card__thumb-play,
.lsh-ep-card:focus-within .lsh-ep-card__thumb-play {
	background: #ffffff;
	transform: scale(1.06);
}

.lsh-ep-card__thumb-time {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 1;
	display: inline-block;
	padding: 3px 8px;
	border-radius: 6px;
	background: rgba(8, 16, 18, 0.72);
	color: #ffffff;
	font-family: var(--lsh-mono);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.lsh-ep-card__body {
	min-width: 0;
	padding: 16px 18px 20px;
}

.lsh-ep-card__label {
	margin: 0;
	color: var(--lsh-muted);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.lsh-season-panels .lsh-ep-card__title {
	margin: 4px 0 0;
	color: var(--lsh-text);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.35;
	text-transform: none;
}

.lsh-ep-card__link,
.lsh-ep-card__link:hover {
	color: inherit;
	text-decoration: none;
}

/* The whole card is clickable through the title link. */
.lsh-ep-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.lsh-ep-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	margin: 6px 0 0;
	color: var(--lsh-text-soft);
	font-size: 15.5px;
	line-height: 1.6;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* Row-end duration and play button: list layout only. */
.lsh-ep-card__time,
.lsh-ep-card__play {
	display: none;
}

/* List layout (tablet and desktop, when chosen) ------------------------------------------ */

@media (min-width: 641px) {
	.lsh-ep-cards.is-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.lsh-ep-cards.is-list .lsh-ep-card {
		display: grid;
		grid-template-columns: 156px minmax(0, 1fr) auto 44px;
		align-items: center;
		gap: 20px;
		padding: 14px 22px 14px 14px;
	}

	.lsh-ep-cards.is-list .lsh-ep-card:hover,
	.lsh-ep-cards.is-list .lsh-ep-card:focus-within {
		box-shadow: 0 0 0 1px var(--lsh-accent);
		transform: none;
	}

	.lsh-ep-cards.is-list .lsh-ep-card__thumb {
		border-radius: 8px;
	}

	.lsh-ep-cards.is-list .lsh-ep-card__thumb::after,
	.lsh-ep-cards.is-list .lsh-ep-card__thumb-play,
	.lsh-ep-cards.is-list .lsh-ep-card__thumb-time {
		display: none;
	}

	.lsh-ep-cards.is-list .lsh-ep-card__num {
		left: 10px;
		bottom: 6px;
		font-size: 20px;
		letter-spacing: normal;
	}

	.lsh-ep-cards.is-list .lsh-ep-card__body {
		padding: 0;
	}

	.lsh-ep-cards.is-list .lsh-ep-card__excerpt {
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.lsh-ep-cards.is-list .lsh-ep-card__time {
		display: inline;
		color: var(--lsh-muted);
		font-family: var(--lsh-mono);
		font-size: 14px;
		font-variant-numeric: tabular-nums;
		letter-spacing: 0.04em;
		white-space: nowrap;
	}

	.lsh-ep-cards.is-list .lsh-ep-card__play {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: var(--lsh-accent-soft);
		color: var(--lsh-accent-strong);
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	.lsh-ep-cards.is-list .lsh-ep-card:hover .lsh-ep-card__play,
	.lsh-ep-cards.is-list .lsh-ep-card:focus-within .lsh-ep-card__play {
		background: var(--lsh-accent);
		color: #ffffff;
	}
}

/* Coming soon -------------------------------------------------------------------------- */

.lsh-coming-soon {
	margin-top: 28px;
	padding: clamp(48px, 8vw, 96px) 24px;
	border: 1.5px dashed #cfd6da;
	border-radius: 16px;
	text-align: center;
}

.lsh-coming-soon__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: 28px;
	border-radius: 16px;
	background: var(--lsh-amber-soft);
	color: var(--lsh-amber-icon);
}

.lsh-season-panels .lsh-coming-soon__title {
	margin: 0;
	color: var(--lsh-text);
	font-size: clamp(26px, 3.2vw, 44px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-transform: none;
}

.lsh-coming-soon__message {
	margin: 14px auto 0;
	max-width: 60ch;
	color: var(--lsh-text-soft);
	font-size: 18px;
	line-height: 1.6;
}

/* Responsive ------------------------------------------------------------------------------ */

@media (max-width: 1100px) {
	.lsh-hub__body {
		grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
		gap: 28px;
	}
}

@media (max-width: 900px) {
	.lsh-hub__body {
		grid-template-columns: minmax(0, 1fr);
		padding-top: 28px;
	}

	/* Stacked layout: the sidebar sits above the panel and scrolls with the page. */
	.lsh-hub__sidebar {
		position: static;
		max-height: none;
		overflow: visible;
		padding: 0;
		margin: 0;
	}

	.lsh-season-panel__header {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}
}

@media (max-width: 640px) {
	.lsh-hub__inner {
		padding: 0 16px;
	}

	.lsh-hub__band {
		padding: 16px 0;
	}

	.lsh-module-card {
		padding: 14px 16px;
	}

	/* Phones always get the grid, so the list/grid toggle is hidden. */
	.lsh-view-toggle {
		display: none;
	}

	.lsh-season-panels .lsh-ep-card__title {
		font-size: 16px;
	}

	.lsh-ep-card__excerpt {
		font-size: 14.5px;
	}

	.lsh-season-panel__desc,
	.lsh-coming-soon__message {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lsh-module-card,
	.lsh-season-item,
	.lsh-ep-card,
	.lsh-ep-card__play,
	.lsh-ep-card__thumb-play {
		transition: none;
	}

	.lsh-ep-card:hover,
	.lsh-ep-card:focus-within {
		transform: none;
	}
}