/**
 * The offer card (template-parts/learning/offer-card.php) — course and workshop, v3.
 *
 * v3 redesign (docs/prototypes/offer-card-v3.html), run 2 of 3: transcribes the prototype's `.oc*`
 * rules onto the site's existing `.offer-card*` class names and the type/spacing ladder
 * (docs/design-system.md). Replaces the v2 card (eyebrow/kicker line, one merged fact line, a
 * bordered `.offer-card__go`, a lift-on-hover + zoom motion) with: an inset, rounded course thumb; a
 * label-free stats list (icon above value, hairline dividers) that only ever shows real numbers; a
 * progress bar on an enrolled course and a capacity bar on a workshop, both reusing the same
 * `.offer-card__cap` / `.offer-card__cap-row` / `.offer-card__bar` markup the v2 workshop card
 * already had; a plain text-link CTA where the v2 card drew a border box; and a title-colour +
 * shadow hover with no lift, matching the prototype's calmer motion note.
 *
 * The narrow (date-beside-title) workshop layout used to be `.offer-card--stack`, set from PHP and
 * duplicated by hand in learning.css for the two call sites that never had that class
 * (decisions.md, 2026-09-26/27: "the stacked property list is duplicated across three call sites").
 * v3 replaces all three copies with one container query, unconditional on `.offer-card--workshop`
 * itself: whenever a `home-offer`-named ancestor narrows to 459px or less, the card stacks — no class
 * needed. That ancestor has to be sized to one card, not a whole row: home.css's `.home-rail__item`
 * always was (one card per rail slot), but run 2 first named the two learning.css *grids*
 * `.learning-related` / `.catalog-grid--pairs` themselves, which measures every card in the row at
 * once and never narrows enough at two-up (run 3 fixed this — learning.css now names the per-card
 * `.offer-grid__item` wrapper each grid's caller puts around a card instead). `.offer-card--stack`
 * stays in the markup (front-page.php, unchanged, out of this run's scope) but is no longer what
 * decides the layout.
 *
 * Motion, unchanged in kind from v2: a 1.5% press (`:has(.offer-card__link:active)`, the same
 * `--iz-press-lg` a card's width earns it over a button's `--iz-press`), hover gated to a fine
 * pointer, a `prefers-reduced-motion` rule that keeps only colour/background/border/shadow/opacity
 * transitions, and `.will-reveal` holding the bar's fill at 0 until the card scrolls into view.
 */

.offer-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--iz-line-soft, #e8efee);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	transition: border-color 200ms var(--iz-ease), box-shadow 200ms var(--iz-ease), scale 160ms var(--iz-ease-out);
}
/* Press: the whole card is the title's link stretched over it, so the card answers the press.
   `scale`, not `transform`, because a fine pointer's hover already owns `transform` on the media
   image and the two have to compose without fighting; `--iz-press-lg` (kit.css) because a card is
   wider than a button and the same .97 a button uses would travel three times as far. */
.offer-card:has(.offer-card__link:active) { scale: var(--iz-press-lg); }
/* Course titles clamp to one line (below); a workshop title still has the two-line room a v2 card
   gave it, since nothing beside it needs the second line's space back. */
.offer-card h3 { display: -webkit-box; margin: 0; overflow: hidden; color: var(--color-heading); font: var(--text-h4); text-wrap: balance; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.offer-card h3 a { color: inherit; text-decoration: none; transition: color 160ms var(--iz-ease); }
/* One link per card, stretched over it; everything else in the card is a restatement. */
.offer-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-card); }
.offer-card__link:focus-visible { outline: none; }
.offer-card:has(.offer-card__link:focus-visible) { box-shadow: 0 0 0 3px var(--color-focus-ring); }
@media (hover: hover) and (pointer: fine) {
	.offer-card:hover { border-color: var(--primary-200); box-shadow: var(--iz-shadow-lift); }
	.offer-card:hover h3 a { color: var(--secondary-700); }
	.offer-card:hover .offer-card__media img { transform: scale(1.02); }
	.offer-card:hover .offer-card__go .fa-solid { transform: translateX(-3px); }
}
@media (prefers-reduced-motion: reduce) { .offer-card, .offer-card * { transition-property: color, background-color, border-color, box-shadow, opacity !important; } }

/* ------------------------------------------------------------------ course media + badge */
.offer-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; margin: var(--space-1) var(--space-1) 0; border-radius: 10px; background: var(--primary-100); }
.offer-card__media[data-art="coral"] { background: var(--accent-100); }
.offer-card__media[data-art="green"] { background: var(--secondary-100); }
.offer-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--iz-ease-out); }
.offer-card__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.offer-card__leaf { position: absolute; inset-inline-end: var(--space-2); bottom: var(--space-1); width: 44px; height: 44px; color: var(--primary-500); opacity: .55; }
[data-art="coral"] > .offer-card__leaf { color: var(--accent-500); }
[data-art="green"] > .offer-card__leaf { color: var(--secondary-500); }

/* The «تا ۱۵ مهر» countdown badge: the course version sits in the media's own corner; the workshop
   has no media, so it sits in the card's own corner instead (override below). */
.offer-card__badge {
	position: absolute; inset-inline-end: var(--space-1); top: var(--space-1); z-index: 1;
	display: inline-flex; align-items: center; gap: var(--space-0);
	padding: var(--pad-chip-y) var(--space-1); border-radius: 8px;
	background: rgb(20 46 55 / .72); color: #fff;
	font: 600 var(--text-micro-size)/var(--text-micro-lh) var(--font-body);
	font-variant-numeric: tabular-nums;
	backdrop-filter: blur(4px);
}
.offer-card__badge .fa-solid { font-size: var(--text-caption-size); }
.offer-card__badge--until { background: #e5484d; }
.offer-card--workshop > .offer-card__badge--until { inset-inline-end: var(--pad-row); top: var(--pad-row); }
.offer-card.is-off .offer-card__media img { filter: saturate(.35); opacity: .8; }

/* ------------------------------------------------------------------ body (course) */
.offer-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-stack); min-height: 0; padding: var(--space-2) var(--pad-row) var(--pad-row); }
.offer-card--course h3 { -webkit-line-clamp: 1; }

/* ------------------------------------------------------------------ stats: icon above value,
   hairline dividers, muted — shared by course (end-aligned, tight) and workshop (full row, top and
   bottom hairlines, set below under .offer-card--workshop). */
.offer-card__stats { display: grid; flex: 1 0 auto; align-content: center; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.offer-card__stats li { display: grid; justify-items: center; gap: 1px; min-width: 0; padding: 0 var(--space-1); border-inline-start: 1px solid var(--iz-line-soft); color: var(--iz-ink-soft); font: var(--text-micro); text-align: center; }
.offer-card__stats li:first-child { border-inline-start: 0; }
.offer-card__stats li .fa-solid { font-size: var(--text-body-s-size); color: var(--iz-ink-soft); opacity: .7; }
.offer-card__stats li span { font-variant-numeric: tabular-nums; }
.offer-card--course .offer-card__stats { grid-auto-columns: max-content; justify-content: end; }
.offer-card--course .offer-card__stats li { padding: 0 var(--space-2); }
.offer-card--course .offer-card__stats li:last-child { padding-inline-end: 0; }

/* ------------------------------------------------------------------ bar: progress (course, enrolled)
   or capacity (workshop) — same markup, `.is-learn` for the course reading. Fill is transform-only,
   held at 0 by `.will-reveal` until the card scrolls into view (front-page.php / kit.js). */
.offer-card__cap { display: grid; gap: var(--gap-title); min-width: 0; }
.offer-card__cap-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-inline); overflow: hidden; color: var(--iz-ink-soft); font: var(--text-micro); }
.offer-card__cap-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offer-card__cap-row b { flex: none; color: var(--color-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.offer-card__bar { height: 5px; overflow: hidden; border-radius: 3px; background: var(--primary-50); }
.offer-card__bar i { display: block; height: 100%; border-radius: 3px; background: var(--secondary-500); transform: scaleX(var(--fill, 0)); transform-origin: left center; transition: transform 600ms var(--iz-ease-out) 120ms; }
.will-reveal:not(.is-in) .offer-card__bar i { transform: scaleX(0); }
.offer-card__cap.is-few .offer-card__bar i { background: var(--accent-500); }
.offer-card__cap.is-few .offer-card__cap-row b { color: var(--accent-700); }
.offer-card__cap.is-full .offer-card__bar i, .offer-card.is-off .offer-card__bar i { background: var(--neutral-light, #dce5e5); }
.offer-card__cap.is-full .offer-card__cap-row b { color: var(--iz-ink-soft); }
.offer-card__cap.is-learn .offer-card__bar { background: var(--secondary-50); }

/* ------------------------------------------------------------------ foot: price/status + button
   The foot sits one `--space-stack` under whatever is above it — the body's own gap — and never
   further (owner, 2026-09-29: «gap between the progress bar and price and button»). It used to carry
   `margin-top: auto`, so a card stretched by a taller neighbour (the homepage rail's end tile is 45px
   taller than a workshop card) opened all of that difference between the bar and the price. A
   stretched card now grows in its stats row instead (`.offer-card__stats` is the one flexible line,
   its figures centred in whatever room it is given), so title, bar and foot keep their rhythm. */
.offer-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); min-height: 40px; }

/* The stacked price grid the prototype draws (now above, was + off pill beneath), scoped to the
   card so it doesn't touch content.css's own `.price--sm`/`.price--lg` callers elsewhere. */
.offer-card .price { display: grid; grid-template-columns: max-content max-content; justify-content: start; align-items: center; column-gap: var(--gap-inline); row-gap: 1px; flex: 1 0 auto; }
.offer-card .price__now { grid-column: 1 / -1; color: var(--color-heading); font: var(--text-number-s); font-variant-numeric: tabular-nums; }
.offer-card .price__was { color: var(--iz-ink-soft); font: 500 var(--text-caption-size)/var(--text-number-lh) var(--font-body); text-decoration-thickness: 1px; font-variant-numeric: tabular-nums; }
/* Override only inside the card — content.css's own `.price__off` (a rounded, tinted pill with the
   full «٪۲۰ تخفیف» wording) is unchanged for every other caller. */
.offer-card .price__off { padding: 0 var(--space-0); border-radius: 5px; background: #e5484d; color: #fff; font: 700 var(--text-micro-size)/var(--text-micro-lh) var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.offer-card .price--free .price__now, .offer-card .price--free { color: var(--secondary-700); }
.offer-card.is-off .price { display: none; }

.offer-card__status { display: inline-flex; align-items: center; gap: var(--gap-inline); color: var(--iz-ink-soft); font: 600 var(--text-caption-size)/var(--text-caption-lh) var(--font-body); white-space: nowrap; }
.offer-card__status .fa-solid { font-size: var(--text-body-size); }
.offer-card__status.is-ok { color: var(--secondary-600); }

/* The CTA is a text link with an arrow now, not the v2 bordered box — `.is-primary` alone gets the
   filled button treatment. */
.offer-card__go { display: inline-flex; flex: none; margin-inline-start: auto; align-items: center; gap: var(--gap-inline); color: var(--secondary-700); font: var(--text-button-s); white-space: nowrap; }
.offer-card__go .fa-solid { font-size: var(--text-body-s-size); transition: transform 200ms var(--iz-ease-out); }
.offer-card__go.is-primary { min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-input); background: var(--secondary-500); color: #fff; transition: background-color 160ms var(--iz-ease); }
@media (hover: hover) and (pointer: fine) { .offer-card:hover .offer-card__go.is-primary { background: var(--secondary-600); } }
/* The workshop's «ثبت‌نام» at full button size (owner, 2026-09-29: «bigger button»). A workshop card
   has no cover, so the button is the one strong mark in it, and registering is the act the card
   exists for; 44px is the comfortable-touch height `.learning-buybar .iz-btn` already uses. It
   stays a restatement of the card's one link (aria-hidden), so its size is the whole change. */
.offer-card--workshop .offer-card__go.is-primary { min-height: 44px; padding: 0 var(--space-4); font: var(--text-button); }
.offer-card--workshop .offer-card__go.is-primary .fa-solid { font-size: var(--text-subtitle-size); }

/* ------------------------------------------------------------------ workshop */
.offer-card--workshop { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-3); padding: var(--pad-row); }
.offer-card--workshop:not(:has(.offer-card__date)) { grid-template-columns: minmax(0, 1fr); }
.offer-card--workshop .offer-card__stats { padding: var(--space-1) 0; border-top: 1px solid var(--iz-line-soft); border-bottom: 1px solid var(--iz-line-soft); }
.offer-card__date { display: grid; justify-items: center; align-content: center; align-self: start; padding: var(--space-1) var(--space-0); border-radius: 12px; background: var(--primary-50); color: var(--primary-700); text-align: center; }
.offer-card__date b { font: var(--text-number-l); }
.offer-card__date span { font: 600 var(--text-caption-size)/var(--text-caption-lh) var(--font-body); }
.offer-card__date small { color: var(--iz-ink-soft); font: var(--text-micro); }
.offer-card.is-off .offer-card__date { background: #f2f5f5; color: var(--iz-ink-soft); }
.offer-card__main { display: flex; flex-direction: column; gap: var(--space-stack); min-width: 0; min-height: 0; }

@media (max-width: 860px) {
	.offer-card--workshop { grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-2); }
	.offer-card__date b { font-size: var(--text-number-m-size); }
}

/* ------------------------------------------------------------------ narrow (stacked) workshop
   Date beside the title, everything else full width — one rule, driven only by the width of a
   `home-offer`-named ancestor, so it applies to every workshop card in that ancestor regardless of
   whether `.offer-card--stack` is on it. Replaces the three duplicated copies of this same property
   list (offer-card.css's own `.offer-card--stack`, and learning.css's `.learning-related
   .offer-card--workshop` and `.catalog-grid--pairs .offer-card--workshop` blocks) — decisions.md,
   run 3 of this program. `.home-rail__item` (home.css) is the one existing `home-offer` container and
   was always sized to one card. learning.css's two grids are not — a related row or a two-up
   workshop grid holds several cards, so naming the grid itself `home-offer` (run 2's first attempt)
   measured the whole row and a card at two-up never narrowed the container past 459px. Run 3 moved
   the name onto `.offer-grid__item`, a plain wrapper each grid's caller (page-workshops.php,
   single-courses.php) puts around every offer-card call — one container per card, same as the
   homepage rail. */
@container home-offer (max-width: 459px) {
	.offer-card--workshop { grid-template-columns: 60px minmax(0, 1fr); grid-template-rows: auto 1fr auto auto; grid-template-areas: "date title" "facts facts" "bar bar" "foot foot"; gap: 0 var(--space-2); padding: var(--pad-row); }
	.offer-card--workshop:not(:has(.offer-card__date)) { grid-template-areas: "title title" "facts facts" "bar bar" "foot foot"; }
	.offer-card--workshop .offer-card__main { display: contents; }
	.offer-card--workshop .offer-card__date { grid-area: date; padding: var(--space-1) var(--space-0); }
	.offer-card--workshop .offer-card__date b { font-size: var(--text-number-m-size); }
	.offer-card--workshop h3 { grid-area: title; align-self: center; }
	.offer-card--workshop .offer-card__stats { grid-area: facts; margin-top: var(--space-stack); }
	.offer-card--workshop .offer-card__cap { grid-area: bar; margin-top: var(--space-stack); }
	.offer-card--workshop .offer-card__foot { grid-area: foot; margin-top: var(--space-stack); }
}

/* ------------------------------------------------------------------ skeleton (unchanged shape) */
.offer-card--skel .offer-card__media { background: #edf2f2; }