/**
 * Learnomy — Single course stylesheet.
 *
 * Page-specific styles for /courses/{slug}/ (single-course.php).
 * Loaded only on that route via Template_Loader::enqueue_assets() so the
 * catalog, dashboards, blocks, and other surfaces don't pay for the
 * sidebar-card + curriculum + curriculum-drawer CSS.
 *
 * Shared primitives consumed but not owned here:
 *   .lrn-course-card*, .lrn-wishlist-btn*, .lrn-empty-state*,
 *   .lrn-load-more, .lrn-grid, .lrn-breadcrumb, .lrn-hero*, .lrn-btn,
 *   .lrn-badge*, .lrn-card
 * Those live in learnomy.css because dashboards, catalog, instructor
 * profiles, and blocks all render them too.
 *
 * Responsive contract: exactly two @media queries at the bottom of the
 * file — 1024px (tablet ↔ desktop) and 640px (mobile). No intermediate
 * breakpoints. The previous mix of 480px / 767px / 768px stops folded
 * into the canonical pair.
 *
 * @package Learnomy
 */

/* ==========================================================================
   Course intro video — prominent trailer at top of main column for
   classic/focused/split layouts. Hero layout renders its own trailer
   inside the hero band, so body.php skips this block when active.
   ========================================================================== */

.lrn-course-intro-video {
	margin-block-end: var(--lrn-sp-6);
}

.lrn-course-intro-video__frame {
	aspect-ratio:    16 / 9;
	overflow:        hidden;
	border-radius:   var(--lrn-radius-lg);
	background:      var(--lrn-bg-tertiary);
	box-shadow:      var(--lrn-shadow-md);
}

.lrn-course-intro-video__frame iframe,
.lrn-course-intro-video__frame video {
	width:      100%;
	height:     100%;
	border:     0;
	display:    block;
	object-fit: cover;
}

/* ==========================================================================
   Sidebar card — purchase / enroll / membership panel
   ========================================================================== */

.lrn-sidebar-card__preview {
	aspect-ratio: 16 / 9;
	overflow:     hidden;
	background:   var(--lrn-bg-tertiary);
}

.lrn-sidebar-card__preview img,
.lrn-sidebar-card__preview iframe,
.lrn-sidebar-card__preview video {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	border:     0;
}

.lrn-sidebar-card__body {
	padding: var(--lrn-sp-5);
}

.lrn-sidebar-card__price {
	display:       flex;
	align-items:   center;
	gap:           var(--lrn-sp-2);
	margin-bottom: var(--lrn-sp-4);
}

.lrn-sidebar-card__price-current {
	font-size:   var(--lrn-text-2xl);
	font-weight: var(--lrn-weight-semibold);
	color:       var(--lrn-text);
}

/* Recurring interval suffix ("/mo", "/yr") — smaller + muted next to the price. */
.lrn-sidebar-card__price-interval {
	font-size:   var(--lrn-text-base);
	font-weight: var(--lrn-weight-normal);
	color:       var(--lrn-text-secondary);
}

.lrn-sidebar-card__price-original {
	font-size:       var(--lrn-text-md);
	color:           var(--lrn-text-tertiary);
	text-decoration: line-through;
}

.lrn-sidebar-card__sale-timer {
	font-size: var(--lrn-text-sm);
	color:     var(--lrn-danger);
	margin:    0 0 var(--lrn-sp-4);
}

.lrn-sidebar-card__includes {
	margin-top:  var(--lrn-sp-5);
	padding-top: var(--lrn-sp-5);
	border-top:  1px solid var(--lrn-divider);
}

.lrn-sidebar-card__includes-title {
	font-size:   var(--lrn-text-sm);
	font-weight: var(--lrn-weight-semibold);
	margin:      0 0 var(--lrn-sp-3);
}

.lrn-sidebar-card__includes-list {
	list-style: none;
	margin:     0;
	padding:    0;
}

.lrn-sidebar-card__includes-list li {
	display:        flex;
	align-items:    center;
	gap:            var(--lrn-sp-2);
	padding-bottom: var(--lrn-sp-2);
	font-size:      var(--lrn-text-sm);
	color:          var(--lrn-text-secondary);
}

/* Icons here are descriptive bullets ("8 lessons", "Certificate", "Lifetime
   access"), not actions. Tinting them with `--lrn-accent` (the same red as
   the primary Buy Now CTA right above) created a stack of five red bullets
   competing with the single primary action — five small CTAs in disguise.
   Using `--lrn-text-secondary` keeps them legible while letting the Buy Now
   button stay the only accent-colored element in the card. */
.lrn-sidebar-card__includes-list svg {
	width:       14px;
	height:      14px;
	color:       var(--lrn-text-secondary);
	flex-shrink: 0;
}

/* ==========================================================================
   Sidebar card — coupon, membership CTA, guarantee, feedback messages
   ========================================================================== */

.lrn-sidebar-card__coupon {
	margin-top:  var(--lrn-sp-4);
	padding-top: var(--lrn-sp-4);
	border-top:  1px solid var(--lrn-divider);
}

.lrn-sidebar-card__coupon-label {
	font-size:     var(--lrn-text-sm);
	color:         var(--lrn-text-secondary);
	margin-bottom: var(--lrn-sp-2);
	display:       block;
}

.lrn-sidebar-card__coupon-row {
	display: flex;
	gap:     var(--lrn-sp-2);
}

.lrn-sidebar-card__coupon-message {
	font-size:     var(--lrn-text-sm);
	margin:        var(--lrn-sp-2) 0 0;
	padding:       var(--lrn-sp-1) var(--lrn-sp-2);
	border-radius: var(--lrn-radius-sm);
	color:         var(--lrn-text-secondary);
}

.lrn-sidebar-card__coupon-message--success {
	background: var(--lrn-success-bg);
	color:      var(--lrn-success);
}

.lrn-sidebar-card__coupon-message--error {
	background: var(--lrn-danger-bg);
	color:      var(--lrn-danger);
}

.lrn-sidebar-card__membership-cta {
	margin-top:  var(--lrn-sp-4);
	padding-top: var(--lrn-sp-4);
	border-top:  1px solid var(--lrn-divider);
	text-align:  center;
}

.lrn-sidebar-card__membership-text {
	font-size: var(--lrn-text-sm);
	color:     var(--lrn-text-secondary);
	margin:    0 0 var(--lrn-sp-3);
}

.lrn-sidebar-card__guarantee {
	display:     flex;
	align-items: center;
	gap:         var(--lrn-sp-2);
	font-size:   var(--lrn-text-sm);
	color:       var(--lrn-text-secondary);
	margin-top:  var(--lrn-sp-4);
	padding-top: var(--lrn-sp-4);
	border-top:  1px solid var(--lrn-divider);
}

.lrn-sidebar-card__guarantee svg {
	width:  16px;
	height: 16px;
	color:  var(--lrn-success);
}

/* ==========================================================================
   Single-course main column — section rhythm, layout, title, meta, progress
   ========================================================================== */

.lrn-single-course__section {
	margin-bottom: var(--lrn-sp-10);
}

.lrn-single-course__section h2 {
	font-size:   var(--lrn-text-lg);
	font-weight: var(--lrn-weight-semibold);
	margin:      0 0 var(--lrn-sp-5);
}

.lrn-single-course__progress {
	margin-bottom: var(--lrn-sp-6);
}

.lrn-single-course__progress-header {
	display:         flex;
	justify-content: space-between;
	margin-bottom:   var(--lrn-sp-2);
	font-size:       var(--lrn-text-sm);
}

.lrn-single-course__layout {
	display:               grid;
	grid-template-columns: 1fr 340px;
	gap:                   var(--lrn-sp-8);
	align-items:           start;
}

.lrn-single-course__title {
	font-size:   var(--lrn-text-2xl);
	font-weight: var(--lrn-weight-semibold);
	margin:      0 0 var(--lrn-sp-3);
}

.lrn-single-course__curriculum {
	margin-bottom: var(--lrn-sp-8);
}

.lrn-single-course__sidebar {
	position: sticky;
	/* Clear a theme's sticky/pinned header so the card doesn't slide up UNDER it
	   on scroll (Basecamp #9972595954 — Reign pins a 90px header at top:0).
	   single-course-sticky.js measures the active sticky header and sets
	   --lrn-sticky-header-offset; it defaults to 0 on themes without one, so the
	   card keeps its plain sp-8 gap there (no regression). */
	top:      calc(var(--lrn-sticky-header-offset, 0px) + var(--lrn-sp-8));
}

/* The "Already have an account? Log in" line sits under the full-width sign-up
   button; centre it so it reads as balanced beneath the button (BC #9972620106). */
.lrn-sidebar-card__login-alt {
	text-align: center;
}

/* Comments + Q&A sit inside __main and share the section rhythm. The card
   border/padding comes from the companion .lrn-card class; this just adds
   the bottom spacing. */
.lrn-single-course__comments {
	margin-bottom: var(--lrn-sp-10);
	padding:       var(--lrn-sp-6);
}

.lrn-single-course__qa {
	margin-bottom: var(--lrn-sp-10);
}

/* ==========================================================================
   Curriculum — accordion of sections, each holding a list of lessons,
   topics, and quizzes. Renders both in the sales view (locked) and the
   learning view (with completion checkmarks).
   ========================================================================== */

.lrn-curriculum {
	margin-bottom: var(--lrn-sp-6);
}

.lrn-curriculum__section {
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-lg);
	margin-bottom: var(--lrn-sp-3);
	overflow:      hidden;
}

.lrn-curriculum__section[open] {
	border-color: var(--lrn-border-heavy);
}

.lrn-curriculum__section-title {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         var(--lrn-sp-4);
	font-weight:     var(--lrn-weight-semibold);
	font-size:       var(--lrn-text-base);
	cursor:          pointer;
	background:      var(--lrn-bg-secondary);
	list-style:      none;
}

.lrn-curriculum__section-title::-webkit-details-marker {
	display: none;
}

.lrn-curriculum__section-count {
	font-size:   var(--lrn-text-sm);
	font-weight: var(--lrn-weight-normal);
	color:       var(--lrn-text-tertiary);
}

.lrn-curriculum__lessons {
	list-style: none;
	margin:     0;
	padding:    0;
}

.lrn-curriculum__lesson {
	border-top: 1px solid var(--lrn-divider);
}

.lrn-curriculum__lesson-row {
	display:     flex;
	align-items: center;
	gap:         var(--lrn-sp-2);
	padding:     var(--lrn-sp-3) var(--lrn-sp-4);
}

.lrn-curriculum__lesson-row a {
	color:           var(--lrn-text);
	text-decoration: none;
	flex:            1;
}

.lrn-curriculum__lesson-row a:hover {
	color: var(--lrn-accent);
}

.lrn-curriculum__lesson--done .lrn-curriculum__lesson-row a {
	color: var(--lrn-text-secondary);
}

.lrn-curriculum__icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	color:           var(--lrn-accent);
	flex-shrink:     0;
	width:           20px;
}

.lrn-curriculum__check {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	font-size:       var(--lrn-text-sm);
	color:           var(--lrn-success);
	flex-shrink:     0;
	width:           20px;
}

/* Lucide icons default to 24px and would overflow the icon column, crowding
   the title and swallowing the row gap. Constrain every curriculum glyph to a
   consistent size so the gap before the title reads correctly. */
.lrn-curriculum__icon svg,
.lrn-curriculum__quiz-icon svg,
.lrn-curriculum__section-label svg {
	width:  18px;
	height: 18px;
}

.lrn-curriculum__type-label {
	font-size: var(--lrn-text-xs);
	color:     var(--lrn-text-tertiary);
}

.lrn-curriculum__topics {
	list-style:          none;
	margin:              0;
	padding-block:       0;
	padding-inline-start: var(--lrn-sp-10);
	padding-inline-end:  0;
}

.lrn-curriculum__topic {
	display:     flex;
	align-items: center;
	gap:         var(--lrn-sp-2);
	padding:     var(--lrn-sp-2) var(--lrn-sp-4);
	font-size:   var(--lrn-text-sm);
}

.lrn-curriculum__topic-icon {
	color:       var(--lrn-text-tertiary);
	flex-shrink: 0;
}

.lrn-curriculum__topic a {
	color:           var(--lrn-text-secondary);
	text-decoration: none;
}

.lrn-curriculum__topic a:hover {
	color: var(--lrn-accent);
}

.lrn-curriculum__quiz {
	display:     flex;
	align-items: center;
	gap:         var(--lrn-sp-2);
	padding:     var(--lrn-sp-3) var(--lrn-sp-4);
	border-top:  1px solid var(--lrn-divider);
	background:  var(--lrn-accent-bg);
}

.lrn-curriculum__quiz-icon {
	display:     inline-flex;
	align-items: center;
	color:       var(--lrn-accent);
	flex-shrink: 0;
	width:       20px;
}

/* Icon + label group on the left of a section summary (e.g. the award icon
   beside "Final assessment"), so the count can sit flush-right via the
   parent's space-between. */
.lrn-curriculum__section-label {
	display:     inline-flex;
	align-items: center;
	gap:         var(--lrn-sp-2);
}

.lrn-curriculum__quiz a {
	color:           var(--lrn-text);
	text-decoration: none;
	font-weight:     var(--lrn-weight-medium);
	flex:            1;
}

.lrn-curriculum__quiz a:hover {
	color: var(--lrn-accent);
}

.lrn-curriculum__quiz-pass {
	font-size: var(--lrn-text-xs);
	color:     var(--lrn-text-tertiary);
}

/* ==========================================================================
   Curriculum drawer — mobile bottom sheet

   Below the desktop breakpoint the inline sidebar is hidden and the
   drawer toggle becomes visible. Tapping it slides the curriculum up
   from the bottom of the viewport, backed by a tinted overlay.
   ========================================================================== */

.lrn-curriculum-drawer__toggle {
	display: none;
}

.lrn-curriculum-drawer {
	display:  none;
	position: fixed;
	inset:    0;
	z-index:  400;
}

.lrn-curriculum-drawer--open {
	display: block;
}

.lrn-curriculum-drawer__backdrop {
	position:                absolute;
	inset:                   0;
	background:              rgba(0, 0, 0, 0.4);
	backdrop-filter:         blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.lrn-curriculum-drawer__sheet {
	position:                absolute;
	left:                    0;
	right:                   0;
	bottom:                  0;
	max-height:              calc(100 * var(--lrn-vh) - var(--lrn-sp-12));
	display:                 flex;
	flex-direction:          column;
	background:              var(--lrn-bg);
	border-top-left-radius:  var(--lrn-radius-xl);
	border-top-right-radius: var(--lrn-radius-xl);
	box-shadow:              var(--lrn-shadow-overlay);
	padding-bottom:          env(safe-area-inset-bottom, 0px);
	transform:               translateY(100%);
	transition:              transform 200ms var(--lrn-ease-out-expo);
}

.lrn-curriculum-drawer--open .lrn-curriculum-drawer__sheet {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.lrn-curriculum-drawer__sheet {
		transition: none;
	}
}

.lrn-curriculum-drawer__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             var(--lrn-sp-3);
	padding:         var(--lrn-sp-4) var(--lrn-sp-5);
	border-bottom:   1px solid var(--lrn-divider);
}

.lrn-curriculum-drawer__title {
	margin:      0;
	font-size:   var(--lrn-text-lg);
	font-weight: var(--lrn-weight-semibold);
	color:       var(--lrn-text);
}

.lrn-curriculum-drawer__body {
	overflow-y: auto;
	padding:    var(--lrn-sp-3) var(--lrn-sp-4) var(--lrn-sp-5);
}

/* ==========================================================================
   Responsive — exactly two breakpoints

   Per ux-foundation responsive rules: 1024px (tablet ↔ desktop) and
   640px (mobile). The previous slice held three stops (480 / 767 / 768);
   they collapse into this pair.
   ========================================================================== */

@media (min-width: 1024px) {
	/* Desktop: keep the inline curriculum sidebar visible and hide the
	   drawer that would otherwise float above the layout. */
	.lrn-curriculum-drawer {
		display: none;
	}
}

@media (max-width: 640px) {
	/* Mobile: the sidebar drops below the main column, the price chip
	   shrinks for readability, and the drawer toggle becomes the
	   primary way to view the curriculum. */
	.lrn-single-course__layout {
		grid-template-columns: 1fr;
	}

	.lrn-single-course__sidebar {
		position: static;
	}

	.lrn-sidebar-card__price {
		font-size: var(--lrn-text-xl);
	}

	.lrn-curriculum-drawer__toggle {
		display: inline-flex;
	}
}

/* ─────────────────────────────────────────────────────────────────────
   Review form (J-01.20) — write-or-posted card shown to enrolled
   students. Stars use radio inputs styled as ★ glyphs with hover/focus
   highlighting through sibling/has selectors. Posted state shares the
   container class so the resting layout doesn't reflow on submit.
   ─────────────────────────────────────────────────────────────────── */
.lrn-review-form {
	padding: var(--lrn-sp-6);
	display: flex;
	flex-direction: column;
	gap: var(--lrn-sp-4);
}

.lrn-review-form__title {
	margin: 0;
	font-size: var(--lrn-text-lg);
	font-weight: 600;
}

.lrn-review-form__subtitle {
	margin: 0;
	color: var(--lrn-text-secondary);
	font-size: var(--lrn-text-sm);
}

.lrn-review-form__alert {
	padding: var(--lrn-sp-3) var(--lrn-sp-4);
	border-radius: var(--lrn-radius-md);
	background: var(--lrn-danger-soft, #fdecea);
	background: color-mix(in srgb, var(--lrn-danger, #d04040) 12%, transparent);
	color: var(--lrn-danger, #d04040);
	font-size: var(--lrn-text-sm);
}

.lrn-review-form__rating {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--lrn-sp-2);
}

.lrn-review-form__rating legend {
	font-size: var(--lrn-text-sm);
	font-weight: 600;
	margin-bottom: var(--lrn-sp-1);
}

.lrn-review-form__stars {
	display: flex;
	gap: var(--lrn-sp-1);
}

.lrn-review-form__star-label {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.lrn-review-form__star-label input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.lrn-review-form__star {
	display: inline-block;
	font-size: var(--lrn-text-2xl);
	line-height: 1;
	/* Empty stars must be clearly visible on the white form card. The old
	   --lrn-bg-tertiary (#f6f6f6) was near-white, so the rating selector looked
	   blank / unrenderable and users could not see what to click
	   (Basecamp #9972752478). */
	color: var(--lrn-border-heavy);
	transition: color 120ms ease;
}

/* Selected: the checked star + every star before it. DOM order is 1→5, so a
   star is "before" the checked one when it has a LATER checked sibling. (The
   old rule relied on an `.is-before` class no JS ever set, so only the single
   clicked star ever filled.) */
.lrn-review-form__star-label:has(input:checked) .lrn-review-form__star,
.lrn-review-form__star-label:has(~ .lrn-review-form__star-label input:checked) .lrn-review-form__star {
	color: var(--lrn-gold);
}

/* Hover preview takes over from the selected state: reset the whole group, then
   gold the hovered star + every star before it. */
.lrn-review-form__stars:hover .lrn-review-form__star {
	color: var(--lrn-border-heavy);
}

.lrn-review-form__stars:hover .lrn-review-form__star-label:hover .lrn-review-form__star,
.lrn-review-form__stars:hover .lrn-review-form__star-label:has(~ .lrn-review-form__star-label:hover) .lrn-review-form__star {
	color: var(--lrn-gold);
}

.lrn-review-form__star-label input[type="radio"]:focus-visible + .lrn-review-form__star {
	outline: 3px solid color-mix(in srgb, var(--lrn-accent) 30%, transparent);
	outline-offset: 0;
	border-radius: 2px;
}

/* The :has-based "highlight every star up to checked" requires sibling
   ordering, which the simpler :has selector above only resolves on the
   element with the checked input. Fall back to a JS-free progressive
   fill: every label before the checked one inherits the gold via the
   :has(~ ...) selector below. */
.lrn-review-form__stars:has(input[value="5"]:checked) .lrn-review-form__star-label .lrn-review-form__star { color: var(--lrn-gold); }
.lrn-review-form__stars:has(input[value="4"]:checked) .lrn-review-form__star-label:nth-of-type(-n+4) .lrn-review-form__star { color: var(--lrn-gold); }
.lrn-review-form__stars:has(input[value="3"]:checked) .lrn-review-form__star-label:nth-of-type(-n+3) .lrn-review-form__star { color: var(--lrn-gold); }
.lrn-review-form__stars:has(input[value="2"]:checked) .lrn-review-form__star-label:nth-of-type(-n+2) .lrn-review-form__star { color: var(--lrn-gold); }
.lrn-review-form__stars:has(input[value="1"]:checked) .lrn-review-form__star-label:nth-of-type(1)     .lrn-review-form__star { color: var(--lrn-gold); }

.lrn-review-form--posted {
	gap: var(--lrn-sp-2);
}

.lrn-review-form__posted-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--lrn-sp-4);
}

.lrn-review-form__posted-date {
	color: var(--lrn-text-secondary);
	font-size: var(--lrn-text-sm);
}

.lrn-review-form__posted-stars {
	display: flex;
	gap: var(--lrn-sp-1);
	font-size: var(--lrn-text-xl);
}

.lrn-review-form__posted-title {
	margin: var(--lrn-sp-2) 0 0;
	font-size: var(--lrn-text-base);
	font-weight: 600;
}

.lrn-review-form__posted-body {
	margin: 0;
	color: var(--lrn-text);
}

/* ── Mobile sticky buy bar ──────────────────────────────────────────────────
   On phones the purchase card is the last thing on the page (~4000px down), so
   a visitor has no visible price/CTA without scrolling to the end. This pins a
   compact price + primary action to the bottom of the viewport. Hidden on
   desktop, where the sidebar purchase card is always visible. */
.lrn-sticky-buy-bar {
	display: none;
}

@media (max-width: 640px) {
	.lrn-sticky-buy-bar {
		position:        fixed;
		inset-inline:    0;
		bottom:          0;
		z-index:         50;
		display:         flex;
		align-items:     center;
		gap:             var(--lrn-sp-3);
		padding:         var(--lrn-sp-3) var(--lrn-sp-4);
		background:      var(--lrn-bg);
		border-top:      1px solid var(--lrn-border);
		box-shadow:      0 -2px 12px color-mix(in srgb, var(--lrn-text) 12%, transparent);
		padding-bottom:  calc(var(--lrn-sp-3) + env(safe-area-inset-bottom, 0px));
	}

	.lrn-sticky-buy-bar__price {
		font-size:   var(--lrn-text-lg);
		font-weight: 700;
		color:       var(--lrn-text);
		white-space: nowrap;
	}

	.lrn-sticky-buy-bar__cta {
		flex:        1 1 auto;
		text-align:  center;
		min-height:  var(--lrn-touch-min);
		display:     inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Keep page content clear of the fixed bar so the footer/last card isn't
	   hidden behind it. */
	.lrn-single-course,
	main.lrn-single-course {
		padding-bottom: calc(var(--lrn-touch-min) + var(--lrn-sp-8));
	}
}