/*
 * MC LearnPress UI — course card
 * Handle: mc-lp-course-card  (depends on mc-lp-base)
 *
 * The single card component shared by three screens — the courses archive
 * grid, the "related courses" strip on a single course, and the instructor
 * profile grid. Markup contract: templates/parts/course-card.php.
 *
 * Source of truth: Figma component `3027:15919` (327 × 454, Cairo).
 *
 *   card          327 wide · radius 16 · white · drop-shadow 0 0 2 #00000026
 *                 padding-block-end 16
 *   media         327 × 202  (aspect ratio 327/202) · top corners 16
 *   badge         red/700 · padding 2/16 · radius 24 · 14/24 medium · inset 16
 *   body          padding-block-start 16 · padding-inline 16 · gap 24
 *   content       gap 8
 *   rating        gap 6 · 14/16 · count slate/500 · value yellow/600 · star 16
 *   title         16/24 bold · dark blue/500
 *   instructor    gap 4 · 14/24 medium · slate/500 · avatar 16 round
 *   meta          padding-block 8 · items padding-inline 8 · gap 4 ·
 *                 14/20 semibold · slate/500 · hairline slate/200 separators
 *   price         gap 10 · current 18/28 bold dark blue/500 ·
 *                 regular 14/20 regular slate/500 line-through
 *   cta           full width · height 40 · radius full · dark blue/500 ·
 *                 16/24 semibold white · padding 8/48
 *
 * RTL NOTE — the Figma frame is an RTL layout expressed in Figma's LTR
 * coordinate space, so every `items-end` / `justify-end` in the exported code
 * is really "align to the inline START". They are all translated to flex-start
 * here; using flex-end would push the content to the wrong edge under
 * `dir="rtl"`. DOM order in the template is reading order, which is why the
 * rating value precedes the star and the current price precedes the struck
 * regular one.
 *
 * SCOPING NOTE — every rule below used to be prefixed `.mc-lp `, i.e. the whole
 * stylesheet was inert unless the body carried the class MC_LP_Assets::body_class()
 * adds. That is one failure away from an entirely unstyled card, and it is not a
 * failure the card can detect: the class is absent whenever `detect_screens()`
 * returns empty (its `LP_Page_Controller` probes are wrapped in a try/catch that
 * logs and returns no screens), and it is absent on any surface that renders a
 * card outside a recognised LearnPress page.
 *
 * The prefix was there purely for specificity, because base.css styled bare
 * elements as `.mc-lp a` / `.mc-lp p` / `.mc-lp ul` / `.mc-lp h3` / `.mc-lp img`
 * — (0,1,1), which beats a lone class. Those defaults are now wrapped in
 * `:where()` and carry zero specificity, so the prefix buys nothing that the
 * component's own root class cannot.
 *
 * Rules are therefore scoped on `.mc-course-card` instead: descendants read
 * `.mc-course-card .mc-course-card__x` and the root reads
 * `.mc-course-card.mc-course-card`. Both are (0,2,0) — the exact weight the
 * `.mc-lp` prefix used to provide, still enough to out-specify LearnPress'
 * `.learn-press-courses[data-layout=grid] .course` (0,2,0) by source order and
 * `.learn-press-courses .course-content` (0,2,0) alike — but they depend only on
 * markup templates/parts/course-card.php always emits.
 *
 * Logical properties only — no physical directional properties in this file.
 */

/* ==========================================================================
   1. Card
   ========================================================================== */

/*
 * The class is repeated to (0,3,0). That is a specificity device, not a typo:
 * LearnPress owns this element's box too, via
 * `.learn-press-courses[data-layout=grid] .course { padding: 0 16px }`
 * (learnpress.css:5336) at (0,2,0) — and our card carries `.course`
 * (course-card.php:365) so the rule matches. At (0,2,0) both declarations tie and
 * source order decides, which is not stable: LearnPress enqueues learnpress.css
 * from `wp_head` priority -1 on classic themes (it prints first, we win), but on
 * block themes it is merely registered and then enqueued during block render
 * (ArchiveCourseBlockLegacy:31) so it prints in the FOOTER and wins instead —
 * insetting the thumbnail by 16px and erasing the card's `padding-block-end`.
 * A third class removes the coin-flip.
 */
.mc-course-card.mc-course-card.mc-course-card {
	/* Figma effect: drop-shadow 0 0 2px #00000026 — off the --mc-shadow-* scale. */
	--mc-course-card-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
	--mc-course-card-media-ratio: 327 / 202;
	/* Figma CTA height. --mc-btn-height (48) is the page-level button size. */
	--mc-course-card-cta-height: 40px;
	/* Figma price gap 10px — between --mc-space-2 (8) and --mc-space-3 (12). */
	--mc-course-card-price-gap: 10px;

	position: relative;
	display: flex;
	flex-direction: column;

	/*
	 * LAST-RESORT WIDTH. This describes the card AS AN ITEM of whatever lays it
	 * out, and it is the one guard that needs no ancestor selector to work —
	 * which is exactly why it lives on the component root rather than in the
	 * archive's grid rules. A guard scoped to the archive grid cannot fire in the
	 * case it exists to cover: the grid not applying.
	 *
	 * Flex properties are ignored by grid items, so this is inert in every grid
	 * this card is used in (archive, instructor, related). It only takes effect
	 * inside a FLEX container — i.e. LearnPress' own
	 * `.learn-press-courses { display: flex; flex-wrap: wrap }` (learnpress.css:4987),
	 * which is what is live whenever our grid rules do not match.
	 *
	 * In that container LearnPress sizes loop items only below 992px
	 * (`.learn-press-courses[data-layout=grid] .course { width: 50% }` at ≤992,
	 * `100%` at ≤767 — learnpress.css:5340,5345). Above 992 the card has no width
	 * at all, so it falls back to `flex-basis: auto` → max-content, shrinkable to
	 * nothing: `overflow: hidden` two lines below switches off the flex automatic
	 * minimum size (CSS Flexbox §4.5, which applies the `auto` minimum only when
	 * overflow is visible), so there is no floor to shrink against. An explicit
	 * basis restores one.
	 */
	flex: 1 1 min(100%, 240px);

	height: 100%;
	max-inline-size: 100%;
	margin: 0;
	padding: 0;
	padding-block-end: var(--mc-space-4);
	border: 0;
	border-radius: var(--mc-radius-xl);
	background: var(--mc-color-white);
	box-shadow: var(--mc-course-card-shadow);
	list-style: none;
	overflow: hidden;
	transition: box-shadow var(--mc-transition);
}

.mc-course-card.mc-course-card:hover,
.mc-course-card.mc-course-card:focus-within {
	box-shadow: var(--mc-shadow-md);
}

/* ==========================================================================
   2. Media
   ========================================================================== */

/*
 * `inline-size: 100%` is explicit rather than left to the block default: the
 * media box is the one element whose height is derived from its width (via
 * `aspect-ratio`), so anything that leaves its width to shrink-to-fit — a flex
 * or inline-block ancestor introduced by a theme — collapses the thumbnail into
 * a blob with two 16px corner radii and nothing between them. Pinning the width
 * to the card keeps the 327/202 ratio honest at every column size.
 */
.mc-course-card .mc-course-card__media {
	position: relative;
	display: block;
	inline-size: 100%;
	aspect-ratio: var(--mc-course-card-media-ratio);
	border-start-start-radius: var(--mc-radius-xl);
	border-start-end-radius: var(--mc-radius-xl);
	background: var(--mc-color-slate-100);
	overflow: hidden;
}

.mc-course-card .mc-course-card__media-link {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.mc-course-card .mc-course-card__thumb {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* The red "New" pill overlapping the thumbnail at the inline start. */
.mc-course-card .mc-course-card__badge {
	position: absolute;
	z-index: 2;
	inset-block-start: var(--mc-space-4);
	inset-inline-start: var(--mc-space-4);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Figma: padding 2px 16px — 2px is off the spacing scale. */
	padding-block: 2px;
	padding-inline: var(--mc-space-4);
	border-radius: var(--mc-radius-2xl);
	background: var(--mc-color-danger);
	color: var(--mc-color-text-invert);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-base);
	font-weight: var(--mc-font-weight-medium);
	white-space: nowrap;
}

/* ==========================================================================
   3. Body
   ========================================================================== */

.mc-course-card .mc-course-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--mc-space-6);
	padding-block-start: var(--mc-space-4);
	padding-inline: var(--mc-space-4);
}

.mc-course-card .mc-course-card__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--mc-space-2);
	min-width: 0;
}

/* ==========================================================================
   4. Rating — one star, not a five-star rail
   ========================================================================== */

.mc-course-card .mc-course-card__rating {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--mc-space-1-5);
	margin: 0;
	min-block-size: var(--mc-leading-xs);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-xs);
	font-weight: var(--mc-font-weight-regular);
}

.mc-course-card .mc-course-card__rating-score {
	display: inline-flex;
	align-items: center;
	gap: var(--mc-space-1);
	color: var(--mc-color-yellow-600);
}

.mc-course-card .mc-course-card__rating-value {
	font-variant-numeric: lining-nums tabular-nums;
}

.mc-course-card .mc-course-card__rating-star {
	width: var(--mc-icon-size-sm);
	height: var(--mc-icon-size-sm);
	flex: none;
	color: var(--mc-color-star);
	fill: currentColor;
}

.mc-course-card .mc-course-card__rating-count {
	color: var(--mc-color-text-muted);
}

/* ==========================================================================
   5. Title
   ========================================================================== */

.mc-course-card .mc-course-card__title {
	margin: 0;
	min-inline-size: 0;
	font-size: var(--mc-font-size-base);
	line-height: var(--mc-leading-base);
	font-weight: var(--mc-font-weight-bold);
	color: var(--mc-color-primary);
	text-align: start;
}

/*
 * `overflow-wrap: break-word`, NOT `anywhere`. The two behave identically once
 * a word genuinely cannot fit, but they differ in what they tell the layout
 * engine beforehand: `anywhere` makes the element's min-content size a single
 * character, so an ancestor sized from its content — a grid track with a `0`
 * minimum, a shrinking flex item — is told the title is happy at ~10px wide and
 * duly collapses the whole card. `break-word` keeps the min-content size at the
 * longest word, which is what makes a collapsing column visible as overflow
 * instead of silently rendering one letter per line.
 */
.mc-course-card .mc-course-card__link {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	overflow-wrap: break-word;
}

.mc-course-card .mc-course-card__link:hover,
.mc-course-card .mc-course-card__link:focus-visible {
	color: var(--mc-color-primary-hover);
	text-decoration: underline;
}

/* ==========================================================================
   6. Instructor
   ========================================================================== */

.mc-course-card .mc-course-card__instructor {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--mc-space-1);
	margin: 0;
	min-block-size: var(--mc-leading-sm);
	min-width: 0;
	font-size: var(--mc-font-size-sm);
	/* Figma text style is 14/24, but the row frame is 20 tall — the 20px
	   leading keeps the 156px content column adding up exactly. */
	line-height: var(--mc-leading-sm);
	font-weight: var(--mc-font-weight-medium);
	color: var(--mc-color-text-muted);
}

.mc-course-card .mc-course-card__instructor-avatar {
	display: block;
	width: var(--mc-icon-size-sm);
	height: var(--mc-icon-size-sm);
	flex: none;
	border-radius: var(--mc-radius-full);
	object-fit: cover;
	background: var(--mc-color-slate-100);
}

.mc-course-card .mc-course-card__instructor-icon {
	color: var(--mc-color-text-subtle);
}

.mc-course-card .mc-course-card__instructor-name {
	min-width: 0;
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mc-course-card a.mc-course-card__instructor-name:hover,
.mc-course-card a.mc-course-card__instructor-name:focus-visible {
	color: var(--mc-color-primary);
}

/* ==========================================================================
   7. Meta row — icon then text, hairline separators between pairs
   ========================================================================== */

.mc-course-card .mc-course-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	row-gap: var(--mc-space-1);
	margin: 0;
	padding-block: var(--mc-space-2);
	padding-inline: 0;
	list-style: none;
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	font-weight: var(--mc-font-weight-semibold);
	color: var(--mc-color-text-muted);
}

/*
 * `white-space: nowrap` keeps an icon and its value on one line — "20 أسبوع"
 * must never split across a line break. The pairs themselves wrap onto a second
 * row when the card is narrow, which is why `.mc-course-card__meta` above sets
 * `flex-wrap: wrap` and a `row-gap`.
 */
.mc-course-card .mc-course-card__meta-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mc-space-1);
	min-inline-size: 0;
	padding-inline: var(--mc-space-2);
	white-space: nowrap;
}

/* The pair at the inline start sits flush with the body padding. */
.mc-course-card .mc-course-card__meta-item:first-child {
	padding-inline-start: 0;
}

.mc-course-card .mc-course-card__meta-item + .mc-course-card__meta-item {
	border-inline-start: 1px solid var(--mc-color-border);
}

.mc-course-card .mc-course-card__meta-item .mc-icon {
	color: inherit;
}

/*
 * Deliberately NOT `overflow: hidden; text-overflow: ellipsis`. That pairing was
 * what produced "20 أسبوع" rendered as "أس": `text-overflow` is inert on an
 * inline box, so the ellipsis never appeared and `overflow: hidden` simply
 * guillotined the text mid-word with no indication anything had been cut. The
 * pair wraps to the next row instead — the row is a wrapping flex container, so
 * there is somewhere for it to go.
 */
.mc-course-card .mc-course-card__meta-text {
	min-inline-size: 0;
}

/* ==========================================================================
   8. Price
   ========================================================================== */

.mc-course-card .mc-course-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--mc-course-card-price-gap);
	margin: 0;
	min-block-size: var(--mc-leading-lg);
}

.mc-course-card .mc-course-card__price-current {
	font-size: var(--mc-font-size-lg);
	line-height: var(--mc-leading-lg);
	font-weight: var(--mc-font-weight-bold);
	color: var(--mc-color-primary);
	text-transform: capitalize;
}

.mc-course-card .mc-course-card__price-regular {
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	font-weight: var(--mc-font-weight-regular);
	color: var(--mc-color-text-muted);
	text-decoration: line-through;
}

/* ==========================================================================
   9. Call to action
   ========================================================================== */

.mc-course-card .mc-course-card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-block-start: auto;
	min-block-size: var(--mc-course-card-cta-height);
	padding-block: var(--mc-space-2);
	padding-inline: var(--mc-space-12);
	border: 0;
	border-radius: var(--mc-radius-full);
	background: var(--mc-color-primary);
	color: var(--mc-color-text-invert);
	font-size: var(--mc-font-size-base);
	line-height: var(--mc-leading-base);
	font-weight: var(--mc-font-weight-semibold);
	text-align: center;
	text-decoration: none;
	transition: background-color var(--mc-transition-fast);
}

.mc-course-card .mc-course-card__cta:hover,
.mc-course-card .mc-course-card__cta:focus-visible {
	background: var(--mc-color-primary-hover);
	color: var(--mc-color-text-invert);
}

/* ==========================================================================
   10. Contexts
   The three surfaces share one card and the markup is identical; only the
   grid around it changes, and each screen stylesheet owns that. The
   `--archive` / `--related` / `--instructor` and `--new` modifiers are
   emitted as hooks for those sheets and are intentionally unstyled here.

   No breakpoints: the card is fluid and every row either wraps
   (`.mc-course-card__meta`) or clamps (`.mc-course-card__link`), so the same
   rules hold from the 1-column mobile grid up to the 4-column ≥1280 one —
   where the card is at its narrowest, not its widest.
   ========================================================================== */