/* ================================================================
   Academy Course Detail — Lesson Player Page styles.
   Design reference: Figma node 8334:175777 (Landing-Page file).
   Spec: PBI-03 — Academy Course Detail & Lesson Player Page.

   BEM root: `.academy-detail__*` for the page chrome;
             `.academy-detail__lesson-*` for the right-side lesson list;
             `.academy-detail__related-*` for the lower-right Related
             Contents column.

   Design tokens prefixed `--acd-*` to keep them out of the global
   namespace and avoid collisions with the article single tokens
   (`--sa-*`).  Colours and spacing values are taken directly from the
   Figma design system so the page renders pixel-true at 1440px.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
	--acd-white:        #ffffff;
	--acd-black:        #000000;
	--acd-gray-100:     #f2f2f2;
	--acd-gray-200:     #dfdfdf;
	--acd-gray-300:     #bfbfbf;
	--acd-gray-400:     #9f9f9f;
	--acd-gray-500:     #808080;
	--acd-gray-700:     #404040;
	--acd-gray-800:     #202020;
	--acd-gray-900:     #151515;
	--acd-primary:      #0fef9e;
	--acd-primary-dark: #098D5E;
	--acd-cta-bg:       #032b1d;
	--acd-font:         'Manrope', sans-serif;

	/* Layout — matches Figma 1440px frame.
	 *
	 * The right column is fixed (the lesson sidebar / related-contents
	 * column has a thumbnail + title pair that's tuned for 168×94 thumbs
	 * — it doesn't make sense to stretch it).  The left column is
	 * fluid so the video-player width adapts when the viewport shrinks
	 * between 1280px and 1440px.  At 1440px the main column resolves to
	 * 891px which lines up with the Figma 867px target within ±3% — the
	 * player stays on a 16:9 aspect ratio so the visual hierarchy is
	 * preserved.
	 */
	--acd-page-px:      64px;
	--acd-bar-px:       64px;
	--acd-side-w:       421px;
	--acd-gap:          24px;

	--acd-radius-xs:    4px;
	--acd-radius-s:     8px;
	--acd-radius-m:     12px;
	--acd-radius-pill:  999px;
}

/* Cancel the default theme container padding so this page owns its own
 * gutters and the content lines up with the Figma 1440 frame.
 */
.container:has(.academy-detail) {
	padding-inline: 0;
}

.academy-detail {
	font-family: var(--acd-font);
	background-color: var(--acd-white);
	color: var(--acd-gray-900);
	width: 100%;
	position: relative;
	/* Page-wide text safety net.  At very narrow viewports (the user
	 * tests down to 240px in DevTools) any heading, title, or label
	 * that contains a long unbreakable token (concatenated course
	 * titles like "TheCommoditiesBlueprint", lesson slugs, or pasted
	 * URLs) would otherwise refuse to wrap and push the page wider
	 * than the viewport.  Setting `overflow-wrap: anywhere` at the
	 * root cascades to every descendant text element — `<h1>` /
	 * `<h2>` headings, the share label, the CTA title, lesson list
	 * titles — so they all break mid-token when there isn't room
	 * to fit a whole word.  Cheaper than dotting `word-break` rules
	 * across a dozen individual selectors. */
	overflow-wrap: anywhere;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.academy-detail {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

/* ══════════════════════════════════════════════════════════════
   Breadcrumb bar
   ══════════════════════════════════════════════════════════════ */
.academy-detail__bar {
	background-color: var(--acd-white);
	border-bottom: 1px solid transparent;
}

.academy-detail__bar-inner {
	max-width: 1440px;
	margin-inline: auto;
	padding: 24px var(--acd-bar-px);
	box-sizing: border-box;
}

.academy-detail__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 2px;
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	color: var(--acd-gray-500);
}

.academy-detail__bc-link {
	color: var(--acd-black);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.18s ease;
}
.academy-detail__bc-link:hover {
	color: var(--acd-black);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.academy-detail__bc-sep {
	display: flex;
	align-items: center;
	color: var(--acd-black);
	flex-shrink: 0;
}

.academy-detail__bc-current {
	color: var(--acd-gray-500);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
    flex: 0 1 auto;
}

/* ══════════════════════════════════════════════════════════════
   Course header (title + share row)
   ══════════════════════════════════════════════════════════════ */
.academy-detail__header {
	background-color: var(--acd-white);
}

.academy-detail__header-inner {
	max-width: 1440px;
	margin-inline: auto;
	padding: 0 var(--acd-page-px);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.academy-detail__title {
	font-size: 32px;
	font-weight: 500;
	line-height: 48px;
	color: var(--acd-gray-900);
	margin: 0;
}

.academy-detail__share-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.academy-detail__share-label {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--acd-black);
	white-space: nowrap;
}

/* The shared `.art-share-icons` rules from article-single.css are not
 * loaded on this page, so we re-state the minimal rules needed for the
 * share-icon layout here.  Keeping the markup identical means the JS
 * helper `edu_render_share_icons()` works without modification.
 */
.academy-detail .art-share-icons {
	display: flex;
	align-items: center;
	gap: 8px;
}
.academy-detail .art-share-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	text-decoration: none;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.academy-detail .art-share-icon:hover {
	opacity: 0.8;
	transform: scale(1.1);
}
.academy-detail .art-share-icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

/* ══════════════════════════════════════════════════════════════
   Player row (video + lesson sidebar)
   ══════════════════════════════════════════════════════════════ */
.academy-detail__player-row {
	background-color: var(--acd-white);
}

.academy-detail__player-inner {
	max-width: 1440px;
	margin-inline: auto;
	padding: 48px var(--acd-page-px) 0;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--acd-side-w);
	gap: var(--acd-gap);
	align-items: stretch;
}

/* ── Video player ────────────────────────────────────────────── */
.academy-detail__player {
	width: 100%;
}

.academy-detail__player-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--acd-gray-900);
	overflow: hidden;
}

.academy-detail__player-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.academy-detail__player-fallback {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--acd-gray-100);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--acd-gray-500);
	font-size: 14px;
}

/* ── Lessons sidebar (right of the video) ────────────────────── */
/*
 * Sidebar matches the player row height via `align-self: stretch`
 * (parent grid uses `align-items: stretch`).  The inner list has
 * `min-height: 0` so flex allows it to shrink and trigger overflow,
 * which is what produces the scrollable behaviour from the Figma spec.
 */
.academy-detail__lessons {
	border: 1px solid var(--acd-gray-300);
	border-radius: var(--acd-radius-m);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background: var(--acd-white);
	/* Fixed sidebar height — replaces the previous `align-self: stretch`
	 * behaviour that matched the video player.  The inner list still
	 * scrolls when the lesson count exceeds this box height. */
	height: 487px;
	/* Once the JS layout-shuffle moves this box into the `.content`
	 * column at ≤1439px the parent becomes a column-flex container.
	 * `min-width: 0` lets the lessons box shrink below its intrinsic
	 * content width (thumb 143 + index 16 + margin 8 + list padding =
	 * ~205px) so very narrow viewports (<390px) clip the right edge
	 * cleanly instead of pushing the border past the page gutter. */
	min-width: 0;
	max-width: 100%;
}

.academy-detail__lessons-header {
	padding: 16px 24px 16px;
	flex: 0 0 auto;
}

.academy-detail__lessons-heading {
	font-size: 14px;
	font-weight: 800;
	line-height: 1.45;
	color: var(--acd-gray-900);
	margin: 0;
}

.academy-detail__lessons-list {
	list-style: none;
	margin: 0;
	padding: 0 12px 12px 24px;
	overflow-y: auto;
	/* `overflow-y: auto` alone makes browsers promote overflow-x to
	 * `auto` as well — which surfaces a horizontal scrollbar the
	 * moment any child (e.g. a 385px lesson-item) exceeds the list's
	 * 383px inner content width.  Force overflow-x to `hidden` so
	 * the row clips cleanly on the right edge (behind the vertical
	 * scrollbar) instead of producing a scrolling lane. */
	overflow-x: hidden;
	flex: 1 1 auto;
	min-height: 0;
	scrollbar-width: thin;
	scrollbar-color: rgba(64, 64, 64, 0.6) transparent;
}
.academy-detail__lessons-list::-webkit-scrollbar {
	width: 6px;
}
.academy-detail__lessons-list::-webkit-scrollbar-track {
	background: rgba(64, 64, 64, 0.15);
	border-radius: 24px;
}
.academy-detail__lessons-list::-webkit-scrollbar-thumb {
	background: var(--acd-gray-700);
	border-radius: 24px;
}

/* ── Each lesson row ────────────────────────────────────────── */
.academy-detail__lesson-item {
	display: block;
	width: 385px;
	border-radius: var(--acd-radius-xs);
	margin-top: 8px;
	transition: background 0.18s ease;
}
.academy-detail__lesson-item:first-child {
	margin-top: 0;
}
/*
 * Active state — Figma node 8325-128097 calls for the highlight to
 * sit only behind the lesson title (the `__lesson-text` cell), not
 * the whole row.  We keep `.is-active` itself transparent and paint
 * the background on the text cell instead so the play-icon column
 * and thumbnail stay on the natural sidebar background.
 */
.academy-detail__lesson-item.is-active {
	background: transparent;
}
.academy-detail__lesson-item.is-active .academy-detail__lesson-text {
	background: var(--acd-gray-100);
	border-radius: var(--acd-radius-xs);
}
/*
 * Hover mirrors the active treatment — the highlight bar paints
 * behind the title only, not the thumbnail / play-icon column.  The
 * layout-affecting bits (stretch + inner flex centring) live on the
 * base `.academy-detail__lesson-text` rule below so hovering never
 * causes the row to reflow — only the background colour swaps.
 */
.academy-detail__lesson-item:hover:not(.is-active) .academy-detail__lesson-text {
	background: rgba(242, 242, 242, 0.7);
	border-radius: var(--acd-radius-xs);
}

.academy-detail__lesson-link {
	display: flex;
	align-items: center;
	/* No `gap` on the link — we want only ONE gap (between the play
	 * index and the thumbnail).  The thumbnail butts up against the
	 * text cell so the active-state highlight bar reads as one
	 * continuous block starting at the thumb's right edge.  The
	 * 8px we used to get from `gap` is carried by `margin-right` on
	 * `.academy-detail__lesson-index` below. */
	padding: 0;
	text-decoration: none;
	color: inherit;
	min-height: 94px;
	box-sizing: border-box;
}

.academy-detail__lesson-index {
	flex: 0 0 16px;
	width: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--acd-font);
	font-size: 14px;
	line-height: 20px;
	color: var(--acd-gray-900);
	font-weight: 400;
	margin-right: 8px;
}
.academy-detail__lesson-item.is-active .academy-detail__lesson-index {
	color: var(--acd-gray-900);
}

.academy-detail__lesson-thumb {
	position: relative;
	flex: 0 0 168px;
	width: 168px;
	height: 94px;
	overflow: hidden;
	background: var(--acd-gray-100);
	border-radius: 2px;
	display: block;
}
.academy-detail__lesson-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Lazy-load lifecycle for lesson thumbnails.
 *
 *   .acd-lazy           — placeholder src is the inline 1×1 GIF; we
 *                          hide it so the underlying gray thumb tile
 *                          stays clean instead of flashing a tiny
 *                          stretched pixel.
 *   .acd-lazy--loaded   — observer has swapped data-src → src.  Fade
 *                          in so the row doesn't pop when the network
 *                          delivers the bitmap.
 */
.academy-detail__lesson-thumb img.acd-lazy {
	opacity: 0;
}
.academy-detail__lesson-thumb img.acd-lazy--loaded {
	opacity: 1;
	transition: opacity 0.25s ease;
}
.academy-detail__lesson-thumb-placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #2c2c2c 0%, #5a5a5a 100%);
}

.academy-detail__lesson-duration {
	position: absolute;
	right: 4px;
	bottom: 4px;
	background: #161722;
	color: var(--acd-white);
	font-family: 'Roboto', var(--acd-font);
	font-size: 10px;
	line-height: 1.2;
	padding: 3px 4px;
	border-radius: 2px;
	font-weight: 500;
}

.academy-detail__lesson-text {
	flex: 1 1 auto;
	min-width: 0;
	/* Horizontal padding gives the active-state highlight a visible
	 * inset between the rounded bar and the title text (see Figma
	 * node 8325-128097).  Applied to every row so the title's
	 * baseline lines up the same way whether or not the row is
	 * active — switching lessons therefore doesn't shift the title
	 * horizontally. */
	padding: 8px 8px;
	box-sizing: border-box;
	/* Stretch the text cell to the row's full height (94px from
	 * `.academy-detail__lesson-link min-height`) so the active /
	 * hover highlight reaches the same top and bottom as the
	 * thumbnail rather than hugging only the title's line-box.
	 * Applied at the base level (not only on active/hover) so the
	 * row layout stays identical across states — hover therefore
	 * swaps the background only and doesn't push the title up or
	 * down by a single pixel. */
	align-self: stretch;
	display: flex;
	align-items: center;
}

.academy-detail__lesson-title {
	display: block;
	font-family: var(--acd-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--acd-black);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.academy-detail__lesson-empty {
	padding: 24px;
	text-align: center;
	color: var(--acd-gray-500);
	font-size: 14px;
}

/* ══════════════════════════════════════════════════════════════
   Content row (lesson body + Related Contents)
   ══════════════════════════════════════════════════════════════ */
.academy-detail__content-row {
	background-color: var(--acd-white);
}

.academy-detail__content-inner {
	max-width: 1440px;
	margin-inline: auto;
	/* Desktop spec asks for 150px of breathing room below the lesson
	 * body so the bottom CTA section reads as a separate landing
	 * surface.  Tablet / mobile breakpoints below this rule reset the
	 * bottom padding to the original 48px to keep narrow viewports
	 * compact. */
	padding: 24px var(--acd-page-px) 150px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--acd-side-w);
	gap: var(--acd-gap);
	align-items: start;
}

.academy-detail__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* ── Previous / X-of-Y / Next ───────────────────────────────── */
.academy-detail__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 16px;
}

.academy-detail__nav-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 8px;
	border-radius: var(--acd-radius-xs);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
	flex: 0 0 112px;
	width: 112px;
	height: 36px;
	box-sizing: border-box;
	justify-content: center;
}

.academy-detail__nav-btn--prev {
	background: var(--acd-gray-100);
	color: var(--acd-gray-800);
}
.academy-detail__nav-btn--prev:hover:not(.is-disabled) {
	background: var(--acd-primary);
	color: var(--acd-gray-900);
}

.academy-detail__nav-btn--next {
	background: var(--acd-primary);
	color: var(--acd-gray-800);
}
.academy-detail__nav-btn--next:hover:not(.is-disabled) {
	background: var(--acd-primary-dark);
	color: var(--acd-gray-800);
}

.academy-detail__nav-btn.is-disabled {
	background: var(--acd-gray-100);
	color: var(--acd-gray-200);
	cursor: not-allowed;
	pointer-events: none;
}

.academy-detail__nav-counter {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--acd-gray-800);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* ── Lesson title + body ────────────────────────────────────── */
.academy-detail__lesson-h2 {
	font-size: 24px;
	font-weight: 500;
	line-height: 36px;
	color: var(--acd-gray-900);
	margin: 0;
}

.academy-detail__lesson-body {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--acd-gray-800);
	/* Narrow-viewport safety net.  The lesson body is a flex item of
	 * `.academy-detail__content` (column flexbox) so `min-width: 0`
	 * lets the body — and by extension every CMS block inside it —
	 * shrink below its intrinsic min-content width when the viewport
	 * is narrower than the 390px mobile baseline.  Combined with
	 * `overflow-wrap: anywhere` long URLs / inline code blocks break
	 * mid-token rather than forcing the page to scroll horizontally. */
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Belt-and-braces for CMS-authored blocks that ship with their own
 * intrinsic widths (button rows, embeds, tables, separators, etc.).
 * Capping every direct child at `max-width: 100%` keeps the body
 * column inside the viewport even when an editor pastes an oversized
 * iframe or button block, and `flex-wrap: wrap` on button rows is the
 * only knob that prevents two side-by-side `.wp-block-button`
 * pill-shaped CTAs from blowing past the right gutter under 390px. */
.academy-detail__lesson-body > * {
	max-width: 100%;
}

.academy-detail__lesson-body hr,
.academy-detail__lesson-body .wp-block-separator {
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
	margin: 24px 0;
	margin-left: 0;
	margin-right: 0;
	border: 0;
	border-top: 1px solid var(--acd-gray-200);
	height: 0;
}

.academy-detail__lesson-body .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
}

.academy-detail__lesson-body .wp-block-button,
.academy-detail__lesson-body .wp-block-button__link {
	max-width: 100%;
}

.academy-detail__lesson-body pre,
.academy-detail__lesson-body code {
	max-width: 100%;
	overflow-x: auto;
}

.academy-detail__lesson-body pre {
	background: var(--acd-gray-100);
	border-radius: var(--acd-radius-xs);
	padding: 16px;
	margin: 16px 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
	font-size: 13px;
	line-height: 20px;
	white-space: pre-wrap;
}

.academy-detail__lesson-body code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
	font-size: 0.92em;
}

.academy-detail__lesson-body blockquote {
	background: var(--acd-gray-100);
	border-radius: var(--acd-radius-xs);
	padding: 24px;
	margin: 16px 0;
}

.academy-detail__lesson-body blockquote p {
	margin: 0 0 8px;
}

.academy-detail__lesson-body blockquote p:last-child {
	margin-bottom: 0;
}

.academy-detail__lesson-body strong,
.academy-detail__lesson-body b {
	font-weight: 600;
}

.academy-detail__lesson-body em,
.academy-detail__lesson-body i {
	font-style: italic;
}

.academy-detail__lesson-body u {
	text-decoration: underline;
}

.academy-detail__lesson-body .cms-table-scroll {
	max-width: 100%;
	margin: 16px 0;
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.academy-detail__lesson-body .cms-table-scroll > table {
	margin: 0;
}

/* Table handling for CMS-authored content.
 *
 * Writers paste from Word / Google Docs which sometimes wraps buttons or
 * images in layout `<table style="border-style: hidden">` rows — those
 * must stay flat.  Intentional data tables (e.g. comparison matrices)
 * ship with `border="1"` and/or per-cell border colours; the old blanket
 * `border: 0` reset wiped their `border-style` too, so cell borders never
 * painted even when inline `border-width` / `border-color` were present. */

/* Layout tables — no visible grid */
.academy-detail__lesson-body table[style*="border-style: hidden"],
.academy-detail__lesson-body table[style*="border-style:hidden"] {
	max-width: 100%;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
}

.academy-detail__lesson-body table[style*="border-style: hidden"] th,
.academy-detail__lesson-body table[style*="border-style: hidden"] td,
.academy-detail__lesson-body table[style*="border-style:hidden"] th,
.academy-detail__lesson-body table[style*="border-style:hidden"] td {
	padding: 0;
	border: 0;
	vertical-align: top;
}

/* Data tables — show borders; inline editor styles override colour/width */
.academy-detail__lesson-body table:not([style*="border-style: hidden"]):not([style*="border-style:hidden"]) {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.academy-detail__lesson-body table:not([style*="border-style: hidden"]):not([style*="border-style:hidden"]) th,
.academy-detail__lesson-body table:not([style*="border-style: hidden"]):not([style*="border-style:hidden"]) td {
	padding: 12px 16px;
	border-style: solid;
	border-width: 1px;
	border-color: var(--acd-gray-300);
	vertical-align: top;
}

.academy-detail__lesson-body p {
	margin: 0 0 16px;
}
.academy-detail__lesson-body h1,
.academy-detail__lesson-body h2 {
	font-size: 24px;
	font-weight: 600;
	line-height: 36px;
	color: var(--acd-gray-900);
	margin: 24px 0 12px;
}
.academy-detail__lesson-body h3 {
	font-size: 18px;
	font-weight: 500;
	line-height: 28px;
	color: var(--acd-gray-900);
	margin: 20px 0 12px;
}
.academy-detail__lesson-body h4 {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--acd-gray-900);
	margin: 16px 0 8px;
}
.academy-detail__lesson-body a {
	color: var(--acd-primary-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.academy-detail__lesson-body a:hover {
	color: var(--acd-primary);
}
.academy-detail__lesson-body ul,
.academy-detail__lesson-body ol {
	padding-left: 24px;
	margin: 0 0 16px;
	/* Tailwind preflight in vt-widget.css sets `ol, ul { list-style: none }`
	 * globally — restore CMS list markers inside lesson content. */
	list-style-position: outside;
}

.academy-detail__lesson-body ul {
	list-style-type: disc;
}

.academy-detail__lesson-body ol {
	list-style-type: decimal;
}

.academy-detail__lesson-body ul ul {
	list-style-type: circle;
}

.academy-detail__lesson-body ul ul ul {
	list-style-type: square;
}

.academy-detail__lesson-body li {
	margin-bottom: 8px;
}

.academy-detail__lesson-body li > p {
	margin: 0;
}
.academy-detail__lesson-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--acd-radius-s);
	display: block;
	margin: 16px auto;
}

/* WordPress / TinyMCE image-alignment classes.
 *
 * The wpeditimage plugin (Education Editor UI / Academy Migrator) sets one
 * of `alignleft` / `alignright` / `aligncenter` / `alignnone` on the <img>
 * (or its wrapping <figure> / <dl class="wp-caption">) when an author picks
 * an alignment in the CMS.  Honour the class so the lesson body matches
 * what the author set in the back end (centred by default, like the
 * article body). */
.academy-detail__lesson-body img.alignleft,
.academy-detail__lesson-body figure.alignleft,
.academy-detail__lesson-body .wp-caption.alignleft {
	float: none;
	display: block;
	margin: 16px auto 16px 0;
}

.academy-detail__lesson-body img.alignright,
.academy-detail__lesson-body figure.alignright,
.academy-detail__lesson-body .wp-caption.alignright {
	float: none;
	display: block;
	margin: 16px 0 16px auto;
}

.academy-detail__lesson-body img.aligncenter,
.academy-detail__lesson-body figure.aligncenter,
.academy-detail__lesson-body .wp-caption.aligncenter {
	float: none;
	display: block;
	margin: 16px auto;
}

.academy-detail__lesson-body img.alignnone,
.academy-detail__lesson-body figure.alignnone,
.academy-detail__lesson-body .wp-caption.alignnone {
	float: none;
	display: block;
	margin: 16px auto 16px 0;
}
.academy-detail__lesson-body iframe {
	max-width: 100%;
	border-radius: var(--acd-radius-s);
}

/* ══════════════════════════════════════════════════════════════
   Related Contents (right column, below lesson sidebar)
   ══════════════════════════════════════════════════════════════ */
.academy-detail__related {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-top: 24px;
}

.academy-detail__related-heading {
	font-size: 24px;
	font-weight: 600;
	line-height: 36px;
	color: var(--acd-gray-900);
	margin: 0;
}

.academy-detail__related-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.academy-detail__related-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	transition: opacity 0.18s ease;
}
.academy-detail__related-item:hover {
	opacity: 0.92;
}

.academy-detail__related-thumb-link {
	display: block;
	flex: 0 0 168px;
	text-decoration: none;
	border-radius: var(--acd-radius-xs);
	overflow: hidden;
}

.academy-detail__related-thumb {
	position: relative;
	display: block;
	width: 168px;
	height: 94px;
	background: var(--acd-gray-100);
	overflow: hidden;
}
.academy-detail__related-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.academy-detail__related-thumb-placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #d2d2d2 0%, #aeaeae 100%);
}

.academy-detail__related-badge {
	position: absolute;
	right: 4px;
	bottom: 4px;
	background: #161722;
	color: var(--acd-white);
	font-family: 'Inter', var(--acd-font);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.2;
	padding: 3px 4px;
	border-radius: 2px;
}

.academy-detail__related-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 0 0 4px;
}

.academy-detail__related-title-link {
	text-decoration: none;
	color: inherit;
}
.academy-detail__related-title {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--acd-gray-900);
	margin: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: color 0.18s ease;
}
.academy-detail__related-title-link:hover .academy-detail__related-title {
	color: var(--acd-primary-dark);
}

.academy-detail__related-excerpt {
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
	color: var(--acd-gray-500);
	margin: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

/*
 * The meta row used to wrap onto two lines when the tag pills plus
 * the date couldn't fit beside the thumbnail (e.g. "Trade" +
 * "Intermediate" + a long date stamp).  The Figma reference keeps
 * everything on a single line and ellipsises the last element when
 * space runs out — so we set the row to `flex-wrap: nowrap`, freeze
 * the tag pills and separator at their natural width, and let the
 * date shrink with `text-overflow: ellipsis`.
 */
.academy-detail__related-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
	min-width: 0;
	margin-top: 4px;
}

.academy-detail__related-tag {
	display: inline-flex;
	align-items: center;
	background: var(--acd-gray-100);
	color: var(--acd-gray-800);
	border-radius: var(--acd-radius-m);
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
	padding: 2px 12px;
	white-space: nowrap;
	flex-shrink: 0;
}

.academy-detail__related-sep {
	color: var(--acd-gray-400);
	font-size: 14px;
	line-height: 20px;
	user-select: none;
	flex-shrink: 0;
}

.academy-detail__related-date {
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
	color: var(--acd-gray-400);
	white-space: nowrap;
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════
   Bottom CTA (matches the article-detail bottom CTA visually)
   ══════════════════════════════════════════════════════════════ */
.academy-detail__cta {
	background-color: var(--acd-black);
	position: relative;
	overflow: hidden;
	padding: 48px 64px;
	box-sizing: border-box;
}

.academy-detail__cta-glow {
	position: absolute;
	width: 202px;
	height: 152px;
	bottom: -80px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--acd-primary);
	border-radius: var(--acd-radius-pill);
	filter: blur(140px);
	pointer-events: none;
}

.academy-detail__cta-inner {
	max-width: 1440px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	position: relative;
}

.academy-detail__cta-title {
	font-size: 32px;
	font-weight: 500;
	line-height: 48px;
	color: var(--acd-white);
	text-align: center;
	margin: 0;
}

.academy-detail__cta-desc {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--acd-gray-400);
	text-align: center;
	margin: 0;
	max-width: 880px;
}

.academy-detail__cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	background: var(--acd-primary);
	border-radius: var(--acd-radius-xs);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--acd-gray-800);
	text-decoration: none;
	transition: background 0.18s ease;
}
.academy-detail__cta-btn:hover {
	background: var(--acd-primary-dark);
	color: var(--acd-gray-800);
}

/* ══════════════════════════════════════════════════════════════
   Snackbar (Copy-link feedback) — matches article-single snackbar
   ══════════════════════════════════════════════════════════════ */
@keyframes acd-snackbar-in {
	from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes acd-snackbar-out {
	from { opacity: 1; transform: translateX(-50%) translateY(0); }
	to   { opacity: 0; transform: translateX(-50%) translateY(-12px); }
}

/*
 * Mirror `.art-snackbar` from article-single.css so the Copy-link
 * confirmation looks identical between the academy detail and article
 * detail pages — same padding, background and (lack of) drop shadow.
 * Spec: PBI-03 reuses the article snackbar component verbatim.
 */
.academy-detail .art-snackbar {
	position: fixed;
	top: 65px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 177px;
	padding: 12px 8px;
	background: #d3edde;
	border-radius: 4px;
	animation: acd-snackbar-in 0.2s ease forwards;
	box-sizing: border-box;
	white-space: nowrap;
}
.academy-detail .art-snackbar[hidden] { display: none; }
.academy-detail .art-snackbar.is-hiding {
	display: flex;
	animation: acd-snackbar-out 0.2s ease forwards;
}
.academy-detail .art-snackbar__check {
	flex-shrink: 0;
	display: block;
	width: 14px;
	height: 14px;
}
.academy-detail .art-snackbar__text {
	font-family: var(--acd-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: #24a759;
}
.academy-detail .art-snackbar__close {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	color: #24a759;
}

/* ══════════════════════════════════════════════════════════════
   Responsive — Tablet (769–1439px collapses to single-column)

   The upper bound matches the Figma desktop frame width (1440px):
   any viewport narrower than the design canvas drops the two-column
   player+sidebar grid and inherits these tablet adjustments.  Mobile
   (≤768px) layers further refinements on top via the next block.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1439px) {
	:root {
		--acd-page-px: 24px;
		--acd-bar-px:  24px;
	}

	/* `minmax(0, 1fr)` instead of plain `1fr` — the bare `1fr` resolves
	 * to `minmax(auto, 1fr)`, and `auto` includes each grid item's
	 * min-content width.  At sub-390px viewports the lessons box has a
	 * hard min-content floor (`flex: 0 0 143px` thumb + 16px index + 8px
	 * margin + list padding ≈ 205px) so a `1fr` track grows past the
	 * page gutter to fit it, dragging every section the same number of
	 * pixels off the right edge.  Clamping the min at 0 lets the track
	 * stay at the gutter-aligned column width and the lessons box's
	 * own `overflow: hidden` then clips the un-shrinkable thumbnail
	 * cleanly inside the box. */
	.academy-detail__player-inner,
	.academy-detail__content-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.academy-detail__content-inner {
		padding-bottom: 32px;
	}

	/* Lesson rows on tablet match Figma node 8348:179694 — the
	 * lessons box drops to a single column under the player and the
	 * items inside expand to the full content width (Figma `w-full`
	 * on the 752px inner track) instead of the desktop 385px sidebar
	 * width.  Removing the fixed width also stops the active /
	 * hover highlight from cutting off at 385px and leaving a band
	 * of empty container to the right of each row. */
	.academy-detail__lesson-item {
		width: auto;
	}

	.academy-detail__related-thumb-link,
	.academy-detail__related-thumb {
		flex: 0 0 168px;
	}

	.academy-detail__title {
		font-size: 32px;
		font-weight: 500;
		line-height: 48px;
	}
}

/* Tablet — align CTA title sizing with articles / podcast (≤1024px) */
@media (max-width: 1024px) {
	.academy-detail__cta-title {
		font-size: 24px;
		line-height: 36px;
	}
}

/* ══════════════════════════════════════════════════════════════
   Responsive — Mobile (≤768px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
	:root {
		--acd-page-px: 16px;
		--acd-bar-px:  16px;
	}

	.academy-detail__title {
		font-size: 18px;
		line-height: 28px;
	}

	.academy-detail__share-row {
		flex-wrap: wrap;
	}
	.academy-detail__share-label {
		font-size: 12px;
		line-height: 18px;
	}

	/* Breadcrumb on mobile:
	 *
	 *   1. Force the whole row to stay on a single line via
	 *      `flex-wrap: nowrap` on the parent — wrapping would push the
	 *      title onto its own line which the design doesn't want.
	 *   2. Replace the hard `18ch` character cap on `bc-current` with a
	 *      space-aware truncation: the item shrinks to whatever room is
	 *      left after `Education > Academy >`, then the base rule's
	 *      `overflow: hidden; text-overflow: ellipsis; white-space:
	 *      nowrap` paints the `…` only when the actual content runs
	 *      past the available width.  `min-width: 0` is required for a
	 *      flex item to shrink below its intrinsic content size so the
	 *      ellipsis can kick in. */
	.academy-detail__breadcrumb {
		flex-wrap: nowrap;
	}

	.academy-detail__bc-current {
		min-width: 0;
		max-width: none;
	}

	/* Lesson navigation on phones:
	 *
	 *   1. `.academy-detail__nav` — shrink the inter-item gap from
	 *      16px to 8px so the two fixed-width 112px buttons plus the
	 *      X-of-Y counter sit closer together.
	 *   2. `.academy-detail__nav-btn` — keep the desktop 112px fixed
	 *      width (Previous and Next must stay identical in size per
	 *      design spec); only the font-size and inner padding tighten
	 *      to fit the smaller 13px label comfortably inside the same
	 *      112px frame.  The button no longer flex-shrinks below
	 *      112px even on narrow viewports — the counter and the
	 *      `--acd-page-px` gutter absorb the extra space instead.
	 *   3. SVG arrows shrink-fixed at 14px so the icon stays visually
	 *      proportional to the smaller text without affecting button
	 *      width. */
	.academy-detail__nav {
		gap: 8px;
	}

	.academy-detail__nav-btn {
		font-size: 13px;
	}

	.academy-detail__nav-btn svg {
		width: 14px;
		height: 14px;
		flex-shrink: 0;
	}

	/* When the course has only a handful of lessons (≤4 on this
	 * viewport) the desktop's fixed `height: 487px` left a tall white
	 * gap below the last row.  Swap to `max-height` so the container
	 * collapses to its content's intrinsic height for short lesson
	 * lists, yet still caps at 487px once the list is long enough to
	 * need the inner `overflow-y: auto` scroll behaviour. */
	.academy-detail__lessons {
		height: auto;
		max-height: 487px;
	}

	.academy-detail__lesson-h2 {
		font-size: 18px;
		line-height: 28px;
	}

	.academy-detail__related-heading {
		font-size: 18px;
		line-height: 28px;
	}

	.academy-detail__related-title-link {
		min-width: 0;
	}

	.academy-detail__related-title {
		-webkit-line-clamp: 1;
		line-clamp: 1;
	}

	.academy-detail__cta {
		padding: 32px 16px;
	}

	/* Related Contents thumbnail keeps the smaller 128×72 footprint
	 * on phones (unchanged from before).  The lesson-list thumbnail
	 * is split out below with its own 143×80 target. */
	.academy-detail__related-thumb {
		width: 128px;
		height: 72px;
		flex: 0 0 128px;
	}

	.academy-detail__related-thumb-link {
		flex: 0 0 128px;
	}

	/* Lesson-list thumbnail on phones — 143×80 per the mobile spec.
	 * The link's min-height and the item's explicit height are bumped
	 * to 80 so the row sits exactly on the thumb's height without the
	 * old 94 / 72 gaps above-or-below the thumbnail. */
	.academy-detail__lesson-thumb {
		width: 143px;
		height: 80px;
		flex: 0 0 143px;
	}

	.academy-detail__lesson-link {
		min-height: 80px;
	}

	/* Phones are narrower than the desktop fixed lesson-item width
	 * (385px) — drop the explicit width so the row shrinks to fit
	 * the viewport instead of overflowing under `overflow: hidden`.
	 * Height is pinned at 80px to match the lesson-thumb above so
	 * the row is exactly one thumb tall. */
	.academy-detail__lesson-item {
		width: auto;
		height: 80px;
	}

	/* CMS tables — horizontal scroll via `.cms-table-scroll` wrapper (PHP). */
	.academy-detail__lesson-body .cms-table-scroll {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: visible;
		-webkit-overflow-scrolling: touch;
	}
}