/* Programme slider: the rail only.
   Every card rule lives in listing.css and the `milpark-slider` handle depends
   on `milpark-listing`, so this file restates none of it. If a card rule ever
   appears below, the two card designs have started to drift and the fix is to
   move it back rather than to keep it in step by hand. */

.mk-slider{margin:0 0 40px}

.mk-slider-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:0 0 18px}
/* Typography comes from the Elementor kit's PRIMARY heading style, so the rail
   heading matches every other section heading on a page and follows the team's
   Site Settings rather than a number in this file. Ported out of Customiser
   Additional CSS on 11 Sept 2026, where it was invisible to this repo. The
   fallbacks are the values it replaced, for any context the kit has not loaded
   its variables into. */
.mk-slider-title{margin:0;letter-spacing:.01em;color:#1C3687;
  font-family:var(--e-global-typography-primary-font-family,inherit),Sans-serif;
  font-size:var(--e-global-typography-primary-font-size,26px);
  font-weight:var(--e-global-typography-primary-font-weight,600);
  line-height:var(--e-global-typography-primary-line-height,1.25)}
.mk-slider-tools{display:flex;align-items:center;gap:14px;margin-left:auto}
.mk-slider-all{font-size:14px;font-weight:700;color:#1C3687;text-decoration:none;border-bottom:2px solid var(--cta-bg);padding-bottom:2px}
.mk-slider-all:hover{border-bottom-color:#1C3687}
.mk-slider-all:focus-visible{outline:2px solid #1C3687;outline-offset:3px;border-radius:2px}

/* [hidden] needs declaring because the display below would otherwise beat it.
   The buttons ship hidden and slider.js only reveals them once it has confirmed
   the track overflows, so a row that already fits never grows dead controls. */
.mk-slider-nav[hidden]{display:none}
.mk-slider-nav{display:flex;gap:8px}

/* Hello's reset.css styles `button:hover, button:focus` to a #CC3366 fill, so
   every state is declared here or these turn pink. Scoped under .mk-slider to
   outrank `[type="button"]:hover` on specificity rather than on load order,
   the same discipline as .mk-reset and the nav buttons. */
.mk-slider-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:2px solid #1C3687;border-radius:50%;background:#fff;color:#1C3687;cursor:pointer;transition:background-color .12s ease,color .12s ease,opacity .12s ease}
.mk-slider .mk-slider-btn:hover,.mk-slider .mk-slider-btn:focus{background:#1C3687;color:#fff}
.mk-slider .mk-slider-btn:focus-visible{outline:2px solid #1C3687;outline-offset:2px}
.mk-slider .mk-slider-btn:disabled{opacity:.3;cursor:default;background:#fff;color:#1C3687}
.mk-slider-btn--prev svg{transform:rotate(180deg)}

/* The rail. scroll-snap does the carousel, so with the script absent this is
   still a working horizontal scroller for a trackpad, a touch screen and the
   arrow keys.
   overscroll-behavior-x stops a swipe past the last card turning into a browser
   back gesture.

   THE HORIZONTAL INSET IS ZERO ON THE LEFT, deliberately. It was 6px until
   10 Sept 2026, to keep a focused card's outline off the clip edge. Nothing
   actually needed it: every focus ring in a card is on the title link or the
   CTA, both of which sit 20px inside the card's own padding, so the 6px only
   ever pushed the first card 6px right of the heading above it and 6px left of
   where the nav buttons end. A little vertical padding stays so the cards' focus
   rings and 2px border are not clipped by the scroll container.

   --mk-bleed IS THE OVERFLOW MADE VISIBLE. A scroll container clips at its
   padding box, so a rail inside a 1320px container chops the next card at the
   container edge and reads as a hard stop rather than as more to come. The
   negative end margin widens the box to the viewport edge and the matching end
   padding puts the scroll END back on the container edge, so the fourth card
   bleeds off the screen at rest AND the last card lines up with the nav when
   you reach it. slider.js measures it; a page with no JS gets 0, which is the
   old contained behaviour minus the 6px. Never 50vw for this: vw includes the
   scrollbar, so it overshoots by ~8px more than the box can afford and gives
   the whole PAGE a horizontal scrollbar.

   THE SCROLLBAR IS HIDDEN, not removed. overflow-x:auto stays, so the rail is
   still scrollable by wheel, trackpad, touch, keyboard and the nav buttons, and
   it is still a focusable scroll container with a visible focus ring. Only the
   bar itself is painted out, in all three engines: scrollbar-width for Firefox,
   ::-webkit-scrollbar for Blink and WebKit, -ms-overflow-style for legacy Edge.
   Affordance comes from the nav buttons and from the next card bleeding off the
   edge, which is what --mk-bleed above exists to produce. */
.mk-slider-track{display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;padding:6px 0 4px;margin-inline-end:calc(-1 * var(--mk-bleed, 0px));padding-inline-end:var(--mk-bleed, 0px);scroll-snap-type:x mandatory;scroll-padding-inline-start:0;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
.mk-slider-track:focus-visible{outline:2px solid #1C3687;outline-offset:2px;border-radius:8px}

/* Cards size from the rail, not from the grid. The clamp lets a card be most
   of a narrow viewport so the next one peeks and the row reads as scrollable,
   while capping at the width the card was designed against. */
.mk-slider-track>.mk-card{flex:0 0 clamp(272px,78vw,340px);scroll-snap-align:start}

/* Compact card: the description is not rendered at all, so this only tightens
   what is left. Everything else comes from .mk-card in listing.css. */
.mk-card--compact{gap:14px}

.mk-slider-track::-webkit-scrollbar{display:none;width:0;height:0}

@media (max-width:600px){
	.mk-slider-title{font-size:22px}
	/* The buttons are a pointer convenience and the rail is already swipeable,
	   so they come off rather than competing with the heading for the row. */
	.mk-slider-nav{display:none}
	/* Once the head wraps, margin-left:auto strands the link against the right
	   edge on its own row, reading as a stray fragment rather than as something
	   belonging to the heading above it. */
	.mk-slider-tools{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
	.mk-slider-btn{transition:none}
}

/* The empty-slider note. Editors only, see milpark_slider_empty_notice().
   Deliberately looks like a build-time warning rather than page content: a
   dashed amber panel nobody could mistake for a design element, so it is
   obvious it should not still be there when the page ships. */
.mk-slider-note{margin:0 0 24px;padding:12px 16px;border:1px dashed #dba617;border-radius:8px;background:#fcf9e8;color:#5a4a00;font-size:13px;line-height:1.5}
.mk-slider-note strong{color:#3d3200}
.mk-slider-note em{color:#7a6a2a;font-style:normal;opacity:.8}