/*
* MC LearnPress UI — courses archive
* Handle: mc-lp-archive (depends on mc-lp-base → mc-lp-tokens)
* Figma: 3721:31956 · plan §5.2, §7.1
*
* Contents
* 1. Page shell & hero band
* 2. Filter bar .mc-lp-filter-bar
* 3. Course grid ul.learn-press-courses
* 4. Pagination .mc-pagination
* 5. LearnPress leftovers
*
* The course CARD is not styled here. It lives in assets/css/course-card.css
* (handle `mc-lp-course-card`), which MC_LP_Assets enqueues immediately before
* this file on the archive, single-course and instructor screens. Only rules
* that position cards *within* the archive grid belong in §3.
*
* RULES
* · Logical properties only — no left / right anywhere in this file.
* (`direction` is used once, deliberately, on the pagination number list —
* see §4. It sets reading order, not box sides.)
* · Variables only — no raw hex, except the two values called out in §2 that
* are genuinely off the token scale.
* · Mobile-first. Breakpoints are hard-coded px: 640 / 768 / 1024 / 1280.
* · Grid: 1 col <768 · 2 col ≥768 · 3 col ≥1024 · 4 col ≥1280.
*
* SPECIFICITY
* base.css wraps its element defaults (`a`, `p`, `ul`, `h1`…`h6`, `img`) in
* `:where()`, so they carry zero specificity and any component class beats
* them. The `.mc-lp` prefixes that appear on some selectors below are
* therefore belt-and-braces, not load-bearing — they were added while those
* defaults still scored (0,1,1) and are kept because they also document which
* rules style a bare element. New rules do not need the prefix.
*
* LearnPress' own learnpress.css does beat class selectors by ID in a few
* places, but every one of them is scoped to the course-item popup
* (`#popup-footer`, `#popup-sidebar`, `#learn-press-course-curriculum`) —
* verified, nothing on this screen is affected.
*
* RTL
* The Figma frame is an RTL layout drawn in Figma's LTR coordinate space, so
* an exported `justify-end` does NOT mean `flex-end`. Every alignment below is
* taken from the *rendered* frame: search field and results count on the
* inline start (visually the right), the five chips on the inline end.
*/
/* ==========================================================================
1. Page shell & hero band
========================================================================== */
.mc-lp-archive {
/*
* Figma 3801:33260 — four 296px cards at x 0 / 328 / 656 / 984 inside a
* 1280 column, and rows at y 0 / 470 / 940 against a 446px card. So the
* column gap is 32 and the row gap 24 — they are not the same value.
*
* Note: the Figma content column is 1280 (1440 frame, 80px gutters) while
* `--mc-container` is 1200 for every screen in this plugin. Left alone here
* so the archive stays aligned with the other screens.
*/
/* Tightened from 32/24 — four-up read as too airy at three-up card widths. */
--mc-archive-gap-x: var(--mc-space-6);
--mc-archive-gap-y: var(--mc-space-5);
display: flow-root;
color: var(--mc-color-text);
}
/*
* The wrapper keeps LearnPress' `lp-content-area` class for theme compatibility,
* but not its geometry: learnpress.css:331 sets
*
* max-width: var(--lp-container-max-width) !important;
* padding-right / padding-left: var(--lp-cotainer-padding);
*
* which would (a) impose LearnPress' container width instead of `--mc-container`,
* (b) add a second, physical gutter on top of `.mc-container`'s logical one, and
* (c) stop the hero band from ever reaching the viewport edge. Neutralised here;
* `.mc-container` on the inner elements is the single source of width.
* `!important` is required only because LearnPress used it first.
*/
.mc-lp-archive.lp-content-area {
max-width: none !important;
padding-inline: 0;
}
/*
* Figma 3721:31958 — a 1440 × 338 band. The nav bar inside it is theme-owned
* (plan §7.2), so this element carries only the copy: title at y=178 (56 tall),
* sub-title 16px below it (2 × 28), 32px of air underneath.
*
* The band is *white*, not navy: the dark rectangle in the Figma frame is the
* floating nav pill, and the band behind it samples #ffffff with a pale blue
* line-art overlay.
*
* That line art is a raster fill ("9608 1" / "9608 2", two 720 × 1461 halves of
* one square source). It is exported to assets/images/hero-network.webp and laid
* down as a mirrored pair of pseudo-elements so the dense corners sit at both
* outer edges and the pale corners meet behind the heading — the same
* composition, without a physical background-position.
*/
.mc-lp-archive__hero {
--mc-archive-hero-image: url("../images/hero-network.webp");
position: relative;
isolation: isolate;
overflow: hidden;
padding-block: var(--mc-space-8);
background-color: var(--mc-color-bg);
background-image: radial-gradient(
120% 140% at 50% 0%,
var(--mc-color-slate-100) 0%,
var(--mc-color-bg) 62%
);
text-align: center;
}
.mc-lp-archive__hero::before,
.mc-lp-archive__hero::after {
content: "";
position: absolute;
inset-block: 0;
z-index: -1;
width: 50%;
background-image: var(--mc-archive-hero-image);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
pointer-events: none;
}
.mc-lp-archive__hero::before {
inset-inline-start: 0;
}
.mc-lp-archive__hero::after {
inset-inline-end: 0;
transform: scaleX(-1);
}
/* Set --mc-archive-hero-image to `none` on .mc-lp-archive__hero to drop the
artwork and keep the plain gradient. */
/* Opt-in full-viewport band — see the `mc_lp_ui/archive_hero_bleed` filter. */
.mc-lp-archive__hero--bleed {
margin-inline: calc(50% - 50vw);
padding-inline: calc(50vw - 50%);
}
.mc-lp-archive__hero-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
/* Figma: title box ends at 234, sub-title starts at 250. */
gap: var(--mc-space-4);
max-width: 900px;
}
/*
* Pale repeat of the heading, 24px above it. Figma 0:220 measures 799 × 56
* against the real title's 821 × 56 — so it is the *same* size, not an
* oversized watermark; only the colour and the offset differ. Sampled at
* #f3f6fc, which is slate-200 at ~55% over white.
*/
.mc-lp-archive__hero-ghost {
position: absolute;
inset-block-start: calc(-1 * var(--mc-space-6));
inset-inline: 0;
z-index: -1;
display: none;
font-size: clamp(var(--mc-font-size-2xl), 3.4vw, 40px);
font-weight: var(--mc-font-weight-extrabold);
line-height: 56px;
color: var(--mc-color-slate-200);
opacity: 0.55;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
pointer-events: none;
user-select: none;
}
@media (min-width: 1024px) {
.mc-lp-archive__hero-ghost {
display: block;
}
}
/*
* Figma: 40 / 56 / 800, Dark blue #0C275E. Neither 40px nor 56px is on our
* scale (--mc-font-size-4xl is 36, --mc-leading-4xl is 44), so both are
* written out; the clamp keeps the small end on the token scale.
*
* `.mc-lp` prefix required: base.css `.mc-lp h1` (0,1,1) sets font-size,
* line-height, font-weight AND colour, and would otherwise win outright.
*/
.mc-lp .mc-lp-archive__title {
position: relative;
margin: 0;
font-size: clamp(var(--mc-font-size-2xl), 3.4vw, 40px);
line-height: 1.4;
font-weight: var(--mc-font-weight-extrabold);
color: var(--mc-color-text);
}
@media (min-width: 1280px) {
.mc-lp .mc-lp-archive__title {
line-height: 56px;
}
}
/* Figma token: font/size/xl 20 · font/leading/7 28 · medium · dark blue 300.
Figma wraps the copy over two lines inside an 821px box. */
.mc-lp-archive__subtitle {
max-width: 821px;
color: var(--mc-color-text-subtle);
font-size: var(--mc-font-size-base);
line-height: var(--mc-leading-lg);
font-weight: var(--mc-font-weight-medium);
}
@media (min-width: 1024px) {
.mc-lp-archive__subtitle {
font-size: var(--mc-font-size-xl);
}
}
.mc-lp .mc-lp-archive__subtitle p {
margin-block-end: var(--mc-space-2);
}
.mc-lp .mc-lp-archive__subtitle p:last-child {
margin-block-end: 0;
}
/* LearnPress prints the page / term description into the sub-title slot
(lp/template/archive-course/description), so it can arrive wrapped. */
.mc-lp-archive__subtitle .lp-course-page__content,
.mc-lp-archive__subtitle .lp-archive-course-term-description {
margin: 0;
}
/*
* Figma: the content frame starts 16px below the hero band (338 → 354), and the
* footer sits 48px below the pagination container.
*/
.mc-lp-archive__body {
padding-block: var(--mc-space-4) var(--mc-space-12);
}
/* Figma 3721:31975 → 3801:33286: filter row bottom 36, grid top 60. */
.mc-lp-archive__list {
margin-block-start: var(--mc-space-6);
}
/*
* LearnPress' breadcrumb (LP_Template_General::breadcrumb, hooked on
* `learn-press/before-main-content`) prints as a sibling immediately above this
* screen, outside our markup — the action is left exactly where LearnPress fires
* it because themes pair it with `learn-press/after-main-content` to open and
* close wrappers. In the Figma it sits on the same pale band as the heading, so
* it only needs the container geometry and the type ramp.
*
* Scoped on the body class MC_LP_Assets adds, so no other screen is affected.
*/
.mc-lp-screen--archive .learn-press-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--mc-space-2);
width: 100%;
max-width: var(--mc-container);
margin-inline: auto;
margin-block: 0;
padding-inline: var(--mc-container-gutter);
padding-block: var(--mc-space-6) 0;
list-style: none;
color: var(--mc-color-text-subtle);
font-size: var(--mc-font-size-sm);
line-height: var(--mc-leading-sm);
text-align: start;
}
.mc-lp-screen--archive .learn-press-breadcrumb li {
display: inline-flex;
align-items: center;
gap: var(--mc-space-2);
}
.mc-lp-screen--archive .learn-press-breadcrumb a {
color: var(--mc-color-text-subtle);
}
.mc-lp-screen--archive .learn-press-breadcrumb a:hover,
.mc-lp-screen--archive .learn-press-breadcrumb a:focus-visible {
color: var(--mc-color-primary);
}
/* ==========================================================================
2. Filter bar
Markup: templates/parts/filter-bar.php
Mobile (<768) : full-width search + a single "Filters" button that opens a
focus-trapped bottom drawer holding every group.
Desktop (≥768) : one inline row, each chip owning an absolute dropdown.
========================================================================== */
.mc-lp-filter-bar {
position: relative;
}
.mc-lp-filter-bar__form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--mc-space-3);
}
/*
* Figma 3721:31975 — one 1280 × 36 row, `justify-content: space-between`.
* Rendered RTL: search bar hard against the inline start (296 × 36), results
* count 16px after it, five chips on the inline end 16 apart.
*/
.mc-lp-filter-bar__start {
display: flex;
flex: 1 1 100%;
flex-wrap: wrap;
align-items: center;
gap: var(--mc-space-4);
min-width: 0;
}
/* --- 2.1 Search ---------------------------------------------------------- */
.mc-lp-filter-bar__search {
position: relative;
flex: 1 1 220px;
min-width: 0;
}
/* Figma: the 14px glyph sits 16px from the field's inline start, ahead of the
copy — i.e. on the right under `dir="rtl"`. */
.mc-lp-filter-bar__search-icon {
position: absolute;
inset-inline-start: var(--mc-space-4);
inset-block-start: 50%;
transform: translateY(-50%);
display: inline-flex;
color: var(--mc-color-text-subtle);
pointer-events: none;
}
/* 14px, not the 16px --mc-icon-size-sm: the Figma glyph is 14 square. */
.mc-lp-filter-bar__search-icon .mc-icon {
width: 14px;
height: 14px;
}
/*
* Figma 3721:34053 — 296 × 36, radius 50, 1px theme/border (#e2e8f0),
* drop-shadow 0 0 2px rgba(0,0,0,.1), padding 16 inline-start / 8 inline-end.
*/
.mc-lp-filter-bar__search-input.mc-input {
/* Below md the field is a primary touch target, so it keeps 44px rather than
the 40px `--mc-btn-height` inherited from `.mc-input`. */
min-height: var(--mc-tap-target);
/* 16 padding + 14 glyph + 8 gap = 38. */
padding-inline-start: 38px;
padding-inline-end: var(--mc-space-2);
border-color: var(--mc-color-border);
border-radius: var(--mc-radius-full);
background: var(--mc-color-bg);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
font-size: var(--mc-font-size-sm);
line-height: var(--mc-leading-base);
font-weight: var(--mc-font-weight-medium);
}
.mc-lp-filter-bar__search-input.mc-input:focus {
box-shadow: var(--mc-ring);
}
/* Figma placeholder is color/slate/400 #90a1b9, which has no token — the scale
jumps slate/300 #cad5e2 → slate/500 #62748e. Written out deliberately. */
.mc-lp-filter-bar__search-input.mc-input::placeholder {
color: #90a1b9;
opacity: 1;
}
.mc-lp-filter-bar__search-input::-webkit-search-cancel-button {
cursor: pointer;
}
/*
* Figma 3721:34919 — Cairo SemiBold 16 / 24, color/dark blue/300 #647598.
* `.mc-lp` prefix required: the element is a and base.css `.mc-lp p`
* (0,1,1) owns its margin.
*/
.mc-lp .mc-lp-filter-bar__count {
margin: 0;
flex: none;
color: var(--mc-color-text-subtle);
font-size: var(--mc-font-size-base);
line-height: var(--mc-leading-base);
font-weight: var(--mc-font-weight-semibold);
white-space: nowrap;
}
/* --- 2.2 Mobile toggle --------------------------------------------------- */
.mc-lp-filter-bar__toggle {
flex: 1 1 auto;
min-height: var(--mc-tap-target);
border-radius: var(--mc-radius-full);
}
.mc-lp-filter-bar__toggle-count[hidden] {
display: none;
}
.mc-lp-filter-bar__toggle-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding-inline: var(--mc-space-1);
border-radius: var(--mc-radius-full);
background: var(--mc-color-primary);
color: var(--mc-color-text-invert);
font-size: var(--mc-font-size-xs);
line-height: 1;
font-weight: var(--mc-font-weight-bold);
}
/* --- 2.3 Groups: drawer on mobile ---------------------------------------- */
.mc-lp-filter-bar__groups {
position: fixed;
inset-inline: 0;
inset-block-end: 0;
z-index: 1000;
display: flex;
flex-direction: column;
gap: var(--mc-space-4);
max-height: 85vh;
padding: var(--mc-space-4);
border-start-start-radius: var(--mc-radius-xl);
border-start-end-radius: var(--mc-radius-xl);
background: var(--mc-color-bg);
box-shadow: var(--mc-shadow-lg);
overflow-y: auto;
transform: translateY(100%);
visibility: hidden;
transition: transform var(--mc-transition), visibility var(--mc-transition);
}
.mc-lp-filter-bar.is-open .mc-lp-filter-bar__groups {
transform: translateY(0);
visibility: visible;
}
.mc-lp-filter-bar__backdrop {
position: fixed;
inset: 0;
z-index: 999;
background: rgba(12, 39, 94, 0.45);
}
.mc-lp-filter-bar__backdrop[hidden] {
display: none;
}
.mc-lp-filter-bar__drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mc-space-3);
padding-block-end: var(--mc-space-3);
border-block-end: 1px solid var(--mc-color-border);
}
.mc-lp .mc-lp-filter-bar__drawer-title {
margin: 0;
font-size: var(--mc-font-size-lg);
line-height: var(--mc-leading-lg);
font-weight: var(--mc-font-weight-bold);
color: var(--mc-color-text);
}
.mc-lp-filter-bar__drawer-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--mc-tap-target);
height: var(--mc-tap-target);
border: 0;
border-radius: var(--mc-radius-full);
background: var(--mc-color-surface);
color: var(--mc-color-text);
cursor: pointer;
}
/* --- 2.4 Group + chip ---------------------------------------------------- */
.mc-lp-filter-bar__group {
position: relative;
}
/*
* Figma 3796:26081 — 36 tall pill, white fill, 1px color/slate/300 #cad5e2,
* radius 24 (clamped to the pill by the 36px height), padding 16 inline-start /
* 8 inline-end, label → caret gap 16. Label is text-sm/semibold in
* color/slate/500 #62748e.
*/
.mc-lp-filter-bar__chip.mc-chip {
width: 100%;
justify-content: space-between;
gap: var(--mc-space-2);
min-height: var(--mc-tap-target);
padding-inline: var(--mc-space-4) var(--mc-space-2);
border-color: var(--mc-color-border-strong);
background: var(--mc-color-bg);
color: var(--mc-color-text-muted);
font-size: var(--mc-font-size-sm);
line-height: var(--mc-leading-sm);
font-weight: var(--mc-font-weight-semibold);
}
.mc-lp-filter-bar__chip-label {
white-space: nowrap;
}
/*
* The flex gap is 8 so an active-count badge sits close to its label; the extra
* 8 here restores the Figma's 16px label → caret distance when no badge shows.
*/
.mc-lp-filter-bar__chip-caret {
margin-inline-start: var(--mc-space-2);
color: var(--mc-color-text-muted);
transition: transform var(--mc-transition-fast);
}
.mc-lp-filter-bar__chip[aria-expanded="true"] {
border-color: var(--mc-color-primary);
color: var(--mc-color-text);
}
.mc-lp-filter-bar__chip[aria-expanded="true"] .mc-lp-filter-bar__chip-caret {
transform: rotate(180deg);
}
.mc-lp-filter-bar__group.is-active > .mc-lp-filter-bar__chip {
border-color: var(--mc-color-primary);
color: var(--mc-color-primary);
font-weight: var(--mc-font-weight-semibold);
}
.mc-lp-filter-bar__chip-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding-inline: var(--mc-space-1);
border-radius: var(--mc-radius-full);
background: var(--mc-color-primary);
color: var(--mc-color-text-invert);
font-size: var(--mc-font-size-xs);
line-height: 1;
font-weight: var(--mc-font-weight-bold);
}
.mc-lp-filter-bar__chip-badge[hidden] {
display: none;
}
/* --- 2.5 Panel ----------------------------------------------------------- */
.mc-lp-filter-bar__panel {
margin-block-start: var(--mc-space-2);
padding: var(--mc-space-2);
border: 1px solid var(--mc-color-border);
border-radius: var(--mc-radius-md);
background: var(--mc-color-bg);
}
.mc-lp-filter-bar__panel[hidden] {
display: none;
}
.mc-lp .mc-lp-filter-bar__options {
display: flex;
flex-direction: column;
gap: var(--mc-space-1);
max-height: 260px;
overflow-y: auto;
margin: 0;
padding: 0;
list-style: none;
}
.mc-lp-filter-bar__option {
display: flex;
align-items: center;
gap: var(--mc-space-2);
min-height: var(--mc-tap-target);
padding-block: var(--mc-space-1);
padding-inline: var(--mc-space-2);
border-radius: var(--mc-radius-sm);
color: var(--mc-color-text);
font-size: var(--mc-font-size-sm);
line-height: var(--mc-leading-sm);
text-align: start;
cursor: pointer;
transition: background-color var(--mc-transition-fast);
}
.mc-lp-filter-bar__option:hover {
background: var(--mc-color-surface);
}
.mc-lp-filter-bar__option-input {
flex: none;
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--mc-color-primary);
cursor: pointer;
}
.mc-lp-filter-bar__option-input:focus-visible {
outline: 2px solid var(--mc-color-focus);
outline-offset: 2px;
}
.mc-lp-filter-bar__option-label {
flex: 1 1 auto;
min-width: 0;
}
.mc-lp-filter-bar__option-count {
flex: none;
color: var(--mc-color-text-subtle);
font-size: var(--mc-font-size-xs);
line-height: var(--mc-leading-xs);
}
.mc-lp-filter-bar__actions {
display: flex;
align-items: center;
gap: var(--mc-space-3);
padding-block-start: var(--mc-space-3);
border-block-start: 1px solid var(--mc-color-border);
}
/* Drawer-only, so touch sizing wins over the 40px `--mc-btn-height`. */
.mc-lp-filter-bar__actions > * {
flex: 1 1 auto;
min-height: var(--mc-tap-target);
}
/* --- 2.6 Desktop row ----------------------------------------------------- */
@media (min-width: 768px) {
.mc-lp-filter-bar__form {
flex-wrap: nowrap;
justify-content: space-between;
gap: var(--mc-space-4);
}
.mc-lp-filter-bar__start {
flex: 0 1 auto;
}
.mc-lp-filter-bar__search {
flex: 0 1 296px;
}
.mc-lp-filter-bar__search-input.mc-input {
min-height: 36px;
}
.mc-lp-filter-bar__toggle,
.mc-lp-filter-bar__backdrop,
.mc-lp-filter-bar__drawer-head,
.mc-lp-filter-bar__actions {
display: none !important;
}
/*
* `flex: 0 1 auto` + the form's `space-between` is what pins the chips to the
* inline end; the group is never wider than its chips, so `flex-start` here
* is both correct and safe to scroll when they overflow. (`justify-content:
* flex-end` on a scrolling flex container makes the overflowing start
* unreachable in Chromium — do not reintroduce it.)
*/
.mc-lp-filter-bar__groups {
position: static;
z-index: auto;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
gap: var(--mc-space-4);
min-width: 0;
max-height: none;
padding: 0;
border-radius: 0;
background: none;
box-shadow: none;
overflow-x: auto;
overflow-y: visible;
transform: none;
visibility: visible;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.mc-lp-filter-bar__group {
flex: none;
}
.mc-lp-filter-bar__chip.mc-chip {
width: auto;
/* 36px is the Figma chip height; the 44px tap target is kept below md. */
min-height: 36px;
}
/*
* Anchored to the chip's inline END, so the panel grows toward the inline
* start — i.e. toward the middle of the page, since the whole chip row sits
* on the row's inline end. That direction can never run off-screen here,
* which is why there is no per-chip flip rule.
*/
.mc-lp-filter-bar__panel {
position: absolute;
inset-block-start: calc(100% + var(--mc-space-2));
inset-inline-end: 0;
z-index: 30;
min-width: 220px;
max-width: min(320px, calc(100vw - var(--mc-space-8)));
margin-block-start: 0;
padding: var(--mc-space-2);
border-radius: var(--mc-radius-lg);
box-shadow: var(--mc-shadow-lg);
}
}
@media (min-width: 1024px) {
.mc-lp-filter-bar__groups {
overflow-x: visible;
}
}
/* ==========================================================================
3. Course grid
Markup: LearnPress' `ul.learn-press-courses.lp-list-courses-no-css`, tagged
with `.mc-course-grid` by MC_LP_Archive::section_courses(). The cards
themselves are styled by assets/css/course-card.css.
========================================================================== */
/*
* SELECTOR — why this is not scoped to `.mc-lp-archive__list` alone.
*
* The grid used to hang off `.mc-lp-archive__list .learn-press-courses`, which
* silently produces no layout at all whenever that wrapper is missing. It can
* be: `LP_Page_Controller::template_loader()` returns early on block themes
* (inc/class-lp-page-controller.php:456), and the block path renders through
* `Template::get_frontend_template()`, which fires no filter and therefore
* cannot be redirected at our plugin — LearnPress' own archive-course.php
* renders and no `.mc-lp-archive__list` exists. Load order is a second hazard:
* on block themes learnpress.css is enqueued during render
* (ArchiveCourseBlockLegacy:31) and prints AFTER this file, so equal-specificity
* rules flip to LearnPress.
*
* Both are addressed here:
* · `.mc-course-grid` is emitted by our own PHP onto the
, so it needs no
* ancestor and survives the AJAX re-render (the class is added inside
* `render_courses()`, the registered AJAX callback).
* · The class is doubled to (0,2,1), which out-specifies LearnPress'
* `.learn-press-courses` (0,1,0) irrespective of order.
* · The wrapper-scoped selector is kept as a second, independent path for
* sites that filter `mc_lp_ui/courses_grid_class` to empty.
*
* It cannot leak onto the two other surfaces that reuse the card:
* the instructor grid is `ul.ul-instructor-courses` inside a
* `` built by
* SingleInstructorTemplate::html_courses() without this filter, and the related
* strip on a single course is `.mc-related__grid`. Neither carries
* `.mc-course-grid`, and neither sits inside `.mc-lp-archive__list`.
*/
ul.mc-course-grid.mc-course-grid,
.mc-lp-archive__list ul.learn-press-courses {
display: grid;
column-gap: var(--mc-archive-gap-x);
row-gap: var(--mc-archive-gap-y);
margin: 0;
padding: 0;
/* LearnPress: `.learn-press-courses { min-height: 300px }`. */
min-block-size: 0;
list-style: none;
}
/*
* TRACKS — the column count is driven by the CONTAINER, not the viewport.
*
* This is the actual regression. The tracks were `repeat(N, minmax(0, 1fr))`
* switched on viewport media queries, and a `0` track minimum means a track may
* be sized below its content's minimum without limit. So the moment the grid's
* container was narrower than the viewport implied — a theme content column, a
* sidebar, a flex ancestor that shrank it — the ≥1280 rule still asked for four
* columns and each one collapsed to a sliver, taking the card, the 327/202
* thumbnail and the wrapped title with it. The card's own `overflow: hidden`
* removes the flex/grid automatic minimum size, so nothing downstream stopped it.
*
* `auto-fill` + a real track minimum makes that impossible: a track can never be
* narrower than the minimum, so a container that cannot fit N columns yields
* fewer columns instead of N unreadable ones. `min(100%, …)` caps the minimum at
* the container's own width, so a genuinely narrow container gives one
* full-width card rather than horizontal overflow.
*
* The minima are chosen so the counts fall out exactly at the plugin's
* container widths (`--mc-container` 1200, gutters 16 / 24, column gap now 24) —
* `auto-fill` fits n columns while `n·min + (n-1)·24 <= container`:
*
* < 768 container ≤ 735 min 360 → 1 (2 would need 744)
* ≥ 768 container 720–975 min 320 → 2 (3 would need 1008)
* ≥ 1024 container 976–1152 min 320 → 3 (4 would need 1352)
*
* THREE IS THE MAXIMUM, by request — four-up made the cards too narrow to read.
* There is deliberately no ≥1280 step: at the widest the archive container ever
* gets (1152px) a fourth column would need 1352px, so `auto-fill` cannot produce
* one. The cap is arithmetic rather than a hard `repeat(3, …)` because keeping
* `auto-fill` with a real track minimum is what prevents the sliver-collapse
* regression described above — `repeat(3, minmax(0, 1fr))` would reintroduce it.
*/
ul.mc-course-grid.mc-course-grid,
.mc-lp-archive__list ul.learn-press-courses {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
}
@media (min-width: 768px) {
ul.mc-course-grid.mc-course-grid,
.mc-lp-archive__list ul.learn-press-courses {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
}
@media (min-width: 1024px) {
ul.mc-course-grid.mc-course-grid,
.mc-lp-archive__list ul.learn-press-courses {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
}
/*
* Cards are the direct - children. Grid items stretch to the row height by
* default, which is what lets `.mc-course-card { height: 100% }` line the CTAs
* up across a row.
*
* The width reset is load-bearing, not defensive tidying: LearnPress sizes loop
* items itself — `.learn-press-courses[data-layout=grid] .course { padding: 0 16px }`
* plus `width: 50%` / `100%` below 992 / 767 (learnpress.css:5336), and
* `.lp-archive-courses .lp-content-area.has-sidebar .learn-press-courses[data-layout=grid] li { width: 33.33% }`
* (learnpress.css:4931). A percentage width on a grid item resolves against the
* grid AREA, so `33.33%` inside a 264px track is a 88px card sitting in a
* quarter-empty column.
*
* That rule scores (0,4,1) and IS reachable: LearnPress' own archive-course.php
* adds `has-sidebar` at line 34, and that template is what renders whenever the
* block path bypasses ours. Beating it needs (0,4,2) — hence the repeated class,
* which is a specificity device, not a typo. `.course` is on our card
* (course-card.php keeps it for theme compatibility); the plain `> li` rule below
* carries everything that does not need the extra weight.
*
* PADDING IS DELIBERATELY NOT RESET HERE. LearnPress' competing declaration is
* `padding: 0 16px`, i.e. it sets the block padding too, so a `padding: 0` reset
* at this weight would also erase the card's own 16px `padding-block-end` and
* drop the CTA flush against the card's bottom edge. The card's box belongs to
* course-card.css, which out-specifies LearnPress on its own.
*/
ul.mc-course-grid.mc-course-grid > li,
.mc-lp-archive__list ul.learn-press-courses > li {
min-inline-size: 0;
max-inline-size: 100%;
margin: 0;
list-style: none;
}
ul.mc-course-grid.mc-course-grid > li.course.course,
.mc-lp-archive__list ul.learn-press-courses.learn-press-courses > li.course.course {
inline-size: auto;
max-inline-size: none;
}
/* ==========================================================================
4. Pagination
Markup: templates/parts/pagination.php
========================================================================== */
/*
* Figma 3801:33266 — 290 × 40, centred, 48px below the grid (a 24px container
* gap plus 24px of container padding). Numbers are 40 square, the ellipsis 36,
* prev / next 70–72 wide, everything 8 apart. Bound tokens: spacing/10 = 40,
* spacing/9 = 36, spacing/2 = 8, spacing/1 = 4, radius/md = 6,
* text-base/medium = 16 / 24 / 500 for numbers, text-sm/medium = 14 / 20 / 500
* for the prev / next labels.
*/
.mc-pagination {
margin-block-start: var(--mc-space-12);
}
.mc-lp .mc-pagination__list {
display: flex;
align-items: center;
justify-content: center;
gap: var(--mc-space-2);
margin: 0;
padding: 0;
list-style: none;
flex-wrap: wrap;
}
.mc-pagination__item {
display: flex;
align-items: center;
}
/*
* The Figma keeps the page numbers ascending left-to-right even in the RTL
* frame (`1 2 …`, verified against the rendered node), with Previous pinned to
* the inline start and Next to the inline end. `direction` controls reading
* order only — no box side is hard-coded here.
*/
.mc-lp .mc-pagination__numbers {
direction: ltr;
display: flex;
align-items: center;
gap: var(--mc-space-2);
margin: 0;
padding: 0;
list-style: none;
}
/*
* `.mc-lp` prefix required: prev / next / numbers are elements and base.css
* `.mc-lp a` (0,1,1) sets `color: var(--mc-color-primary)`.
*/
.mc-lp .mc-pagination__nav,
.mc-lp .mc-pagination__number,
.mc-lp .mc-pagination__dots {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mc-space-1);
min-width: var(--mc-tap-target);
min-height: var(--mc-tap-target);
padding-inline: var(--mc-space-2);
border: 1px solid transparent;
/* Figma radius/md = 6, between our --mc-radius-sm (4) and --mc-radius-md (8). */
border-radius: 6px;
background: transparent;
color: var(--mc-color-text);
font-size: var(--mc-font-size-base);
line-height: var(--mc-leading-base);
font-weight: var(--mc-font-weight-medium);
text-decoration: none;
transition: background-color var(--mc-transition-fast),
border-color var(--mc-transition-fast), color var(--mc-transition-fast);
}
.mc-lp .mc-pagination__nav {
font-size: var(--mc-font-size-sm);
line-height: var(--mc-leading-sm);
}
@media (min-width: 768px) {
.mc-lp .mc-pagination__nav,
.mc-lp .mc-pagination__number {
min-width: var(--mc-space-10);
min-height: var(--mc-space-10);
}
.mc-lp .mc-pagination__nav {
padding-inline: var(--mc-space-4);
}
.mc-lp .mc-pagination__dots {
min-width: 36px;
min-height: 36px;
}
}
.mc-lp a.mc-pagination__nav:hover,
.mc-lp a.mc-pagination__nav:focus-visible,
.mc-lp a.mc-pagination__number:hover,
.mc-lp a.mc-pagination__number:focus-visible {
background: var(--mc-color-surface);
color: var(--mc-color-primary);
}
/* Figma: white fill, 1px theme/border (#e2e8f0), radius 6, no shadow. */
.mc-lp .mc-pagination__number.current {
border-color: var(--mc-color-border);
background: var(--mc-color-bg);
color: var(--mc-color-text);
cursor: default;
}
.mc-lp .mc-pagination__dots {
padding-inline: var(--mc-space-1);
color: var(--mc-color-text);
cursor: default;
}
.mc-lp .mc-pagination__nav.disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.mc-pagination__label {
white-space: nowrap;
}
@media (max-width: 639px) {
.mc-pagination__label {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.mc-lp .mc-pagination__nav {
min-width: var(--mc-tap-target);
padding-inline: var(--mc-space-2);
}
}
/* ==========================================================================
5. LearnPress leftovers
The `section/top` array is replaced by a hidden results-count element (the
filter bar mirrors it), so the only core chrome left inside the AJAX target
is the loading state.
========================================================================== */
.mc-lp-archive__list .courses-page-result[hidden] {
display: none !important;
}
.mc-lp-archive__list .lp-load-ajax-element {
position: relative;
min-height: 120px;
}
.mc-lp-archive__list .loading-first,
.mc-lp-archive__list .lp-loading-change {
pointer-events: none;
}
.mc-lp-archive__list .lp-target.is-loading {
opacity: 0.45;
transition: opacity var(--mc-transition);
}
.mc-lp-archive__list .learn-press-message {
margin-block: var(--mc-space-6);
padding: var(--mc-space-4);
border: 1px solid var(--mc-color-border);
border-radius: var(--mc-radius-lg);
background: var(--mc-color-surface);
color: var(--mc-color-text-muted);
text-align: center;
}
/* Body-level lock while the mobile filter drawer is open. */
body.mc-lp-filter-open {
overflow: hidden;
}
@media (min-width: 768px) {
body.mc-lp-filter-open {
overflow: visible;
}
}