/* ==========================================================
  Courses (momzi_course — Momzi Core plugin):
  single-momzi_course.php + archive-momzi_course.php +
  taxonomy-momzi_course_cat.php + templates/course/*.
  Loaded only there, after pages-base.css (tokens, chip, blobs, container).
  Single: Figma "Course - PDP" (1920 frame, 1440 container: 1074 main + 24 + 342 side).
  Archive: templates/course/archive-hero|list|benefits.php + card.php
  (.course-item cards, own hover overlay; FAQ reuses templates/home/faq.php).
  Sections: 01 Base / 02 Layout + top row / 03 Media / 04 Title card
            05 Section nav / 06 Description + info boxes / 07 Curriculum
            08 Side (info card + app card) / 09 Archive / 10 Responsive / 11 Motion
============================================================ */

/* ! 01. Base
------------------------------------------------------------ */
/* pages-base gives .contact-page overflow:hidden, which would break the
   sticky side column; clip keeps the blobs clipped without a scroll container. */
.contact-page.course-page,
.contact-page.course-archive {
	overflow: clip;
	--course-sticky-top: calc(24px + var(--wp-admin--admin-bar--height, 0px));
}
.course-page {
	--course-ink: #353535;
	--course-text: #555555;
	--course-muted: #767676;
	--course-brand: #FC6432;
	--course-brand-dark: #A63815;
	--course-peach: #FFF3EE;
	--course-peach-line: #FFE0D5;
	--course-line: #F5EEEB;
	--course-dot: #FFBFA3;
	--course-navy: #0B1A87;
	--course-chip-bg: #FFF1EB;
	--course-chip-line: #F3DDD5;
	--course-radius: 24px;
	--course-shadow: 0 4px 16px rgba(166, 56, 21, 0.06);
	padding: 185px 0 112px;
	color: var(--course-text);
}
.course-page .page-container,
.course-archive .page-container {
	position: relative;
	z-index: 1;
}
.course-dot {
	flex: 0 0 4px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--course-dot);
}
.course-box {
	padding: 24px;
	border-radius: var(--course-radius);
	background: #fff;
	box-shadow: var(--course-shadow);
}

/* ! 02. Layout + top row — desktop: main column + sticky side (342); mobile: stacked
------------------------------------------------------------ */
.course-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 48px;
}
.course-topbar__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.course-topbar__chip {
	min-height: 36px;
	transition: background-color 0.2s ease, color 0.2s ease;
}
a.course-topbar__chip:hover,
a.course-topbar__chip:focus-visible {
	background: var(--course-peach-line);
	color: var(--course-brand-dark);
}
.course-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--course-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
	transition: color 0.2s ease;
}
.course-back:hover,
.course-back:focus-visible {
	color: var(--brand-color);
}
.course-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 342px;
	grid-template-rows: auto auto auto auto auto 1fr;
	grid-template-areas:
		"media side"
		"head  side"
		"tabs  side"
		"desc  side"
		"cur   side"
		".     side";
	column-gap: 24px;
	align-items: start;
}
.course-media      { grid-area: media; }
.course-head       { grid-area: head; }
.course-tabs       { grid-area: tabs; }
.course-desc       { grid-area: desc; }
.course-curriculum { grid-area: cur; }
.course-layout > * { min-width: 0; }
.course-side {
	grid-area: side;
	position: sticky;
	top: var(--course-sticky-top);
	display: grid;
	gap: 46px;
}

/* ! 03. Media (video / featured image) — 1074 × 560, radius 24
------------------------------------------------------------ */
.course-media {
	position: relative;
	margin: 0 0 47px;
	overflow: hidden;
	border-radius: var(--course-radius);
	background: #1E1A19;
	aspect-ratio: 1074 / 560;
}
.course-media--image {
	background: var(--course-peach);
}
.course-media__video,
.course-media__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.course-media__label {
	position: absolute;
	top: 20px;
	inset-inline-start: 20px;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: calc(100% - 40px);
	margin: 0;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(20, 16, 15, 0.55);
	color: #fff;
	font-size: 12px;
	line-height: 20px;
	pointer-events: none;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: opacity 0.2s ease;
}
.course-media__label .course-media__dot {
	flex: 0 0 4px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--course-brand);
}
.course-media__label-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.course-media__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--course-brand);
	color: #fff;
	box-shadow: 0 8px 24px rgba(252, 100, 50, 0.35);
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease, background-color 0.2s ease;
}
.course-media__play svg { margin-inline-end: -3px; }
.course-media__play:hover {
	background: var(--brand-color-hover, #E9541F);
	transform: translate(-50%, -50%) scale(1.06);
}
.course-media__play:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}
.course-media.is-playing .course-media__play,
.course-media.is-playing .course-media__label {
	display: none;
}

/* ! 04. Title card — h1, quote (چکیده), meta row
------------------------------------------------------------ */
.course-head {
	margin-bottom: 46px;
	padding: 24px;
	border-radius: var(--course-radius);
	background: #fff;
	box-shadow: var(--course-shadow);
}
.contact-page .course-title {
	color: var(--course-ink);
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
}
.course-quote {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 16px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--course-peach-line);
	border-inline-start: 4px solid var(--course-brand);
	border-radius: 8px;
	background: var(--course-peach);
}
.course-quote__mark {
	flex: 0 0 24px;
	color: var(--course-brand-dark);
	transform: scaleX(-1);
}
.course-quote p {
	margin: 0;
	color: var(--course-ink);
	font-size: 16px;
	line-height: 28px;
}
.course-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 0;
	margin: 16px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--course-line);
	list-style: none;
}
.course-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--course-muted);
	font-size: 12px;
	line-height: 20px;
}
.course-meta__item + .course-meta__item::before {
	content: "";
	width: 4px;
	height: 4px;
	margin: 0 32px;
	border-radius: 50%;
	background: var(--course-dot);
}
.course-meta .course-icon {
	width: 12px;
	height: 12px;
}

/* ! 05. Section nav — «توضیحات | درس‌ها» (in-page links, pill = current)
------------------------------------------------------------ */
.course-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 29px;
	padding: 8px;
	border-radius: 16px;
	background: var(--course-peach);
	box-shadow: 0 1px 2px rgba(166, 56, 21, 0.06);
}
.course-tabs__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border-radius: 12px;
	color: var(--course-text);
	font-size: 16px;
	font-weight: 500;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.course-tabs__link:hover { color: var(--course-brand-dark); }
.course-tabs__link.is-active {
	background: var(--course-brand);
	color: #fff;
}
#course-description,
#course-curriculum {
	scroll-margin-top: 24px;
}

/* ! 06. Description («معرفی دوره») + info boxes
------------------------------------------------------------ */
.course-desc { margin-bottom: 40px; }
.contact-page .course-box__title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--course-line);
	color: var(--course-navy);
	font-size: 16px;
	font-weight: 700;
	line-height: 28px;
}
.course-box__title svg { flex: 0 0 24px; }
.course-content {
	margin-top: 16px;
	color: var(--course-text);
	font-size: 14px;
	line-height: 28px;
}
.course-content > :first-child { margin-top: 0; }
.course-content > :last-child { margin-bottom: 0; }
.course-content p { margin: 0 0 12px; }
.contact-page .course-content h2,
.contact-page .course-content h3,
.contact-page .course-content h4 {
	margin: 24px 0 8px;
	color: var(--course-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 28px;
}
.course-content ul,
.course-content ol {
	margin: 0 0 12px;
	padding-inline-start: 20px;
}
.course-content li::marker { color: var(--course-ink); }
.course-content a {
	color: var(--brand-color);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.course-content img {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
}
.course-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin: 32px 0 0;
}
.course-fact {
	padding: 16px;
	border: 1px solid #D5D4FF;
	border-radius: 16px;
	background: #EEEEFF;
}
.course-fact__label {
	color: var(--course-navy);
	font-size: 12px;
	font-weight: 500;
	line-height: 20px;
}
.course-fact__value {
	margin: 8px 0 0;
	color: var(--course-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 28px;
}
.course-fact__sub {
	margin: 4px 0 0;
	color: var(--course-muted);
	font-size: 12px;
	line-height: 20px;
}

/* ! 07. Curriculum («سرفصل‌ها و جلسات آموزشی», <details> per section)
------------------------------------------------------------ */
.course-curriculum__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}
.contact-page .course-curriculum__title {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--course-ink);
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
}
.course-curriculum__title::before {
	content: "";
	flex: 0 0 4px;
	width: 4px;
	height: 24px;
	border-radius: 4px;
	background: var(--course-brand);
}
.course-curriculum__count {
	margin: 0;
	color: var(--course-muted);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}
.course-units {
	display: grid;
	gap: 20px;
}
.course-unit {
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(166, 56, 21, 0.08);
}
.course-unit__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 88px;
	padding: 16px 24px;
	border-radius: 16px;
	cursor: pointer;
	list-style: none;
	transition: background-color 0.2s ease;
}
.course-unit__summary::-webkit-details-marker { display: none; }
.course-unit__summary:focus-visible {
	outline: 2px solid var(--course-brand);
	outline-offset: -2px;
}
.course-unit[open] {
	box-shadow: 0 0 0 1px var(--course-peach-line), 0 2px 8px rgba(166, 56, 21, 0.06);
}
.course-unit[open] > .course-unit__summary {
	border-radius: 16px 16px 0 0;
	background: var(--course-peach);
	box-shadow: inset 0 -1px 0 var(--course-peach-line);
}
.course-unit__text {
	display: grid;
	gap: 6px;
	min-width: 0;
}
.course-unit__title {
	color: var(--course-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 28px;
}
.course-unit[open] .course-unit__title { color: var(--course-brand-dark); }
.course-unit__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: var(--course-muted);
	font-size: 14px;
	line-height: 24px;
}
.course-unit__chevron {
	flex: 0 0 24px;
	color: var(--course-brand);
	transition: transform 0.2s ease;
}
.course-unit[open] .course-unit__chevron {
	color: var(--course-muted);
	transform: rotate(180deg);
}
.course-lessons {
	margin: 0;
	padding: 0 24px;
	list-style: none;
}
.course-lesson {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 84px;
	padding: 16px 0;
}
.course-lesson + .course-lesson { border-top: 1px solid var(--course-peach-line); }
.course-lesson__icon {
	display: inline-flex;
	flex: 0 0 38px;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--course-peach-line);
	color: var(--course-brand);
}
.course-lesson__title {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--course-ink);
	font-size: 16px;
	font-weight: 500;
	line-height: 28px;
}
.course-lesson__time {
	flex: 0 0 auto;
	color: var(--course-muted);
	font-size: 14px;
	white-space: nowrap;
}

/* ! 08. Side — «اطلاعات دوره» card + app download card
------------------------------------------------------------ */
.course-card {
	padding: 24px;
	border-radius: var(--course-radius);
	background: #fff;
	box-shadow: var(--course-shadow);
}
.contact-page .course-card__title {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--course-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 28px;
}
.course-card__title svg {
	flex: 0 0 24px;
	color: var(--course-brand-dark);
}
.course-card__list { margin: 8px 0 0; }
.course-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0;
}
.course-card__row + .course-card__row { border-top: 1px solid var(--course-line); }
.course-card__row dt {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--course-text);
	font-size: 14px;
	font-weight: 400;
}
.course-card__row dd {
	margin: 0;
	color: var(--course-ink);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}
.course-card__icon {
	display: inline-flex;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
}
.course-card__row--lessons .course-card__icon  { background: #EEF6FF; color: #5FA2F7; }
.course-card__row--minutes .course-card__icon  { background: var(--course-peach); color: var(--course-brand); }
.course-card__row--sections .course-card__icon { background: #F7EAFF; color: #AC30FF; }
.course-card__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-height: 48px;
	margin-top: 8px;
	padding: 8px 20px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
}
.course-card__cta .course-icon {
	flex: 0 0 24px;
	transition: transform 0.2s ease;
}
.course-card__cta:hover .course-icon { transform: translateX(-3px); }
.course-card__note {
	margin: 12px 0 0;
	color: var(--course-text);
	font-size: 12px;
	line-height: 20px;
	text-align: center;
}
.course-app {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24px;
	border-radius: var(--course-radius);
	background: #fff;
	box-shadow: var(--course-shadow);
	text-align: center;
}
.course-app__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--about-peach-line);
	border-radius: 999px;
	background: var(--about-peach);
	color: var(--about-eyebrow);
	font-size: 14px;
	font-weight: 500;
}
.contact-page .course-app__title {
	margin-top: 16px;
	font-size: 17px;
	font-weight: 700;
}
.course-app__qr {
	position: relative;
	width: 200px;
	margin-top: 12px;
	padding: 12px;
}
.course-app__qr::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--brand-color);
	border-radius: 8px;
	pointer-events: none;
	-webkit-mask: conic-gradient(at 28px 28px, transparent 75%, #000 0) 0 0 / calc(100% - 28px) calc(100% - 28px);
	mask: conic-gradient(at 28px 28px, transparent 75%, #000 0) 0 0 / calc(100% - 28px) calc(100% - 28px);
}
.course-app__qr img {
	display: block;
	width: 100%;
	height: auto;
	image-rendering: pixelated;
}
.course-app__text {
	margin: 12px 0 0;
	color: var(--about-text);
	font-size: 14px;
	line-height: 1.9;
}
.course-app__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 48px;
	margin-top: 16px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
}

/* Course category page (taxonomy-momzi_course_cat.php): short header above the list. */
.course-term__hero {
	padding: 182px 0 48px;
}
.contact-page .course-term__title {
	margin-top: 16px;
	color: #2D2D2D;
	font-size: 34px;
	font-weight: 700;
	line-height: 56px;
}
.course-term__desc {
	max-width: 720px;
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 28px;
}
.course-term__back { margin-top: 16px; }

/* ! 09. Archive (/courses/ — Figma "Course - PLP", 1920 frame, 1440 container)
------------------------------------------------------------ */
.course-archive {
	--course-ink: #2D2D2D;
	--course-text: #545454;
	--course-muted: #757575;
	--course-chip-bg: #FFF0EB;
	--course-chip-line: rgba(226, 191, 181, 0.4);
	--course-dot: #FFBFA3;
}
.course-chip-tag {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 16px;
	border: 1px solid var(--course-chip-line);
	border-radius: 999px;
	background: var(--course-chip-bg);
	color: #A53815;
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
	white-space: nowrap;
}

/* Hero: text column (right) + two tilted course cards (left). */
.course-hero {
	position: relative;
	padding: 182px 0 112px;
}
.course-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 830px) minmax(0, 548px);
	justify-content: space-between;
	align-items: start;
	column-gap: 48px;
}
.contact-page .course-hero__title {
	margin: 21px 0 0;
	color: var(--course-ink);
	font-size: 40px;
	font-weight: 700;
	line-height: 64px;
}
.course-hero__accent {
	color: var(--brand-color, #FB6431);
}
.course-hero__lead {
	max-width: 756px;
	margin: 10px 0 0;
	color: var(--course-text);
	font-size: 24px;
	font-weight: 400;
	line-height: 40px;
}
.course-hero__stats {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 756px;
	margin: 38px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid #FFE0D5;
	list-style: none;
}
.course-hero__stat {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.course-hero__stat-value {
	font-size: 24px;
	font-weight: 700;
	line-height: 34px;
}
.course-hero__stat-value--brown { color: #A53815; }
.course-hero__stat-value--blue { color: #0F23AF; }
.course-hero__stat-value--green { color: #1F700E; }
.course-hero__stat-label {
	color: var(--course-muted);
	font-size: 16px;
	line-height: 24px;
}
.course-hero__sep {
	flex: 0 0 1px;
	align-self: stretch;
	max-height: 40px;
	margin: auto 0;
	background: #FFE8E0;
	height: 40px;
}

/* Tilted cards: positions are the Figma frame (548 × 398) in %, inner sizes
   scale with the box (1u = 1/548 of its width) so the pair shrinks as one. */
.course-hero__visual {
	position: relative;
	width: 100%;
	max-width: 548px;
	aspect-ratio: 548 / 398;
	margin-top: -4px;
	justify-self: end;
	container-type: inline-size;
	--u: calc(100cqw / 548);
}
.course-mini {
	position: absolute;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: calc(20 * var(--u));
	background: #fff;
	box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(166, 56, 21, 0.1);
}
.course-mini--front {
	z-index: 2;
	left: 45.69%;
	top: 2.49%;
	width: 52.01%;
	height: 91.46%;
	transform: rotate(-4deg);
}
.course-mini--back {
	z-index: 1;
	left: 1.98%;
	top: 16.92%;
	width: 45.99%;
	height: 80.9%;
	transform: rotate(4deg);
}
.course-hero__visual--single .course-mini--front {
	left: 23.99%;
	top: 4.27%;
}
.course-mini__media {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	background: linear-gradient(180deg, #FDC5B3 0%, #FFF2ED 100%);
}
.course-mini__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.course-mini__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(8 * var(--u));
	padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
}
.course-mini__title {
	overflow: hidden;
	max-width: 100%;
	margin: 0;
	color: #343434;
	font-size: calc(14 * var(--u));
	font-weight: 700;
	line-height: calc(24 * var(--u));
	text-overflow: ellipsis;
	white-space: nowrap;
}
.course-mini__meta {
	display: inline-flex;
	align-items: center;
	gap: calc(10 * var(--u));
	padding: calc(4 * var(--u)) calc(8 * var(--u));
	border-radius: calc(6 * var(--u));
	background: #FFF2ED;
	color: var(--course-muted);
	font-size: calc(10 * var(--u));
	line-height: calc(16 * var(--u));
}
.course-mini__meta-item {
	display: inline-flex;
	align-items: center;
	gap: calc(4 * var(--u));
}
.course-mini__meta .course-icon {
	width: calc(10 * var(--u));
	height: calc(10 * var(--u));
}

/* List */
.course-list {
	position: relative;
	padding: 0 0 94px;
}
.course-list__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 24px;
	margin-bottom: 24px;
}
.contact-page .course-list__title {
	margin: 0;
	color: var(--course-ink);
	font-size: 22px;
	font-weight: 700;
	line-height: 40px;
}
.course-list__desc {
	margin: 2px 0 0;
	color: var(--course-text);
	font-size: 16px;
	line-height: 28px;
}
.course-list__count {
	min-height: 35px;
	flex: 0 0 auto;
}
.course-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.course-grid__item {
	display: flex;
	min-width: 0;
}

/* Card (342 × 440): peach fade behind the image, white body. */
.course-item {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border-radius: 16px;
	background: linear-gradient(180deg, #FDC5B3 0, #FED3C5 70px, #FFFFFF 311px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	transition: box-shadow var(--mz-transition);
}
.course-item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	transition: opacity var(--mz-transition);
	pointer-events: none;
}
.course-item__media {
	position: relative;
	aspect-ratio: 342 / 295;
}
.course-item__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.course-item__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 10px 16px 15px;
}
.contact-page .course-item__title {
	overflow: hidden;
	margin: 0;
	color: var(--course-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 28px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.course-item__link {
	color: inherit;
	text-decoration: none;
}
.course-item__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.course-item__link:hover,
.course-item__link:focus {
	color: inherit;
}
.course-item__excerpt {
	display: -webkit-box;
	overflow: hidden;
	min-height: 48px;
	margin: 7px 0 0;
	color: var(--course-text);
	font-size: 14px;
	line-height: 24px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}
.course-item__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: auto 0 0;
	padding: 7px 0 0;
	border-top: 1px solid #FFF3EE;
	color: var(--course-muted);
	font-size: 12px;
	line-height: 20px;
	list-style: none;
}
.course-item__excerpt + .course-item__meta {
	margin-top: 9px;
}
.course-item__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.course-item__meta-item + .course-item__meta-item::before {
	content: "";
	width: 4px;
	height: 4px;
	margin-inline: 24px 20px;
	border-radius: 50%;
	background: var(--course-dot);
}
.course-item__meta .course-icon {
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
}
.course-item__cta {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding-inline: 28px 20px;
	border-radius: 999px;
	background: var(--brand-color, #FB6431);
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: opacity var(--mz-transition);
	pointer-events: none;
}
.course-item__cta .course-icon {
	width: 20px;
	height: 20px;
}
@media (hover: hover) {
	.course-item:hover {
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.15);
	}
	.course-item:hover::before,
	.course-item:hover .course-item__cta {
		opacity: 1;
	}
}
.course-item:has(.course-item__link:focus-visible) {
	outline: 2px solid var(--mz-card-ring);
	outline-offset: 2px;
}
.course-item:has(.course-item__link:focus-visible)::before,
.course-item:has(.course-item__link:focus-visible) .course-item__cta {
	opacity: 1;
}
@supports selector(:has(*)) {
	.course-item__link:focus-visible {
		outline: none;
	}
}

/* «نمایش N دوره تخصصی دیگر» */
.course-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 54px;
}
.course-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 27px;
	border: 2px solid var(--brand-color, #FB6431);
	border-radius: 999px;
	color: var(--brand-color, #FB6431);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-decoration: none;
	transition: background-color var(--mz-transition), box-shadow var(--mz-transition);
}
.course-more:hover,
.course-more:focus-visible {
	color: var(--brand-color, #FB6431);
	background: var(--course-chip-bg);
}
.course-more:focus-visible {
	outline: 2px solid var(--mz-card-ring);
	outline-offset: 2px;
}
.course-more[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}
.course-more .course-icon {
	width: 20px;
	height: 20px;
}
.course-empty {
	padding: 48px 24px;
	border: 1px dashed var(--about-peach-line, #FFBFA3);
	border-radius: var(--course-radius);
	background: #fff;
	color: var(--course-text);
	font-size: 16px;
	text-align: center;
}

/* Benefits panel */
.course-benefits {
	position: relative;
	padding: 0 0 40px;
}
.course-benefits__panel {
	padding: 60px 24px 64px;
	border: 1px solid #FFDFD4;
	border-radius: 24px;
	background: #FFEBE5;
}
.course-benefits__header {
	margin-bottom: 44px;
	text-align: center;
}
.course-benefits__eyebrow {
	margin: 0;
	color: #A53815;
}
.contact-page .course-benefits__title {
	margin: 3px 0 0;
	color: var(--course-ink);
	font-size: 22px;
	font-weight: 700;
	line-height: 40px;
}
.course-benefits__desc {
	margin: 5px 0 0;
	color: var(--course-text);
	font-size: 16px;
	line-height: 28px;
}
.course-benefits__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 378px));
	justify-content: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.course-benefit {
	min-height: 192px;
	padding: 24px;
	border-radius: 24px;
	background: #fff;
}
.course-benefit__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
}
.course-benefit__icon svg {
	width: 24px;
	height: 24px;
}
.course-benefit__icon--peach { background: #FFF2ED; color: #FB6431; }
.course-benefit__icon--blue { background: #EDF6FF; color: #5EA1F6; }
.course-benefit__icon--yellow { background: #FDFBE8; color: #FDBA24; }
.contact-page .course-benefit__title {
	margin: 10px 0 0;
	color: #343434;
	font-size: 16px;
	font-weight: 700;
	line-height: 28px;
}
.course-benefit__text {
	margin: 7px 0 0;
	color: var(--course-muted);
	font-size: 14px;
	line-height: 24px;
}

/* FAQ (templates/home/faq.php): eyebrow is brand blue in this frame. */
.course-archive .home-faq__eyebrow {
	color: var(--mz-card-ring, #3833FF);
}

/* ! 10. Responsive
------------------------------------------------------------ */
@media (max-width: 1399.98px) {
	.course-layout { grid-template-columns: minmax(0, 1fr) 320px; }
	.course-facts { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
@media (max-width: 991.98px) {
	.course-page { padding-top: 136px; }
	.course-topbar { margin-bottom: 24px; }
	.course-layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas:
			"media"
			"head"
			"card"
			"tabs"
			"desc"
			"cur"
			"app";
	}
	/* Stacked: info card right after the title card, app card at the end. */
	.course-side { display: contents; }
	.course-card { grid-area: card; margin-bottom: 24px; }
	.course-app { grid-area: app; margin-top: 40px; }
	.course-media { margin-bottom: 24px; }
	.course-head { margin-bottom: 24px; }
	.course-tabs { margin-bottom: 24px; }
	.course-term__hero { padding: 136px 0 40px; }
}
@media (max-width: 767.98px) {
	.course-page { padding: 112px 0 72px; }
	.course-topbar { flex-wrap: wrap; }
	.course-media { border-radius: 18px; }
	.course-media__label { top: 12px; inset-inline-start: 12px; max-width: calc(100% - 24px); }
	.course-media__play { width: 56px; height: 56px; }
	.course-head,
	.course-box,
	.course-card,
	.course-app { padding: 20px; border-radius: 20px; }
	.course-quote p { font-size: 15px; line-height: 26px; }
	.course-meta__item + .course-meta__item::before { margin: 0 14px; }
	.course-tabs__link { min-height: 44px; font-size: 15px; }
	.course-desc { margin-bottom: 32px; }
	.course-facts { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; }
	.contact-page .course-curriculum__title { font-size: 18px; }
	.course-units { gap: 12px; }
	.course-unit__summary { min-height: 72px; padding: 14px 16px; }
	.course-lessons { padding: 0 16px; }
	.course-lesson { gap: 12px; min-height: 64px; padding: 12px 0; }
	.course-lesson__icon { flex-basis: 32px; width: 32px; height: 32px; }
	.course-lesson__title { font-size: 14px; line-height: 24px; }
	.course-lesson__time { font-size: 12px; }
	.course-term__hero { padding: 112px 0 32px; }
	.contact-page .course-term__title { font-size: 24px; line-height: 40px; }
}

/* Archive responsive */
@media (max-width: 1199.98px) {
	.course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.contact-page .course-hero__title { font-size: 34px; line-height: 56px; }
	.course-hero__lead { font-size: 20px; line-height: 36px; }
	.course-hero__stat-value { font-size: 20px; line-height: 30px; }
	.course-hero__stat-label { font-size: 14px; }
}
@media (max-width: 991.98px) {
	.course-hero { padding: 136px 0 72px; }
	.course-hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
	.course-hero__visual { justify-self: center; max-width: 460px; margin-top: 0; }
	.course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.course-list { padding-bottom: 72px; }
	.course-benefits__list { grid-template-columns: minmax(0, 560px); }
	.course-benefit { min-height: 0; }
}
@media (max-width: 767.98px) {
	.course-hero { padding: 112px 0 56px; }
	.course-chip-tag { min-height: 34px; padding: 0 14px; font-size: 13px; }
	.contact-page .course-hero__title { margin-top: 16px; font-size: 24px; line-height: 40px; }
	.course-hero__lead { font-size: 16px; line-height: 28px; }
	.course-hero__stats { gap: 12px; margin-top: 24px; padding-top: 24px; }
	.course-hero__stat-value { font-size: 16px; line-height: 26px; }
	.course-hero__stat-label { font-size: 12px; line-height: 20px; }
	.course-hero__sep { height: 32px; }
	.course-hero__visual { max-width: 360px; }
	.course-list { padding-bottom: 56px; }
	.course-list__header { flex-wrap: wrap; align-items: flex-start; }
	.contact-page .course-list__title { font-size: 20px; line-height: 32px; }
	.course-list__desc { font-size: 14px; line-height: 24px; }
	.course-grid { gap: 16px; }
	.course-more-wrap { margin-top: 32px; }
	.course-benefits__panel { padding: 40px 16px; border-radius: 20px; }
	.course-benefits__header { margin-bottom: 24px; }
	.contact-page .course-benefits__title { font-size: 20px; line-height: 32px; }
	.course-benefits__desc { font-size: 14px; line-height: 24px; }
	.course-benefits__list { gap: 16px; }
	.course-benefit { padding: 20px; border-radius: 20px; }
}
@media (max-width: 575.98px) {
	.course-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ! 11. Motion
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.course-topbar__chip,
	.course-back,
	.course-media__play,
	.course-media__label,
	.course-tabs__link,
	.course-unit__summary,
	.course-unit__chevron,
	.course-card__cta .course-icon,
	.course-item,
	.course-item::before,
	.course-item__cta,
	.course-more {
		transition: none;
	}
}