/* Programme listing, and the card shared with the slider.
   Card follows Anka's Figma node 379:1088 for its identity: white on a 2px
   #1C3687 border, 20px radius and 20px padding. Deliberate deviations, agreed
   with Guy and recorded in HANDOFF, so the next reader meets a decision rather
   than drift:
     18 Aug 2026  the CTA is scaled down from the design's 70px/18px, the school
                  reads as a full-width label instead of a fixed 86px lockup
                  column, and NQF and duration return as chips.
     1 Sept 2026  the school LOCKUP is off the card entirely. The 127x222
                  portrait SVGs landed after the card was built for its text
                  fallback and rendered 210px tall above the title on 28 of 57
                  cards. The lockup now heads the term archive instead.
     1 Sept 2026  the CTA bar is Bright Cyan #54D3EB, not the kit's CTA Yellow
                  #F9F106. It arrived as a `!important` override in Customiser
                  Additional CSS; Guy confirmed it as intentional, so it lives
                  here as a token instead of as a UI override fighting the
                  stylesheet. Tell Anka: it is a real deviation from 379:1088.
   Anything not listed above should match the design node.

   The slider adds only its rail. Every card rule below is shared, which is why
   slider.css depends on this handle rather than restating any of it. */
/* Card tokens live on both roots so a slider outside a .mk-listing still gets
   them. --card-accent carried the per-school dot until 10 Sept 2026, when the
   lockup replaced it. Nothing reads it now: school colour reaches the card
   through the artwork, which milpark_svg_dark_variant() paints in brand_colour.
   It is still emitted per card from term meta, because a card variant wanting
   the colour as a border or a rule should not have to re-plumb the data. */
.mk-listing,.mk-slider{--card-accent:#A7B0C6;--cta-bg:#54D3EB;--cta-bg-hover:#3AC7E0;--cta-bg-active:#22B8D4;--cta-fg:#1A134A;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}

/* Controls are not in the supplied design node; these stay as they were until
   Anka's filter treatment is available. */
.mk-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:0 0 18px}
.mk-field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#5a6b85}
.mk-field span{font-weight:600;letter-spacing:.02em}
.mk-field select,.mk-field input{padding:10px 12px;font:inherit;font-size:15px;border:1px solid #dde3f0;border-radius:8px;background:#fff;color:#394154;min-width:170px}
.mk-field--search input{min-width:260px}
.mk-field select:focus,.mk-field input:focus{outline:2px solid #1C3687;outline-offset:-1px}
/* Hello's reset.css is NOT a plain reset: it styles
   `button:hover, button:focus` to a #CC3366 fill with white text, so any
   control of ours that leaves those states undefined turns pink on hover.
   Declaring every state here is the fix, rather than deregistering reset.css,
   which would also drop the normalisation the rest of the site relies on.
   Selectors are scoped under .mk-listing to outrank `[type="button"]:hover`
   on specificity rather than on load order, so a future change to enqueue
   order cannot bring the pink back. */
.mk-reset{padding:11px 18px;border:0;border-radius:8px;background:#F9F106;color:#1C3687;font:inherit;font-weight:700;cursor:pointer}
.mk-listing .mk-reset:hover,.mk-listing .mk-reset:focus{background:#e8e005;color:#1C3687}
.mk-listing .mk-reset:active{background:#d9d200;color:#1C3687}
.mk-listing .mk-reset:focus-visible{outline:2px solid #1C3687;outline-offset:2px}
.mk-count{font-size:14px;color:#5a6b85;margin:0 0 12px}

.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}

/* position:relative is what the stretched link below resolves against. */
.mk-card{position:relative;display:flex;flex-direction:column;gap:20px;background:#fff;border:2px solid #1C3687;border-radius:20px;padding:20px;overflow:clip}

/* THE WHOLE CARD IS THE CLICK TARGET, and it is still ONE link.
   The title's own anchor is stretched over the card with a pseudo element, so
   there is one tab stop and one thing for a screen reader to announce, rather
   than a card-wide wrapper duplicating a link that is already there. This is
   what replaced the Explore this course button on the listing in v1.25.0.
   The school lockup has to sit ABOVE that overlay or it stops being clickable,
   which is the one thing this pattern always breaks. */
.mk-card-title a::after{content:"";position:absolute;inset:0;z-index:1}
.mk-card-school-link{position:relative;z-index:2}
.mk-card.is-hidden{display:none}
/* Content stacks tightly; the 20px card gap belongs between this block and the
   CTA, not between a label and the title it labels.

   flex:1 1 auto is what holds the CTA on the bottom edge, TOGETHER with
   margin-top:auto on the CTA itself. Either alone is fragile: an Additional CSS
   rule setting a plain margin-top on the CTA (there was one, `margin-top:20px
   !important`, live until 11 Sept 2026) beats the auto margin and the CTAs in a
   row stop lining up. With the main block growing to fill instead, the CTA is
   at the bottom whatever any later margin says, and the 20px gap above it is
   the card's own gap rather than a margin somebody has to remember. */
.mk-card-main{display:flex;flex-direction:column;gap:10px;flex:1 1 auto}

/* School. THE LOCKUP IS THE EYEBROW since 10 Sept 2026, and the brand colour
   dot that used to lead a text row is gone with it.
   Sized by HEIGHT with width auto, because the artwork is 127x222 portrait and
   the inliner strips width and height off the root while keeping the viewBox.
   64px is the floor at which it reads: rendered at every size from 14px up, the
   wordmark and school name inside it turn to mush below about 40px.
   min-height on the wrapper reserves the slot for the seven programmes with no
   school, so their titles do not start 64px above the cards beside them.
   currentColor is the wordmark. milpark_svg_dark_variant() paints the panel in
   the school's brand colour and the M white, so school colour still reaches the
   card, through the artwork rather than through a dot. The wordmark stays
   Milpark blue rather than taking the school colour, which would put three
   different colours in one small mark. */
.mk-card-school{display:flex;align-items:center;gap:12px;min-height:64px;margin-bottom:10px;color:#1C3687}
.mk-card-lockup{display:block;flex:none;height:64px;width:auto;color:#1C3687}
/* The no-school fallback. The Milpark logo is landscape at roughly 2.5:1, so at
   the 64px the portrait school lockups use it would run about 157px, half the
   width of the card, and read as a banner rather than an eyebrow. 40px puts its
   visual weight in the same range. The slot centres it, so the title below
   still starts at the same height on every card in the row. */
.mk-card-lockup--generic{height:40px}

/* The school NAME, beside the lockup rather than instead of it. At 64px the
   artwork's own wordmark and school name are a smudge and only the M panel
   reads, so without this the card shows a Milpark mark and no way to tell which
   school it belongs to. It is also the card's only accessible name, because the
   inliner marks the svg aria-hidden. */
.mk-card-school-text{font-size:11px;font-weight:700;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:#5a6b85}

/* The lockup and the name are ONE link to the school archive, so the card gains
   one tab stop rather than two for the same destination. display:flex here
   rather than on the wrapper, because the wrapper still has to lay out the
   unlinked case: seven programmes have no school, and on a school archive the
   server drops the link because the card is already on that page.
   Only the text underlines on hover. Underlining an svg does nothing visible
   and would just shift the row. */
.mk-card-school-link{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.mk-card-school-link:hover .mk-card-school-text{color:#1C3687;text-decoration:underline;text-underline-offset:3px}
.mk-card-school-link:focus-visible{outline:2px solid #1C3687;outline-offset:3px;border-radius:4px}

/* Design size and weight, without its text-transform: capitalize turned real
   titles into "Bachelor Of Business Administration". */
.mk-card-title{margin:0;font-family:var(--e-global-typography-primary-font-family,Inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-size:20px;font-weight:600;line-height:26px;letter-spacing:.02em;color:#1C3687}
.mk-card-title a{color:inherit;text-decoration:none}
.mk-card-title a:hover{text-decoration:underline}
/* The major under the qualification name (milpark_programme_title_parts()):
   its own line, smaller and italic, so it does not read as part of the
   qualification name (the CHE, Oct 2026). */
.mk-card-sub{display:block;margin-top:2px;font-size:15px;font-weight:400;font-style:italic;line-height:20px;letter-spacing:0}

/* ABOVE the title since v1.16.0. The 2px nudge that tucked them under the
   title is gone; the 10px on .mk-card-school is the space above them, put
   there rather than here so a card with no chips keeps the same rhythm. */
.mk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:0}
.mk-chip{font-size:11px;font-weight:600;line-height:1.5;padding:3px 9px;border-radius:20px;background:#EEF1F9;color:#1C3687;white-space:nowrap}

/* Clamped to four lines. Excerpts run 103 to 357 characters, so unclamped the
   longest card ran 70px taller than the shortest in the same row and the grid
   read as ragged. The CTA carries the full text anyway. */
.mk-card-body{margin:0;font-size:15px;font-weight:400;line-height:23px;color:#3f4a63;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}

/* margin-top:auto keeps the CTA on the bottom edge so cards in a row line up
   even when titles wrap to different heights or a description is missing.
   Scaled down from the design's 70px bar and 18px bold: at 353px card width
   that read as a banner rather than a control. */
.mk-card-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;min-height:46px;padding:12px 16px;border-radius:6px;background:var(--cta-bg);color:var(--cta-fg);font-size:14px;font-weight:700;line-height:1.4;letter-spacing:.01em;text-decoration:none;transition:background-color .12s ease}
.mk-card-cta:hover{background:var(--cta-bg-hover)}
.mk-card-cta:active{background:var(--cta-bg-active)}
.mk-card-cta:focus-visible{outline:2px solid #1C3687;outline-offset:2px}
.mk-card-chev{flex:none;transition:transform .12s ease}
.mk-card:hover .mk-card-chev{transform:translateX(2px)}

/* Feedback for a card-wide target. Without the button there was nothing to
   tell a mouse the card was clickable at all. */
.mk-card:hover{border-color:#22418F;box-shadow:0 10px 26px -18px rgba(26,19,74,.5)}
.mk-card:hover .mk-card-title{text-decoration:underline;text-underline-offset:3px}
.mk-card:has(.mk-card-title a:focus-visible){outline:2px solid #1C3687;outline-offset:3px}
.mk-card-title a:focus-visible{outline:none}

.mk-empty{padding:28px;text-align:center;color:#5a6b85;background:#fff;border:1px dashed #dde3f0;border-radius:10px}
.mk-perf{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#177245;background:#e7f6ec;display:inline-block;padding:4px 10px;border-radius:6px;margin-top:12px}

@media (prefers-reduced-motion:reduce){
	.mk-card-cta,.mk-card-chev{transition:none}
	.mk-card:hover .mk-card-chev{transform:none}
}

/* The pager lives in pager.css, shared with the FAQ accordion. See the note
   at the top of that file for why it is not in here; its reduced motion block
   went with it. */