/**
 * GPR Content Grid — card skin for the parent theme's page-grid.php.
 *
 * Loaded ONLY on pages using the "Content Grid" template (see
 * gpr_is_grid_template() in functions.php, which also adds body.gpr-grid).
 * Live on /courses-library/ and /live/.
 *
 * ── What this file is layered on top of ──────────────────────────────────────
 * The markup is NOT ours. It comes from the Memberoni PARENT theme's
 * page-grid.php, which is not in this repo:
 *
 *   section.content-grid > section.grid_items_N > div > div.grid_wrap
 *     article.course-listing
 *       div.course-wrap
 *         div.course-thumb.scale_thumb   (inline background-image, + a.course-link)
 *           div.course_completion        (progress %, only when started)
 *         div.course-content
 *           h4 > a
 *           div.mb20 > p                 (excerpt — absent on /live/)
 *           aside.course-meta > span > strong + i.fa   (absent on /live/)
 *           div.mron-button-row          ← INJECTED CLIENT-SIDE, see below
 *             a.button.w-onethird
 *             a.mron-tool.mron-card-todo
 *
 * So we re-skin rather than replace — every Grid Option, the MixItUp filter bar
 * and pagination keep working. Cards on /live/ have no excerpt, no meta and no
 * progress badge, so nothing here may *depend* on those existing.
 *
 * ── Three stylesheets we have to out-rank, all of which load AFTER us ────────
 * 1. Customizer → Additional CSS (`wp-custom-css`, wp_head priority 101) draws
 *    the old card outline as separate 1px #CED1E4 borders on `.course-thumb`
 *    and `.course-content`. Those two rules should be DELETED from the
 *    Customizer — the card now draws its own border on .course-wrap — but we
 *    also override them here so the card is never left with a stray hairline.
 * 2. The parent's Customizer colour block (inline, wp_head) sets
 *    `.course-listing .course_completion{background-color:#0061ba}`.
 * 3. bundle-activity-tracker.php PART 4 prints its button-row + to-do CSS
 *    inline at wp_footer priority 100 — i.e. after everything — and uses
 *    !important on the to-do button's border/background/color.
 *
 * Because those all come later in the document, EQUAL specificity loses. Every
 * rule here is therefore prefixed `body.gpr-grid`, which outranks all three
 * without !important — except the to-do button, where the snippet's own
 * !important forces us to match it. Do not "tidy" the long selectors away.
 *
 * We also set --tertiary on the card: the snippet colours itself with
 * `var(--tertiary, #1e73be)`, so defining it here makes the snippet paint
 * itself GPR blue on its own, and anything we miss still lands on-brand.
 */

body.gpr-grid {
	--gprg-card: #FFFFFF;
	--gprg-line: #E7EAF0;
	--gprg-line-hover: #C9DCF4;
	--gprg-ink: #111827;
	--gprg-text: #5A6472;
	--gprg-blue: #0061BA;
	--gprg-blue-hover: #0074DC;

	/* Meta pill — replaces #989898 on #ECECEC (2.2:1, fails WCAG AA).
	   #15528F on #EDF4FC is 7.4:1, which passes AA and AAA. */
	--gprg-pill-bg: #EDF4FC;
	--gprg-pill-line: #D8E7F7;
	--gprg-pill-ink: #15528F;          /* 7.19:1 — AAA */
	/* v0.8.1 — the "DIFFICULTY:" label was #5C7FA8, which is only 3.75:1 on the
	   pill and so failed the very check this pill was introduced to fix. The
	   value text passed; the label beside it did not. #456485 is 5.55:1. */
	--gprg-pill-label: #456485;
	/* Icon, not text: the 3:1 non-text threshold applies, and this is 3.54:1. */
	--gprg-pill-icon: #3B82D6;

	--gprg-radius: 16px;
	--gprg-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 26px -14px rgba(16, 24, 40, .22);
	--gprg-shadow-hover: 0 2px 4px rgba(16, 24, 40, .05), 0 20px 40px -18px rgba(16, 24, 40, .32);
}

/* ---------- The grid ----------------------------------------------------- */
/* The parent lays these out with floats (`.course-listing{float:left;width:33.33%}`
   plus `:nth-child(3n+1){clear:left}`) and a 15px padding gutter. Switching the
   container to CSS Grid makes the floats inert and gives us equal-height cards
   for free — which is what lets the button row sit at the bottom of the card
   instead of being absolutely positioned.
 *
 * ⚠️ THE ID TRAP. The parent's grid rules are scoped to the wrapper's ID:
 *      #course_grid .grid_wrap              { display:flex; flex-flow:wrap; … }
 *      #course_grid .grid_wrap .course-listing { display:inline-flex; … }
 *      #course_grid                         { overflow:hidden }
 *   An ID beats any number of classes, so `body.gpr-grid .grid_wrap` (0,2,0)
 *   LOSES to (1,1,0) and `display:grid` silently never applies — the cards
 *   stack one per row and everything looks broken. Every layout rule below is
 *   therefore listed twice: once plain, once with `#course_grid` so it outranks
 *   the parent. The plain copy still matters — it covers any Content Grid page
 *   that renders without that wrapper, where the parent's rule doesn't apply
 *   either.
 *
 * ⚠️ On GPR the `grid_items_N` class sits on an ANCESTOR `<section>`, not on
 * `.grid_wrap` itself (it differs per Memberoni version — GVA's snapshot has it
 * on `.grid_wrap`). Both placements are handled. */

/* `overflow:hidden` on the wrapper was there to contain the old floats. With a
   grid inside there are no floats left to contain, and it would otherwise clip
   the cards' hover lift and drop shadow at the container edge. */
body.gpr-grid #course_grid { overflow: visible; }

body.gpr-grid .grid_wrap,
body.gpr-grid #course_grid .grid_wrap {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
body.gpr-grid .grid_wrap::after,
body.gpr-grid .grid_wrap::before { content: none; }   /* kill the legacy clearfix */

body.gpr-grid .grid_items_2 .grid_wrap, body.gpr-grid .grid_wrap.grid_items_2,
body.gpr-grid .grid_items_2 #course_grid .grid_wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.gpr-grid .grid_items_3 .grid_wrap, body.gpr-grid .grid_wrap.grid_items_3,
body.gpr-grid .grid_items_3 #course_grid .grid_wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.gpr-grid .grid_items_4 .grid_wrap, body.gpr-grid .grid_wrap.grid_items_4,
body.gpr-grid .grid_items_4 #course_grid .grid_wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.gpr-grid .grid_items_5 .grid_wrap, body.gpr-grid .grid_wrap.grid_items_5,
body.gpr-grid .grid_items_5 #course_grid .grid_wrap { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body.gpr-grid .grid_items_6 .grid_wrap, body.gpr-grid .grid_wrap.grid_items_6,
body.gpr-grid .grid_items_6 #course_grid .grid_wrap { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1040px) {
	body.gpr-grid [class*="grid_items_"] .grid_wrap,
	body.gpr-grid .grid_wrap[class*="grid_items_"],
	body.gpr-grid [class*="grid_items_"] #course_grid .grid_wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	body.gpr-grid .grid_wrap,
	body.gpr-grid [class*="grid_items_"] .grid_wrap,
	body.gpr-grid .grid_wrap[class*="grid_items_"],
	body.gpr-grid #course_grid .grid_wrap,
	body.gpr-grid [class*="grid_items_"] #course_grid .grid_wrap { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* Grid items: undo the float layout and the padding gutter (gap replaces it). */
body.gpr-grid .course-listing,
body.gpr-grid #course_grid .grid_wrap .course-listing {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: 0;
	display: block;
	list-style: none;
	/* The to-do button paints itself with var(--tertiary, #1e73be) — Memberoni
	   blue. Defining it here is what makes the snippet render in GPR blue. */
	--tertiary: var(--gprg-blue);
}

/* ---------- The card ----------------------------------------------------- */
body.gpr-grid .course-wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--gprg-card);
	border: 1px solid var(--gprg-line);
	border-radius: var(--gprg-radius);
	overflow: hidden;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
	box-shadow: var(--gprg-shadow);
}
body.gpr-grid .course-wrap:hover {
	transform: translateY(-3px);
	border-color: var(--gprg-line-hover);
	box-shadow: var(--gprg-shadow-hover);
}
@media (prefers-reduced-motion: reduce) {
	body.gpr-grid .course-wrap { transition: none; }
	body.gpr-grid .course-wrap:hover { transform: none; }
}

/* ---------- Thumbnail ---------------------------------------------------- */
/* 79/41 matches the 790×415 source crop Memberoni generates, so the art is
   never cropped. Overrides the Customizer's #CED1E4 border hack. */
body.gpr-grid .course-thumb {
	position: relative;
	aspect-ratio: 79 / 41;
	height: auto;
	background-size: cover;
	background-position: center;
	background-color: #E9EEF5;
	border: 0;
	border-radius: 0;
}
body.gpr-grid .course-thumb::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(8, 16, 28, 0) 55%, rgba(8, 16, 28, .32));
	opacity: 0;
	transition: opacity .18s ease;
	pointer-events: none;
}
body.gpr-grid .course-wrap:hover .course-thumb::after { opacity: 1; }

/* Make the whole image the link target; the label is for screen readers. */
body.gpr-grid .course-thumb a.course-link {
	position: absolute; inset: 0; z-index: 2;
	text-indent: -9999px; overflow: hidden; white-space: nowrap;
}

/* Progress badge — was a square #0061ba block wedged into the corner. */
body.gpr-grid .course-listing .course_completion {
	position: absolute;
	top: 12px; right: 12px; left: auto; bottom: auto;
	z-index: 3;
	width: auto; height: auto;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .04em;
	color: #fff;
	background-color: rgba(8, 12, 20, .66);
	border: 1px solid rgba(255, 255, 255, .18);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
body.gpr-grid .course-listing .course_completion.completed {
	background-color: rgba(22, 163, 74, .85);
	border-color: rgba(255, 255, 255, .28);
}

/* "Coming soon" / locked variants (parent markup; may not appear on GPR). */
body.gpr-grid .course-listing.coming-soon .course-wrap,
body.gpr-grid .course-listing.course-locked .course-wrap { opacity: .72; }
body.gpr-grid .course-soon {
	position: absolute; top: 12px; left: 12px; z-index: 3;
	padding: 5px 11px; border-radius: 999px;
	font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: #fff; background: rgba(8, 12, 20, .6); border: 1px solid rgba(255, 255, 255, .2);
}

/* ---------- Card body ---------------------------------------------------- */
/* Flex column + `margin-top:auto` on the button row is what replaces the
   parent's absolute-positioning trick and its 68px bottom padding. */
/* The ID-scoped copy is needed for `display`/`flex-flow` only — the parent sets
   those at `#course_grid .grid_wrap .course-listing .course-wrap .course-content`
   (1,4,0). Its `max-height:100%` is harmless here and left alone. */
body.gpr-grid .course-listing .course-content,
body.gpr-grid .course-listing .course-content.mron-has-button-row,
body.gpr-grid #course_grid .grid_wrap .course-listing .course-wrap .course-content {
	display: flex;
	flex-direction: column;
	/* 11px felt "a tiny bit too much" between the excerpt and the meta pills
	   (Alejandro, 17 Sep 2026) — 15% tighter. */
	gap: 9px;
	flex: 1;
	background: transparent;
	padding: 18px;
	border: 0;
	position: static;
}

body.gpr-grid .course-listing .course-content h4 {
	margin: 0;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--gprg-ink);
}
body.gpr-grid .course-listing .course-content h4 a { color: inherit; text-decoration: none; }
body.gpr-grid .course-listing .course-content h4 a:hover { color: var(--gprg-blue); }

/* The parent's utility class is `.mb20 { margin-bottom: 20px !important }`, so
   the plain `margin: 0` this used to be never applied: with the 9px gap that
   left 29px between the text and the meta pills (Luke, 19 Sep 2026). Now 14px
   in all (9px gap + 5px). */
body.gpr-grid .course-listing .course-content .mb20 { margin: 0 0 5px !important; }

/* "Legacy Routine #13" above the title on /150-legacy-routines/ — added by
   gpr-directory.js from the routine's slug. Same look as the context line on
   the dashboard carousel's cards (gpr-feed.css .gpr-feed__eyebrow). */
body.gpr-grid .course-listing .course-content .gpr-card-eyebrow {
	display: block;
	margin: 0 0 -4px;   /* 5px above the title, not the card's 9px gap */
	color: var(--gprg-text);
	font: 600 12.5px/1.3 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
}
body.gpr-grid .course-listing .course-content p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--gprg-text);
	/* Three lines keeps every card's meta and button on the same baseline.
	   Excerpt lengths vary wildly (some courses open with "*More Modules To
	   Come"), and without the clamp one long card stretched the whole row. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* WOD cards: a lead-in line ("A melodic minor workout to develop your:") and a
   bulleted list. The site's global `ul` rules made the list 18px on a 30px
   line with an 18px top margin and a 40px indent, while the lead-in was 14px —
   so the lead-in looked like a caption floating in space (Luke, 19 Sep 2026).
   Both are 15px now, the list sits 4px under the lead-in, indented 18px. */
body.gpr-grid .course-listing .course-content .mb20:has(ul) p {
	font-size: 15px;
	line-height: 1.5;
}
body.gpr-grid .course-listing .course-content .mb20 ul {
	margin: 4px 0 0 !important;
	padding: 0 0 0 18px !important;
	list-style: disc outside;
	font-size: 15px;
	line-height: 1.5;
	color: #3B4656;
}
body.gpr-grid .course-listing .course-content .mb20 ul:first-child { margin-top: 0 !important; }
body.gpr-grid .course-listing .course-content .mb20 li {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}
body.gpr-grid .course-listing .course-content .mb20 li::marker { color: var(--gprg-pill-icon); }

/* ---------- Meta pills — the readability fix ----------------------------- */
/* Before: #989898 on #ECECEC, 13px, square, 2.2:1 → fails WCAG AA (needs 4.5:1).
   After:  #15528F on #EDF4FC, pill, 7.4:1 → passes AA and AAA.
   NOTE the pill text stays uppercase: values like "BEG./INT." are stored that
   way in the course fields, so lower-casing them in CSS is not possible —
   `text-transform: capitalize` leaves existing capitals alone. To get
   "Beg./Int." the value has to be edited on the course itself. */
body.gpr-grid .course-listing .course-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 0;
	font-style: normal;
}
body.gpr-grid .course-listing .course-meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 11px;
	border-radius: 999px;
	background: var(--gprg-pill-bg);
	border: 1px solid var(--gprg-pill-line);
	color: var(--gprg-pill-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: .03em;
	text-transform: uppercase;
}
body.gpr-grid .course-listing .course-meta span strong {
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: .08em;
	color: var(--gprg-pill-label);
}
body.gpr-grid .course-listing .course-meta span i,
body.gpr-grid .course-listing .course-meta span .fa {
	color: var(--gprg-pill-icon);
	font-size: 13px;
	margin: 0;
}

/* ---------- Button row --------------------------------------------------- */
/* Out-ranks bundle-activity-tracker.php's
   `.course-listing .course-content .mron-button-row{position:absolute;…}`
   (0,3,0) with (0,4,0) — no !important needed, specificity settles it. */
body.gpr-grid .course-listing .course-content .mron-button-row {
	position: static;
	left: auto; right: auto; bottom: auto;
	margin-top: auto;
	padding-top: 3px;
	display: flex;
	align-items: stretch;
	gap: 10px;
}

/* The CTA. `.w-onethird` is a parent width class we have to undo. */
body.gpr-grid .course-listing .course-content .button,
body.gpr-grid .course-listing .course-content .mron-button-row .button,
body.gpr-grid .course-listing .course-content .button.w-onethird,
body.gpr-grid .course-listing .course-content .button.w-half,
body.gpr-grid .course-listing .course-content .button.w-full {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 18px;
	border-radius: 10px;
	border: 0;
	background: var(--gprg-blue);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background .15s ease, transform .15s ease;
}
body.gpr-grid .course-listing .course-content .button:hover {
	background: var(--gprg-blue-hover);
	transform: translateY(-1px);
	color: #fff;
}
body.gpr-grid .course-listing .course-content .button.inactive { opacity: .55; pointer-events: none; }

/* ---------- To-do button (injected by bundle-activity-tracker.php) -------- */
/* This is the one place !important is unavoidable: the snippet prints
   `.mron-card-todo{border/background/color: … !important}` inline at
   wp_footer, so we need both higher specificity AND !important to win.
   The snippet is not edited — only out-styled. Its click handler, ARIA,
   busy-spinner and .is-active/.is-inactive icon swap all still run. */
body.gpr-grid .course-listing .mron-button-row .mron-card-todo {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* The parent theme leaves anchors as content-box, so without this the
	   1.5px border is added OUTSIDE the 46px and the to-do button renders
	   48px tall — 2px out of line with the CTA beside it. */
	box-sizing: border-box;
	width: 50px;
	min-width: 50px;
	height: 50px;
	padding: 0 !important;
	border-radius: 10px;
	border: 1.5px solid #D5DEEA !important;
	background: #fff !important;
	color: var(--gprg-blue) !important;
	font-size: 16px;
	line-height: 1;
	box-shadow: none !important;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
body.gpr-grid .course-listing .mron-button-row .mron-card-todo:hover {
	border-color: var(--gprg-blue) !important;
	background: #F2F8FF !important;
	color: var(--gprg-blue) !important;
}
body.gpr-grid .course-listing .mron-button-row .mron-card-todo.is-active {
	background: var(--gprg-blue) !important;
	border-color: var(--gprg-blue) !important;
	color: #fff !important;
}
body.gpr-grid .course-listing .mron-button-row .mron-card-todo.is-active:hover {
	background: var(--gprg-blue-hover) !important;
	border-color: var(--gprg-blue-hover) !important;
}

/* Keyboard focus — the parent theme ships no visible focus ring on these. */
body.gpr-grid .course-listing a:focus-visible {
	outline: 2px solid var(--gprg-blue);
	outline-offset: 2px;
	border-radius: 6px;
}