/* Black Month-bannerne (design 11–15 under "Start fra") og nedtællingens
   tre Black Month-designs. Indlæses sammen med banner-blocks.css: på sitet,
   i editoren og i "Opret"-billederne.

   Markup: VTP_Banner_Designs — roden har data-vtp-bm="21|34|41|43|45",
   delene data-bm="…". Data-attributter frem for klasser, fordi
   GenerateBlocks gemmer dem uændret i htmlAttributes.

   Skalering: hele banneret er tegnet i 1200 px, og --u er 1/1200 af
   bannerets bredde (container-enhed). Alt måles i --u, så banneret skrumper
   proportionalt ned til 640 px. Smallere end det stables det om (nederst).

   Skrifttyperne ligger i pluginnet (assets/fonts, OFL) — ikke Google Fonts,
   som sender de besøgendes IP til Google. Browseren henter kun de snit,
   et banner på siden faktisk bruger. */

@font-face { font-family: 'VTP Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/anton-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: 'VTP Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/anton-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'VTP DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/dm-mono-400-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: 'VTP DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/dm-mono-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'VTP DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/dm-mono-500-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: 'VTP DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/dm-mono-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'VTP Montserrat'; font-style: normal; font-weight: 500 700; 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: 'VTP Montserrat'; font-style: normal; font-weight: 500 700; 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'VTP Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/cormorant-garamond-500-italic-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: 'VTP Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/cormorant-garamond-500-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ── Fælles ──────────────────────────────────────────────────────── */
[data-vtp-bm] {
	--u: calc( 100cqw / 1200 );
	--bm-black: #070707;
	--bm-gold: #D4AF37;
	--bm-gold-light: #F3D98B;
	--bm-gold-dark: #0f0d08;
	--bm-muted: #A39E92;
	--bm-green: #02DE72;
	--bm-navy: #051929;
	--bm-navy-deep: #03111d;
	--bm-navy-muted: #9FB0BF;
	--bm-anton: 'VTP Anton', Impact, 'Arial Narrow', sans-serif;
	--bm-mono: 'VTP DM Mono', ui-monospace, Menlo, monospace;
	--bm-sans: 'VTP Montserrat', system-ui, sans-serif;
	--bm-serif: 'VTP Cormorant Garamond', Georgia, serif;
	--bm-foil: linear-gradient( 100deg, #8C6B1F 0%, #F6E3A1 24%, #C9A13B 46%, #FFF3C8 62%, #B8892B 82%, #6E5418 100% );

	container: vtpbm / inline-size;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	/* Luft til den grønne glød, som går UDAD og ikke må klippes. */
	margin: 30px auto;
	padding: 0;
	color: #F5F1E6;
	font-family: var( --bm-mono );
	font-weight: 400;
	line-height: 1.2;
	text-align: left;
	box-shadow:
		0 0 0 1px rgba( 2, 222, 114, 0.85 ),
		0 0 22px 4px rgba( 2, 222, 114, 0.55 ),
		0 0 60px 14px rgba( 2, 222, 114, 0.22 );
}

[data-vtp-bm] *,
[data-vtp-bm] *::before,
[data-vtp-bm] *::after {
	box-sizing: border-box;
}

[data-vtp-bm] [data-bm="canvas"] {
	position: relative;
	overflow: hidden;
	height: calc( var( --u ) * 350 );
	background: var( --bm-black );
}

[data-vtp-bm="34"] [data-bm="canvas"],
[data-vtp-bm="45"] [data-bm="canvas"] {
	height: calc( var( --u ) * 300 );
}

/* Slår temaets ".entry-content h2/p" (0,1,1), men taber til delenes egne
   regler herunder (samme 0,2,0, og de står senere). */
[data-vtp-bm] :where( h2, p, span )[data-bm] {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

/* Guldfolie og guldkontur */
[data-vtp-bm] [data-bm-fx="foil"] {
	background: var( --bm-foil );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

[data-vtp-bm] [data-bm-fx="outline"] {
	color: transparent;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: max( 1px, calc( var( --u ) * 1.5 ) ) var( --bm-gold );
}

/* Guldteksturen (et almindeligt billede, så det kan udskiftes i editoren) */
[data-vtp-bm] .vtp-bm-texture {
	position: absolute;
	margin: 0 !important;
	padding: 0;
	max-width: none;
	display: block;
	pointer-events: none;
}

[data-vtp-bm] .vtp-bm-texture img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
}

/* ── Tickere ─────────────────────────────────────────────────────────
   Sporet står stille, indtil banner-frontend.js har fyldt det op og lagt
   det én gang til (data-bm-ready). I editoren kører scriptet ikke, så dér
   står teksten stille og kan rettes. */
[data-vtp-bm] [data-bm-dir] {
	display: flex;
	flex: none;
	align-items: center;
	width: max-content;
	white-space: nowrap;
	font-family: var( --bm-anton );
	font-weight: 400;
	line-height: 1;
	will-change: transform;
}

[data-vtp-bm] [data-bm-dir] > * {
	flex: none;
	margin: 0;
	padding: 0;
}

[data-vtp-bm] [data-bm-ready][data-bm-dir="left"] {
	animation: vtp-bm-left 40s linear infinite;
}

[data-vtp-bm] [data-bm-ready][data-bm-dir="right"] {
	animation: vtp-bm-right 40s linear infinite;
}

@keyframes vtp-bm-left {
	from { transform: translateX( 0 ); }
	to { transform: translateX( -50% ); }
}

@keyframes vtp-bm-right {
	from { transform: translateX( -50% ); }
	to { transform: translateX( 0 ); }
}

/* Skilletegn mellem ordene sættes af CSS, så de ikke skal skrives */
[data-vtp-bm] [data-bm-sep] > *::after {
	display: inline-block;
	-webkit-text-fill-color: currentColor;
	-webkit-text-stroke: 0;
	background: none;
}

[data-vtp-bm] [data-bm-sep="dot"] > *::after { content: "●"; }
[data-vtp-bm] [data-bm-sep="x"] > *::after { content: "✕"; }
[data-vtp-bm] [data-bm-sep="star"] > *::after { content: "✦"; }

/* ── 21 + 43: mega-ticker ────────────────────────────────────────── */
[data-vtp-bm] [data-bm="row"] {
	position: absolute;
	left: 0;
	width: 100%;
	height: calc( var( --u ) * 84 );
	display: flex;
	align-items: center;
	overflow: hidden;
}

[data-vtp-bm] [data-bm="band"] {
	position: absolute;
	left: calc( var( --u ) * -20 );
	width: calc( var( --u ) * 1240 );
	height: calc( var( --u ) * 52 );
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var( --bm-gold );
}

[data-vtp-bm] [data-bm-row="1"] { top: calc( var( --u ) * 4 ); }
[data-vtp-bm] [data-bm-row="2"] { top: calc( var( --u ) * 96 ); transform: rotate( -2deg ); }
[data-vtp-bm] [data-bm-row="3"] { top: calc( var( --u ) * 170 ); }
[data-vtp-bm] [data-bm-row="4"] { top: calc( var( --u ) * 272 ); transform: rotate( 1.5deg ); }

[data-vtp-bm] [data-bm="row"] [data-bm-dir] {
	font-size: calc( var( --u ) * 72 );
}

[data-vtp-bm] [data-bm="row"] [data-bm-dir] > * {
	margin-right: calc( var( --u ) * 34 );
}

[data-vtp-bm] [data-bm="band"] [data-bm-dir] {
	font-size: calc( var( --u ) * 30 );
	color: var( --bm-black );
}

[data-vtp-bm] [data-bm="band"] [data-bm-dir] > * {
	margin-right: calc( var( --u ) * 26 );
}

[data-vtp-bm] [data-bm="band"] [data-bm-dir] > *::after {
	margin-left: calc( var( --u ) * 26 );
}

[data-vtp-bm] [data-bm="center"] {
	position: absolute;
	left: calc( var( --u ) * 330 );
	top: calc( var( --u ) * 62 );
	width: calc( var( --u ) * 540 );
	height: calc( var( --u ) * 226 );
	padding: calc( var( --u ) * 22 ) calc( var( --u ) * 28 );
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	background: var( --bm-black );
	border: 1px solid var( --bm-gold );
	outline: 1px solid var( --bm-gold );
	outline-offset: calc( var( --u ) * 5 );
	box-shadow: 0 0 0 calc( var( --u ) * 14 ) var( --bm-black ), 0 0 calc( var( --u ) * 60 ) calc( var( --u ) * 30 ) rgba( 7, 7, 7, 0.9 );
}

/* 43: guld bag tickerne, vignet og frostet glas */
[data-vtp-bm="43"] .vtp-bm-texture {
	left: calc( var( --u ) * -40 );
	top: calc( var( --u ) * -60 );
	width: calc( var( --u ) * 1280 );
	height: calc( var( --u ) * 470 );
	opacity: 0.7;
	animation: vtp-bm-kb43 20s ease-in-out infinite alternate;
}

@keyframes vtp-bm-kb43 {
	from { transform: scale( 1 ); }
	to { transform: scale( 1.15 ) translateY( calc( var( --u ) * -12 ) ); }
}

[data-vtp-bm] [data-bm="vignette"] {
	position: absolute;
	inset: 0;
	background: radial-gradient( ellipse at 50% 50%, rgba( 7, 7, 7, 0 ) 30%, rgba( 7, 7, 7, 0.75 ) 100% );
	pointer-events: none;
}

[data-vtp-bm="43"] [data-bm="center"] {
	/* Uden backdrop-filter er boksen stadig næsten sort og læsbar. */
	background: rgba( 7, 7, 7, 0.86 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	box-shadow: 0 0 calc( var( --u ) * 60 ) calc( var( --u ) * 20 ) rgba( 7, 7, 7, 0.8 );
}

/* ── 34: Vandklar-guiden ─────────────────────────────────────────── */
[data-vtp-bm="34"] [data-bm="canvas"] {
	background: var( --bm-navy );
	font-family: var( --bm-sans );
}

[data-vtp-bm] [data-bm="hazard-top"],
[data-vtp-bm] [data-bm="hazard-bottom"] {
	position: absolute;
	left: 0;
	width: 100%;
	height: calc( var( --u ) * 12 );
	background: repeating-linear-gradient( -45deg, var( --bm-gold ) 0 calc( var( --u ) * 12 ), var( --bm-navy ) calc( var( --u ) * 12 ) calc( var( --u ) * 24 ) );
}

[data-vtp-bm] [data-bm="hazard-top"] { top: 0; }
[data-vtp-bm] [data-bm="hazard-bottom"] { bottom: 0; }

[data-vtp-bm="34"] [data-bm="left"] {
	position: absolute;
	left: calc( var( --u ) * 56 );
	top: calc( var( --u ) * 12 );
	width: calc( var( --u ) * 640 );
	height: calc( var( --u ) * 276 );
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: calc( var( --u ) * 14 );
}

[data-vtp-bm="34"] [data-bm="eyebrow"] {
	display: inline-flex;
	align-items: center;
	gap: calc( var( --u ) * 10 );
	font-size: max( 9px, calc( var( --u ) * 11 ) );
	font-weight: 700;
	letter-spacing: 0.24em;
	color: var( --bm-gold );
}

[data-vtp-bm="34"] [data-bm="eyebrow"]::before {
	content: "";
	flex: none;
	width: max( 6px, calc( var( --u ) * 8 ) );
	height: max( 6px, calc( var( --u ) * 8 ) );
	border-radius: 50%;
	background: var( --bm-green );
}

[data-vtp-bm="34"] [data-bm="title"] {
	font-family: var( --bm-anton );
	font-size: calc( var( --u ) * 76 );
	line-height: 0.95;
}

[data-vtp-bm="34"] [data-bm="chips"] {
	display: flex;
	flex-wrap: wrap;
	gap: calc( var( --u ) * 10 );
}

[data-vtp-bm="34"] [data-bm="right"] {
	position: absolute;
	right: calc( var( --u ) * 56 );
	top: calc( var( --u ) * 12 );
	height: calc( var( --u ) * 276 );
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	gap: calc( var( --u ) * 14 );
}

/* ── 41: smeltet guld ────────────────────────────────────────────── */
[data-vtp-bm="41"] .vtp-bm-texture {
	left: calc( var( --u ) * 380 );
	top: calc( var( --u ) * -40 );
	width: calc( var( --u ) * 860 );
	height: calc( var( --u ) * 430 );
	transform-origin: 60% 50%;
	animation: vtp-bm-kb41 18s ease-in-out infinite alternate, vtp-bm-glint 4s ease-in-out infinite;
}

@keyframes vtp-bm-kb41 {
	from { transform: scale( 1 ) translateX( 0 ); }
	to { transform: scale( 1.14 ) translateX( calc( var( --u ) * -30 ) ); }
}

@keyframes vtp-bm-glint {
	0%, 100% { opacity: 0.85; }
	50% { opacity: 1; }
}

[data-vtp-bm] [data-bm="fade"] {
	position: absolute;
	inset: 0;
	background: linear-gradient( 90deg, #070707 0%, #070707 34%, rgba( 7, 7, 7, 0.55 ) 52%, rgba( 7, 7, 7, 0 ) 72% );
	pointer-events: none;
}

[data-vtp-bm="41"] [data-bm="content"] {
	position: absolute;
	left: calc( var( --u ) * 60 );
	top: calc( var( --u ) * 46 );
	width: calc( var( --u ) * 640 );
	/* Plads til nedtællingens etiket, der står øverst (se herunder). */
	padding-top: calc( var( --u ) * 24 );
	display: flex;
	flex-direction: column;
	gap: calc( var( --u ) * 10 );
}

[data-vtp-bm="41"] [data-bm="title"] {
	font-family: var( --bm-anton );
	font-size: calc( var( --u ) * 108 );
	line-height: 0.95;
}

[data-vtp-bm="41"] [data-bm="sub"] {
	font-family: var( --bm-serif );
	font-style: italic;
	font-weight: 500;
	font-size: max( 15px, calc( var( --u ) * 26 ) );
	line-height: 1.2;
}

[data-vtp-bm="41"] [data-bm="cd-row"] {
	display: flex;
	align-items: center;
	gap: calc( var( --u ) * 22 );
	margin-top: calc( var( --u ) * 10 );
}

/* Etiketten ("BLACK MONTH STARTER OM") hører til nedtællingen, men står
   øverst over titlen som i referencen. */
[data-vtp-bm="41"] .vtp-countdown {
	align-items: flex-start;
}

[data-vtp-bm="41"] .vtp-countdown__label {
	position: absolute;
	top: 0;
	left: 0;
}

.editor-styles-wrapper [data-vtp-bm="41"] .vtp-countdown__label {
	position: static;
}

/* ── 45: krydsende tickere ───────────────────────────────────────── */
[data-vtp-bm="45"] .vtp-bm-texture {
	left: 0;
	top: calc( var( --u ) * -40 );
	width: 100%;
	height: calc( var( --u ) * 380 );
	opacity: 0.85;
	animation: vtp-bm-kb45 16s ease-in-out infinite alternate;
}

@keyframes vtp-bm-kb45 {
	from { transform: scale( 1.05 ) translateX( 0 ); }
	to { transform: scale( 1.18 ) translateX( calc( var( --u ) * -40 ) ); }
}

[data-vtp-bm] [data-bm="band-gold"],
[data-vtp-bm] [data-bm="band-black"] {
	position: absolute;
	left: calc( var( --u ) * -200 );
	top: calc( var( --u ) * 122 );
	width: calc( var( --u ) * 1600 );
	height: calc( var( --u ) * 56 );
	display: flex;
	align-items: center;
	overflow: hidden;
}

[data-vtp-bm] [data-bm="band-gold"] {
	transform: rotate( -9deg );
	background: var( --bm-gold );
	box-shadow: 0 calc( var( --u ) * 10 ) calc( var( --u ) * 30 ) rgba( 0, 0, 0, 0.7 );
}

[data-vtp-bm] [data-bm="band-black"] {
	transform: rotate( 9deg );
	background: rgba( 7, 7, 7, 0.92 );
	border-top: max( 1px, calc( var( --u ) * 2 ) ) solid var( --bm-gold );
	border-bottom: max( 1px, calc( var( --u ) * 2 ) ) solid var( --bm-gold );
}

[data-vtp-bm="45"] [data-bm-dir] {
	font-size: calc( var( --u ) * 32 );
}

[data-vtp-bm="45"] [data-bm-dir] > * {
	margin-right: calc( var( --u ) * 30 );
}

[data-vtp-bm="45"] [data-bm-dir] > *::after {
	margin-left: calc( var( --u ) * 30 );
}

[data-vtp-bm] [data-bm="band-gold"] [data-bm-dir] {
	color: var( --bm-black );
}

[data-vtp-bm] [data-bm="band-black"] [data-bm-sep] > *::after {
	color: var( --bm-gold );
}

[data-vtp-bm] [data-bm="tile"] {
	position: absolute;
	left: calc( var( --u ) * 440 );
	top: calc( var( --u ) * 90 );
	width: calc( var( --u ) * 320 );
	height: calc( var( --u ) * 120 );
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc( var( --u ) * 10 );
	background: var( --bm-black );
	border: max( 1px, calc( var( --u ) * 2 ) ) solid var( --bm-gold );
	box-shadow: 0 0 0 calc( var( --u ) * 8 ) var( --bm-black ), 0 0 0 calc( var( --u ) * 9 ) var( --bm-gold ), 0 0 calc( var( --u ) * 50 ) calc( var( --u ) * 20 ) rgba( 0, 0, 0, 0.6 );
}

[data-vtp-bm] [data-bm="tile-title"] {
	font-family: var( --bm-anton );
	font-size: calc( var( --u ) * 50 );
	line-height: 1;
}

/* Hele brikken er ét link: knappens klikflade strækkes ud over brikken
   (et link inde i et link er ikke tilladt). */
[data-vtp-bm] [data-bm="tile"] .vtp-period-button::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* ── Knapper (Periode-knap) ──────────────────────────────────────── */
[data-vtp-bm] .vtp-period-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: max( 36px, calc( var( --u ) * 46 ) );
	padding: 0 calc( var( --u ) * 28 );
	border-radius: 0;
	font-family: var( --bm-mono );
	font-size: max( 11px, calc( var( --u ) * 13 ) );
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 0 calc( var( --u ) * 22 ) rgba( 2, 222, 114, 0.45 );
}

[data-vtp-bm="41"] .vtp-period-button {
	height: max( 36px, calc( var( --u ) * 50 ) );
	padding: 0 calc( var( --u ) * 26 );
}

[data-vtp-bm="34"] .vtp-period-button {
	height: max( 36px, calc( var( --u ) * 48 ) );
	padding: 0 calc( var( --u ) * 24 );
	font-family: var( --bm-sans );
	font-weight: 700;
	letter-spacing: 0.14em;
}

/* Kategoriknapperne i 34: tynd guldramme i stedet for grøn flade */
[data-vtp-bm="34"] [data-bm="chips"] .vtp-period-button {
	height: max( 32px, calc( var( --u ) * 44 ) );
	padding: 0 calc( var( --u ) * 18 );
	border: 1px solid rgba( 212, 175, 55, 0.6 );
	background: transparent !important;
	color: #F5F1E6 !important;
	font-weight: 500;
	letter-spacing: 0.04em;
	box-shadow: none;
}

[data-vtp-bm="34"] [data-bm="chips"] .vtp-period-button:hover,
[data-vtp-bm="34"] [data-bm="chips"] .vtp-period-button:focus {
	border-color: var( --bm-gold );
	color: var( --bm-gold-light ) !important;
	filter: none;
}

[data-vtp-bm="45"] .vtp-period-button {
	height: max( 30px, calc( var( --u ) * 34 ) );
	padding: 0 calc( var( --u ) * 16 );
	font-size: max( 10px, calc( var( --u ) * 12 ) );
	letter-spacing: 0.18em;
	box-shadow: 0 0 calc( var( --u ) * 18 ) rgba( 2, 222, 114, 0.45 );
}

[data-vtp-bm] .vtp-period-button:focus-visible {
	outline: 2px solid var( --bm-gold-light );
	outline-offset: 3px;
}

/* ── Nedtællingens Black Month-designs ───────────────────────────────
   --u findes kun inde i et Black Month-banner; uden for er 1 enhed = 1 px. */
.vtp-countdown--bm-large,
.vtp-countdown--bm-vandklar,
.vtp-countdown--bm-small {
	gap: calc( var( --u, 1px ) * 18 );
}

.vtp-countdown--bm-large .vtp-countdown__label,
.vtp-countdown--bm-small .vtp-countdown__label {
	font-family: 'VTP DM Mono', ui-monospace, Menlo, monospace;
	font-size: max( 9px, calc( var( --u, 1px ) * 11 ) );
	font-weight: 400;
	letter-spacing: 0.26em;
	color: #D4AF37;
}

.vtp-countdown--bm-large .vtp-countdown__unit,
.vtp-countdown--bm-vandklar .vtp-countdown__unit,
.vtp-countdown--bm-small .vtp-countdown__unit {
	position: relative;
	justify-content: center;
	gap: calc( var( --u, 1px ) * 2 );
	border: 1px solid #D4AF37;
}

.vtp-countdown--bm-large .vtp-countdown__num,
.vtp-countdown--bm-vandklar .vtp-countdown__num,
.vtp-countdown--bm-small .vtp-countdown__num {
	font-family: 'VTP Anton', Impact, 'Arial Narrow', sans-serif;
	font-weight: 400;
	color: #F3D98B;
}

.vtp-countdown--bm-large .vtp-countdown__lbl,
.vtp-countdown--bm-small .vtp-countdown__lbl {
	font-family: 'VTP DM Mono', ui-monospace, Menlo, monospace;
	color: #A39E92;
	opacity: 1;
}

.vtp-countdown--bm-large .vtp-countdown__expired,
.vtp-countdown--bm-vandklar .vtp-countdown__expired,
.vtp-countdown--bm-small .vtp-countdown__expired {
	font-family: 'VTP Anton', Impact, 'Arial Narrow', sans-serif;
	font-weight: 400;
	font-size: calc( var( --u, 1px ) * 30 );
	color: #F3D98B;
	letter-spacing: 0.04em;
}

/* Stor (21 og 43): 86 × 80, kolon imellem */
.vtp-countdown--bm-large .vtp-countdown__units {
	gap: calc( var( --u, 1px ) * 26 );
}

.vtp-countdown--bm-large .vtp-countdown__unit {
	width: calc( var( --u, 1px ) * 86 );
	height: calc( var( --u, 1px ) * 80 );
	background: #0f0d08;
}

.vtp-countdown--bm-large .vtp-countdown__unit + .vtp-countdown__unit::before {
	content: ":";
	position: absolute;
	top: 50%;
	left: calc( var( --u, 1px ) * -13 );
	transform: translate( -50%, -55% );
	font-family: 'VTP Anton', Impact, 'Arial Narrow', sans-serif;
	font-size: calc( var( --u, 1px ) * 30 );
	line-height: 1;
	color: #D4AF37;
}

.vtp-countdown--bm-large .vtp-countdown__num {
	font-size: calc( var( --u, 1px ) * 44 );
}

.vtp-countdown--bm-large .vtp-countdown__lbl {
	font-size: max( 8px, calc( var( --u, 1px ) * 10 ) );
	letter-spacing: 0.18em;
}

/* Vandklar (34): 76 × 76 på marineblå */
.vtp-countdown--bm-vandklar {
	align-items: flex-end;
	gap: calc( var( --u, 1px ) * 14 );
}

.vtp-countdown--bm-vandklar .vtp-countdown__label {
	font-family: 'VTP Montserrat', system-ui, sans-serif;
	font-size: max( 9px, calc( var( --u, 1px ) * 11 ) );
	font-weight: 700;
	letter-spacing: 0.22em;
	color: #D4AF37;
}

.vtp-countdown--bm-vandklar .vtp-countdown__units {
	gap: calc( var( --u, 1px ) * 6 );
}

.vtp-countdown--bm-vandklar .vtp-countdown__unit {
	width: calc( var( --u, 1px ) * 76 );
	height: calc( var( --u, 1px ) * 76 );
	background: #03111d;
}

.vtp-countdown--bm-vandklar .vtp-countdown__num {
	font-size: calc( var( --u, 1px ) * 38 );
}

.vtp-countdown--bm-vandklar .vtp-countdown__lbl {
	font-family: 'VTP Montserrat', system-ui, sans-serif;
	font-size: max( 8px, calc( var( --u, 1px ) * 9 ) );
	font-weight: 700;
	letter-spacing: 0.18em;
	color: #9FB0BF;
	opacity: 1;
}

/* Små (41): 64 × 64 */
.vtp-countdown--bm-small .vtp-countdown__label {
	display: flex;
	align-items: center;
	gap: calc( var( --u, 1px ) * 12 );
	font-size: max( 9px, calc( var( --u, 1px ) * 12 ) );
	letter-spacing: 0.24em;
}

.vtp-countdown--bm-small .vtp-countdown__label::before {
	content: "";
	flex: none;
	width: calc( var( --u, 1px ) * 36 );
	height: 1px;
	background: #D4AF37;
}

.vtp-countdown--bm-small .vtp-countdown__units {
	gap: calc( var( --u, 1px ) * 6 );
}

.vtp-countdown--bm-small .vtp-countdown__unit {
	width: calc( var( --u, 1px ) * 64 );
	height: calc( var( --u, 1px ) * 64 );
	background: rgba( 7, 7, 7, 0.75 );
}

.vtp-countdown--bm-small .vtp-countdown__num {
	font-size: calc( var( --u, 1px ) * 32 );
}

.vtp-countdown--bm-small .vtp-countdown__lbl {
	font-size: max( 8px, calc( var( --u, 1px ) * 9 ) );
	letter-spacing: 0.16em;
}

/* ── Mobil: under 640 px stables bannerne om ─────────────────────────
   --u sættes fast, så tal og bokse får en læsbar størrelse. */
@container vtpbm (max-width: 639px) {
	[data-vtp-bm] [data-bm="canvas"] {
		--u: 0.6px;
		height: auto;
	}

	[data-vtp-bm] .vtp-period-button {
		min-height: 44px;
		height: auto;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	/* 21 + 43: kun række 1 og 2, midterboksen fylder bredden */
	[data-vtp-bm] [data-bm-row="3"],
	[data-vtp-bm] [data-bm-row="4"] {
		display: none;
	}

	[data-vtp-bm="21"] [data-bm="canvas"],
	[data-vtp-bm="43"] [data-bm="canvas"] {
		display: flex;
		flex-direction: column;
		padding-bottom: 22px;
	}

	[data-vtp-bm] [data-bm-row="1"],
	[data-vtp-bm] [data-bm-row="2"] {
		position: relative;
		top: auto;
		flex: none;
	}

	[data-vtp-bm] [data-bm-row="1"] {
		height: 60px;
	}

	[data-vtp-bm] [data-bm-row="2"] {
		width: calc( 100% + 40px );
		height: 38px;
		margin: 4px 0 26px;
	}

	[data-vtp-bm] [data-bm="center"] {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		height: auto;
		margin: 0 16px;
		padding: 22px 14px;
		gap: 20px;
		box-shadow: none;
	}

	/* 34: venstre og højre side under hinanden */
	[data-vtp-bm="34"] [data-bm="canvas"] {
		display: flex;
		flex-direction: column;
		gap: 26px;
		padding: 36px 20px;
	}

	[data-vtp-bm="34"] [data-bm="left"],
	[data-vtp-bm="34"] [data-bm="right"] {
		position: static;
		width: auto;
		height: auto;
		align-items: flex-start;
	}

	[data-vtp-bm="34"] .vtp-countdown--bm-vandklar {
		align-items: flex-start;
	}

	[data-vtp-bm="34"] [data-bm="chips"] {
		gap: 8px;
	}

	/* 41: guldet bag hele banneret, mørkere overlay */
	[data-vtp-bm="41"] .vtp-bm-texture {
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	[data-vtp-bm="41"] [data-bm="fade"] {
		background: rgba( 7, 7, 7, 0.72 );
	}

	[data-vtp-bm="41"] [data-bm="content"] {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		padding: 30px 20px 32px;
		gap: 12px;
	}

	[data-vtp-bm="41"] [data-bm="title"] {
		font-size: 56px;
	}

	[data-vtp-bm="41"] [data-bm="cd-row"] {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	[data-vtp-bm="41"] .vtp-countdown__label {
		position: static;
	}

	/* 45: mindre skrå bånd, smallere brik */
	[data-vtp-bm="45"] [data-bm="canvas"] {
		height: 280px;
	}

	[data-vtp-bm="45"] .vtp-bm-texture {
		top: 0;
		height: 100%;
	}

	[data-vtp-bm] [data-bm="band-gold"],
	[data-vtp-bm] [data-bm="band-black"] {
		top: calc( 50% - 19px );
		height: 38px;
	}

	[data-vtp-bm] [data-bm="band-gold"] { transform: rotate( -6deg ); }
	[data-vtp-bm] [data-bm="band-black"] { transform: rotate( 6deg ); }

	[data-vtp-bm="45"] [data-bm-dir] {
		font-size: 22px;
	}

	[data-vtp-bm] [data-bm="tile"] {
		left: 50%;
		top: 50%;
		width: 196px;
		height: 116px;
		gap: 10px;
		transform: translate( -50%, -50% );
	}

	[data-vtp-bm] [data-bm="tile-title"] {
		font-size: 30px;
	}

	[data-vtp-bm="45"] [data-bm="tile"] .vtp-period-button {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* ── Reduceret bevægelse ─────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
	[data-vtp-bm] [data-bm-dir],
	[data-vtp-bm] .vtp-bm-texture {
		animation: none !important;
	}
}