/* ==========================================================================
   VMF theme — main stylesheet (mobile-first, vanilla CSS, no framework)
   Sections: 1 tokens · 2 fonts · 3 base · 4 layout · 5 header · 6 footer
             7 cards & listings · 8 entry · 9 components · 10 style guide
   ========================================================================== */

/* 1. Design tokens ------------------------------------------------------- */
/* Colours are sampled from the VMF 2026 logo. Contrast (WCAG 2.1) noted per token. */
:root {
	/* brand */
	--color-black: #000000;        /* monogram */
	--color-ink: #1a1a18;          /* wordmark, body text — 17.6:1 on white */
	--color-red: #e3000f;          /* accent — 4.9:1 on white (AA text), 4.3:1 on black (large text only) */
	--color-red-text: #c4000d;     /* red for normal-size text/links — 6.3:1 on white, 5.7:1 on surface */
	--color-red-dark: #a8000b;     /* hover/pressed */
	--color-white: #ffffff;

	/* neutrals (derived, slightly warm to match #1a1a18) */
	--color-surface: #f4f4f2;      /* light background band */
	--color-surface-2: #e9e9e6;    /* placeholder blocks */
	--color-line: #d9d9d6;         /* decorative dividers (non-text) */
	--color-line-on-surface: #c4c4c0; /* dividers that must stay visible on --color-surface */
	--color-line-strong: #767674;  /* input borders — 4.5:1 on white (UI ≥ 3:1) */
	--color-muted: #5c5c5a;        /* secondary text, dates — 6.7:1 on white, 6.1:1 on surface */
	--color-muted-on-dark: #b9b9b5; /* secondary text on black — 10.5:1 */

	/* editorial surface (hero, front-page header) — see CLAUDE.md "Vizualni identitet" */
	--vmf-surface: #d6d3cd;        /* warm light grey ground */
	--vmf-surface-2: #e2dfd9;      /* lighter panel on the surface */
	--vmf-grid: rgba(26, 26, 24, 0.06); /* grid lines / darker squares on the surface */
	--vmf-red: #e3000f;            /* big display headings, buttons with white text, accents */
	--vmf-red-text: #b5000c;       /* ALL small red text on light grounds — 4.7:1 on --vmf-surface */
	--vmf-dark: #1a1a18;           /* dark blocks and display text */
	--vmf-muted-on-surface: #5c5a55; /* secondary text on --vmf-surface — 4.6:1 */

	/* roles */
	--color-bg: var(--color-white);
	--color-text: var(--color-ink);
	--color-heading: var(--color-black);
	--color-link: var(--color-red-text);
	--color-link-hover: var(--color-red-dark);
	--color-accent: var(--color-red);
	--color-focus: var(--color-red);
	--color-dark: var(--color-black);
	--color-on-dark: var(--color-white);

	/* typography — Montserrat (headings, labels, menu, buttons) + Source Sans 3 (body)
	   Display headings: Montserrat 900 via the --vmf-* tokens below. Uppercase only via text-transform. */
	--font-heading: "Montserrat", "Montserrat Fallback", Arial, sans-serif;
	--font-body: "Source Sans 3", "Source Sans 3 Fallback", Arial, sans-serif;

	/* Display headings (hero H1, big numbers, section titles, popup title) use ONLY these tokens.
	   Montserrat at its heaviest weight (decision 16.9.2026). */
	--vmf-font-display: var(--font-heading);
	--vmf-display-weight: 900;
	--vmf-display-leading: 0.9;
	--vmf-display-tracking: -0.025em;
	/* hero title: sized from the title column width so "VARAŽDIN" (≈6.2em in Montserrat 900) never wraps */
	--vmf-display-hero-size: clamp(2.6rem, 16.8cqw, 9.5rem);
	--vmf-display-stat-size: clamp(2.75rem, 7vw, 5rem);
	--vmf-display-popup-size: clamp(1.75rem, 5vw, 3.25rem);
	--vmf-display-section-size: var(--step-3);
	--weight-heading: 700;
	--weight-heading-strong: 800;
	--weight-body: 400;
	--weight-body-strong: 600;

	/* fluid type scale (min 360px → max 1280px viewport), ratio ≈ 1.2 → 1.25 */
	--step--1: clamp(0.875rem, 0.85rem + 0.15vw, 0.95rem);
	--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
	--step-2: clamp(1.44rem, 1.3rem + 0.75vw, 1.85rem);
	--step-3: clamp(1.73rem, 1.5rem + 1.2vw, 2.4rem);
	--step-4: clamp(2.07rem, 1.7rem + 1.9vw, 3.1rem);
	--step-5: clamp(2.5rem, 1.9rem + 3vw, 4rem);
	--leading-tight: 1.15;
	--leading-snug: 1.3;
	--leading-body: 1.6;
	--measure: 68ch;

	/* spacing (fluid) */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-s: 1rem;
	--space-m: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	--space-l: clamp(2rem, 1.5rem + 2vw, 3rem);
	--space-xl: clamp(3rem, 2rem + 4vw, 5rem);
	--space-2xl: clamp(4rem, 3rem + 6vw, 7rem);

	/* layout */
	--container: 76rem;
	--container-narrow: 46rem;
	--container-wide: 60rem;
	--gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
	--header-height: 4.5rem;
	--header-height-compact: 3.5rem;

	/* shape & elevation */
	--radius-s: 0.25rem;
	--radius-m: 0.5rem;
	--radius-l: 1rem;
	--shadow-s: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.08);
	--shadow-m: 0 4px 12px rgb(0 0 0 / 0.08), 0 2px 4px rgb(0 0 0 / 0.06);
	--shadow-l: 0 16px 40px rgb(0 0 0 / 0.14);

	/* motion */
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dur-fast: 120ms;
	--dur: 200ms;
	--dur-slow: 350ms;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur: 0ms;
		--dur-slow: 0ms;
	}
}

/* 2. Fonts (self-hosted, variable, latin + latin-ext for č ć đ š ž) ------ */
/* Metric-adjusted local fallbacks so the swap to the web font barely moves text (CLS). */
@font-face {
	font-family: "Montserrat Fallback";
	src: local("Arial"), local("Helvetica");
	size-adjust: 113%;
	ascent-override: 85%;
	descent-override: 22%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Source Sans 3 Fallback";
	src: local("Arial"), local("Helvetica");
	size-adjust: 94%;
	ascent-override: 106%;
	descent-override: 30%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/source-sans-3-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* 3. Base ---------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-height-compact) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--step-0);
	font-weight: var(--weight-body);
	line-height: var(--leading-body);
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	line-height: var(--leading-tight);
	color: var(--color-heading);
	margin: 0 0 var(--space-s);
	text-wrap: balance;
	overflow-wrap: anywhere;
}

h1 { font-size: var(--step-4); font-weight: var(--weight-heading-strong); letter-spacing: -0.01em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
h5,
h6 { font-size: var(--step-0); }

p,
ul,
ol,
figure,
blockquote,
pre,
table {
	margin: 0 0 var(--space-m);
}

img,
video,
svg {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

a {
	color: var(--color-link);
	text-decoration-thickness: from-font;
	text-underline-offset: 0.15em;
	transition: color var(--dur-fast) var(--ease);
}

a:hover {
	color: var(--color-link-hover);
}

:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 3px;
	border-radius: var(--radius-s);
}

::selection {
	background: var(--color-red);
	color: var(--color-white);
}

hr {
	border: 0;
	border-top: 1px solid var(--color-line);
	margin: var(--space-l) 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: var(--space-s);
	top: -100%;
	padding: var(--space-xs) var(--space-s);
	background: var(--color-black);
	color: var(--color-white);
	font-weight: var(--weight-body-strong);
	z-index: 1000;
	border-radius: var(--radius-s);
}

.skip-link:focus {
	top: var(--space-s);
	color: var(--color-white);
}

/* 4. Layout -------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.container--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }

.section {
	padding-block: var(--space-l) var(--space-xl);
}

.section--surface {
	background: var(--color-surface);
}

.site-main {
	min-height: 50vh;
}

.page-header {
	margin-bottom: var(--space-l);
	max-width: var(--measure);
}

.page-header__title {
	margin-bottom: var(--space-2xs);
}

.page-header__description {
	color: var(--color-muted);
	font-size: var(--step-1);
}

.page-header__query {
	color: var(--color-red-text);
}

/* 5. Header -------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-line);
	transition: box-shadow var(--dur) var(--ease);
}

/* Logged in: the sticky header must sit below the WP admin bar (32px, 46px under 783px), not under it. */
.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

.site-header.is-scrolled {
	box-shadow: var(--shadow-m);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	min-height: var(--header-height);
	padding-block: var(--space-2xs); /* the monogram (2.75rem) always has room above and below */
	transition: min-height var(--dur) var(--ease);
}

.site-header.is-scrolled .site-header__inner {
	min-height: var(--header-height-compact);
}

.site-branding {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	min-width: 0;
	text-decoration: none;
	color: var(--color-heading);
}

.site-branding__mark {
	display: block;
	width: auto;
	height: 2.75rem;
	flex: none;
	transition: height var(--dur) var(--ease);
}

.site-header.is-scrolled .site-branding__mark {
	height: 2.1rem;
}

.site-name {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step-0);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.1;
	max-width: 9rem;
}

.site-branding:hover .site-name {
	color: var(--color-red-text);
}

.site-logo {
	display: inline-flex;
	line-height: 0;
}

@media (min-width: 40em) {
	.site-name {
		max-width: none;
	}
}

/* toggle (mobile) */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: var(--space-2xs) var(--space-xs);
	background: transparent;
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius-s);
	color: var(--color-heading);
	font: inherit;
	font-weight: var(--weight-body-strong);
	cursor: pointer;
}

.nav-toggle__icon {
	display: inline-flex;
	line-height: 0;
}

.nav-toggle__icon--close,
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--open {
	display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close {
	display: inline-flex;
}

/* panel (mobile: drawer under the bar) */
.site-header__panel {
	display: none;
	position: absolute;
	inset-inline: 0;
	top: 100%;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-line);
	box-shadow: var(--shadow-l);
	padding: var(--space-s) var(--gutter) var(--space-m);
	max-height: calc(100dvh - var(--header-height));
	overflow-y: auto;
}

.site-header.is-open .site-header__panel {
	display: block;
}

.menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu a {
	display: block;
	padding: var(--space-xs) 0;
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step-0);
	color: var(--color-heading);
	text-decoration: none;
	border-bottom: 1px solid var(--color-line);
}

.menu a:hover,
.menu .current-menu-item > a,
.menu .current-menu-ancestor > a {
	color: var(--color-red-text);
}

.menu .sub-menu {
	list-style: none;
	margin: 0;
	padding-left: var(--space-s);
}

.menu .sub-menu a {
	font-family: var(--font-body);
	font-weight: var(--weight-body);
}

.site-header__extra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	padding-top: var(--space-s);
}

.social-links {
	display: flex;
	gap: var(--space-2xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	color: var(--color-heading);
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.social-links a:hover {
	background: var(--color-surface);
	color: var(--color-red-text);
}

.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step--1);
	letter-spacing: 0.05em;
}

.lang-switch__list {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* "HR | EN": the bar is decorative (CSS only) */
.lang-switch__item + .lang-switch__item::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 1em;
	margin: 0 var(--space-2xs);
	background: var(--color-line);
	vertical-align: -0.15em;
}

.lang-switch__link {
	display: inline-block;
	padding: 0.25rem 0.125rem;
	text-decoration: none;
	color: var(--color-muted);
	text-transform: uppercase;
	transition: color var(--dur-fast) var(--ease);
}

.lang-switch__link:hover,
.lang-switch__link:focus-visible {
	color: var(--color-heading);
}

.lang-switch__link.is-current {
	color: var(--color-heading);
	text-decoration: underline;
	text-decoration-color: var(--color-red);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

/* desktop */
@media (min-width: 60em) {
	.nav-toggle {
		display: none;
	}

	.site-header__panel {
		display: flex;
		align-items: center;
		gap: var(--space-l);
		position: static;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0;
		max-height: none;
		overflow: visible;
	}

	.menu--primary {
		display: flex;
		gap: var(--space-2xs);
	}

	.menu--primary > li {
		position: relative;
	}

	.menu--primary a {
		padding: var(--space-2xs) var(--space-xs);
		border-bottom: 0;
		border-radius: var(--radius-s);
	}

	.menu--primary > li > a {
		position: relative;
	}

	.menu--primary > li > a::after {
		content: "";
		position: absolute;
		left: var(--space-xs);
		right: var(--space-xs);
		bottom: 0.1rem;
		height: 2px;
		background: var(--color-red);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--dur) var(--ease);
	}

	.menu--primary > li > a:hover::after,
	.menu--primary > .current-menu-item > a::after,
	.menu--primary > .current-menu-ancestor > a::after {
		transform: scaleX(1);
	}

	.menu--primary .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 14rem;
		padding: var(--space-2xs);
		background: var(--color-bg);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-m);
		box-shadow: var(--shadow-m);
		opacity: 0;
		visibility: hidden;
		transform: translateY(0.25rem);
		transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s var(--dur);
	}

	.menu--primary li:hover > .sub-menu,
	.menu--primary li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	.site-header__extra {
		padding-top: 0;
		gap: var(--space-s);
	}

	.social-links a {
		width: 2.25rem;
		height: 2.25rem;
	}
}

/* 6. Footer -------------------------------------------------------------- */
.site-footer {
	margin-top: var(--space-2xl);
	padding-block: var(--space-xl) var(--space-l);
	background: var(--color-dark);
	color: var(--color-on-dark);
}

.site-footer a {
	color: var(--color-on-dark);
}

.site-footer a:hover {
	color: var(--color-on-dark);
	text-decoration-color: var(--color-red);
}

.site-footer__inner {
	display: grid;
	gap: var(--space-l);
}

.site-footer__heading {
	color: var(--color-on-dark);
	font-size: var(--step-1);
	margin-bottom: var(--space-xs);
}

.site-logo--inverse img {
	width: auto;
	height: 7.5rem;
}

.contact-block {
	font-style: normal;
	margin-bottom: var(--space-s);
}

.contact-block__item {
	display: flex;
	gap: var(--space-2xs);
	align-items: flex-start;
	margin: 0 0 var(--space-2xs);
}

.contact-block__item .icon {
	flex: none;
	margin-top: 0.2em;
	color: var(--color-red);
}

.social-links--footer a {
	color: var(--color-on-dark);
	border: 1px solid rgb(255 255 255 / 0.25);
}

.social-links--footer a:hover {
	background: var(--color-white);
	color: var(--color-black);
}

.menu--footer a {
	border-bottom: 0;
	padding: var(--space-3xs) 0;
	color: var(--color-on-dark);
	font-family: var(--font-body);
	font-weight: var(--weight-body-strong);
}

.menu--footer a:hover,
.menu--footer .current-menu-item > a {
	color: var(--color-on-dark);
	text-decoration: underline;
	text-decoration-color: var(--color-red);
}

.site-footer__copy {
	grid-column: 1 / -1;
	margin: 0;
	padding-top: var(--space-m);
	border-top: 1px solid rgb(255 255 255 / 0.15);
	color: var(--color-muted-on-dark);
	font-size: var(--step--1);
}

@media (min-width: 48em) {
	.site-footer__inner {
		grid-template-columns: auto 1fr auto;
		align-items: start;
	}
}

/* 7. Cards & listings ---------------------------------------------------- */
.card-grid {
	display: grid;
	gap: var(--space-m);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

/* front page news: 3 in a row on desktop, 3 narrow on tablet, stacked on phones */
@media (min-width: 40em) {
	.card-grid--three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.card {
	display: flex;
	flex-direction: column;
	background: var(--color-bg);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-m);
	overflow: hidden;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-m);
}

.card__media {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--color-surface-2);
	overflow: hidden;
}

.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}

.card:hover .card__media img {
	transform: scale(1.03);
}

.card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg, transparent 0 48%, var(--color-red) 48% 52%, transparent 52%),
		var(--color-surface-2);
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding: var(--space-s) var(--space-s) var(--space-m);
}

.card__meta,
.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-xs);
	margin: 0;
	font-size: var(--step--1);
	color: var(--color-muted);
}

.entry-category {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-red-text);
	text-decoration: none;
}

.entry-category:hover {
	text-decoration: underline;
}

.card__title {
	font-size: var(--step-1);
	margin: 0;
}

.card__title a {
	color: var(--color-heading);
	text-decoration: none;
}

.card__title a:hover {
	color: var(--color-red-text);
}

.card__excerpt {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--step--1);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* pagination */
.pagination {
	margin-top: var(--space-l);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--space-xs);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-s);
	color: var(--color-heading);
	text-decoration: none;
	font-weight: var(--weight-body-strong);
}

.pagination .page-numbers:hover {
	border-color: var(--color-line-strong);
}

.pagination .page-numbers.current {
	background: var(--color-black);
	border-color: var(--color-black);
	color: var(--color-white);
}

.search-again {
	max-width: 30rem;
	margin-bottom: var(--space-l);
}

/* 8. Entry (single post / page) ----------------------------------------- */
.entry--single,
.entry--page {
	padding-block: var(--space-l) var(--space-xl);
}

.entry-header {
	margin-bottom: var(--space-m);
}

.entry-header .entry-meta {
	margin-bottom: var(--space-xs);
}

.entry-lead {
	font-size: var(--step-1);
	color: var(--color-muted);
	line-height: var(--leading-snug);
}

.entry-thumbnail {
	margin-block: var(--space-m) var(--space-l);
}

.entry-thumbnail img {
	width: 100%;
	border-radius: var(--radius-m);
}

.entry-thumbnail figcaption {
	margin-top: var(--space-2xs);
	font-size: var(--step--1);
	color: var(--color-muted);
}

.prose > * {
	max-width: var(--measure);
}

.prose h2 { margin-top: var(--space-l); }
.prose h3 { margin-top: var(--space-m); }

.prose ul,
.prose ol {
	padding-left: 1.4em;
}

.prose li + li {
	margin-top: var(--space-3xs);
}

.prose blockquote {
	margin-inline: 0;
	padding: var(--space-2xs) var(--space-m);
	border-left: 4px solid var(--color-red);
	font-size: var(--step-1);
	color: var(--color-ink);
}

.prose blockquote cite {
	display: block;
	margin-top: var(--space-2xs);
	font-size: var(--step--1);
	font-style: normal;
	color: var(--color-muted);
}

.prose img {
	border-radius: var(--radius-s);
}

.prose figcaption,
.wp-caption-text {
	font-size: var(--step--1);
	color: var(--color-muted);
	margin-top: var(--space-2xs);
}

.alignwide,
.prose .alignwide { max-width: var(--container-wide); }
.alignfull,
.prose .alignfull { max-width: none; }
.aligncenter { display: block; margin-inline: auto; }
.alignleft { float: left; margin: 0 var(--space-m) var(--space-s) 0; }
.alignright { float: right; margin: 0 0 var(--space-s) var(--space-m); }

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--step--1);
}

.prose th,
.prose td {
	padding: var(--space-2xs) var(--space-xs);
	border-bottom: 1px solid var(--color-line);
	text-align: left;
}

.prose th {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
}

.entry-footer {
	margin-top: var(--space-l);
}

.entry-tags a {
	display: inline-block;
	padding: 0.15em 0.6em;
	margin: 0 var(--space-3xs) var(--space-3xs) 0;
	border: 1px solid var(--color-line);
	border-radius: 999px;
	font-size: var(--step--1);
	color: var(--color-muted);
	text-decoration: none;
}

.entry-tags a:hover {
	border-color: var(--color-red-text);
	color: var(--color-red-text);
}

.post-navigation .nav-links {
	display: grid;
	gap: var(--space-s);
	margin-top: var(--space-l);
	padding-top: var(--space-m);
	border-top: 1px solid var(--color-line);
}

@media (min-width: 40em) {
	.post-navigation .nav-links {
		grid-template-columns: 1fr 1fr;
	}
	.post-navigation .nav-next { text-align: right; }
}

.post-navigation a {
	display: block;
	text-decoration: none;
}

.post-nav__label {
	display: block;
	font-size: var(--step--1);
	color: var(--color-muted);
}

.post-nav__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	color: var(--color-heading);
}

.post-navigation a:hover .post-nav__title {
	color: var(--color-red-text);
}

.error-404 {
	text-align: center;
}

.error-404__code {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading-strong);
	font-size: var(--step-5);
	line-height: 1;
	color: var(--color-red);
	margin-bottom: var(--space-2xs);
}

.error-404 .search-form {
	max-width: 24rem;
	margin: var(--space-m) auto;
}

/* 9. Components: buttons, forms ----------------------------------------- */
.button,
.wp-block-button__link,
button.button,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	min-height: 2.75rem;
	padding: 0.6em 1.25em;
	background: var(--color-red);
	color: var(--color-white);
	border: 2px solid var(--color-red);
	border-radius: var(--radius-s);
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step-0);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover {
	background: var(--color-red-dark);
	border-color: var(--color-red-dark);
	color: var(--color-white);
}

.button:active {
	transform: translateY(1px);
}

.button--secondary {
	background: transparent;
	color: var(--color-heading);
	border-color: var(--color-black);
}

.button--secondary:hover {
	background: var(--color-black);
	border-color: var(--color-black);
	color: var(--color-white);
}

.button--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--color-red-text);
	padding-inline: 0.5em;
}

.button--ghost:hover {
	background: var(--color-surface);
	border-color: transparent;
	color: var(--color-red-dark);
}

.button--on-dark {
	background: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-black);
}

.button--on-dark:hover {
	background: var(--color-red);
	border-color: var(--color-red);
	color: var(--color-white);
}

/* Buttons inside dark areas: beat the ".site-footer a" / ".demo-dark a" colour rules. */
.site-footer .button,
.section--dark .button,
.demo-dark .button {
	color: var(--color-white);
}

.site-footer .button--on-dark,
.section--dark .button--on-dark,
.demo-dark .button--on-dark {
	color: var(--color-black);
}

.site-footer .button--on-dark:hover,
.section--dark .button--on-dark:hover,
.demo-dark .button--on-dark:hover {
	color: var(--color-white);
}

.button--small {
	min-height: 2.25rem;
	font-size: var(--step--1);
	padding: 0.4em 0.9em;
}

label {
	display: block;
	font-weight: var(--weight-body-strong);
	margin-bottom: var(--space-3xs);
}

input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5em 0.75em;
	font: inherit;
	color: var(--color-text);
	background: var(--color-white);
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius-s);
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

input:not([type="submit"]):focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-red);
	box-shadow: 0 0 0 3px rgb(227 0 15 / 0.2);
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

.field {
	margin-bottom: var(--space-s);
}

.field__hint {
	font-size: var(--step--1);
	color: var(--color-muted);
	margin: var(--space-3xs) 0 0;
}

.search-form {
	display: flex;
	gap: var(--space-2xs);
}

.search-form__input {
	flex: 1;
}

.search-form__submit {
	flex: none;
	padding-inline: 0.9em;
}

/* 10. Front page ------------------------------------------------------------ */
.section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-s);
	margin-bottom: var(--space-m);
}

.section__head .section__title {
	margin-bottom: 0;
}

.section__title {
	font-family: var(--vmf-font-display);
	font-weight: var(--vmf-display-weight);
	font-size: var(--vmf-display-section-size);
	line-height: var(--vmf-display-leading);
	letter-spacing: var(--vmf-display-tracking);
	text-transform: uppercase;
}

.section--dark {
	background: var(--color-dark);
	color: var(--color-on-dark);
}

.section--dark .section__title,
.section--dark h3 {
	color: var(--color-on-dark);
}

.section--dark a {
	color: var(--color-on-dark);
}

.button--large {
	min-height: 3.25rem;
	font-size: var(--step-1);
	padding-inline: 1.5em;
}

/* 10b. Editorial hero (white ground) --------------------------------------------
   Desktop: 2 columns x 2 rows — kicker+H1 | list ; info bar + CTA | countdown. */
.hero-ed {
	position: relative;
	background: var(--color-white);
	color: var(--vmf-dark);
	padding-block: var(--space-m) var(--space-xl);
}

/* mobile order: head → bar → cta → countdown → list */
.hero-ed__grid {
	display: grid;
	grid-template-areas: "head" "bar" "cta" "countdown" "list";
	gap: var(--space-m);
}

.hero-ed__head {
	grid-area: head;
	container-type: inline-size; /* the H1 is sized in cqw of this column */
	min-width: 0;
}

.hero-ed__kicker {
	margin: 0 0 var(--space-s);
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vmf-red); /* 4.8:1 on white */
}

.hero-ed__title {
	margin: 0;
	font-family: var(--vmf-font-display);
	font-weight: var(--vmf-display-weight);
	font-size: var(--vmf-display-hero-size);
	line-height: var(--vmf-display-leading);
	letter-spacing: var(--vmf-display-tracking);
	text-transform: uppercase;
	color: var(--vmf-dark);
	text-wrap: initial;
}

.hero-ed__line {
	display: block;
	white-space: nowrap;
}

.hero-ed__line--accent {
	color: var(--vmf-red);
}

/* dark info bar: one line on desktop, stacked on phones */
.hero-ed__bar {
	grid-area: bar;
	list-style: none;
	margin: 0;
	padding: var(--space-s) var(--space-m);
	background: var(--vmf-dark);
	color: var(--color-white);
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	font-size: var(--step-0);
}

.hero-ed__bar-date {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--step-1);
}

.hero-ed__bar-address {
	color: var(--color-muted-on-dark);
	font-size: var(--step--1);
}

.hero-ed__bar-badge span {
	display: inline-block;
	padding: 0.2em 0.6em;
	border: 2px solid var(--vmf-red);
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step--1);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hero-ed__cta {
	grid-area: cta;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: var(--space-s);
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step-0);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vmf-dark);
	text-decoration: none;
}

.hero-ed__cta-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	background: var(--vmf-red);
	color: var(--color-white);
	transition: transform var(--dur) var(--ease), background var(--dur-fast) var(--ease);
}

.hero-ed__cta:hover .hero-ed__cta-box {
	background: var(--color-red-dark);
	transform: translateX(0.25rem);
}

/* numbered list */
.hero-ed__list {
	grid-area: list;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.15rem);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hero-ed__item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--space-s);
	padding-block: var(--space-2xs);
	border-bottom: 1px solid var(--color-line);
}

.hero-ed__item::after {
	content: "";
	order: 2;
	grid-column: 2;
	height: 1px;
	background: var(--vmf-dark);
	opacity: 0.35;
}

.hero-ed__num {
	order: 1;
	color: var(--vmf-red);
	font-variant-numeric: tabular-nums;
}

.hero-ed__item-text {
	order: 3;
	color: var(--vmf-dark);
	text-align: right;
}

/* countdown */
.hero-ed__countdown {
	grid-area: countdown;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-s);
	padding-top: var(--space-2xs);
	border-top: 2px solid var(--vmf-red);
}

.countdown__label {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vmf-red);
}

.countdown__units {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-s);
}

.countdown__unit {
	display: grid;
	gap: var(--space-3xs);
}

.countdown__num {
	font-family: var(--vmf-font-display);
	font-weight: var(--vmf-display-weight);
	font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
	line-height: var(--vmf-display-leading);
	letter-spacing: var(--vmf-display-tracking);
	font-variant-numeric: tabular-nums; /* live digits must not jitter */
	color: var(--vmf-dark);
}

.countdown__cap {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vmf-muted-on-surface);
}

@media (prefers-reduced-motion: reduce) {
	.countdown__units {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.countdown__unit--seconds {
		display: none; /* updated once a minute, no seconds */
	}
}

.countdown__live {
	margin: 0;
	font-family: var(--vmf-font-display);
	font-weight: var(--vmf-display-weight);
	font-size: var(--step-3);
	line-height: var(--vmf-display-leading);
	letter-spacing: var(--vmf-display-tracking);
	text-transform: uppercase;
	color: var(--vmf-dark);
}

.hero-ed :focus-visible,
.stats :focus-visible {
	outline: 3px solid var(--vmf-dark);
	outline-offset: 4px;
}

/* tablet: full-width H1, bar, then CTA + countdown side by side, list in two columns */
@media (min-width: 48em) and (max-width: 63.99em) {
	.hero-ed__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "head head" "bar bar" "cta countdown" "list list";
		align-items: start;
	}

	.hero-ed__bar {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2xs) var(--space-m);
	}

	.hero-ed__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space-l);
	}
}

/* desktop: 2 x 2 */
@media (min-width: 64em) {
	.hero-ed__grid {
		grid-template-columns: minmax(0, 2.4fr) minmax(15rem, 1fr); /* ~70 % / 30 % so the info bar fits one line at >= 1280 */
		grid-template-rows: auto auto auto;
		grid-template-areas: "head list" "bar countdown" "cta countdown";
		column-gap: var(--space-l);
		row-gap: var(--space-m);
		align-items: start;
	}

	.hero-ed__grid--no-countdown {
		grid-template-areas: "head list" "bar bar" "cta cta";
	}

	.hero-ed__list {
		align-self: stretch; /* from the kicker top to the H1 bottom */
	}

	.hero-ed__countdown {
		align-self: stretch; /* top with the bar, bottom with the CTA */
	}

	/* the bar: everything on one line with thin vertical separators */
	.hero-ed__bar {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 0;
		padding: var(--space-xs) var(--space-s);
	}

	.hero-ed__bar > li {
		display: flex;
		align-items: center;
		padding-inline: 0.6rem;
		white-space: nowrap;
	}

	.hero-ed__bar-date {
		font-size: 1.05rem;
	}

	.hero-ed__bar-venue {
		font-size: 0.95rem;
	}

	.hero-ed__bar-badge span {
		font-size: 0.75rem;
	}

	.hero-ed__bar > li:first-child {
		padding-left: 0;
	}

	.hero-ed__bar > li + li {
		border-left: 1px solid rgb(255 255 255 / 0.35);
	}

	.hero-ed__bar-address {
		font-size: 0.85rem;
	}
}

/* 1024–1279: the bar may wrap into two halves, never clip; list a notch smaller */
@media (min-width: 64em) and (max-width: 79.99em) {
	.hero-ed__list {
		font-size: 0.85rem;
	}

	.hero-ed__bar > li {
		flex: 1 1 45%;
		padding-block: var(--space-3xs);
	}

	.hero-ed__bar > li:nth-child(3) {
		border-left: 0;
		padding-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-ed__cta:hover .hero-ed__cta-box {
		transform: none;
	}
}
/* stats row */
.stats {
	background: var(--color-white);
	border-top: 1px solid var(--color-line);
	padding-block: var(--space-m) var(--space-l);
}

.stats__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-m) var(--space-s);
}

.stats__item {
	display: grid;
	gap: var(--space-3xs);
	padding-left: var(--space-s);
	border-left: 2px solid var(--vmf-red);
}

.stats__num {
	font-family: var(--vmf-font-display);
	font-weight: var(--vmf-display-weight);
	font-size: var(--vmf-display-stat-size);
	line-height: var(--vmf-display-leading);
	letter-spacing: var(--vmf-display-tracking);
	color: var(--vmf-dark);
	font-variant-numeric: tabular-nums; /* countdown digits must not jitter */
	text-transform: uppercase;
}

.stats__num--text {
	color: var(--vmf-red);
}

.stats__label {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vmf-muted-on-surface);
}

@media (min-width: 48em) {
	.stats__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-ed__cta:hover .hero-ed__cta-box {
		transform: none;
	}
}

/* announcement / topics */
.topics {
	list-style: none;
	margin: 0 0 var(--space-l);
	padding: 0;
	display: grid;
	gap: var(--space-s);
}

.topics__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-s);
	align-items: start;
	padding-top: var(--space-s);
	border-top: 2px solid var(--color-red);
}

.topics__num {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading-strong);
	font-size: var(--step-2);
	line-height: 1;
	color: var(--color-red);
	font-variant-numeric: tabular-nums;
}

.topics__text {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step-1);
	line-height: var(--leading-snug);
	color: var(--color-heading);
	text-wrap: balance;
}

@media (min-width: 40em) {
	.topics {
		grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
		gap: var(--space-m);
	}
}

@media (min-width: 64em) {
	.topics {
		grid-template-columns: repeat(5, 1fr);
	}

	.topics__item {
		grid-template-columns: 1fr;
		gap: var(--space-2xs);
	}
}

.announcement__tagline {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step-2);
	color: var(--color-heading);
	margin-bottom: var(--space-xs);
}

.announcement__note {
	color: var(--color-muted);
	margin-bottom: var(--space-m);
}

.announcement__gift {
	margin: 0;
	padding: var(--space-s) var(--space-m);
	background: var(--color-dark);
	color: var(--color-on-dark);
	border-left: 6px solid var(--color-red);
	border-radius: var(--radius-s);
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step-1);
	line-height: var(--leading-snug);
	text-wrap: balance;
}

/* programme highlight */
.event-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-s);
}

.event {
	display: grid;
	gap: var(--space-3xs);
	padding: var(--space-s) 0 var(--space-s) var(--space-s);
	border-top: 1px solid rgb(255 255 255 / 0.2);
	border-left: 4px solid var(--color-red); /* red as an accent line — small red text on black fails AA */
}

.event__time {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step--1);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-on-dark);
}

.event__title {
	margin: 0;
	font-size: var(--step-1);
}

.event__title a {
	text-decoration: none;
}

.event__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--color-red);
}

.event__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-s);
	font-size: var(--step--1);
	color: var(--color-muted-on-dark);
}

@media (min-width: 48em) {
	.event-list {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space-l);
	}
}

/* social */
.social__grid {
	display: grid;
	gap: var(--space-l);
}

.social__heading {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	font-size: var(--step-1);
}

.social__note {
	color: var(--color-muted);
	font-size: var(--step--1);
}

.social__link {
	margin-top: var(--space-2xs);
	font-size: var(--step--1);
}

/* Embeds that set third-party cookies. The box is the height the embed will take, so asking for consent
   and loading it afterwards does not move anything on the page. */
.embed {
	--embed-height: 30rem;
	margin-top: var(--space-xs);
}

.embed__box {
	position: relative;
	height: var(--embed-height);
	border: 2px solid var(--color-line);
	background: var(--color-surface, #f4f4f2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.embed__ask {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2xs);
	text-align: center;
	padding: var(--space-s);
	max-width: 22rem;
}

.embed__icon {
	color: var(--color-red-text);
}

.embed__handle {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--step-1);
}

.embed__note {
	color: var(--color-muted);
	font-size: var(--step--1);
	margin: 0;
}

.embed__button {
	margin-top: var(--space-2xs);
}

/* once loaded, the iframe fills exactly the same box */
.embed__box iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.embed--feed {
	min-height: var(--embed-height);
}

/* The Facebook Page Plugin will not render wider than 500 px, so in the "Follow us" section both boxes are
   capped at that width and centred. Otherwise the timeline sits in the left half of a wider box. It also
   draws its own header strip, which needs more height than the plain placeholder would. */
.social .embed {
	--embed-height: 37.5rem;
}

.social .embed__box,
.social .embed--feed {
	max-width: 31.25rem;
	margin-inline: auto;
}

/* the plugin's own padding on top of ours makes the column look misaligned with the Facebook one */
.social .embed--feed #sb_instagram {
	padding-bottom: 0 !important;
}

/* The plugin's blue "Follow on Instagram" button is off the festival's palette and says the same thing as
   the plain link under the feed, which works whether or not the feed loads. */
.social .embed--feed .sbi_follow_btn {
	display: none !important;
}

/* The free plugin ignores colsmobile in the shortcode and writes sbi_mob_col_1, so the two columns that
   were asked for are forced back here, on the plugin's own 640 px breakpoint. It lays the feed out as a
   grid, so the column count comes from grid-template-columns - setting the item width does nothing. */
@media all and (max-width: 40em) {

	.social .embed--feed #sb_instagram #sbi_images {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.social .embed--feed #sb_instagram #sbi_images .sbi_item {
		width: 100% !important;
	}
}

/* recording inside the event popup: a 16:9 box that is the same size before and after loading */
.recording {
	margin: var(--space-s) 0;
}

.recording__label {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--step--1);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-red-text);
	margin-bottom: var(--space-3xs, .25rem);
}

.recording__embed {
	margin-top: 0;
}

.embed__box--video {
	height: auto;
	aspect-ratio: 16 / 9;
}

.recording__link {
	margin-top: var(--space-2xs);
	font-size: var(--step--1);
}

/* small marker on the programme list and in the slider */
.has-recording {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--step--2, .75rem);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-red-text);
	white-space: nowrap;
}

.has-recording::before {
	content: "";
	width: .5em;
	height: .5em;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

@media (min-width: 48em) {
	.social__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* partners: white, centred, bare logos (no boxes); shared by the front page and the programme page */
.partners {
	border-top: 1px solid var(--color-line); /* separates it from the white section above */
}

.partners {
	/* spacing tokens: label → logo row, and between groups (also title → first label) */
	--partners-label-gap: clamp(1.5rem, 1rem + 1.5vw, 2rem);
	--partners-group-gap: 4rem;
	/* every logo row is a frame of fixed height = the tallest optically scaled logo in the section
	   (standard box height; the organiser's larger box × its 0.7 scale is lower than that) */
	--logo-box-w: clamp(10.35rem, 46vw, 15.8rem);
	--logo-box-h: calc(var(--logo-box-w) / 2);
	--partners-row-h: var(--logo-box-h);
}

.partners__title {
	text-align: center;
	margin-bottom: var(--partners-group-gap);
}

.partners__group + .partners__group {
	margin-top: var(--partners-group-gap);
}

.partners__heading {
	text-align: center;
	font-size: var(--step--1);
	font-family: var(--font-body);
	font-weight: var(--weight-body-strong);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 0 0 var(--partners-label-gap); /* measured to the top of the fixed-height row frame */
	line-height: 1.2;
}

.partners__logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-m) var(--space-l);
	align-items: center;
}

.partners__group--organizator .partners__logos {
	--logo-box-w: clamp(12.65rem, 55vw, 19.55rem); /* organiser larger (+15 % of the previous 11–17rem) */
	--logo-box-h: calc(var(--logo-box-w) / 2);
}

.partners__item {
	--logo-scale: 1;
}

.partners__box {
	display: flex;
	align-items: center; /* logo vertically centred inside the row frame */
	justify-content: center;
	width: var(--logo-box-w);
	height: var(--partners-row-h);
	text-decoration: none;
	color: var(--color-heading);
	transition: opacity var(--dur-fast) var(--ease);
}

a.partners__box:hover {
	opacity: 0.8;
}

a.partners__box:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 6px;
}

.partners__box img {
	/* same box for everyone; --logo-scale (ink-area normalisation) shrinks visually heavy logos */
	max-width: calc(100% * var(--logo-scale));
	max-height: min(calc(var(--logo-box-h) * var(--logo-scale)), var(--partners-row-h));
	width: auto;
	height: auto;
	object-fit: contain;
}

.partners__name {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	text-align: center;
	font-size: var(--step--1);
}
/* event details (popup + inline fallback): facts, segments, participants */
.facts {
	display: grid;
	gap: var(--space-s);
	margin: 0 0 var(--space-m);
	padding: var(--space-m);
	background: var(--color-surface);
	border-radius: var(--radius-m);
}

.facts__item dt {
	font-size: var(--step--1);
	font-weight: var(--weight-body-strong);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-red-text);
}

.facts__item dd {
	margin: 0;
	font-weight: var(--weight-body-strong);
}

.event-note {
	color: var(--color-red-text);
	font-weight: var(--weight-body-strong);
}

.segments,
.people {
	list-style: none;
	margin: 0;
	padding: 0;
}

.segments__item,
.people__item {
	display: grid;
	gap: var(--space-3xs);
	padding: var(--space-s) 0;
	border-top: 1px solid var(--color-line);
}

.segments__type,
.people__roles {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-red-text);
}

/* segment label is its own line above the description (or alone when there is no description) */
.segments__type {
	display: block;
}

.segments__text {
	display: block;
}

.people__name {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step-0);
	color: var(--color-heading);
}

.people__affiliation {
	color: var(--color-muted);
}

.event__people {
	margin: 0;
	font-size: var(--step--1);
	color: var(--color-on-dark);
}

/* contact */
.contact__inner {
	display: grid;
	gap: var(--space-l);
}

.contact__map {
	min-height: 14rem;
	background: var(--color-surface-2);
	border-radius: var(--radius-m);
}

@media (min-width: 48em) {
	.contact__inner {
		grid-template-columns: 1fr 1fr;
	}
}

/* programme page: the schedule sits on the same surface as "Teme festivala" (section--surface, full-bleed);
   rows stay transparent, dividers use the on-surface line token, small red text uses --color-red-text (5.7:1) */
.program-page .schedule__item {
	border-bottom-color: var(--color-line-on-surface);
}

.program-day {
	margin-top: var(--space-l);
}

.program-day__title {
	font-size: var(--step-2);
	padding-bottom: var(--space-2xs);
	border-bottom: 2px solid var(--color-red);
}

.schedule {
	list-style: none;
	margin: 0;
	padding: 0;
}

.schedule__item {
	display: grid;
	grid-template-columns: 8.5rem 1fr;
	gap: var(--space-s);
	padding: var(--space-s) 0;
	border-bottom: 1px solid var(--color-line);
}

.schedule__item--filler {
	padding-block: var(--space-2xs);
	color: var(--color-muted);
}

.schedule__item--filler .schedule__title {
	font-family: var(--font-body);
	font-weight: var(--weight-body);
	font-size: var(--step--1);
	color: var(--color-muted);
}

.schedule__time {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-variant-numeric: tabular-nums;
	color: var(--color-heading);
	white-space: nowrap;
}

.schedule__item--filler .schedule__time {
	color: var(--color-muted);
	font-weight: var(--weight-body-strong);
	font-size: var(--step--1);
}

.schedule__title {
	font-size: var(--step-1);
	margin-bottom: var(--space-3xs);
}

.schedule__title a {
	color: var(--color-heading);
	text-decoration: none;
}

.schedule__title a:hover {
	color: var(--color-red-text);
}

.schedule__meta,
.schedule__speakers {
	margin: 0;
	font-size: var(--step--1);
	color: var(--color-muted);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-s);
}

.schedule__closed {
	color: var(--color-red-text);
	font-weight: var(--weight-body-strong);
}

@media (max-width: 40em) {
	.schedule__item {
		grid-template-columns: 1fr;
		gap: var(--space-3xs);
	}
}

/* 10c. Programme slider (front page, on the section--surface ground — same tokens as the programme page) ---- */
.slider__head {
	align-items: center;
}

.slider__controls {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	max-width: 100%;
	min-width: 0;
}

html:not(.js) .slider__controls {
	display: none;
}

.slider__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--vmf-red);
	color: var(--color-white);
	border: 2px solid var(--vmf-red);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.slider__arrow--prev .icon {
	transform: scaleX(-1);
}

.slider__arrow:hover:not(:disabled) {
	background: var(--color-red-dark);
	border-color: var(--color-red-dark);
}

.slider__arrow:disabled {
	/* muted but visible on the light ground: outlined grey, no red */
	background: transparent;
	border-color: var(--color-line-strong);
	color: var(--color-line-strong);
	cursor: default;
}

.slider__pages {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3xs) var(--space-2xs);
	min-width: 0;
}

.slider__page {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 0.25rem 0.35rem;
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step--1);
	letter-spacing: 0.06em;
	color: var(--vmf-dark);
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}

.slider__page:hover {
	color: var(--color-red-text);
}

.slider__page.is-active {
	color: var(--color-red-text); /* 5.7:1 on the surface */
	border-bottom-color: var(--vmf-red);
}

.slider__arrow:focus-visible,
.slider__page:focus-visible,
.event-card:focus-visible,
.slider__more a:focus-visible {
	outline: 3px solid var(--vmf-dark);
	outline-offset: 3px;
}

.slider {
	position: relative;
}

/* track: one horizontal row of groups; each group is a 2x2 grid (1x4 on phones) */
.slider__track {
	--slider-gap: var(--space-m);
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	column-gap: var(--slider-gap);
	overflow-x: hidden; /* paging only via the controls; keeps focus/scroll where they are */
	scroll-snap-type: x mandatory;
}

html:not(.js) .slider__track {
	overflow-x: auto; /* without JS the groups are simply scrollable */
	scrollbar-width: thin;
	scrollbar-color: var(--color-line-strong) transparent;
}

.slider__group {
	scroll-snap-align: start;
}

.slider__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: 1fr; /* equal card heights within a group */
	gap: var(--space-s);
}

.slider__item {
	display: grid;
	min-width: 0;
}

@media (min-width: 40em) {
	.slider__grid {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space-l);
	}
}

/* cards: no own background; red rule on the left, thin divider on top */
.event-card {
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	gap: var(--space-2xs);
	padding: var(--space-s) 0 var(--space-s) var(--space-s);
	border-top: 1px solid var(--color-line-on-surface);
	border-left: 4px solid var(--vmf-red);
	color: var(--vmf-dark);
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease);
}

.event-card:hover {
	background: rgb(26 26 24 / 0.05);
}

.event-card__time {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step--1);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vmf-dark);
}

.event-card__title {
	margin: 0;
	font-size: var(--step-1);
	color: var(--vmf-dark);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.event-card__people {
	margin: 0;
	font-size: var(--step--1);
	color: var(--vmf-dark);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.event-card__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-s);
	font-size: var(--step--1);
	color: var(--color-muted); /* 6.1:1 on the surface */
	align-self: end;
}

.slider__more {
	margin: var(--space-m) 0 0;
}
/* popup */
html.has-dialog {
	overflow: hidden;
}

.event-dialog {
	width: min(100%, 56rem);
	max-width: 100%;
	max-height: 100dvh;
	height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--vmf-surface);
	color: var(--vmf-dark);
	display: none;
	flex-direction: column;
}

.event-dialog[open] {
	display: flex;
}

.event-dialog::backdrop {
	background: rgb(0 0 0 / 0.6);
}

@media (min-width: 48em) {
	.event-dialog {
		height: fit-content; /* top-layer dialogs otherwise stretch to max-height */
		max-height: 90dvh;
		margin: auto;
		border: 1px solid var(--vmf-grid);
		box-shadow: var(--shadow-l);
	}
}

.event-dialog__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-s);
	padding: var(--space-xs) var(--space-m);
	border-bottom: 1px solid var(--vmf-grid);
	background: var(--vmf-surface-2);
}

.event-dialog__nav {
	display: flex;
	gap: var(--space-2xs);
}

.event-dialog__prev,
.event-dialog__next,
.event-dialog__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 var(--space-xs);
	border: 0;
	background: var(--vmf-dark);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step--1);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.event-dialog__prev .icon {
	transform: scaleX(-1);
}

.event-dialog__prev:disabled,
.event-dialog__next:disabled {
	opacity: 0.35;
	cursor: default;
}

.event-dialog__close {
	background: var(--vmf-red);
}

.event-dialog :focus-visible {
	outline: 3px solid var(--vmf-dark);
	outline-offset: 3px;
}

.event-dialog__content {
	overflow-y: auto;
	padding: var(--space-m) var(--space-m) var(--space-xl);
	overscroll-behavior: contain;
}

/* event detail (popup + inline fallback) */
.event-detail__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-s);
	margin: 0 0 var(--space-xs);
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step--1);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vmf-muted-on-surface);
}

.event-detail__type {
	color: var(--vmf-red-text);
}

.event-detail__lang {
	padding: 0 0.4em;
	border: 1px solid currentColor;
}

.event-detail__title {
	font-family: var(--vmf-font-display);
	font-weight: var(--vmf-display-weight);
	font-size: var(--vmf-display-popup-size);
	line-height: var(--vmf-display-leading);
	letter-spacing: var(--vmf-display-tracking);
	text-transform: uppercase;
	color: var(--vmf-dark);
	margin: 0 0 var(--space-m);
	padding-bottom: var(--space-s);
	border-bottom: 4px solid var(--vmf-red);
	text-wrap: balance;
}

.event-detail__facts {
	display: grid;
	gap: var(--space-s);
	margin: 0 0 var(--space-m);
}

.event-detail__facts dt {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vmf-red-text);
}

.event-detail__facts dd {
	margin: 0;
	font-weight: var(--weight-body-strong);
}

.event-detail__sub {
	display: block;
	font-weight: var(--weight-body);
	color: var(--vmf-muted-on-surface);
}

@media (min-width: 40em) {
	.event-detail__facts {
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	}
}

.event-detail__note {
	color: var(--vmf-red-text);
	font-weight: var(--weight-body-strong);
}

.event-detail__h {
	font-size: var(--step-1);
	margin-top: var(--space-m);
	padding-top: var(--space-s);
	border-top: 1px solid var(--vmf-grid);
}

.event-detail .segments__item,
.event-detail .people__item {
	border-top-color: var(--vmf-grid);
}

.people-group__label {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vmf-red-text);
	margin: var(--space-s) 0 0;
}

/* "(and introduction)" / "(online)" right after the name: same line, lighter than the name */
.people__note {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--step--1);
	color: var(--vmf-muted-on-surface);
	white-space: nowrap;
}

.people__note--online {
	color: var(--vmf-red-text);
}

/* inline details on the programme page (no-JS fallback; JS hides the block) */
.event-details {
	margin-top: var(--space-2xl);
	padding-top: var(--space-l);
	border-top: 2px solid var(--color-line);
}

.event-details__item {
	padding-block: var(--space-l);
	border-bottom: 1px solid var(--color-line);
	scroll-margin-top: calc(var(--header-height-compact) + 1rem);
}

.schedule__item--closed .schedule__title {
	color: var(--color-muted);
}

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

/* 11. Style guide (template-styleguide.php) ----------------------------- */
.styleguide section {
	padding-block: var(--space-l);
	border-bottom: 1px solid var(--color-line);
}

.swatches {
	display: grid;
	gap: var(--space-s);
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

.swatch {
	border: 1px solid var(--color-line);
	border-radius: var(--radius-m);
	overflow: hidden;
	font-size: var(--step--1);
}

.swatch__color {
	height: 5rem;
}

.swatch__body {
	padding: var(--space-2xs) var(--space-xs);
}

.swatch__body code {
	display: block;
	font-size: 0.85em;
}

.swatch__note {
	color: var(--color-muted);
}

.type-sample {
	display: grid;
	grid-template-columns: 6rem 1fr;
	gap: var(--space-s);
	align-items: baseline;
	padding-block: var(--space-xs);
	border-bottom: 1px dashed var(--color-line);
}

.type-sample__label {
	font-size: var(--step--1);
	color: var(--color-muted);
}

.font-set {
	padding: var(--space-m);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-m);
	margin-bottom: var(--space-m);
}

.font-set__meta {
	font-size: var(--step--1);
	color: var(--color-muted);
}

.demo-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	align-items: center;
}

.demo-dark {
	padding: var(--space-m);
	background: var(--color-dark);
	color: var(--color-on-dark);
	border-radius: var(--radius-m);
}

.demo-dark h3 {
	color: var(--color-on-dark);
}

.demo-dark a {
	color: var(--color-on-dark);
}

.demo-dark .accent-large {
	color: var(--color-red);
	font-family: var(--font-heading);
	font-weight: var(--weight-heading-strong);
	font-size: var(--step-3);
}

.demo-surface {
	padding: var(--space-m);
	background: var(--color-surface);
	border-radius: var(--radius-m);
}

/* 15. Map of the venues (template-parts/map.php) ------------------------- */
.getting-here .section__title {
	margin-bottom: var(--space-m);
}

.venue-map {
	position: relative;
	margin: 0;
	border: 1px solid var(--color-line);
	background: #e7e4dd; /* same ground as the SVG, so the frame never flashes white */
}

.venue-map__image {
	display: block;
	width: 100%;
	height: auto;
}

.venue-map__pin {
	position: absolute;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--color-red);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step--1);
	font-variant-numeric: tabular-nums;
	box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.9);
}

.venue-map__scale {
	position: absolute;
	left: var(--space-s);
	bottom: var(--space-l);
	border-bottom: 3px solid var(--color-black);
	padding-bottom: 0.15rem;
	font-family: var(--font-heading);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: var(--color-heading);
}

.venue-map__credit {
	position: absolute;
	right: var(--space-s);
	bottom: var(--space-2xs);
	margin: 0;
	font-size: 0.7rem;
	color: var(--color-muted);
	background: rgba(255, 255, 255, 0.8);
	padding: 0.1rem 0.35rem;
}

.venue-map__credit a {
	color: inherit;
}

.venue-list {
	display: grid;
	gap: var(--space-m);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	list-style: none;
	margin: var(--space-l) 0 0;
	padding: 0;
}

.venue-list__item {
	display: flex;
	gap: var(--space-s);
	align-items: flex-start;
	border-top: 2px solid var(--color-black);
	padding-top: var(--space-s);
}

.venue-list__num {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step-1);
	line-height: 1;
	color: var(--color-red-text);
	font-variant-numeric: tabular-nums;
}

.venue-list__name {
	margin: 0;
	font-size: var(--step-0);
}

.venue-list__address {
	margin: 0.15rem 0 0.4rem;
	color: var(--color-muted);
}

.venue-list__link {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step--1);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-red-text);
}

.venue-map__note {
	margin: var(--space-m) 0 0;
	color: var(--color-muted);
}

@media (max-width: 40em) {
	.venue-map__pin {
		width: 2rem;
		height: 2rem;
		font-size: 0.7rem;
	}

	.venue-map__scale {
		bottom: var(--space-m);
	}
}

/* 16. Event subtitle and photos (popup + programme page) ------------------ */
.event-detail__subtitle {
	margin: 0.4rem 0 var(--space-m);
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--step--1);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vmf-red-text);
}

.event-photos {
	margin: var(--space-m) 0 0;
}

.event-photos--grid {
	display: grid;
	gap: var(--space-s);
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.event-photos__item {
	margin: 0;
}

.event-photos__item img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--vmf-grid);
}

/* in the popup the photo must not push the text out of view */
.event-dialog .event-photos:not(.event-photos--grid) img {
	max-height: 42vh;
	object-fit: cover;
	object-position: center 28%;
}

.event-photos__credit {
	margin-top: 0.35rem;
	font-size: var(--step--1);
	color: var(--vmf-muted-on-surface);
}

/* longer descriptions: comfortable measure and rhythm inside the popup */
.event-detail__body {
	margin-top: var(--space-m);
	max-width: 62ch;
}

.event-detail__body p + p {
	margin-top: 0.85em;
}

.event-detail__body p {
	line-height: 1.6;
}