/* MF Event
   Theme-friendly: typography is inherited from the active theme (font-family: inherit).
   Colours adapt to the surrounding text colour via currentColor, with safe fallbacks. */

.mf-event {
	font-family: inherit;
	color: inherit;
	line-height: 1.4;

	/* Fallbacks first, then modern color-mix overrides for browsers that support it. */
	--mfe-border: rgba(0, 0, 0, .12);
	--mfe-surface: rgba(0, 0, 0, .025);
	--mfe-muted: rgba(0, 0, 0, .55);
	--mfe-accent: #2b6cb0;
	/* Text colour to use on top of the accent (badges). Overridden per-type from PHP. */
	--mfe-accent-contrast: #fff;
	/* Soft accent wash used for hover/date backgrounds; falls back to the neutral surface. */
	--mfe-tint: var(--mfe-surface);
}

@supports (color: color-mix(in srgb, red 50%, white)) {
	.mf-event {
		--mfe-border: color-mix(in srgb, currentColor 14%, transparent);
		--mfe-surface: color-mix(in srgb, currentColor 4%, transparent);
		--mfe-muted: color-mix(in srgb, currentColor 58%, transparent);
		--mfe-tint: color-mix(in srgb, var(--mfe-accent) 8%, transparent);
	}
}

.mf-event * { box-sizing: border-box; }

.mf-event .mfe-heading {
	font-family: inherit;
	font-size: 1.5em;
	margin: 0 0 .75em;
}

/* ---- Today highlight ------------------------------------------------ */
.mf-event .mfe-today { margin: 0 0 1.5em; }

.mf-event .mfe-today__label {
	display: inline-block;
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mfe-muted);
	margin: 0 0 .55em;
}

.mf-event .mfe-today-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: .75em;
}

/* ---- Card: shared structure ----------------------------------------- */
.mf-event .mfe-list {
	display: flex;
	flex-direction: column;
	gap: .6em;
}

.mf-event .mfe-card {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 1em;
	padding: .85em 1.1em;
	border-radius: 14px;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.mf-event .mfe-date {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 60px;
	line-height: 1.05;
	text-align: center;
}

.mf-event .mfe-day { font-size: 1.95em; font-weight: 700; }

.mf-event .mfe-mon {
	font-size: .72em;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mfe-accent);
}

.mf-event .mfe-year { font-size: .72em; color: var(--mfe-muted); }

.mf-event .mfe-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .25em;
	min-width: 0;
}

.mf-event .mfe-title {
	font-family: inherit;
	font-size: 1.04em;
	font-weight: 600;
	margin: 0;
	line-height: 1.25;
}

.mf-event .mfe-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em;
	font-size: .82em;
	color: var(--mfe-muted);
}

/* Type label with a colour-coded dot */
.mf-event .mfe-type { display: inline-flex; align-items: center; gap: .4em; }
.mf-event .mfe-type::before {
	content: "";
	width: .55em;
	height: .55em;
	border-radius: 50%;
	background: var(--mfe-accent);
	flex: 0 0 auto;
}

.mf-event .mfe-badge {
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mfe-accent-contrast);
	background: var(--mfe-accent);
	padding: .1em .55em;
	border-radius: 999px;
}

.mf-event .mfe-empty { color: var(--mfe-muted); font-style: italic; }

/* Month divider (used by editorial + timeline skins) */
.mf-event .mfe-month {
	font-size: .74em;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mfe-muted);
}

/* "Today" cards (the grid at the top) always read as solid, coloured tiles */
.mf-event .mfe-today-grid .mfe-card {
	border: 1px solid var(--mfe-accent);
	background: var(--mfe-tint);
}
.mf-event .mfe-today-grid .mfe-date {
	background: var(--mfe-accent);
	color: var(--mfe-accent-contrast);
	border-radius: 12px;
	padding: .45em .5em;
}
.mf-event .mfe-today-grid .mfe-mon { color: inherit; opacity: .92; }
.mf-event .mfe-today-grid .mfe-year { color: inherit; opacity: .72; }

/* ===== Skin: CARDS ==================================================== */
.mf-event.mfe-style-cards .mfe-month { display: none; }

.mf-event.mfe-style-cards .mfe-list .mfe-card {
	border: 1px solid var(--mfe-border);
	background: var(--mfe-tint);
}
.mf-event.mfe-style-cards .mfe-list .mfe-date {
	background: var(--mfe-accent);
	color: var(--mfe-accent-contrast);
	border-radius: 12px;
	padding: .45em .5em;
}
.mf-event.mfe-style-cards .mfe-list .mfe-mon { color: inherit; opacity: .92; }
.mf-event.mfe-style-cards .mfe-list .mfe-year { color: inherit; opacity: .72; }

.mf-event.mfe-style-cards .mfe-card:hover {
	border-color: var(--mfe-accent);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .45);
}
.mf-event.mfe-style-cards .mfe-card--today {
	border-color: var(--mfe-accent);
	box-shadow: 0 0 0 2px var(--mfe-accent) inset;
}
@supports (color: color-mix(in srgb, red 50%, white)) {
	.mf-event.mfe-style-cards .mfe-card:hover {
		box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--mfe-accent) 55%, transparent);
	}
}

/* ===== Skin: CLASSIC (the original look) ============================= */
.mf-event.mfe-style-classic .mfe-month { display: none; }

.mf-event.mfe-style-classic .mfe-list .mfe-card {
	border: 1px solid var(--mfe-border);
	background: var(--mfe-surface);
	padding-left: 1.25em;
	overflow: hidden;
}
.mf-event.mfe-style-classic .mfe-list .mfe-card::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: var(--mfe-accent);
}
.mf-event.mfe-style-classic .mfe-list .mfe-date {
	background: var(--mfe-tint);
	border-radius: 10px;
	padding: .35em .4em;
}
.mf-event.mfe-style-classic .mfe-list .mfe-card:hover {
	border-color: var(--mfe-accent);
	transform: translateY(-1px);
}
.mf-event.mfe-style-classic .mfe-list .mfe-card--today {
	border-color: var(--mfe-accent);
	box-shadow: 0 0 0 2px var(--mfe-accent) inset;
	background: transparent;
}

/* ===== Skin: GRID (soft pastel boxes, 3 per row, month-grouped) ====== */
.mf-event.mfe-style-grid .mfe-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1em;
}
.mf-event.mfe-style-grid .mfe-month {
	grid-column: 1 / -1;
	margin: .8em 0 .1em;
	padding-bottom: .45em;
	border-bottom: 2px solid var(--mfe-border);
}
.mf-event.mfe-style-grid .mfe-list > .mfe-month:first-child { margin-top: 0; }

.mf-event.mfe-style-grid .mfe-card {
	position: relative;
	flex-direction: column;
	align-items: flex-start;
	gap: .55em;
	border: 1px solid var(--mfe-border);
	background: var(--mfe-tint);
	border-radius: 18px;
	padding: 1.15em 1.15em 1.25em;
}
/* Date sits in the corner as a filled pill badge */
.mf-event.mfe-style-grid .mfe-date {
	position: absolute;
	top: 1em;
	right: 1em;
	flex-direction: row;
	align-items: baseline;
	gap: .25em;
	min-width: 0;
	background: var(--mfe-accent);
	color: var(--mfe-accent-contrast);
	padding: .25em .6em;
	border-radius: 999px;
}
.mf-event.mfe-style-grid .mfe-day { font-size: 1em; font-weight: 700; }
.mf-event.mfe-style-grid .mfe-mon { font-size: .82em; color: inherit; opacity: .92; }
.mf-event.mfe-style-grid .mfe-year { display: none; }
.mf-event.mfe-style-grid .mfe-body { gap: .5em; padding-right: 4.5em; }
.mf-event.mfe-style-grid .mfe-title { font-size: 1.18em; line-height: 1.3; }
.mf-event.mfe-style-grid .mfe-card:hover {
	border-color: var(--mfe-accent);
	transform: translateY(-3px);
	box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .4);
}
.mf-event.mfe-style-grid .mfe-card--today {
	border-color: var(--mfe-accent);
	box-shadow: 0 0 0 2px var(--mfe-accent) inset;
}
@media (max-width: 768px) {
	.mf-event.mfe-style-grid .mfe-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.mf-event.mfe-style-grid .mfe-list { grid-template-columns: 1fr; }
}

/* ===== Skin: EDITORIAL =============================================== */
.mf-event.mfe-style-editorial .mfe-list { gap: 0; }

.mf-event.mfe-style-editorial .mfe-list .mfe-card {
	border: 0;
	border-bottom: 1px solid var(--mfe-border);
	border-radius: 0;
	padding: 1.05em .25em;
	gap: 1.1em;
}
.mf-event.mfe-style-editorial .mfe-list .mfe-card:last-child { border-bottom: 0; }
.mf-event.mfe-style-editorial .mfe-list .mfe-day { font-size: 1.7em; }
.mf-event.mfe-style-editorial .mfe-list .mfe-card:hover {
	background: var(--mfe-tint);
	border-radius: 8px;
}
.mf-event.mfe-style-editorial .mfe-list .mfe-card--today {
	background: var(--mfe-tint);
	border-bottom-color: transparent;
	border-radius: 8px;
}
.mf-event.mfe-style-editorial .mfe-month {
	margin: 1.6em 0 .2em;
	padding-bottom: .45em;
	border-bottom: 2px solid var(--mfe-border);
}
.mf-event.mfe-style-editorial .mfe-list > .mfe-month:first-child { margin-top: 0; }

/* ===== Skin: TIMELINE ================================================ */
.mf-event.mfe-style-timeline .mfe-list {
	position: relative;
	gap: 0;
	padding-left: 1.7em;
}
.mf-event.mfe-style-timeline .mfe-list::before {
	content: "";
	position: absolute;
	left: .45em;
	top: .6em;
	bottom: .6em;
	width: 2px;
	background: var(--mfe-border);
}
.mf-event.mfe-style-timeline .mfe-list .mfe-card {
	border: 0;
	border-radius: 0;
	padding: .7em .25em .85em;
	gap: 1em;
}
.mf-event.mfe-style-timeline .mfe-list .mfe-card::before {
	content: "";
	position: absolute;
	left: -1.59em;
	top: 1.15em;
	width: .8em;
	height: .8em;
	border-radius: 50%;
	background: var(--mfe-accent);
	border: 2px solid var(--mfe-accent);
}
.mf-event.mfe-style-timeline .mfe-list .mfe-day { font-size: 1.5em; }
.mf-event.mfe-style-timeline .mfe-list .mfe-card:hover {
	background: var(--mfe-tint);
	border-radius: 8px;
}
.mf-event.mfe-style-timeline .mfe-list .mfe-card--today::before {
	transform: scale(1.25);
}
.mf-event.mfe-style-timeline .mfe-month {
	margin: 1.1em 0 .35em;
	padding-left: .1em;
}
.mf-event.mfe-style-timeline .mfe-list > .mfe-month:first-child { margin-top: 0; }

/* ---- "Details" affordance on clickable cards ------------------------ */
.mf-event .mfe-card.has-detail { cursor: pointer; }

.mf-event .mfe-more {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	font-size: .76em;
	font-weight: 700;
	line-height: 1;
	color: var(--mfe-accent);
	padding: .35em .7em;
	border: 1px solid var(--mfe-accent);
	border-radius: 999px;
	transition: background-color .15s ease, color .15s ease;
}

.mf-event .mfe-more::after {
	content: "›";
	font-size: 1.2em;
	line-height: 1;
	transition: transform .15s ease;
}

/* Fill the pill on hover/focus so the affordance is unmistakable */
.mf-event .mfe-card.has-detail:hover .mfe-more,
.mf-event .mfe-card.has-detail:focus-visible .mfe-more {
	background: var(--mfe-accent);
	color: var(--mfe-accent-contrast);
}

.mf-event .mfe-card.has-detail:hover .mfe-more::after,
.mf-event .mfe-card.has-detail:focus-visible .mfe-more::after { transform: translateX(2px); }

.mf-event .mfe-card.has-detail:focus-visible {
	outline: 2px solid var(--mfe-accent);
	outline-offset: 2px;
}

/* ---- Modal ---------------------------------------------------------- */
body.mfe-modal-open { overflow: hidden; }

.mfe-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.2rem;
}

.mfe-modal[hidden] { display: none; }

.mfe-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
}

.mfe-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(640px, 100%);
	max-height: 86vh;
	overflow: auto;
	background: #fff;
	color: #1a202c;
	border-radius: 16px;
	padding: 1.6rem 1.6rem 1.8rem;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
	font-family: inherit;
	line-height: 1.5;
	-webkit-overflow-scrolling: touch;
}

.mfe-modal__close {
	position: absolute;
	top: .55rem;
	right: .7rem;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	line-height: 1;
	border: 0;
	background: transparent;
	color: inherit;
	opacity: .6;
	cursor: pointer;
	border-radius: 8px;
}

.mfe-modal__close:hover { opacity: 1; background: rgba(0, 0, 0, .06); }

.mfe-modal__title {
	font-family: inherit;
	font-size: 1.4rem;
	font-weight: 700;
	/* Explicit colour so a theme's own h2 rules can't override it (e.g. black in dark mode). */
	color: #1a202c;
	margin: 0 1.8rem .15rem 0;
	line-height: 1.2;
}

.mfe-modal__date {
	font-size: .9rem;
	color: rgba(0, 0, 0, .55);
	margin-bottom: 1rem;
}

.mfe-modal__body,
.mfe-modal__body p,
.mfe-modal__body li { color: #1a202c; }

.mfe-detail-links a { color: inherit; }

.mfe-modal__body > * + * { margin-top: 1rem; }

.mfe-modal__body img { max-width: 100%; height: auto; }

.mfe-poster img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}

.mfe-detail-content { font-size: 1rem; }

.mfe-detail-links {
	border-top: 1px solid rgba(0, 0, 0, .12);
	padding-top: 1rem;
}

.mfe-detail-links__h {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, .55);
	margin: 0 0 .5rem;
}

.mfe-detail-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.mfe-detail-links a {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-weight: 600;
	text-decoration: none;
}

.mfe-detail-links a::before {
	content: "→";
	opacity: .6;
}

.mfe-detail-links a:hover { text-decoration: underline; }

@media (prefers-color-scheme: dark) {
	.mfe-modal__dialog { background: #1e2227; color: #e8eaed; }
	.mfe-modal__title,
	.mfe-modal__body,
	.mfe-modal__body p,
	.mfe-modal__body li { color: #e8eaed; }
	.mfe-modal__date,
	.mfe-detail-links__h { color: rgba(255, 255, 255, .6); }
	.mfe-detail-links { border-top-color: rgba(255, 255, 255, .14); }
	.mfe-modal__close:hover { background: rgba(255, 255, 255, .1); }
}

@media (max-width: 480px) {
	.mfe-modal { padding: 0; align-items: flex-end; }
	.mfe-modal__dialog {
		width: 100%;
		max-height: 92vh;
		border-radius: 16px 16px 0 0;
	}
}

/* ---- Tablet --------------------------------------------------------- */
@media (max-width: 768px) {
	.mf-event .mfe-today-grid {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: .6em;
	}
	.mf-event .mfe-day { font-size: 1.8em; }
}

/* ---- Small screens -------------------------------------------------- */
@media (max-width: 480px) {
	.mf-event .mfe-today-grid { grid-template-columns: 1fr; }
	.mf-event .mfe-day { font-size: 1.7em; }
}

/* ---- Accessibility: respect reduced-motion -------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mf-event .mfe-card {
		transition: border-color .15s ease, background-color .15s ease;
	}
	.mf-event .mfe-card:hover {
		transform: none;
	}
}