/* =========================================================================
   Neda course card
   The anatomy in NEDA_PROJECT_INSTRUCTIONS.md 6.1, applied to WooCommerce's
   own Product Collection markup. Nothing here assumes our blocks: the pieces
   are folded into the stock ones at render time (src/CourseCard.php).
   ========================================================================= */

/*
 * The product item's class is `wc-block-product`, NOT `wp-block-post`, even
 * though it is a post in a query loop - checked against the rendered page
 * rather than assumed, after the first pass styled nothing.
 */
/* ---- the card -------------------------------------------------------------
 * A PHOTOGRAPH WITH THE CARD WRITTEN ON IT, not a white box with a picture on
 * top. Approved by screenshot, 2026-09-01, and it replaces the stacked white
 * card that stood here before.
 *
 * The layout is a grid rather than the old flex column, and that is the whole
 * trick: the pieces arrive from four different WooCommerce blocks in an order
 * nobody here controls — media, title, organisation, price — and the design
 * wants organisation and action side by side with the title BELOW both. Named
 * areas place them where the design says regardless of the order they render
 * in, so nothing had to be moved in PHP and the editor keeps four ordinary,
 * movable blocks.
 *
 *   headroom   the photo breathes; the language pill and type plate float here
 *   org        the publishing organisation's mark
 *   action     price and the enrolment button
 *   title      under a white rule, spanning the full width
 */
.wp-block-woocommerce-product-collection .wc-block-product {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: 1fr auto auto;
	grid-template-areas:
		"headroom headroom"
		"org      action"
		"title    title";
	/*
	 * 3:2, on the CARD. Declared here rather than on the image so the shape is
	 * the card's own and survives whatever the block writes inline on the img.
	 * A card whose title runs long will grow past it rather than clip — the
	 * grid row stretches, and every card in the row stretches with it, which
	 * is the behaviour you want from a catalogue.
	 *
	 * `box-sizing` is stated rather than inherited, and it is not defensive
	 * clutter: `aspect-ratio` resolves against the CONTENT box under
	 * content-box, so the 18px padding is added on top and a 387px card comes
	 * out 270px tall instead of 258 — 1.43 rather than 1.5. Measured. Themes
	 * normally set a border-box reset, but a ratio the design calls
	 * non-negotiable should not depend on one being there.
	 */
	box-sizing: border-box;
	aspect-ratio: 3 / 2;
	/* The ground the photo sits on, and what shows for the half-second before
	   it loads. Never white: white behind a dark scrim flashes. */
	background: #0B1414;
	border: 0 !important;
	border-radius: 14px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	/* 14px at the foot, not 18: the title is the last thing on the card and
	   sits closer to the edge than the pill does to the top. */
	padding: 18px 18px 14px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/*
 * Hover and focus are the lift alone. The old rule also filled the card with
 * `custom-color-4`, which was visible when the card was white and is invisible
 * under a full-bleed photograph — keeping it would have been a declaration
 * that does nothing, which is worse than none.
 */
.wp-block-woocommerce-product-collection .wc-block-product:hover,
.wp-block-woocommerce-product-collection .wc-block-product:focus-within {
	transform: scale(1.03);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

/* ------------------------------------------------------------- the photo ---
 * The badge is positioned against this, so it has to be the containing block.
 * Corners are clipped at the top only: the card's own radius handles the rest,
 * and rounding the bottom of the photo would cut the badge in half.
 */
.neda-card__media {
	position: absolute;
	inset: 0;
	display: block;
	margin: 0;
	line-height: 0;
	z-index: 0;
}

/*
 * A FLAT 50% BLACK OVERLAY across the whole photograph (user, 2026-09-01).
 *
 * It replaces the bottom-weighted gradient that stood here. The gradient put
 * its darkest band under the text and left the top of the picture nearly
 * clear, which flattered a photograph with a dark sky and failed on a pale
 * one. An even 50% is predictable: every image on the site is darkened by the
 * same amount, so a creator uploading a bright photograph gets the same
 * legibility as one uploading a dark photograph, and neither has to be told
 * what kind of picture the card expects.
 *
 * Load-bearing, not decoration — the title, the mark and the price are white.
 */
.neda-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	pointer-events: none;
}

/*
 * Everything that is not the photo sits above the scrim.
 *
 * `z-index` WITHOUT `position`, and that is deliberate rather than an
 * oversight: these three are grid items, and a grid item takes a z-index while
 * staying `position: static`. Giving them `position: relative` — the reflex —
 * makes `.neda-card__footer` a containing block, and the language pill inside
 * it is absolutely positioned against the CARD. It then lands in the middle of
 * the footer instead of the top-left corner, and the card grows past its 3:2
 * because the pill is still taking part in the row. Measured, not theorised.
 */
.neda-card__org,
.neda-card__footer,
.neda-card__titlerow {
	z-index: 1;
}

/*
 * THE RATIO IS NOW 3:2, AND IT IS STILL NOT NEGOTIABLE.
 *
 * This supersedes the 4:3 that stood here, which was itself a direct
 * instruction (user, 2026-08-05: "the current boxes do not follow the ratio
 * that I gave. They have to be strictly followed"). Replaced by a later one:
 * the card screenshots approved 2026-09-01, annotated "3x2" — which denotes the
 * ASPECT RATIO, not a three-by-two grid. Recorded here rather than quietly
 * changed, because a reader finding 3:2 under a comment insisting on 4:3 would
 * reasonably assume it had drifted.
 *
 * The ratio now belongs to the CARD, not to the image: the photograph fills a
 * 3:2 container absolutely, so it can no longer be pulled out of shape by the
 * `aspect-ratio` the Product Collection block writes INLINE on the img — 3/5 in
 * one collection and 3/4 in the other, which is what made a card's proportions
 * depend on whichever block an editor happened to insert.
 *
 * An inline style is one of the two cases where !important is sanctioned
 * (NEDA_PROJECT_INSTRUCTIONS.md 6.1); nothing else here needs it.
 */
/*
 * The photograph is pinned to the media box ABSOLUTELY, not sized by
 * percentage, and the difference was a 1500px-tall image in a 258px card.
 *
 * WooCommerce wraps the img in a div and an anchor that are both auto height,
 * and writes width="600" height="1500" on the img itself. A percentage
 * block-size cannot resolve against an auto-height parent, so it fell back to
 * the attribute: the image rendered at its full 1500px, the card's overflow
 * clipped it to the top 258, and every photograph looked zoomed to a corner.
 * A harness that sized the wrapper chain by hand never showed it — measured
 * on the live page, 388x1500 inside 388x258.
 *
 * `inset: 0` against the positioned media box sidesteps the wrappers entirely.
 * The wrappers are also told to fill, so the anchor's clickable area is the
 * whole photograph rather than a strip at the top.
 */
.neda-card__media .wc-block-components-product-image,
.neda-card__media .wc-block-components-product-image > a {
	display: block;
	block-size: 100%;
	margin: 0;
	padding: 0;
}

.neda-card__media img {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100% !important;
	max-inline-size: none;
	aspect-ratio: auto !important;
	object-fit: cover !important;
}

/* ---- the course-type badge ------------------------------------------------
 * A white plate with a colour square and black text. The colour identifies the
 * type; it is never asked to BE the text, because cyan and lime on white are
 * 2.6:1 and 1.9:1 and fail outright.
 */
.neda-card__type {
	position: absolute;
	/* Flush to the card's edge, rounded on the inner side only — the plate runs
	   off the card rather than floating inside it. Top now, not bottom: the
	   bottom is where the organisation, the action and the title live. */
	inset-inline-end: 0;
	inset-block-start: 18px;
	inset-block-end: auto;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #FFFFFF;
	color: #000000;
	/*
	 * Rounded on the inner side only, so the plate runs off the card edge.
	 * LOGICAL radii, not `10px 0 0 10px`: the plate is pinned with
	 * `inset-inline-end`, so on an RTL page it flushes to the LEFT and a
	 * physical radius would round the wrong two corners — the one thing on this
	 * card that direction cannot mirror by itself.
	 */
	border-start-start-radius: 10px;
	border-end-start-radius: 10px;
	border-start-end-radius: 0;
	border-end-end-radius: 0;
	padding: 6px 14px;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.4;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.neda-card__type-dot {
	flex: 0 0 auto;
	inline-size: 14px;
	block-size: 14px;
	border-radius: 3px;
	background: var(--neda-type-colour, #0EC4C5);
}

/* ------------------------------------------------------------- the title ---
 * ONE LEFT EDGE DOWN THE CARD. The title, the organisation's mark and "Free"
 * all sit on the same 18px inset, so the eye reads straight down instead of
 * stepping in and out.
 *
 * The alignment has to be taken back rather than inherited: WooCommerce's
 * blockified archive template ships the title as
 * `core/post-title {"textAlign":"center"}`, which renders a
 * `.has-text-align-center` class on the heading itself.
 */
/* ---- the grid -------------------------------------------------------------
 * FOUR ACROSS, AND NO CARD EVER NARROWER THAN 250px.
 *
 * WooCommerce sizes this grid from the "Columns" number set on the block -
 * `.columns-3` emits
 * `repeat(auto-fill, minmax(max(150px, 33.3333% - 0.83333em), 1fr))`, a
 * percentage that always yields three tracks however wide the page is, and
 * a 150px floor that lets a card shrink to half the width a course card can
 * actually use.
 *
 * Replacing the percentage with a FIXED minimum is what gives the whole ladder
 * from one declaration, with no media queries and no breakpoints to keep in
 * step with the rest of the site: auto-fill lays down as many tracks as fit
 * and the count falls out of the width.
 *
 * THE FLOOR IS 340px, RAISED FROM 250px, and the number is chosen to land
 * three across on the site's 1200px measure — the density the approved design
 * asks for. It is not a media query pinned to "3", so the count still degrades
 * on its own as the container narrows:
 *
 *   3 across   container >= 1060px   (3x340 + 2x20 gap)   - the 1200px measure
 *   2 across   container >=  700px
 *   1 across   below that
 *
 * 250px was right for the old card, which carried a photograph, a title and a
 * price. This one also carries a language pill, a type plate, an organisation
 * mark and an action, and at 250px they collide.
 *
 * `min(100%, 340px)` rather than a bare 340px: on a phone narrower than the
 * floor itself the track would otherwise overflow its container and take the
 * page sideways. Same guard, same reason, as `.neda-cp-grid` in
 * neda-content-page.css.
 *
 * The `[class*="columns-"]` is what carries the specificity: WooCommerce's
 * own rule is (0,2,0) and lands in an inline block in the head, so a
 * two-class selector here would tie it and lose or win on load order.
 */
.wp-block-woocommerce-product-collection .wc-block-product-template__responsive[class*="columns-"] {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

/*
 * The title, under a white rule, spanning the card. The rule is a border on
 * this row rather than an element of its own, so it cannot fall out of step
 * with the title it belongs to.
 *
 * TWO LINES OF ROOM, ALWAYS (user, 2026-09-01). The block is a fixed height
 * whatever the title says: a short name leaves the second line empty rather
 * than pulling the rule down to meet it. Together with the fixed 48px row
 * above and the card's fixed 3:2, that puts the rule at the same height on
 * every card in a row — which is the point, and it is why none of these three
 * measurements is allowed to be `auto`.
 *
 * 50px is two lines of the 19px base size at 1.3 line-height, rounded up. It
 * does NOT shrink when the font does: a long title gets a smaller face inside
 * the same box, not a smaller box.
 */
.neda-card__titlerow {
	grid-area: title;
	/*
	 * A flex column that packs its one child to the END. The two-line
	 * reservation stays and the rule stays put, but the title now sits at the
	 * BOTTOM of the box rather than the top: a one-line name leaves its spare
	 * line between the rule and the text, not between the text and the card
	 * edge (user, 2026-09-01: "you brought the title up, bring the line and
	 * the title down"). A two-line name fills the box and nothing moves.
	 */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin-block-start: 10px;
	padding-block-start: 6px;
	padding-inline: 0;
	border-block-start: 2px solid rgba(255, 255, 255, 0.92);
	/* The theme gives this row a 12px bottom margin it never asked for; that
	   was the last of the empty space under the title. */
	margin-block-end: 0;
	/* 6px padding + 2px rule + up to 50px of text. Fixed, so the rule is at
	   the same height on every card in the row. */
	block-size: 58px;
}

/*
 * The two-line box itself. The size steps above keep real titles inside it;
 * the clamp is the backstop for a title longer than any step can hold — about
 * 100 characters at the smallest face. It ends the second line with an
 * ellipsis rather than slicing a word in half at the box edge, which is the
 * difference between a title that looks abbreviated and one that looks broken.
 */
.neda-card__titlerow > * {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	/* As tall as its text, never taller than two lines; the flex column above
	   pins it to the bottom of the reserved box. */
	block-size: auto;
	max-block-size: 50px;
	overflow: hidden;
	/*
	 * !important because the margin arrives INLINE. The front-page template
	 * gives the title block `style="margin-top:12px;margin-bottom:8px"`, and
	 * an inline style beats any selector. Left alone it pushed the name a full
	 * line below the rule and left the two-line box half empty — visible on the
	 * live page and invisible in a harness that had no inline margin to fight.
	 * An inline style is one of the two sanctioned uses of !important here.
	 */
	margin: 0 !important;
	padding: 0;
}

.neda-card__titlerow > * {
	margin: 0;
}

.wp-block-woocommerce-product-collection .neda-card__titlerow .wp-block-post-title {
	/*
	 * 15px - the sitewide body size (neda-type.css). It was 15pt, which is
	 * 20px: the same NUMBER in the wrong unit, and the largest body text on
	 * the site.
	 *
	 * !important is NOT decoration here. The template gives the title
	 * `fontSize":"medium"`, and WordPress emits its font-size presets as
	 * `.has-medium-font-size{font-size:var(...) !important}` in the global
	 * stylesheet - verified in the rendered page, not assumed. No amount of
	 * specificity beats that, so a plain declaration is dropped silently and
	 * the size looks like it never deployed.
	 */
	/*
	 * 19px, the site's heading size for h3-h6 (neda-type.css) — the title is
	 * the loudest thing on the card in the approved design, and 15px body size
	 * was right only while it sat on white beneath a photograph.
	 *
	 * !important is NOT decoration. The template gives the title
	 * `fontSize":"medium"`, and WordPress emits its font-size presets as
	 * `.has-medium-font-size{font-size:var(...) !important}` in the global
	 * stylesheet — verified in the rendered page, not assumed. No amount of
	 * specificity beats that, so a plain declaration is dropped silently and
	 * the size looks like it never deployed. Same for the colour: the theme
	 * sets `text-dark` on this heading.
	 */
	font-size: 19px !important;
	line-height: 1.3;
	color: #FFFFFF !important;
	/* Wrap long words rather than let one run past the card edge. */
	overflow-wrap: anywhere;
	/* `.has-text-align-center` carries no !important, so specificity is enough.
	   `start`, not `left`, so a translated RTL page flips with the text. */
	text-align: start;
}

/* ---- the publishing organisation ------------------------------------------
 * Its own row between the name and the action. The slot keeps its height when
 * a course has no logo yet (src/CourseCard.php emits it empty on purpose), so
 * a catalogue mixing courses that have a mark with courses that do not still
 * lines its cards up instead of giving each one a different height.
 */
/*
 * A FIXED 48px, and that is what pins the white rule.
 *
 * The rule has to sit at the same height on every card (user, 2026-09-01), and
 * the card is a fixed 3:2 with the title block below of a fixed height — so the
 * only thing that could still move it is this row. Fixing it here makes the
 * rule's position arithmetic rather than a consequence of whatever the logo and
 * the button happened to measure. A card with no logo at all keeps the row.
 */
.neda-card__org {
	grid-area: org;
	display: flex;
	align-items: center;
	block-size: 48px;
	margin: 0;
	padding: 0;
}

/*
 * Width is left to the image: with only the height fixed, the box hugs the
 * logo's own proportions, so a wide wordmark and a square badge both sit on
 * the same baseline without either being stretched.
 */
.neda-card__logo {
	inline-size: auto;
	/*
	 * 44px, up from 34 (user, 2026-09-01: the mark was reading too small).
	 * It is the publisher's identity and the approved design gives it real
	 * presence beside the action rather than tucking it into a corner.
	 *
	 * Width is left to the image so a wide wordmark and a square badge both sit
	 * on the same baseline without either being stretched.
	 *
	 * The cap is 100% of the slot, NOT a fraction of it, and the difference is
	 * the whole reason the mark looked shrunken. A wordmark is wide — the Neda
	 * one is about 3.5:1 — so at 44px tall it wants roughly 157px. Capping the
	 * width at 55% of the slot clamped it to 84px, and `object-fit: contain`
	 * then letterboxed the whole mark down to 23px tall inside its 44px box to
	 * preserve the ratio. The height was never the problem; the width cap was.
	 *
	 * The grid already protects the action: the org slot is the `1fr` column
	 * and the action column is `auto`, so the button takes what it needs first
	 * and the mark fills what is left. It cannot crowd anything out.
	 */
	max-inline-size: 100%;
	block-size: 44px;
	object-fit: contain;
	/* Left in LTR, right in RTL — a letterboxed mark sits at the reading edge
	   rather than floating in the middle of its slot. */
	object-position: left center;
}

/* --------------------------------------------------- price and enrolment ---
 * One line, price at the start and the button at the end. `margin-top: auto`
 * pins it to the bottom so a short title and a long one produce the same card.
 */
/*
 * NOWRAP IS LOAD-BEARING, and it is what keeps the card 3:2.
 *
 * Wrapping was the default here when the footer had a whole row to itself at
 * the bottom of a white card. It now shares a row with the organisation's mark,
 * and a wrapped footer makes that row 71px instead of 44px — which pushed the
 * card 12px past its ratio, measured. The approved design shows only a logo and
 * a button on this line, and that is why: there is room for one line, not two.
 */
.neda-card__footer {
	grid-area: action;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin: 0;
	padding: 0;
	/* Matches .neda-card__org exactly — the two share a grid row, and the row
	   is only fixed if both are. */
	block-size: 48px;
	min-inline-size: 0;
}

.neda-card__actions {
	flex-wrap: nowrap;
}

/*
 * Price sits beside the action rather than at the far end of the row, because
 * the organisation's mark now holds the start of that line.
 *
 * The approved screenshot shows only a logo and a button here — no price. It
 * is kept because dropping it would remove commercial information from a shop
 * card on the strength of a mockup that used a placeholder label ("Action
 * button") and a single sample course. Flagged for a decision rather than
 * decided by omission.
 */
.wp-block-woocommerce-product-collection .neda-card__free,
.wp-block-woocommerce-product-collection .neda-card__unpriced,
.wp-block-woocommerce-product-collection .neda-card__pricing,
.wp-block-woocommerce-product-collection .neda-card__certificate,
.wp-block-woocommerce-product-collection .neda-card__footer .woocommerce-Price-amount,
.wp-block-woocommerce-product-collection .neda-card__footer bdi {
	color: #FFFFFF;
}

.neda-card__free {
	font-size: 1.05rem;
	font-weight: 700;
	color: #000000;
}

/* ---- priced course with no price yet ---------------------------------------
 * A course meant to be sold but not yet priced. Deliberately quieter than
 * "Free" and not bold: it is a statement of absence, and giving it the weight
 * of a real price would make an empty field look like an offer. Still black,
 * like every other piece of text on a card.
 */
.neda-card__unpriced {
	font-size: 15px;
	color: #000000;
	opacity: 0.65;
}

/* ---- free to take, paid certificate ---------------------------------------
 * Two facts stacked where the price usually sits: what it costs to start
 * (nothing) and what the certificate costs. The second line is deliberately
 * quieter - it is the answer to a question the learner has not asked yet, and
 * "Free" is the one that has to be read at a glance.
 */
.neda-card__pricing {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}

.neda-card__certificate {
	font-size: 0.85em;
	font-weight: 400;
	color: #000000;
	opacity: 0.78;
}

/* WooCommerce wraps a price in its own span; inside our line it must not go
   back to being the size and weight of a headline price. */
.neda-card__certificate .woocommerce-Price-amount,
.neda-card__certificate bdi {
	font-size: inherit;
	font-weight: 700;
}

/* ---- the action group -----------------------------------------------------
 * The language badge and the enrolment button travel together at the end of
 * the row, so the price stays at the start whatever the badge says.
 */
.neda-card__actions {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/*
 * THE COURSE LANGUAGE. A quiet outlined chip, not a filled one: the card
 * already carries a filled colour badge for the course TYPE on the photo, and
 * a second filled badge next to the button would compete with it and with the
 * lime action. Black on white at a hairline border reads at any size and
 * introduces no ninth colour.
 */
.neda-card__lang {
	/*
	 * Top left of the photo, opposite the type plate. It is rendered inside the
	 * price block — that is where the markup puts it, and moving it in PHP would
	 * also move it on the single course page, where it belongs beside the
	 * action. Positioning it against the card instead leaves that surface alone.
	 *
	 * The absolute placement resolves against `.wc-block-product`, which is the
	 * nearest positioned ancestor; neither `.neda-card__footer` nor
	 * `.neda-card__actions` may be given `position`, or the pill lands in the
	 * bottom-right corner instead.
	 */
	position: absolute;
	inset-block-start: 18px;
	inset-inline-start: 18px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	background: #FFFFFF;
	color: #000000;
	border: 0;
	border-radius: 8px;
	padding: 7px 12px;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/*
 * The globe, drawn rather than loaded: one meridian and one equator on a
 * circle. An SVG file would be a request for twelve pixels, and an icon font
 * would be another dependency to keep in step with the palette.
 */
.neda-card__lang-icon {
	flex: 0 0 auto;
	position: relative;
	inline-size: 13px;
	block-size: 13px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
}

.neda-card__lang-icon::before,
.neda-card__lang-icon::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	border: 1.5px solid currentColor;
}

/* The equator: a flat line across the middle. */
.neda-card__lang-icon::before {
	inline-size: 10px;
	block-size: 0;
	border-width: 1.5px 0 0;
}

/* The meridian: an ellipse narrow enough to read as a curve, not a second
   circle. */
.neda-card__lang-icon::after {
	inline-size: 5px;
	block-size: 10px;
	border-radius: 50%;
}

/*
 * The screen-reader prefix. The theme may or may not define this class, so it
 * is declared here rather than assumed - a badge that reads as a bare word
 * with no context is worse than no badge.
 */
.neda-card__lang .screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The struck-through original comes from WooCommerce as a <del>; it just needs
   to stop shouting next to the price that is actually charged. */
.neda-card__footer del {
	display: block;
	opacity: 0.72;
	font-size: 0.9em;
}

.neda-card__footer ins {
	text-decoration: none;
	font-weight: 700;
}

/* ---- the enrolment button -------------------------------------------------
 * Lime with a black label, cherry with white on hover, no border in any state,
 * and a focus ring drawn as an outline that reads against the RESTING lime.
 */
.neda-card__enrol {
	display: inline-block;
	flex: 0 0 auto;
	background: #C4C40E;
	color: #000000;
	border: 0;
	border-radius: 10px;
	padding: 11px 20px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.neda-card__enrol:hover,
.neda-card__enrol:active {
	background: #D7263D;
	color: #FFFFFF;
	border: 0;
	text-decoration: none;
}

.neda-card__enrol:focus-visible {
	outline: 3px solid #D7263D;
	outline-offset: 2px;
	border: 0;
}

/*
 * The card title is NO LONGER A LINK - src/CourseCard.php unwraps the anchor
 * `core/post-title` puts around it.
 *
 * These declarations used to sit on that anchor, which is where the title got
 * its black and its 700 weight from. Taking the link away without moving them
 * here would have quietly changed how the title LOOKS as well as how it
 * behaves: the heading would have fallen back to the theme's h6 weight and to
 * whatever `has-text-dark-color` resolves to. So they move to the heading.
 *
 * The `:hover`/`:focus-visible` pair that went with them is gone with the
 * link - there is nothing left to hover, and a cherry hover on plain text
 * would promise a destination that no longer exists.
 */
.wp-block-woocommerce-product-collection .neda-card__titlerow .wp-block-post-title {
	color: #000000;
	font-weight: 700;
	letter-spacing: 0;
	text-decoration: none;
}

/* =========================================================== the toolbar ===
 * "Showing all N results" and the sort control, above the grid. They sit
 * OUTSIDE the product collection - WooCommerce's archive template puts them in
 * a flex group of their own - so they are reached by their own block classes
 * rather than by the card selectors above.
 *
 * WooCommerce leaves the select at the browser default: system font, hairline
 * grey, square corners. Beside a grid of Neda cards it reads as something the
 * page forgot to style, which is exactly what it was.
 */
.wp-block-group:has(> .wc-block-catalog-sorting) {
	align-items: center;
}

.wc-block-product-results-count,
.wc-block-product-results-count p {
	margin: 0;
	color: #000000;
	font-size: 15px;
	line-height: 1.5;
}

.wc-block-catalog-sorting .woocommerce-ordering {
	margin: 0;
}

.wc-block-catalog-sorting select.orderby {
	appearance: none;
	-webkit-appearance: none;
	background-color: #FFFFFF;
	/*
	 * The caret is drawn inline rather than loaded: an external file would be a
	 * second request for eight pixels of chevron, and an icon font would be a
	 * fifth colour to keep in step with the palette.
	 */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	/* A control, not a card: bordered, 10px corners like every other control. */
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 10px;
	color: #000000;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	padding: 10px 44px 10px 16px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wc-block-catalog-sorting select.orderby:hover {
	border-color: rgba(0, 0, 0, 0.32);
}

/*
 * A <select> is a field control, so it takes the canonical field geometry
 * (2026-09-02): one solid 3px cherry ring, 3px outside the control, following
 * its 10px corner radius, and nothing else. The resting border is left alone.
 *
 * This replaces a cyan border plus an 18%-opacity cyan halo, which broke the
 * rule three ways -- it recoloured the border, it was cyan, and the halo was a
 * tint standing in for a solid indicator.
 *
 * Two box-shadow layers rather than an outline, because an outline squares off
 * the 10px corner in some engines. The first layer IS the 3px gap and takes the
 * surface behind the control: the shop page's own background, measured white on
 * 2026-09-02. It is written as a variable so a tinted band can override it
 * rather than inheriting a white seam.
 *
 * NOTE: `.wc-block-catalog-sorting` renders nothing on this site today -- there
 * is no <select> on /shop/ -- so this is a corrective change, not a fix to
 * something currently visible.
 */
.wc-block-catalog-sorting select.orderby:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 3px var(--neda-sorting-surface, #FFFFFF),
		0 0 0 6px #D7263D;
}

/*
 * Forced colours drop authored backgrounds, taking the box-shadow ring with
 * them, and the rule above ends in `outline: none` -- so without this the
 * control would show no focus at all in High Contrast.
 */
@media (forced-colors: active) {
	.wc-block-catalog-sorting select.orderby:focus-visible {
		outline: 3px solid Highlight !important;
		outline-offset: 3px !important;
	}
}

/*
 * RTL is signalled by GTranslate's own classes; `html[dir="rtl"]` is never set
 * on this site, so a rule targeting it would be dead.
 */
html.translated-rtl .wc-block-catalog-sorting select.orderby,
html[lang="fa"] .wc-block-catalog-sorting select.orderby {
	background-position: left 14px center;
	padding: 10px 16px 10px 44px;
}

/*
 * The organisation mark's alignment inside its slot.
 *
 * Everything else on this card is written in logical properties and mirrors on
 * its own — the type plate, the language pill, the grid columns, the text
 * alignment, even the plate's corner radii. `object-position` is the one thing
 * that cannot: it takes physical keywords, so a letterboxed mark stays pinned
 * to the LEFT of its slot on an RTL page, away from the reading edge, while
 * everything around it has flipped.
 *
 * Both hooks, deliberately. `html[dir="rtl"]` is never set on this site today —
 * RTL arrives through GTranslate's own classes — so a rule targeting only it
 * would be dead, and one targeting only the class would break the day server-
 * side translation lands.
 */
html[dir="rtl"] .neda-card__logo,
html.translated-rtl .neda-card__logo,
html[lang^="ar"] .neda-card__logo,
html[lang^="fa"] .neda-card__logo,
html[lang^="ckb"] .neda-card__logo {
	object-position: right center;
}

/*
 * NARROW SCREENS. This used to stack the footer into a column, which was right
 * when it was a full-width row along the bottom of a white card. It now shares
 * a line with the organisation's mark, and stacking it makes that line two rows
 * tall — which breaks the 3:2 exactly the way the wrapped footer did.
 *
 * So the row is kept and the PRICE steps aside instead. On a phone the card is
 * about 350px wide and a mark, a price and an action will not all sit on one
 * line; the approved design carries only the mark and the action, and the price
 * is one tap away on the course itself. The card still says "Free" where that
 * is the whole offer, because `.neda-card__free` on its own is short.
 */
@media (max-width: 600px) {
	.neda-card__pricing,
	.neda-card__unpriced {
		display: none;
	}

	.neda-card__enrol { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-woocommerce-product-collection .wc-block-product { transition: none; }
	.wp-block-woocommerce-product-collection .wc-block-product:hover { transform: none; }
}

/* ---- the title shrinks to fit, it never gets cut --------------------------
 * The title block is a fixed two lines (see `.neda-card__titlerow`), so a long
 * course name has to get smaller rather than spill out of it or be clipped
 * mid-word (user, 2026-09-01).
 *
 * The size is chosen SERVER-SIDE from the title's length, in
 * CourseCard::title_fit_class(), and arrives as a modifier on the row. That is
 * deliberate in preference to measuring in JavaScript:
 *
 *   - it renders at the right size immediately, with no flash of 19px text
 *     reflowing down to 15px after the script runs;
 *   - it works with JavaScript off, and on the first paint of a cold page;
 *   - it costs nothing per card, where a measuring loop costs a forced reflow
 *     for every card on the page.
 *
 * The trade is that character count is a proxy for rendered width, not the
 * width itself — a title of capitals and wide letters occupies more room than
 * the same count of narrow ones. The steps are set generously for that, and
 * the fixed block plus `overflow: hidden` is the backstop: worst case a title
 * is a step larger than ideal, never a title that breaks the card's shape.
 *
 * Longest real title in the catalogue today is 60 characters ("Bribery and
 * Corruption in International Business Transactions"), which lands on --m.
 */
.wp-block-woocommerce-product-collection .neda-card__titlerow--m .wp-block-post-title {
	font-size: 17px !important;
	line-height: 1.28;
}

.wp-block-woocommerce-product-collection .neda-card__titlerow--s .wp-block-post-title {
	font-size: 15px !important;
	line-height: 1.3;
}

.wp-block-woocommerce-product-collection .neda-card__titlerow--xs .wp-block-post-title {
	font-size: 13.5px !important;
	line-height: 1.32;
}

/* =========================================================================
   Learning-space cards — the Academies and Studios rows on the front page.
   Rendered by src/LearningSpaces.php. Same 3:2 photograph-with-the-card-
   written-on-it as a course card, minus everything that belongs to a course.
   ========================================================================= */

.neda-spaces {
	/* The site's 1200px measure, applied here because the shortcode sits in
	   a full-width group and has to centre itself. */
	max-inline-size: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-block: 8px 36px;
}

.neda-spaces__heading {
	/* Reads exactly like the "Featured courses" heading it sits beside. */
	font-size: 24px;
	letter-spacing: 0;
	margin: 0 0 20px;
}

/*
 * FIVE ACROSS ON THE 1200px MEASURE (§26.2), from the same auto-fill idiom as
 * the course grid so the count degrades on its own: the floor is chosen so
 * five 3:2 cards share 1200px, and the size difference between this row and
 * the course row is column count alone — never a different ratio.
 *
 *   5 across   container >= 1180px   (5x220 + 4x20 gap)   - the 1200px measure
 *   4 across   container >=  940px
 *   3 across   container >=  700px
 *   2 across   container >=  460px
 *   1 across   below that
 */
.neda-spaces__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.neda-space-card {
	margin: 0;
}

/* The whole card is the link. */
.neda-space-card__link {
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto auto;
	grid-template-areas:
		"headroom"
		"org"
		"title";
	box-sizing: border-box;
	aspect-ratio: 3 / 2;
	background: #0B1414;
	border-radius: 14px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	padding: 14px;
	color: #FFFFFF;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.neda-space-card__link:hover,
.neda-space-card__link:focus-visible {
	transform: scale(1.03);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

/* Canonical Neda focus: a cherry ring, drawn inside the clipped corners. */
.neda-space-card__link:focus-visible {
	outline: 3px solid #D7263D;
	outline-offset: -3px;
}

.neda-space-card__media {
	position: absolute;
	inset: 0;
	display: block;
	line-height: 0;
	z-index: 0;
}

.neda-space-card__media img {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
}

/* The same flat 50% as a course card. */
.neda-space-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	pointer-events: none;
}

.neda-space-card__org,
.neda-space-card__title {
	z-index: 1;
}

/* Fixed, so the rule sits at the same height on every card in the row. */
.neda-space-card__org {
	grid-area: org;
	display: flex;
	align-items: center;
	block-size: 36px;
}

.neda-space-card__logo {
	inline-size: auto;
	max-inline-size: 100%;
	block-size: 32px;
	object-fit: contain;
	object-position: left center;
}

/*
 * The name, under the white rule. Two lines of room whatever the name says;
 * a long name shrinks rather than being cut, and the clamp is the backstop.
 * Smaller faces than the course card because a five-across card is smaller.
 */
.neda-space-card__title {
	grid-area: title;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin-block-start: 8px;
	padding-block-start: 8px;
	border-block-start: 2px solid rgba(255, 255, 255, 0.92);
	block-size: 50px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
	text-align: start;
}

html[dir="rtl"] .neda-space-card__logo,
html.translated-rtl .neda-space-card__logo,
html[lang^="ar"] .neda-space-card__logo,
html[lang^="fa"] .neda-space-card__logo,
html[lang^="ckb"] .neda-space-card__logo {
	object-position: right center;
}

@media (prefers-reduced-motion: reduce) {
	.neda-space-card__link { transition: none; }
	.neda-space-card__link:hover { transform: none; }
}