/* Custom Yodel day picker — js/yodel-week-view.js
   Scoped under .mk-week-view so it can't affect the rest of the site. */

.mk-week-view {
	/* Day pills per viewport, and therefore how far the arrows page.
	   js/yodel-week-view.js reads this, so the breakpoints below are the single
	   source of truth for both the layout and the paging step. */
	--mk-wv-days: 7;
	--mk-accent: #e11383;
	/* Small pink text on --mk-accent-soft only reaches 4.16:1; this darker pink
	   is for those (5.82:1). The brand pink stays for fills and larger type. */
	--mk-accent-ink: #b80f68;
	--mk-accent-soft: #fdf2f8;
	--mk-ink: #1f2937;
	/* 4.43:1 on the soft pink pills before; 5.48:1 now. */
	--mk-muted: #5b6472;
	--mk-line: #e5e7eb;
	--mk-radius: 14px;
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--mk-ink);
	/* Tight below: the leaderboard banner follows with its own padding, and the
	   two stacked (plus the AccuWeather credit) left 80px above the banner. */
	margin: 8px 0 10px;
}

.mk-week-view * { box-sizing: border-box; }
/* The holder an open dropdown moves to on touch screens (popover() in the
   script): the picker's variables and font, none of its spacing. */
.mk-week-view.mk-wv-portal { margin: 0; }

/* ---------- row 1: quick-filter chips ---------- */
/* Chips take the space they need and scroll; search is pinned to the right. */
.mk-wv__topbar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}
/* The strip sits in a wrapper so the fades have something to hang off: they
   mark the scrollable edges, which is otherwise only hinted at by a chip
   clipped mid-word -- and at the right-hand end the search box reads as the
   thing doing the clipping. Toggled from scroll position, so neither shows
   when everything already fits. */
.mk-wv__strip { position: relative; flex: 1 1 auto; min-width: 0; }
.mk-wv__strip .mk-wv__filters { margin-bottom: 0; }
.mk-wv__strip::before,
.mk-wv__strip::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: 38px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s ease;
}
.mk-wv__strip::before {
	left: 0;
	background: linear-gradient(to right, #fff 25%, rgba(255, 255, 255, 0));
}
.mk-wv__strip::after {
	right: 0;
	background: linear-gradient(to left, #fff 25%, rgba(255, 255, 255, 0));
}
.mk-wv__strip.is-fade-left::before,
.mk-wv__strip.is-fade-right::after { opacity: 1; }
/* Arrows sit on the faded edges and appear with them. */
.mk-wv__strip-nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 28px;
	height: 28px;
	margin-top: -14px;
	padding: 0;
	border: 1px solid var(--mk-line);
	border-radius: 50%;
	background: #fff;
	color: var(--mk-accent);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	display: none;
}
.mk-wv__strip-nav--prev { left: 0; }
.mk-wv__strip-nav--next { right: 0; }
.mk-wv__strip.is-fade-left .mk-wv__strip-nav--prev,
.mk-wv__strip.is-fade-right .mk-wv__strip-nav--next { display: block; }
/* A finger swipes the row directly; the arrows are for a mouse. */
@media (hover: none) {
	.mk-wv__strip-nav { display: none !important; }
}

.mk-wv__search {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}
.mk-wv__search-input {
	font: inherit;
	font-size: 14px;
	width: 220px;
	max-width: 42vw;
	padding: 9px 30px 9px 36px;   /* left: room for the magnifier */
	border: 1px solid var(--mk-line);
	border-radius: 999px;
	background: #fff;
	color: var(--mk-ink);
	-webkit-appearance: none;
	appearance: none;
}
.mk-wv__search-input:focus {
	outline: none;
	border-color: var(--mk-accent);
	box-shadow: 0 0 0 3px rgba(225, 19, 131, .12);
}
.mk-wv__search-input::-webkit-search-cancel-button { display: none; }
.mk-wv__search-ico {
	position: absolute;
	left: 13px;
	display: flex;
	color: var(--mk-muted);
	pointer-events: none;   /* clicks reach the field */
}
.mk-wv__search-clear {
	position: absolute;
	right: 8px;
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--mk-muted);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}
.mk-wv__search-clear:hover { color: var(--mk-accent); }
.mk-wv__search-clear[hidden] { display: none; }

/* One sliding row rather than wrapping to several: the chips scroll sideways
   when they outrun the width. Scrollbar hidden; the clipped chip at the edge is
   the affordance, as in the design. */
.mk-wv__filters {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	margin-bottom: 18px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding: 2px 0;   /* room for focus rings, which overflow would clip */
}
.mk-wv__filters::-webkit-scrollbar { display: none; }
.mk-wv__chip {
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	padding: 9px 18px;
	border: 1px solid var(--mk-line);
	border-radius: 999px;
	background: #fff;
	color: var(--mk-ink);
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
	white-space: nowrap;
	flex: 0 0 auto;   /* never squeeze; the strip scrolls instead */
}
.mk-wv__chip:hover { border-color: var(--mk-accent); }
.mk-wv__chip.is-active {
	background: var(--mk-accent);
	border-color: var(--mk-accent);
	color: #fff;
}
.mk-wv__chip--soon { color: var(--mk-muted); }

/* ---------- dropdown filters ---------- */
.mk-wv__dd { position: relative; flex: 0 0 auto; }
.mk-wv__chip--dd { display: inline-flex; align-items: center; }
/* Fixed, not absolute: the chip strip scrolls sideways, and that clips an
   absolutely-positioned child vertically too, so the panel never showed.
   Coordinates are set from the chip when it opens. */
.mk-wv__dd-panel {
	position: fixed;
	z-index: 60;
	display: flex;
	flex-direction: column;
	min-width: 260px;
	max-width: 340px;
	/* Height comes from place(): as tall as the space under the chip allows,
	   because a squat box over a 30-entry list reads as the whole list. */
	padding: 6px;
	background: #fff;
	border: 1px solid var(--mk-line);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}
.mk-wv__dd-panel[hidden] { display: none; }

/* ---------- Dates chip: range picker ---------- */
.mk-wv__dd-panel.mk-wv__dates { width: 300px; max-width: calc(100vw - 16px); padding: 12px; overflow: auto; }
.mk-wv__dates-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mk-wv__dates-title { font-size: 15px; font-weight: 700; color: var(--mk-ink); }
.mk-wv__dates-nav {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--mk-line);
	border-radius: 50%;
	background: #fff;
	color: var(--mk-accent);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.mk-wv__dates-nav:disabled { opacity: .3; cursor: default; }
.mk-wv__dates-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.mk-wv__dates-wd { padding: 4px 0; font-size: 11px; font-weight: 600; color: var(--mk-muted); text-align: center; }
.mk-wv__dates-day {
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--mk-ink);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}
.mk-wv__dates-day:hover:not(:disabled) { background: var(--mk-accent-soft); }
.mk-wv__dates-day:disabled { color: #cbd5e1; cursor: default; }
.mk-wv__dates-day.is-today { font-weight: 700; }
/* The run between the ends is one continuous band. */
.mk-wv__dates-day.is-in { border-radius: 0; background: var(--mk-accent-soft); }
.mk-wv__dates-day.is-start,
.mk-wv__dates-day.is-end { background: var(--mk-accent); color: #fff; }
.mk-wv__dates-foot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--mk-line);
}
.mk-wv__dates-sum { flex: 1 1 auto; font-size: 13px; color: var(--mk-muted); }
.mk-wv__dates-clear {
	padding: 6px 8px;
	border: 0;
	background: none;
	color: var(--mk-muted);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}
.mk-wv__dates-apply {
	padding: 7px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--mk-accent);
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.mk-wv__dates-apply:disabled { opacity: .4; cursor: default; }
/* The scroller, so the find box above it stays put while the options move. */
.mk-wv__dd-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.mk-wv__dd-find {
	flex: 0 0 auto;
	width: 100%;
	font: inherit;
	font-size: 14px;
	margin-bottom: 4px;
	padding: 8px 10px;
	border: 1px solid var(--mk-line);
	border-radius: 8px;
	background: #fff;
	color: var(--mk-ink);
}
.mk-wv__dd-find:focus { outline: 0; border-color: var(--mk-accent); }
.mk-wv__dd-find::-webkit-search-cancel-button { cursor: pointer; }
.mk-wv__dd-none {
	padding: 10px;
	font-size: 13px;
	color: var(--mk-muted);
}
.mk-wv__dd-opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	font: inherit;
	font-size: 14px;
	text-align: left;
	padding: 9px 10px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--mk-ink);
	cursor: pointer;
}
/* `display: flex` above outranks the UA's [hidden] rule, so the find box's
   opt.hidden = true would otherwise do nothing at all. */
.mk-wv__dd-opt[hidden] { display: none; }
.mk-wv__dd-opt:hover { background: #f9fafb; }
.mk-wv__dd-opt.is-chosen { background: var(--mk-accent-soft); color: var(--mk-accent-ink); font-weight: 600; }
.mk-wv__dd-opt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-wv__dd-opt-count { flex: 0 0 auto; font-size: 12px; color: var(--mk-muted); }
.mk-wv__dd-opt.is-chosen .mk-wv__dd-opt-count { color: var(--mk-accent-ink); }
/* No opacity: on an active chip this is white on pink, where .7 fell to
   about 2.6:1. Full currentColor instead. */
.mk-wv__caret { font-size: 11px; margin-left: 5px; }

/* ---------- row 2: day carousel ---------- */
.mk-wv__daybar {
	display: flex;
	align-items: center;
	gap: 8px;
}
.mk-wv__nav {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: 1px solid var(--mk-line);
	border-radius: 50%;
	background: #fff;
	color: var(--mk-accent);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.mk-wv__nav:hover { background: var(--mk-accent-soft); border-color: var(--mk-accent); }

/* The viewport shows one week; the track holds three (previous, current, next)
   and rests translated to the middle one. Gaps are cell padding rather than a
   flex gap so the track stays an exact 300% and paging lands on exact thirds. */
/* overflow-x is hidden rather than auto on purpose: the arrows are the only way
   to page, so the three-week track can never drift out of step with the week the
   script thinks it is showing. Programmatic scrollTo still animates. */
.mk-wv__viewport {
	flex: 1 1 auto;
	overflow: hidden;
	scroll-behavior: smooth;
	touch-action: pan-y;   /* horizontal drag is ours; vertical still scrolls */
	cursor: grab;
}
.mk-wv__viewport.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;   /* follow the finger instead of easing after it */
	user-select: none;
}
.mk-wv__track {
	display: flex;
	width: 300%;
}
/* The track holds three pages, so a cell is a 1/(days x 3) slice of it. */
.mk-wv__cell {
	flex: 0 0 calc(100% / (var(--mk-wv-days) * 3));
	max-width: calc(100% / (var(--mk-wv-days) * 3));
	padding: 0 6px;
}

.mk-wv__day {
	font: inherit;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: center;
	width: 100%;
	padding: 12px 6px 10px;
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	background: #fff;
	color: var(--mk-ink);
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.mk-wv__day:hover {
	border-color: var(--mk-accent);
	box-shadow: 0 4px 14px rgba(225, 19, 131, .08);
}
/* Weekends in the Featured Events blue, as light as today's pink. Before
   is-today so a weekend today stays pink; is-past outranks both. */
.mk-wv__day.is-weekend { background: #e9f4fa; border-color: #cfe6f2; }
.mk-wv__day.is-today { background: var(--mk-accent-soft); }
/* Days already gone: still selectable, since a multi-day run can be on, but
   visibly behind us. Dimmer colours, not opacity -- fading text fades its
   contrast with it (SAT measured 1.94:1), and these stay clickable, so the
   exemption for disabled controls doesn't apply. The forecast glyph is a
   picture rather than text, so that one can still fade. */
.mk-wv__day.is-past:not(.is-selected) { background: #f9fafb; border-color: #eef0f3; }
.mk-wv__day.is-past:not(.is-selected) .mk-wv__day-wd,
.mk-wv__day.is-past:not(.is-selected) .mk-wv__day-mon,
.mk-wv__day.is-past:not(.is-selected) .mk-wv__day-count { color: #667085; }
.mk-wv__day.is-past:not(.is-selected) .mk-wv__day-num { color: #5b6472; }
.mk-wv__day.is-past:not(.is-selected) .mk-wv__day-wx { opacity: .55; }
.mk-wv__day.is-selected {
	border-color: var(--mk-accent);
	box-shadow: 0 0 0 1px var(--mk-accent) inset;
}
.mk-wv__day.is-selected .mk-wv__day-wd,
.mk-wv__day.is-selected .mk-wv__day-mon,
.mk-wv__day.is-selected .mk-wv__day-num { color: var(--mk-accent); }

/* Stacked DAY / MON / DD, matching the widget's own tile date badges. */
.mk-wv__day-wd {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--mk-muted);
	line-height: 1.2;
}
.mk-wv__day-mon {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--mk-muted);
	line-height: 1.2;
}
.mk-wv__day-num {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
}
.mk-wv__day-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	margin-top: 6px;
	font-size: 11px;
	color: var(--mk-accent-ink);
	white-space: nowrap;
}
.mk-wv__day-wx { display: inline-flex; font-size: 18px; line-height: 1; }
/* Sized in em so the glyph follows the same 18px / 15px steps the emoji did.
   The artwork has space around the drawing, hence a little over 1em. */
.mk-wv__day-wx-img { display: block; width: 1.35em; height: 1.35em; }
/* AccuWeather's required credit: small and out of the way, but with the clear
   space their brand guidelines ask for around the logo. */
.mk-wv .mk-wv__wx-credit,
.mk-week-view .mk-wv__wx-credit {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	margin: 6px 0 0;
	font-size: 11px;
	color: var(--mk-muted);
}
.mk-wv__wx-credit a { display: inline-flex; padding: 2px 0; line-height: 0; }
.mk-wv__wx-credit img { width: 110px; height: auto; }
.mk-wv__day-count { font-weight: 500; }
.mk-wv__day-count-w { margin-left: .3em; }
.mk-wv__day:not(.is-today):not(.is-selected) .mk-wv__day-count { color: var(--mk-muted); }

/* ---------- responsive ---------- */
/* Fewer days per page as the viewport narrows, rather than squeezing seven of
   them. The steps are chosen so a pill never falls below roughly 85px, which is
   what the date, glyph and count need to stay legible and tappable. */
@media (max-width: 1100px) {
	.mk-week-view { --mk-wv-days: 5; }
}
@media (max-width: 800px) {
	.mk-week-view { --mk-wv-days: 4; }
	.mk-wv__cell { padding: 0 4px; }
	.mk-wv__day { padding: 10px 4px 8px; }
	.mk-wv__day-num { font-size: 22px; }
}
/* Phones show five days, not three: the pills go skinnier and taller instead of
   fewer, and the arrows overlap the row's edges to buy back the width that a
   fifth pill needs. */
/* More Filters' phone home beside search (renderChips() in the script);
   empty, and so gone, on wider screens. */
.mk-wv__moreslot { flex: 0 0 auto; display: flex; }
.mk-wv__moreslot:empty { display: none; }
@media (max-width: 700px) {
	/* Chips on a row of their own; below them More Filters, then search
	   taking the rest of the width (all of it when there is no More Filters). */
	.mk-wv__topbar { flex-wrap: wrap; }
	.mk-wv__strip { flex: 1 1 100%; }
	.mk-wv__search { flex: 1 1 0; min-width: 0; }
	.mk-wv__search-input { width: 100%; max-width: none; }
	/* A chosen filter's name can be long; keep search usable beside it. */
	.mk-wv__moreslot .mk-wv__chip { max-width: 48vw; }
	.mk-wv__moreslot .mk-wv__chip > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 560px) {
	.mk-week-view { --mk-wv-days: 5; }
	.mk-wv__daybar { position: relative; gap: 0; }
	.mk-wv__nav {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		width: 26px;
		height: 26px;
		font-size: 17px;
		background: rgba(255, 255, 255, .92);
		box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
	}
	.mk-wv__nav--prev { left: -6px; }
	.mk-wv__nav--next { right: -6px; }
	.mk-wv__cell { padding: 0 3px; }
	.mk-wv__day { padding: 9px 2px 8px; }
	.mk-wv__day-wd { font-size: 10px; }
	.mk-wv__day-mon { font-size: 9px; }
	/* Number down, glyph up: the design wants them closer in weight. */
	.mk-wv__day-num { font-size: 19px; }
	.mk-wv__day-meta {
		flex-direction: column;
		gap: 1px;
		margin-top: 5px;
		font-size: 10px;
	}
	.mk-wv__day-wx { font-size: 15px; }
	/* The word stays: with the glyph on its own line the count line is short
	   enough to fit five pills across a phone. */
	.mk-wv__day-count { font-size: 10px; }
	.mk-wv__day-count-w { margin-left: .25em; }
}
@media (max-width: 400px) {
	.mk-wv__day-count { font-size: 9px; }
	.mk-wv__cell { padding: 0 2px; }
}

@media (prefers-reduced-motion: reduce) {
	.mk-wv__viewport { scroll-behavior: auto; }
}

/* ---------- temporary house-ad placeholder ---------- */
/* Markup in includes/template-events.php; sits between the day picker and the
   featured bar. Remove along with that block when real inventory runs here. */
.mk-events-leaderboard {
	display: flex;
	justify-content: center;
	/* About even space either side of the banner: the picker's 10px margin
	   plus this 10px above, Featured's own 22px top margin below. */
	padding: 10px 0 0;
}
.mk-events-leaderboard[hidden] { display: none; }
/* Advertising switched off for this town's plugin: no invitation to buy an ad
   here, and no house leaderboard selling one. Set by js/yodel-widget-enhance.js
   from Yodel's own ads_event_boosting_enabled. */
.mk-ads-off .mk-events-leaderboard,
.mk-ads-off .mk-cta--promote { display: none; }
/* The banner links to the ad purchase page. A block at the image's own
   limits, so the flex row can't shrink it to nothing or let it overflow. */
.mk-events-leaderboard a {
	display: block;
	width: 100%;
	max-width: 970px;
}
.mk-events-leaderboard img {
	display: block;
	/* The file is 1940x180 -- twice the slot, so it stays sharp on a retina
	   screen. Held to 970 so it draws at its intended size instead of
	   stretching to the full container on a wide display. */
	width: 100%;
	max-width: 970px;
	height: auto;
}

/* ---------- events page header actions (Promote / Boost) ---------- */
/* Markup lives in includes/template-events.php; the Boost button is wired to
   Yodel's own control by js/yodel-widget-enhance.js. */

/* .template-events-calendar h1 carries the pink rule under the heading. Now that
   the h1 sits in a flex row it would only underline the word itself, so the rule
   moves to the row and spans the buttons too, as it did before. */
.mk-events-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	border-bottom: 1px solid #e11383;
	padding-bottom: 20px;
	margin-bottom: 20px;
}
/* Scoped through .template-events-calendar deliberately: main.css styles that
   h1 with the same specificity, so an equally specific override here would win
   only by load order. */
.template-events-calendar .mk-events-head h1 {
	border-bottom: 0;
	padding-bottom: 0;
	margin: 0;
}

.mk-events-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.mk-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px;
	border: 0;
	border-radius: 10px;
	color: #fff;
	text-decoration: none;
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(79, 70, 229, .26);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.mk-cta[hidden] { display: none; }
/* White text needs 4.5:1 against BOTH ends of the gradient; the old stops
   gave 3.96 and 3.78. These give 5.70 and 5.17. */
.mk-cta--promote { background: linear-gradient(100deg, #7c3aed 0%, #2563eb 100%); }
.mk-cta--boost { background: linear-gradient(100deg, #4f46e5 0%, #7c3aed 100%); }
/* Submitting an event is free, so it reads as secondary to the two paid
   actions: outlined rather than filled. Literal colours, not var(--mk-accent):
   that's defined on the day picker, and the header sits outside it. */
.mk-cta--add {
	/* One line of text beside two-line buttons: stretch to the row's height so
	   it matches Advertise in the header and Boost in the list heading. */
	align-self: stretch;
	background: #fff;
	color: #e11383;
	box-shadow: inset 0 0 0 1.5px #e11383;
}
.mk-cta--add:hover { color: #e11383; box-shadow: inset 0 0 0 1.5px #e11383, 0 3px 10px rgba(225, 19, 131, .18); }
/* Armed, waiting for an event to be picked (js/yodel-list-view.js). */
.mk-cta--boost.is-active { box-shadow: 0 0 0 3px rgba(79, 70, 229, .45); }
.mk-cta:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(79, 70, 229, .34);
}
.mk-cta:active { transform: translateY(0); }

.mk-cta__icon { display: flex; flex: 0 0 auto; }
.mk-cta__icon svg { width: 22px; height: 22px; }
.mk-cta__text { display: flex; flex-direction: column; line-height: 1.15; }
.mk-cta__text strong { font-size: 15px; font-weight: 700; }
/* Full white: at 10px the .95 opacity cost contrast the gradient can't spare. */
.mk-cta__text span { font-size: 10px; font-weight: 500; }

@media (max-width: 640px) {
	.mk-events-head { gap: 12px; }
	.mk-events-actions { gap: 8px; width: 100%; }
	.mk-cta { flex: 1 1 auto; justify-content: center; padding: 8px 12px; }
}

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