/**
 * MS Music Booking – frontend.
 *
 * Alt er scopet under .msm-* så det ikke kolliderer med temaet.
 */

/*
 * Manrope og Inter ligger i pluginnet frem for at blive hentet fra Google.
 * Det holder besøgendes IP-adresser væk fra Googles servere (GDPR) og gør
 * pluginnet uafhængigt af, om temaet tilfældigvis loader de samme fonte.
 *
 * Begge er variable fonte, så én fil dækker hele vægtintervallet. Latin-
 * subsettet er nok: æ, ø og å ligger alle i U+0000-00FF.
 */
@font-face {
	font-family: "MSM Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-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: "MSM Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-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;
}

/*
 * Variablerne ligger på :root, ikke på .msm-* – accentfarven fra
 * indstillingerne indsættes som inline :root-regel efter denne fil, og en
 * scoped selector her ville vinde over den og gøre farvevalget virkningsløst.
 * --msm-accent og --msm-accent-ink overskrives derfor begge derfra.
 */
:root {
	--msm-accent: #f26522;
	--msm-accent-ink: #14161a;
	--msm-ink: #14161a;
	--msm-muted: #6b7280;
	--msm-line: #e5e7eb;
	--msm-bg-soft: #f7f7f8;
	--msm-dark: #0e0f13;
	--msm-radius: 14px;
	--msm-shadow: 0 4px 24px rgba(20, 22, 26, .08);
	--msm-shadow-lg: 0 18px 48px rgba(20, 22, 26, .16);
	--msm-max: 1140px;

	/* Systemskrift som reserve, hvis fontfilerne ikke kan hentes. */
	--msm-font-heading: "MSM Manrope", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--msm-font-body: "MSM Inter", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/*
 * Fonten sættes kun på pluginnets egne sektioner – ikke på body – så resten
 * af temaet er urørt.
 */
.msm-artist,
.msm-grid-section,
.msm-book,
.msm-hero {
	font-family: var(--msm-font-body);
}

.msm-hero__title,
.msm-grid__heading,
.msm-card__title,
.msm-book__title,
.msm-thanks__title,
.msm-unavailable__title,
.msm-body__prose h1,
.msm-body__prose h2,
.msm-body__prose h3,
.msm-body__prose h4 {
	font-family: var(--msm-font-heading);
}

/* Lille versal-etiket – bruges over beskrivelse og video. */
.msm-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	color: var(--msm-accent);
	font-family: var(--msm-font-heading);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1;
}

.msm-eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--msm-accent) 45%, transparent), transparent);
}

.msm-container {
	width: 100%;
	max-width: var(--msm-max);
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

.msm-container--narrow {
	max-width: 760px;
}

/* ---------------------------------------------------------------- Hero */

.msm-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: min(62vh, 560px);
	padding: 96px 24px;
	background-color: var(--msm-ink);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
	box-sizing: border-box;
	overflow: hidden;
}

.msm-hero--plain {
	background-image: linear-gradient(135deg, #1c1f26 0%, #2f343f 100%);
}

/* Mørkest i bunden, hvor teksten står – navnet skal kunne læses uanset billede. */
.msm-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 12, 16, .35) 0%, rgba(10, 12, 16, .55) 45%, rgba(10, 12, 16, .82) 100%);
}

.msm-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 860px;
}

.msm-hero__title {
	margin: 0 0 22px;
	color: #fff;
	font-size: clamp(2.4rem, 6.5vw, 4.75rem);
	line-height: 1.02;
	font-weight: 800;
	letter-spacing: -.035em;
	text-wrap: balance;
	text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
}

.msm-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-bottom: 32px;
}

.msm-tag {
	display: inline-flex;
	align-items: center;
	padding: 9px 20px;
	border-radius: 999px;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}

/*
 * Hvid tekst er et bevidst designvalg fra MS Music – ikke den beregnede
 * --msm-accent-ink, som ville give mørk tekst på den orange. Skiftes accent-
 * farven til noget lyst, skal denne linje tages op igen.
 */
.msm-tag--category {
	background: var(--msm-accent);
	color: #fff;
}

.msm-tag--genre {
	background: rgba(255, 255, 255, .14);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .3);
	backdrop-filter: blur(6px);
}

/* Inaktiv artist – i stedet for "Forespørg nu"-knappen. */
.msm-hero__unavailable {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 14px 26px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	background: rgba(20, 22, 26, .55);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
}

.msm-hero__unavailable-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #f59e0b;
	box-shadow: 0 0 0 4px rgba(245, 158, 11, .22);
	flex: none;
}

/* --------------------------------------------------------------- Knapper */

/*
 * Dobbelt klassenavn giver specificitet 0,2,0. Temaets egne knap-regler –
 * typisk "button" eller ".elementor button" – vinder ellers over en enkelt
 * klasse, og submit-knappen endte som en hvid tema-knap i stedet for orange.
 * -webkit-appearance nulstiller browserens egen knap-styling.
 */
.msm-btn.msm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 36px;
	margin: 0;
	border: 0;
	border-radius: 999px;
	-webkit-appearance: none;
	appearance: none;
	background-image: none;
	font-family: var(--msm-font-heading);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.msm-btn.msm-btn--primary {
	background: var(--msm-accent);
	color: var(--msm-accent-ink);
	/* Glødeskyggen følger accentfarven, så knappen ikke lyser orange,
	   hvis MS Music vælger en anden farve i indstillingerne. */
	box-shadow: 0 6px 20px color-mix(in srgb, var(--msm-accent) 35%, transparent);
}

.msm-btn.msm-btn--primary:hover,
.msm-btn.msm-btn--primary:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px color-mix(in srgb, var(--msm-accent) 50%, transparent);
	background: color-mix(in srgb, var(--msm-accent) 88%, #fff);
	color: var(--msm-accent-ink);
}

.msm-btn.msm-btn:focus-visible {
	outline: 3px solid var(--msm-accent);
	outline-offset: 3px;
}

.msm-hero .msm-btn:focus-visible {
	outline-color: #fff;
}

.msm-btn.msm-btn[disabled] {
	opacity: .65;
	cursor: not-allowed;
	transform: none;
}

/* ------------------------------------------------------- Artistindhold */

.msm-body {
	position: relative;
	padding: 96px 0 40px;
}

/*
 * Svagt baggrundsmønster på den lyse flade. Vælges under MS Music →
 * Indstillinger og kan slås fra.
 *
 * Mønstret ligger på ::before frem for direkte på .msm-body, fordi opacity
 * på selve sektionen ville dæmpe teksten med. Indholdet løftes over med
 * z-index nedenfor.
 */
.msm-body::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-repeat: repeat;
	/* Styrken kan skrues op eller ned fra temaet ved at overskrive
	   --msm-pattern-opacity. Under ca. .04 forsvinder mønstret helt på
	   skærme med lav kontrast. */
	opacity: var(--msm-pattern-opacity, .06);
}

.msm-body > .msm-container {
	position: relative;
	z-index: 1;
}

/*
 * Noderne er spredt uregelmæssigt med forskellig størrelse og rotation i et
 * stort 640 px-felt. Et tæt, ensartet gitter ville straks læses som tapet.
 * Alle noder holdes inde fra kanten, så intet skæres over ved gentagelse.
 */
.msm-body--pattern-noder::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='%2314161a'%3E%3Cg transform='translate(70,110) rotate(-8) scale(1.15)'%3E%3Cellipse cx='8' cy='32' rx='7.5' ry='5.5' transform='rotate(-22 8 32)'/%3E%3Cellipse cx='34' cy='27' rx='7.5' ry='5.5' transform='rotate(-22 34 27)'/%3E%3Cpath d='M14.2 32 L14.2 6 L16.6 6 L16.6 32 Z'/%3E%3Cpath d='M40.2 27 L40.2 2 L42.6 2 L42.6 27 Z'/%3E%3Cpath d='M14.2 6 L42.6 2 L42.6 8 L14.2 12 Z'/%3E%3C/g%3E%3Cg transform='translate(430,70) rotate(12) scale(0.95)'%3E%3Cellipse cx='8' cy='26' rx='7.5' ry='5.5' transform='rotate(-22 8 26)'/%3E%3Cpath d='M14.2 26 L14.2 3 L16.6 3 L16.6 26 Z'/%3E%3Cpath d='M16.6 3 C 25 7 27.5 13.5 22.5 21 C 25.5 13.5 21.5 8.5 16.6 8 Z'/%3E%3C/g%3E%3Cg transform='translate(250,320) rotate(-15) scale(1.3)'%3E%3Cellipse cx='8' cy='26' rx='7.5' ry='5.5' transform='rotate(-22 8 26)'/%3E%3Cpath d='M14.2 26 L14.2 3 L16.6 3 L16.6 26 Z'/%3E%3Cpath d='M16.6 3 C 25 7 27.5 13.5 22.5 21 C 25.5 13.5 21.5 8.5 16.6 8 Z'/%3E%3C/g%3E%3Cg transform='translate(480,290) rotate(6)'%3E%3Cellipse cx='8' cy='32' rx='7.5' ry='5.5' transform='rotate(-22 8 32)'/%3E%3Cellipse cx='34' cy='27' rx='7.5' ry='5.5' transform='rotate(-22 34 27)'/%3E%3Cpath d='M14.2 32 L14.2 6 L16.6 6 L16.6 32 Z'/%3E%3Cpath d='M40.2 27 L40.2 2 L42.6 2 L42.6 27 Z'/%3E%3Cpath d='M14.2 6 L42.6 2 L42.6 8 L14.2 12 Z'/%3E%3C/g%3E%3Cg transform='translate(110,470) rotate(14)'%3E%3Cellipse cx='8' cy='26' rx='7.5' ry='5.5' transform='rotate(-22 8 26)'/%3E%3Cpath d='M14.2 26 L14.2 3 L16.6 3 L16.6 26 Z'/%3E%3Cpath d='M16.6 3 C 25 7 27.5 13.5 22.5 21 C 25.5 13.5 21.5 8.5 16.6 8 Z'/%3E%3C/g%3E%3Cg transform='translate(330,520) rotate(-6) scale(1.15)'%3E%3Cellipse cx='8' cy='32' rx='7.5' ry='5.5' transform='rotate(-22 8 32)'/%3E%3Cellipse cx='34' cy='27' rx='7.5' ry='5.5' transform='rotate(-22 34 27)'/%3E%3Cpath d='M14.2 32 L14.2 6 L16.6 6 L16.6 32 Z'/%3E%3Cpath d='M40.2 27 L40.2 2 L42.6 2 L42.6 27 Z'/%3E%3Cpath d='M14.2 6 L42.6 2 L42.6 8 L14.2 12 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-size: 640px 640px;
}

.msm-body--pattern-prikker::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='%2314161a'%3E%3Ccircle cx='4' cy='4' r='1.5'/%3E%3Ccircle cx='22' cy='22' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 36px 36px;
	/* Prikkerne er tynde og tætte – de tåler en anelse mere end noderne. */
	opacity: var(--msm-pattern-opacity, .075);
}

.msm-body__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 64px;
	align-items: start;
}

.msm-body__grid--no-image {
	grid-template-columns: minmax(0, 1fr);
	max-width: 760px;
	margin: 0 auto;
}

/* Billedet får en accentfarvet kant forskudt bagved – nok til at give
   artistfotoet vægt uden at pynte for meget. */
.msm-body__image {
	position: relative;
	margin: 0;
	border-radius: var(--msm-radius);
}

.msm-body__image::before {
	content: "";
	position: absolute;
	inset: 18px -18px -18px 18px;
	border: 2px solid var(--msm-accent);
	border-radius: var(--msm-radius);
	opacity: .5;
	z-index: 0;
}

.msm-body__image img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--msm-radius);
	box-shadow: var(--msm-shadow-lg);
}

.msm-body__text {
	color: var(--msm-ink);
}

.msm-body__prose {
	font-size: 1.125rem;
	line-height: 1.75;
	/* Omkring 65 tegn pr. linje – længere linjer er trættende at læse. */
	max-width: 62ch;
}

.msm-body__prose > *:first-child {
	margin-top: 0;
}

.msm-body__prose > *:last-child {
	margin-bottom: 0;
}

.msm-body__prose h2,
.msm-body__prose h3 {
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
	margin: 1.6em 0 .5em;
}

.msm-body__prose h2 { font-size: 1.6rem; }
.msm-body__prose h3 { font-size: 1.3rem; }

.msm-body__prose p {
	margin: 0 0 1.1em;
}

/* Første afsnit som manchet – giver teksten et anslag. */
.msm-body__prose > p:first-of-type {
	font-size: 1.3rem;
	line-height: 1.6;
	font-weight: 500;
	color: var(--msm-ink);
	margin-bottom: 1.3em;
}

.msm-body__prose a {
	color: var(--msm-accent);
	text-underline-offset: 3px;
}

/* Dobbelt klasse, fordi .msm-btn.msm-btn nulstiller margin med samme
   specificitet – en enkelt klasse her ville tabe, og knappen ville klistre
   op ad teksten. */
.msm-btn.msm-body__cta {
	margin-top: 36px;
}

/* ------------------------------------------------------------ Priser fra */

.msm-price {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
	padding: 18px 22px;
	border-radius: 12px;
	/* Tonet i accentfarven frem for en fuld ramme: boksen skal træde frem,
	   men ikke konkurrere med "Forespørg nu"-knappen lige under. */
	background: color-mix(in srgb, var(--msm-accent) 8%, transparent);
	border-left: 3px solid var(--msm-accent);
}

.msm-price__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--msm-accent) 16%, transparent);
	color: var(--msm-accent);
}

.msm-price__text {
	margin: 0;
	color: var(--msm-ink);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
}

/* ----------------------------------------------------------- Video */

.msm-video {
	margin-top: 64px;
}

.msm-video__grid {
	display: grid;
	gap: 24px;
}

/* Én video fylder bredden. To står side om side. Tre lægger den første stort
   øverst og de to øvrige under – så det ikke bliver tre smalle strimler. */
.msm-video__grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.msm-video__grid--3 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.msm-video__grid--3 .msm-video__frame:first-child {
	grid-column: 1 / -1;
}

.msm-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--msm-radius);
	overflow: hidden;
	cursor: pointer;
	background: #000;
	box-shadow: var(--msm-shadow-lg);
}

.msm-video__frame:focus-visible {
	outline: 3px solid var(--msm-accent);
	outline-offset: 3px;
}

.msm-video__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease, filter .3s ease;
}

.msm-video__frame:hover .msm-video__thumb {
	transform: scale(1.03);
	filter: brightness(.85);
}

.msm-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: transform .2s ease;
	pointer-events: none;
}

.msm-video__play-bg {
	fill: #14161a;
	fill-opacity: .8;
	transition: fill .2s ease, fill-opacity .2s ease;
}

.msm-video__frame:hover .msm-video__play {
	transform: translate(-50%, -50%) scale(1.1);
}

.msm-video__frame:hover .msm-video__play-bg {
	fill: #cc0000;
	fill-opacity: 1;
}

.msm-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ----------------------------------------------------------- Grid */

.msm-grid-section {
	padding: 72px 0;
}

.msm-grid__heading {
	margin: 0 0 40px;
	font-size: clamp(1.5rem, 3vw, 2.125rem);
	font-weight: 800;
	letter-spacing: -.01em;
	text-align: center;
	color: var(--msm-ink);
}

/* --------------------------------------------------- Filtrering */

.msm-filters {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 40px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--msm-line);
}

.msm-filter {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.msm-filter__label {
	flex: none;
	min-width: 84px;
	color: var(--msm-muted);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.msm-filter__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.msm-filter__btn {
	padding: 9px 18px;
	border: 1px solid var(--msm-line);
	border-radius: 999px;
	background: #fff;
	color: var(--msm-ink);
	font-family: inherit;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.msm-filter__btn:hover {
	border-color: var(--msm-accent);
	background: color-mix(in srgb, var(--msm-accent) 8%, #fff);
}

.msm-filter__btn:focus-visible {
	outline: 3px solid var(--msm-accent);
	outline-offset: 2px;
}

.msm-filter__btn[aria-pressed="true"] {
	background: var(--msm-accent);
	border-color: var(--msm-accent);
	color: var(--msm-accent-ink);
}

.msm-grid__none {
	padding: 56px 24px;
	text-align: center;
	color: var(--msm-muted);
	font-size: 1.0625rem;
}

.msm-grid {
	display: grid;
	gap: 32px;
}

.msm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.msm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.msm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.msm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--msm-line);
	border-radius: var(--msm-radius);
	overflow: hidden;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* display:flex ovenfor vinder over browserens [hidden] { display: none },
   så filtrerede kort ville ellers blive stående. */
.msm-card[hidden] {
	display: none;
}

.msm-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--msm-shadow-lg);
	border-color: transparent;
}

/* Fokus vises på kortet, selvom det er linket inde i titlen der har fokus. */
.msm-card:focus-within {
	outline: 3px solid var(--msm-accent);
	outline-offset: 3px;
}

.msm-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--msm-bg-soft);
}

.msm-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.msm-card:hover .msm-card__img {
	transform: scale(1.06);
}

.msm-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e9eaec 0%, #d8dade 100%);
}

.msm-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(20, 22, 26, .78);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1;
}

.msm-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 22px 24px;
	flex: 1;
}

.msm-card__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
}

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

/* ------------------------------------------- Mørkt kort (standard) */

.msm-card--dark {
	--msm-card-bg: #0e0f13;
	min-height: 400px;
	justify-content: flex-end;
	background: var(--msm-card-bg);
	border-color: transparent;
}

/* Billedet fylder toppen og fader ned i kortets egen bundfarve, så der ikke
   er nogen synlig kant mellem foto og tekstflade. */
.msm-card--dark .msm-card__media {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 72%;
	aspect-ratio: auto;
	background: none;
}

.msm-card--dark .msm-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(14, 15, 19, 0) 0%,
		rgba(14, 15, 19, .15) 38%,
		rgba(14, 15, 19, .72) 68%,
		var(--msm-card-bg) 96%
	);
}

/* Bevidst UDEN position:relative. Titel-linkets ::after strækkes ud fra
   nærmeste positionerede forælder – er det body'en, dækker klikfladen kun
   teksten, og billedet bliver dødt. z-index virker alligevel her, fordi
   body'en er et flex-item. */
.msm-card--dark .msm-card__body {
	z-index: 1;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	flex: none;
	padding: 26px 24px 26px;
}

.msm-card--dark .msm-card__text {
	min-width: 0;
}

.msm-card--dark .msm-card__title {
	font-size: 1.4rem;
	font-weight: 800;
	margin-bottom: 10px;
}

.msm-card--dark .msm-card__title a {
	color: #fff;
}

.msm-card--dark .msm-card__desc {
	margin: 0;
	color: rgba(255, 255, 255, .62);
	font-size: .9375rem;
	line-height: 1.55;
}

.msm-card--dark .msm-card__badge {
	background: rgba(14, 15, 19, .72);
}

/* Rund pileknap. Den er dekorativ – hele kortet er klikbart via titel-linket. */
.msm-card__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin-bottom: 2px;
	border-radius: 50%;
	background: var(--msm-accent);
	color: var(--msm-accent-ink);
	transition: transform .22s ease, background-color .22s ease;
}

.msm-card--dark:hover .msm-card__go {
	transform: translateX(3px) scale(1.06);
}

.msm-card--dark:hover {
	border-color: transparent;
}

.msm-card--dark .msm-card__placeholder {
	background: linear-gradient(135deg, #23252c 0%, #14161a 100%);
}

/* Strækker titel-linket ud over hele kortet, så kortet er klikbart
   uden at der skal ligge flere identiske links i markup'en. */
.msm-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.msm-card__title a:focus-visible {
	outline: none;
}

.msm-card__desc {
	margin: 0;
	color: var(--msm-muted);
	font-size: .9375rem;
	line-height: 1.55;
}

.msm-card__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	padding-top: 16px;
	color: var(--msm-accent);
	font-size: .9375rem;
	font-weight: 700;
}

.msm-card__arrow {
	transition: transform .22s ease;
}

.msm-card:hover .msm-card__arrow {
	transform: translateX(4px);
}

.msm-empty {
	padding: 48px 24px;
	text-align: center;
	color: var(--msm-muted);
}

/* ----------------------------------------------------------- Formular */

/*
 * Booking-sektionen er mørk med vilje. Hele artistsiden var hvid – hero,
 * tekst, video og formular i ét lyst forløb – og formularen forsvandt i det.
 * Den mørke flade giver siden rytme (mørk hero → lys tekst → mørk formular)
 * og gør forespørgslen til sidens tydelige omdrejningspunkt.
 */
.msm-book {
	position: relative;
	padding: 96px 0 104px;
	margin-top: 80px;
	background: var(--msm-dark);
	scroll-margin-top: 90px;
	overflow: hidden;
}

/* Svagt accentskær bag kortet, så fladen ikke er helt død. */
.msm-book::before {
	content: "";
	position: absolute;
	top: -30%;
	left: 50%;
	width: 900px;
	height: 900px;
	transform: translateX(-50%);
	background: radial-gradient(circle, color-mix(in srgb, var(--msm-accent) 16%, transparent) 0%, transparent 62%);
	pointer-events: none;
}

.msm-book__card {
	position: relative;
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 20px;
	padding: 48px;
	backdrop-filter: blur(8px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}

.msm-book__head {
	text-align: center;
	margin-bottom: 36px;
}

.msm-book__title {
	margin: 0 0 12px;
	font-size: clamp(1.5rem, 3.2vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.15;
	text-wrap: balance;
	color: #fff;
}

.msm-book__intro {
	margin: 0 auto;
	max-width: 46ch;
	color: rgba(255, 255, 255, .62);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.msm-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.msm-form__field {
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
}

.msm-form__field label {
	margin-bottom: 8px;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .8);
}

.msm-req {
	color: var(--msm-accent);
}

/* .msm-book foran giver 0,2,1 – temaets input-regler (typisk 0,1,1) taber. */
.msm-book .msm-form input[type="text"],
.msm-book .msm-form input[type="tel"],
.msm-book .msm-form input[type="email"],
.msm-book .msm-form textarea {
	width: 100%;
	padding: 15px 17px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 10px;
	background: rgba(255, 255, 255, .05);
	font-family: var(--msm-font-body);
	font-size: 1rem;
	color: #fff;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.msm-book .msm-form input::placeholder,
.msm-book .msm-form textarea::placeholder {
	color: rgba(255, 255, 255, .35);
}

.msm-book .msm-form input:focus,
.msm-book .msm-form textarea:focus {
	outline: none;
	background: rgba(255, 255, 255, .09);
	border-color: var(--msm-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--msm-accent) 22%, transparent);
}

.msm-book .msm-form textarea {
	resize: vertical;
	min-height: 130px;
}

.msm-book .msm-form .has-error input,
.msm-book .msm-form .has-error textarea {
	border-color: #f87171;
	background: rgba(248, 113, 113, .1);
}

.msm-error {
	display: none;
	margin-top: 6px;
	color: #fca5a5;
	font-size: .8125rem;
	font-weight: 500;
}

.msm-form__field.has-error .msm-error {
	display: block;
}

.msm-form__footer {
	margin-top: 28px;
	text-align: center;
}

.msm-form__submit {
	min-width: 220px;
}

.msm-form__note {
	margin: 16px 0 0;
	text-align: center;
	font-size: .9375rem;
	color: #fca5a5;
	min-height: 0;
}

.msm-form__note:empty {
	margin: 0;
}

/* Honeypot – ude af syne for mennesker, men ikke display:none,
   som de mere avancerede bots kigger efter. */
.msm-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Spinner i knappen mens der sendes. Farven følger knappens tekstfarve,
   så den også kan ses, hvis accentfarven skiftes til noget mørkt. */
.msm-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid color-mix(in srgb, var(--msm-accent-ink) 25%, transparent);
	border-top-color: var(--msm-accent-ink);
	border-radius: 50%;
	animation: msm-spin .7s linear infinite;
}

.msm-form.is-sending .msm-spinner {
	display: block;
}

@keyframes msm-spin {
	to { transform: rotate(360deg); }
}

/* -------------------------------------------- Inaktiv artist (formular) */

.msm-book__card--unavailable {
	text-align: center;
	padding: 52px 48px;
	background: rgba(255, 255, 255, .03);
	border-style: dashed;
	border-color: rgba(255, 255, 255, .16);
	box-shadow: none;
}

.msm-unavailable__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: rgba(245, 158, 11, .16);
	color: #fbbf24;
}

.msm-unavailable__title {
	margin: 0 0 12px;
	font-size: clamp(1.3rem, 2.6vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -.025em;
	text-wrap: balance;
	color: #fff;
}

.msm-unavailable__text {
	margin: 0 auto;
	max-width: 520px;
	color: rgba(255, 255, 255, .58);
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* Temaet definerer normalt .screen-reader-text, men ikke alle gør – og
   filterets statusbesked må aldrig blive synlig. */
.msm-grid-section .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;
}

/* ----------------------------------------------------------- Tak-besked */

.msm-thanks {
	text-align: center;
	padding: 24px 0 8px;
	animation: msm-fade-in .45s ease both;
}

.msm-thanks__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: 22px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--msm-accent) 14%, transparent);
	color: var(--msm-accent);
	animation: msm-pop .45s .12s cubic-bezier(.34, 1.56, .64, 1) both;
}

.msm-thanks__title {
	margin: 0 0 10px;
	font-size: clamp(1.4rem, 3vw, 1.875rem);
	font-weight: 800;
	letter-spacing: -.025em;
	color: #fff;
}

.msm-thanks__text {
	margin: 0 auto;
	max-width: 460px;
	color: rgba(255, 255, 255, .62);
	font-size: 1.0625rem;
	line-height: 1.65;
}

@keyframes msm-fade-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

@keyframes msm-pop {
	from { opacity: 0; transform: scale(.5); }
	to   { opacity: 1; transform: scale(1); }
}

/* ----------------------------------------------------------- Responsivt */

@media (max-width: 1024px) {
	.msm-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.msm-body__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
		max-width: 720px;
		margin: 0 auto;
	}

	/* Den forskudte ramme lever i mellemrummet mellem billede og tekst.
	   I én kolonne findes det mellemrum ikke, og rammen ville stikke helt
	   ud til skærmkanten. */
	.msm-body__image::before {
		display: none;
	}

	/* Baggrundsmønstret er kun til desktop. På mobil og tablet ligger teksten
	   tæt på hele fladen, og mønstret ville ligge som støj bag læseteksten
	   frem for at fylde tom plads ud. */
	.msm-body::before {
		display: none;
	}
}

@media (max-width: 782px) {
	.msm-grid--3,
	.msm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.msm-hero { min-height: 460px; padding: 72px 20px; }
	.msm-body { padding: 60px 0 16px; }
	.msm-grid-section { padding: 56px 0; }
	.msm-book { padding: 64px 0 72px; margin-top: 56px; }
	.msm-book__card { padding: 32px 22px; }
	.msm-book__card--unavailable { padding: 40px 22px; }
	.msm-body__prose > p:first-of-type { font-size: 1.175rem; }
	.msm-video { margin-top: 48px; }

	/* Label over knapperne frem for ved siden af – ellers bliver der
	   for lidt plads til selve filterknapperne. */
	.msm-filter {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

@media (max-width: 560px) {
	.msm-grid--2,
	.msm-grid--3,
	.msm-grid--4 { grid-template-columns: minmax(0, 1fr); }
	.msm-grid { gap: 24px; }

	/* Kortet er nu fuld bredde – uden en lavere højde bliver det uforholds-
	   mæssigt højt, og teksten sejler rundt i bunden. */
	.msm-card--dark { min-height: 330px; }
	.msm-card--dark .msm-card__media { height: 68%; }
	.msm-card--dark .msm-card__body { padding: 22px 20px; }

	.msm-form__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.msm-container { padding: 0 18px; }
	.msm-form__submit { width: 100%; }
	.msm-video { margin-top: 44px; }

	/* Videoerne stables på mobil – to eller tre ved siden af hinanden bliver
	   for smalle at se på en telefon. */
	.msm-video__grid--2,
	.msm-video__grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.msm-video__grid { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.msm-card,
	.msm-card__img,
	.msm-btn,
	.msm-video__thumb,
	.msm-video__play,
	.msm-card__arrow {
		transition: none;
	}

	.msm-thanks,
	.msm-thanks__icon {
		animation: none;
	}

	.msm-card:hover { transform: none; }
	.msm-card:hover .msm-card__img { transform: none; }
	.msm-btn--primary:hover { transform: none; }
}