/*
 * MC LearnPress UI — curriculum accordion
 * Handle: mc-lp-curriculum  (depends on mc-lp-base → mc-lp-tokens)
 *
 * ONE component, TWO placements — both rendered by the same code path
 * (`SingleCourseTemplate::html_curriculum()` → MC_LP_Curriculum filters):
 *
 *   .mc-curriculum--tab      single-course Content tab   Figma 3705:26876
 *   .mc-curriculum--player   lesson/quiz player sidebar  Figma 3274:15751
 *
 * Everything below the placement modifiers is shared.
 *
 * Rules: logical properties only (no left/right), variables only (no raw hex),
 * breakpoints hard-coded at 640 / 768 / 1024 / 1280.
 *
 * Contents
 *   1. Root & heading
 *   2. Section (accordion item)
 *   3. Item rows
 *   4. Item states
 *   5. "Show all sections" footer
 *   6. Placement: Content tab
 *   7. Placement: player sidebar
 *   8. Responsive
 */

/* ==========================================================================
   1. Root & heading
   ========================================================================== */

.mc-lp .mc-curriculum {
	display: block;
	width: 100%;
}

/* Figma 3705:27982 — "محتوي الدوره", 20px/28px bold, 24px clear below it. */
.mc-lp .mc-curriculum__heading {
	margin-block-end: var(--mc-space-6);
	font-size: var(--mc-font-size-xl);
	line-height: var(--mc-leading-xl);
	font-weight: var(--mc-font-weight-bold);
	color: var(--mc-color-text);
}

.mc-lp .mc-curriculum__sections {
	/*
	 * Figma 3705:27983 — consecutive sections are separated by a 1px rule with
	 * 8px of air on BOTH sides. The 8px above is this gap; the 8px below is the
	 * `padding-block-start` on the `+ .mc-curriculum__section` rule in §2.
	 */
	gap: var(--mc-space-2);
}

/* ==========================================================================
   2. Section (accordion item)

   Measured from Figma `Component 46` (3705:27984 tab · 3274:16248 player):
     header       16px padding, 24px chevron, 56px tall when closed
     open shell   16px radius, #eff6ff fill, 12px bottom padding
     separator    1px rule, 8px clear above and below
   ========================================================================== */

.mc-lp .mc-curriculum__section {
	/*
	 * No boxed border: the Figma separates sections with a horizontal rule and
	 * fills the OPEN one, it does not outline each of them.
	 */
	border: 0;
	border-radius: var(--mc-radius-xl);
	background: transparent;
}

.mc-lp .mc-curriculum__section + .mc-curriculum__section {
	border-block-start: 1px solid var(--mc-color-border);
	padding-block-start: var(--mc-space-2);
}

/* The expanded section is the only one that carries a fill (Figma: blue/50). */
.mc-lp .mc-curriculum__section.is-open {
	padding-block-end: var(--mc-space-3);
	background: var(--mc-color-surface-alt);
}

.mc-lp .mc-curriculum__section-trigger {
	gap: var(--mc-space-3);
	min-height: 56px;
	padding: var(--mc-space-4);
	border-radius: var(--mc-radius-xl);
	background: transparent;
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	font-weight: var(--mc-font-weight-bold);
	color: var(--mc-color-dark-blue-600);
}

.mc-lp .mc-curriculum__section-trigger:hover,
.mc-lp .mc-curriculum__section-trigger:focus-visible {
	background: var(--mc-color-surface-alt);
}

.mc-lp .mc-curriculum__section-trigger .mc-accordion__title {
	/* Figma header: "1st Week ( Title )" — one line, truncated rather than wrapped. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mc-lp .mc-curriculum__section-trigger .mc-accordion__meta {
	display: inline-flex;
	align-items: center;
	gap: var(--mc-space-2);
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	font-weight: var(--mc-font-weight-regular);
	white-space: nowrap;
}

.mc-lp .mc-curriculum__sep {
	color: var(--mc-color-border-strong);
}

.mc-lp .mc-curriculum__section-trigger .mc-accordion__indicator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mc-icon-size-lg);
	height: var(--mc-icon-size-lg);
	color: var(--mc-color-text-subtle);
}

/* Figma: a 1px rule under the header, then the rows. The fill lives on the
   section shell above, so the panel itself stays transparent. */
.mc-lp .mc-curriculum__section-panel {
	padding: 0;
	border-block-start: 1px solid var(--mc-color-border);
	background: transparent;
}

.mc-lp .mc-curriculum__section-description {
	padding-block: var(--mc-space-3);
	padding-inline: var(--mc-space-4);
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
}

.mc-lp .mc-curriculum__empty {
	padding-block: var(--mc-space-4);
	padding-inline: var(--mc-space-4);
	font-size: var(--mc-font-size-sm);
}

/* ==========================================================================
   3. Item rows

   Figma `Component 46 / sub` (3269:26542): 36px tall, 8px block padding,
   24px inline padding in the Content tab (8px in the narrower player sidebar,
   see §7), 24px radius, 8px between rows, list inset 8px. No rules between
   rows — the design separates them with air, not borders.
   ========================================================================== */

.mc-lp .mc-curriculum__items {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-2);
	margin: 0;
	padding-block: var(--mc-space-2);
	padding-inline: var(--mc-space-2);
	list-style: none;
}

.mc-lp .mc-curriculum__link {
	display: flex;
	align-items: center;
	gap: var(--mc-space-3);
	width: 100%;
	min-height: 36px;
	padding-block: var(--mc-space-2);
	padding-inline: var(--mc-space-6);
	border-radius: var(--mc-radius-2xl);
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	text-decoration: none;
	transition: background-color var(--mc-transition-fast), color var(--mc-transition-fast);
}

/* `.mc-lp` prefix + type is (0,3,1); `.mc-lp a:hover` in base.css is (0,2,1).
   Without the prefix the two tie and the winner depends on stylesheet order. */
.mc-lp a.mc-curriculum__link:hover,
.mc-lp a.mc-curriculum__link:focus-visible {
	background: var(--mc-color-bg);
	color: var(--mc-color-primary);
}

/* Figma glyph box is 16px, not the 24px `--mc-icon-size-lg` used before. */
.mc-lp .mc-curriculum__status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--mc-icon-size-sm);
	height: var(--mc-icon-size-sm);
	color: var(--mc-color-border-strong);
}

.mc-lp .mc-curriculum__status-icon {
	width: 100%;
	height: 100%;
}

.mc-lp .mc-curriculum__body {
	display: flex;
	align-items: center;
	gap: var(--mc-space-2);
	flex: 1 1 auto;
	min-width: 0;
}

.mc-lp .mc-curriculum__type {
	display: inline-flex;
	flex: none;
	color: var(--mc-color-text-subtle);
}

.mc-lp .mc-curriculum__title {
	min-width: 0;
	/* Figma row title is text-sm/semibold. */
	font-weight: var(--mc-font-weight-semibold);
}

.mc-lp .mc-curriculum__meta {
	display: inline-flex;
	align-items: center;
	gap: var(--mc-space-2);
	flex: none;
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	white-space: nowrap;
	/* Durations read as 42:14 — keep the digits monospaced so rows line up. */
	font-variant-numeric: tabular-nums;
}

.mc-lp .mc-curriculum__questions {
	color: var(--mc-color-text-subtle);
}

.mc-lp .mc-curriculum__badge {
	flex: none;
}

/* ==========================================================================
   4. Item states

   Five visually distinct rows, driven by the glyph `curriculum-item.php` picks
   plus the colour applied here:

     completed   check-circle  primary blue, title muted
     current     type glyph    primary blue, blue-tinted pill, bold title
     not started type glyph    slate outline
     quiz        quiz glyph    accent yellow, so it never reads as a lesson
     locked      lock          slate, no pointer

   The glyph itself is chosen server-side — see the table in
   `templates/parts/curriculum-item.php`.
   ========================================================================== */

.mc-lp .mc-curriculum__item.is-completed .mc-curriculum__status {
	color: var(--mc-color-primary);
}

.mc-lp .mc-curriculum__item.is-completed .mc-curriculum__title {
	color: var(--mc-color-text-muted);
}

/*
 * Quizzes carry the accent colour so a glance down the list separates them from
 * lessons even before the glyph shape registers. Completed and locked quizzes
 * keep their state colour — done is done — hence the `:not()` pair.
 */
.mc-lp .mc-curriculum__item--lp_quiz:not(.is-completed):not(.is-locked) .mc-curriculum__status {
	color: var(--mc-color-yellow-600);
}

/* Figma: the viewed row is a filled pill, not an edge bar. */
.mc-lp .mc-curriculum__item.is-current .mc-curriculum__link {
	background: var(--mc-color-blue-100, var(--mc-color-surface-alt));
	color: var(--mc-color-primary);
}

.mc-lp .mc-curriculum__item.is-current .mc-curriculum__status {
	color: var(--mc-color-primary);
}

.mc-lp .mc-curriculum__item.is-current .mc-curriculum__title {
	color: var(--mc-color-primary);
	font-weight: var(--mc-font-weight-bold);
}

.mc-lp .mc-curriculum__item.is-current .mc-curriculum__meta {
	color: var(--mc-color-primary);
}

.mc-lp .mc-curriculum__item.is-preview .mc-curriculum__status {
	color: var(--mc-color-accent);
}

.mc-lp .mc-curriculum__item.is-locked .mc-curriculum__link {
	color: var(--mc-color-text-subtle);
	cursor: not-allowed;
}

.mc-lp .mc-curriculum__item.is-locked .mc-curriculum__status {
	color: var(--mc-color-border-strong);
}

/* ==========================================================================
   5. "Show all sections" footer  — عرض جميع السكاشن (34)
   ========================================================================== */

/* Figma 3705:28006 — a 274x40 pill, centred, 24px below the last section. */
.mc-lp .mc-curriculum__footer {
	display: flex;
	justify-content: center;
	margin-block-start: var(--mc-space-6);
}

.mc-lp .mc-curriculum__more {
	gap: var(--mc-space-2);
	min-height: var(--mc-space-10);
	padding-inline: var(--mc-space-6);
	border-radius: var(--mc-radius-full);
	color: var(--mc-color-text);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	font-weight: var(--mc-font-weight-semibold);
}

.mc-lp .mc-curriculum__more-icon {
	color: var(--mc-color-text-subtle);
	transition: transform var(--mc-transition);
}

.mc-lp .mc-curriculum__more[aria-expanded="true"] .mc-curriculum__more-icon {
	transform: rotate(180deg);
}

/* ==========================================================================
   6. Placement — single-course Content tab

   Figma 3705:27983: the whole tree is inset 16px, sections are 910 of 942 wide.
   Everything else is already the shared default measured in §2–§3.
   ========================================================================== */

.mc-lp .mc-curriculum--tab .mc-curriculum__sections {
	padding-inline: var(--mc-space-4);
}

/* ==========================================================================
   7. Placement — player sidebar

   Same component in a 338px column, so only the horizontal rhythm tightens:
   rows drop from 24px to 8px inline padding (Figma 3274:16248).
   ========================================================================== */

.mc-lp .mc-curriculum--player .mc-curriculum__section-trigger {
	min-height: 52px;
	padding: var(--mc-space-3) var(--mc-space-4);
}

.mc-lp .mc-curriculum--player .mc-curriculum__link {
	padding-inline: var(--mc-space-2);
}

/* ==========================================================================
   8. Responsive
   ========================================================================== */

@media (max-width: 639px) {
	.mc-lp .mc-curriculum--tab .mc-curriculum__sections {
		padding-inline: 0;
	}

	.mc-lp .mc-curriculum__section-trigger {
		flex-wrap: wrap;
		padding-inline: var(--mc-space-3);
	}

	.mc-lp .mc-curriculum__section-trigger .mc-accordion__title {
		flex: 1 1 100%;
		white-space: normal;
	}

	.mc-lp .mc-curriculum__section-trigger .mc-accordion__meta {
		order: 2;
	}

	.mc-lp .mc-curriculum__section-trigger .mc-accordion__indicator {
		order: 3;
		margin-inline-start: auto;
	}

	.mc-lp .mc-curriculum__link {
		padding-inline: var(--mc-space-3);
		align-items: flex-start;
	}

	.mc-lp .mc-curriculum__title {
		white-space: normal;
	}
}