/**
 * BenjaBuilder — Services, frontend.
 *
 * Popup-mekanikken (backdrop, dialog, Content Builder-grid, embeds,
 * tilgængelighed) er en bevidst kopi af Portfolio-modulets frontend.css
 * med `bb-sv-` i stedet for `bb-pf-` — se den fil for uddybende
 * kommentarer om HVORFOR de enkelte regler ser ud som de gør (FLIP-
 * animation, scrollbar-placering, blur-jank osv.).
 *
 * Det NYE her er selve grid'et og kortet:
 *
 *  - Grid'et er FLEXBOX, ikke CSS Grid — så en ufuldstændig sidste række
 *    (fx 5 kort i 3 kolonner -> 3+2) CENTRERES automatisk i stedet for at
 *    ligge venstrejusteret. `justify-content: center` på en wrap'ende
 *    flex-container centrerer den overskydende plads i den sidste,
 *    kortere række — CSS Grid kan ikke det samme uden ekstra tricks.
 *  - Hvert kort har en gyldenbrun tekstboks OVENOVER billedet (i stedet
 *    for hover-overlay PÅ billedet som i Portfolio), samt en altid-synlig
 *    knap centreret på billedet OVENI en mørk hover-overlay.
 *
 * Font: samme selv-hostede Inter som Portfolio/Logo, men egne filer i
 * denne mappe — moduler skal kunne stå helt alene.
 */

@font-face {
	font-family: 'BB Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-400.woff2') format('woff2');
}

@font-face {
	font-family: 'BB Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter-500.woff2') format('woff2');
}

@font-face {
	font-family: 'BB Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-600.woff2') format('woff2');
}

@font-face {
	font-family: 'BB Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inter-700.woff2') format('woff2');
}

.bb-sv-grid,
.bb-sv-modal {
	--bb-sv-columns: 3;
	--bb-sv-gap: clamp(1.5rem, 4vw, 3rem);
	--bb-sv-radius: clamp(0.75rem, 1.6vw, 1.375rem);
	/* Brandfarve til tekstboksen ovenover billedet OG til den altid-synlige
	   knap på billedet — hold de to farver ens for en sammenhængende,
	   "brandet" fornemmelse. Skift disse to for en anden nuance uden at
	   røre resten af CSS'en. (Variabelnavnet der hedder "gold" er
	   historisk fra dengang farven var gylden — ikke omdøbt for ikke at
	   røre unødigt meget; se samme --bb-lg-modal-bg i Logo-modulet.) */
	--bb-sv-gold-bg: #8197ac;
	--bb-sv-gold-fg: #ffffff;
	--bb-sv-overlay: rgba(12, 12, 14, 0.5);
	--bb-sv-modal-bg: #0c0c0e;
	--bb-sv-modal-fg: #ffffff;
	--bb-sv-modal-accent: #ffffff;
	--bb-sv-modal-accent-fg: #0c0c0e;
	--bb-sv-accent: #16181d;
	--bb-sv-ease: cubic-bezier(0.22, 0.75, 0.28, 1);
	--bb-sv-font: 'BB Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--bb-sv-modal-pad: clamp(1.25rem, 4vw, 3rem);
	font-family: var(--bb-sv-font);
}

/* ==================================================================
 * Grid — flexbox, IKKE CSS Grid (se filens toppkommentar for hvorfor).
 * ================================================================== */

.bb-sv-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* align-items: stretch (flexbox-standarden — angivet eksplicit her for
	   tydelighed) gør at hvert kort i en RÆKKE stækkes til samme højde som
	   det højeste kort i netop dén række. Se .bb-sv-card__text for hvor
	   den ekstra højde rent faktisk bruges hen. */
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: var(--bb-sv-gap);
}

.bb-sv-card {
	/* flex-grow:0 er afgørende: kortene skal IKKE strække sig for at
	   udfylde en ufuldstændig sidste række — de skal beholde samme
	   bredde som resten og bare stå centreret med luft omkring. */
	flex: 0 1 calc((100% - (var(--bb-sv-columns) - 1) * var(--bb-sv-gap)) / var(--bb-sv-columns));
	display: flex;
	flex-direction: column;
	margin: 0;
	border-radius: var(--bb-sv-radius);
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
	min-width: 0;
}

@media (max-width: 980px) {
	.bb-sv-card {
		flex-basis: calc((100% - var(--bb-sv-gap)) / 2);
	}
}

@media (max-width: 560px) {
	.bb-sv-card {
		flex-basis: 100%;
	}
}

/* Tekstboks ovenover billedet ---------------------------------------- */

/*
 * flex: 1 1 auto + display:flex herunder gør at DENNE boks — ikke
 * billedet — æder al den ekstra højde et kort får tildelt via
 * .bb-sv-grid's align-items:stretch. Et kort med kort tekst ("Mastering")
 * får dermed samme TOTALHØJDE som naboer med mere tekst, ved at
 * tekstboksen bliver højere (med indholdet centreret lodret i den) —
 * billedet forbliver 100% uændret kvadratisk i alle kort, uanset
 * tekstmængde.
 */
.bb-sv-card__text {
	background: var(--bb-sv-gold-bg);
	color: var(--bb-sv-gold-fg);
	text-align: center;
	padding: clamp(1rem, 3vw, 1.75rem) clamp(0.875rem, 2.5vw, 1.5rem);
	border-radius: var(--bb-sv-radius) var(--bb-sv-radius) 0 0;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	/* Top-justeret (IKKE centreret): titel/tekst skal altid starte samme
	   sted foroven, uanset tekstmængde. Den ekstra højde fra
	   align-items:stretch lander derfor som luft NEDERST i boksen, under
	   teksten — ikke fordelt som padding ovenover. */
	justify-content: flex-start;
}

.bb-sv-card__title {
	margin: 0 0 0.5em;
	font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.3;
	/* Hvid som resten af tekstboksen (--bb-sv-gold-fg). */
	color: var(--bb-sv-gold-fg);
}

.bb-sv-card__desc {
	margin: 0;
	font-size: clamp(0.8125rem, 1.1vw, 0.9375rem);
	line-height: 1.55;
}

/* Klikflade — nulstiller browserens knap-styling. */
.bb-sv-card__trigger {
	/* flex: 0 0 auto — modstykket til .bb-sv-card__text: denne boks må
	   ALDRIG vokse eller skrumpe, så billedet holder nøjagtig samme
	   størrelse i alle kort uanset hvor meget ekstra plads kortet får. */
	flex: 0 0 auto;
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.bb-sv-card__trigger--static {
	cursor: default;
}

.bb-sv-card__trigger:focus-visible {
	outline: 2px solid var(--bb-sv-accent);
	outline-offset: -3px;
}

/*
 * Kvadratisk billedflade.
 *
 * border-radius står HER (de nederste hjørner), IKKE kun på den yderste
 * .bb-sv-card — det er bevidst dobbeltsikring mod en kendt browser-kvirk:
 * en rundet, klippende forælder (overflow:hidden) med et transformeret
 * barn flere niveauer nede (billedets hover-zoom herunder) kan i nogle
 * browsere miste rundingen midlertidigt ved gentegning, fx lige efter en
 * DOM-opdatering. Ved at runde .bb-sv-card__media OG billedet selv
 * (via border-radius: inherit nedenfor), er der intet der er afhængigt
 * af at klipningen længere oppe i træet altid regner rigtigt.
 */
.bb-sv-card__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: transparent;
	isolation: isolate;
	border-radius: 0 0 var(--bb-sv-radius) var(--bb-sv-radius);
}

/*
 * Selektoren er bevidst skrevet med to niveauer + !important, samme grund
 * som i Portfolio/Logo: mange temaer sætter ".entry-content img
 * { height: auto; max-width: 100%; }", som ellers ville vinde over en
 * enkelt klasse og forhindre billedet i at fylde den kvadratiske boks.
 */
.bb-sv-card__media img,
.bb-sv-card__image {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover;
	border-radius: inherit;
	transform: scale(1);
	transition: transform 0.5s var(--bb-sv-ease);
}

.bb-sv-card__trigger:not(.bb-sv-card__trigger--static):hover .bb-sv-card__image,
.bb-sv-card__trigger:not(.bb-sv-card__trigger--static):focus-visible .bb-sv-card__image {
	transform: scale(1.05);
}

/* Mørk hover-overlay — ren tone, ingen tekst (teksten sidder ovenover
   billedet, ikke oveni det, i modsætning til Portfolio). */
.bb-sv-card__overlay {
	position: absolute;
	inset: 0;
	background: var(--bb-sv-overlay);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.bb-sv-card__trigger:not(.bb-sv-card__trigger--static):hover .bb-sv-card__overlay,
.bb-sv-card__trigger:not(.bb-sv-card__trigger--static):focus-visible .bb-sv-card__overlay {
	opacity: 1;
}

/*
 * Den altid-synlige, centrerede knap. BEVIDST en <span>, ikke en indlejret
 * <button> — hele billedet (.bb-sv-card__trigger) er allerede ÉT klik-mål,
 * så en ægte knap indeni ville enten være ugyldig HTML (knap i knap) eller
 * kræve to overlappende klik-håndteringer for skærmlæsere at rede sig i.
 * Klikker man her, rammer man i praksis stadig den omsluttende knap.
 */
.bb-sv-card__button {
	position: absolute;
	left: 50%;
	bottom: clamp(0.875rem, 4%, 1.5rem);
	z-index: 2;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.65em 1.5em;
	border-radius: 999px;
	background: var(--bb-sv-gold-bg);
	color: var(--bb-sv-gold-fg);
	font-size: clamp(0.8125rem, 1.1vw, 0.9375rem);
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
	transition: transform 0.25s var(--bb-sv-ease), box-shadow 0.25s ease;
}

.bb-sv-card__trigger:not(.bb-sv-card__trigger--static):hover .bb-sv-card__button,
.bb-sv-card__trigger:not(.bb-sv-card__trigger--static):focus-visible .bb-sv-card__button {
	transform: translateX(-50%) scale(1.08);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
}

/* ==================================================================
 * Popup / lightbox — se modules/portfolio/assets/css/frontend.css for
 * den fulde forklaring bag hver enkelt regel herunder.
 * ================================================================== */

body.bb-sv-modal-open {
	overflow: hidden;
}

.bb-sv-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(0.75rem, 4vw, 3rem);
	box-sizing: border-box;
}

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

.bb-sv-modal *,
.bb-sv-modal *::before,
.bb-sv-modal *::after {
	box-sizing: border-box;
}

.bb-sv-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 12, 0.78);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.38s ease;
	will-change: opacity;
	cursor: pointer;
}

.bb-sv-modal.is-open .bb-sv-modal__backdrop {
	opacity: 1;
	transition-duration: 0.6s;
}

.bb-sv-modal__dialog {
	position: relative;
	width: min(1100px, 100%);
	max-height: min(90vh, 100%);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--bb-sv-modal-bg);
	color: var(--bb-sv-modal-fg);
	border-radius: clamp(0.875rem, 2vw, 1.5rem);
	padding: var(--bb-sv-modal-pad);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
	opacity: 0;
	transform: scale(0.9) translateY(22px);
	transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.4, 0, 1, 1);
	will-change: opacity, transform;
}

.bb-sv-modal.is-open .bb-sv-modal__dialog {
	opacity: 1;
	transform: scale(1) translateY(0);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/*
 * Popup-baggrund: item'ets eget billede (::before) med et farvet filter
 * ovenpå (::after). Begge er rene lag bag indholdet — se z-index på
 * .bb-sv-modal__content og .bb-sv-modal__close. De klippes automatisk til
 * dialogens runde hjørner af dens overflow: hidden + border-radius.
 *
 * Variablerne sættes pr. item af frontend.js (applyBackdrop) ud fra
 * data-bb-sv-*-attributterne på det klikkede kort:
 *   --bb-sv-bg-image         url("...") til item'ets billede
 *   --bb-sv-overlay-color    filterets farve
 *   --bb-sv-overlay-opacity  filterets dækning, 0-1
 * Uden dem (popup'en lukket/tom) er billedet "none" og filteret helt
 * gennemsigtigt, så intet skinner igennem.
 */
.bb-sv-modal__dialog::before,
.bb-sv-modal__dialog::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.bb-sv-modal__dialog::before {
	background: var(--bb-sv-bg-image, none) center / cover no-repeat;
	/* Toner ind når billedet er hentet — .has-bg sættes af frontend.js. */
	opacity: 0;
	transition: opacity 0.6s ease;
}

.bb-sv-modal__dialog.has-bg::before {
	opacity: 1;
}

.bb-sv-modal__dialog::after {
	background: var(--bb-sv-overlay-color, #000);
	opacity: var(--bb-sv-overlay-opacity, 0);
}

/*
 * Lys filterflade (fx lysegrå/blågrå i høj dækning): hvid tekst ville være
 * næsten ulæselig, så teksten, link-knappen, luk-knappen og scrollbaren
 * skifter til mørke. Hvornår dette gælder afgøres i PHP (overlay_tone() i
 * BenjaBuilder_Helpers) og sættes som data-bb-sv-tone på dialogen.
 */
.bb-sv-modal__dialog[data-bb-sv-tone="light"] {
	--bb-sv-modal-fg: #000000;
	--bb-sv-modal-accent: #0c0c0e;
	--bb-sv-modal-accent-fg: #ffffff;
}

.bb-sv-modal__dialog[data-bb-sv-tone="light"] .bb-sv-modal__close {
	background: rgba(0, 0, 0, 0.1);
}

.bb-sv-modal__dialog[data-bb-sv-tone="light"] .bb-sv-modal__close:hover,
.bb-sv-modal__dialog[data-bb-sv-tone="light"] .bb-sv-modal__close:focus-visible {
	background: rgba(0, 0, 0, 0.18);
}

.bb-sv-modal__dialog[data-bb-sv-tone="light"] .bb-sv-modal__content {
	scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

.bb-sv-modal__dialog[data-bb-sv-tone="light"] .bb-sv-modal__content::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.3);
}

.bb-sv-modal__dialog[data-bb-sv-tone="light"] .bb-sv-modal__content::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.45);
}

.bb-sv-modal__close {
	position: absolute;
	top: clamp(0.5rem, 1.5vw, 1rem);
	right: clamp(0.5rem, 1.5vw, 1rem);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: var(--bb-sv-modal-fg);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.bb-sv-modal__close:hover,
.bb-sv-modal__close:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	transform: rotate(90deg);
}

.bb-sv-modal__content {
	/* Over baggrunds-/filterlagene (dialogens ::before/::after, z-index 0). */
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2.5vw, 2rem);
	flex: 1 1 auto;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.28s ease, transform 0.28s ease;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	min-height: 0;
	/*
	 * Den negative margin trækker denne boks HELT ud til dialogens egen
	 * kant (annullerer dialogens padding) — det er det der holder
	 * SCROLLBAREN inde ved den sande kant, væk fra det afrundede hjørne.
	 * padding-right lægger derefter praktisk talt hele paddingen ind
	 * igen (+2px), så SELVE TEKSTEN lander lige så langt fra kanten som i
	 * venstre side — scrollbarens egen position (flugter altid med
	 * boksens kant, uanset padding-right) rykker sig ikke af dette.
	 */
	padding-right: calc(var(--bb-sv-modal-pad) + 2px);
	margin-right: calc(-1 * var(--bb-sv-modal-pad));
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.bb-sv-modal.is-open .bb-sv-modal__content {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: 0.15s;
}

.bb-sv-modal__content::-webkit-scrollbar {
	width: 8px;
}

.bb-sv-modal__content::-webkit-scrollbar-track {
	background: transparent;
}

.bb-sv-modal__content::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 999px;
}

.bb-sv-modal__content::-webkit-scrollbar-thumb:hover {
	background-color: rgba(255, 255, 255, 0.45);
}

/* ==================================================================
 * Content Builder-layout i popup'en (12-kolonne grid)
 * ================================================================== */

.bb-sv-row {
	/*
	 * Rækken er en flex-række der ombrydes (ikke et fast 12-kolonne-gitter):
	 * hver blok får præcis sin andel af bredden, og blokke der ikke kan være
	 * på samme linje ryger ned på næste. Det betyder, at en blok kan justeres
	 * (venstre/midt/højre) via auto-margener UANSET hvad der står ved siden
	 * af eller på linjerne over/under — hvilket et gitter med auto-placering
	 * ikke kan.
	 */
	--bb-sv-row-gap: clamp(1rem, 2.5vw, 2rem);
	display: flex;
	flex-wrap: wrap;
	gap: var(--bb-sv-row-gap);
	align-items: flex-start;
}

/* n/12 af rækkens bredde inkl. mellemrummene mellem kolonnerne. */
.bb-sv-col {
	flex: 0 0 calc(var(--bb-span, 12) / 12 * (100% + var(--bb-sv-row-gap)) - var(--bb-sv-row-gap));
	max-width: 100%;
	min-width: 0;
}

/*
 * Tablet/lille laptop: smalle kolonner får mere plads,
 * brede kolonner lægger sig i fuld bredde.
 */
@media (max-width: 980px) {
	.bb-sv-col[data-span="3"],
	.bb-sv-col[data-span="4"] {
		flex-basis: calc(6 / 12 * (100% + var(--bb-sv-row-gap)) - var(--bb-sv-row-gap));
	}

	.bb-sv-col[data-span="8"],
	.bb-sv-col[data-span="9"] {
		flex-basis: 100%;
	}
}

/* Mobil: alt stables lodret. [data-span] gør reglen kraftig nok til at slå
   tablet-reglen for 1/4- og 1/3-blokke ovenfor. */
@media (max-width: 640px) {
	.bb-sv-col,
	.bb-sv-col[data-span] {
		flex-basis: 100%;
	}
}

.bb-sv-title {
	margin: 0;
	font-size: clamp(1.5rem, 3.2vw, 2.25rem);
	line-height: 1.15;
	font-weight: 700;
	color: inherit;
}

.bb-sv-subtitle {
	margin: 0;
	font-size: clamp(1rem, 1.8vw, 1.1875rem);
	line-height: 1.4;
	opacity: 0.7;
}

/* "Billede"-blokken — det valgfrie billede sat via content_image_id. */
.bb-sv-content-image {
	line-height: 0;
}

.bb-sv-content-image__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: clamp(0.5rem, 1.2vw, 0.875rem);
}

.bb-sv-text {
	font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
	line-height: 1.65;
}

.bb-sv-text > :first-child {
	margin-top: 0;
}

.bb-sv-text > :last-child {
	margin-bottom: 0;
}

.bb-sv-button-wrap {
	margin: 1.25em 0 0;
	/* Venstre er standard; midten/højre vælges pr. item i backend. */
	text-align: left;
}

.bb-sv-button-wrap--center {
	text-align: center;
}

.bb-sv-button-wrap--right {
	text-align: right;
}

.bb-sv-button {
	display: inline-block;
	padding: 0.75em 1.6em;
	border-radius: 999px;
	background: var(--bb-sv-modal-accent);
	color: var(--bb-sv-modal-accent-fg);
	font-size: clamp(0.875rem, 1.3vw, 1rem);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.bb-sv-button:hover,
.bb-sv-button:focus-visible {
	opacity: 0.85;
	transform: translateY(-1px);
	color: var(--bb-sv-modal-accent-fg);
}

.bb-sv-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: clamp(0.5rem, 1.2vw, 0.875rem);
	background: #000;
}

.bb-sv-embed iframe,
.bb-sv-embed video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	object-fit: contain;
}

.bb-sv-spotify {
	width: 100%;
}

.bb-sv-spotify iframe {
	display: block;
	width: 100%;
	height: var(--bb-sv-spotify-height, 352px);
	max-height: 60vh;
	border: 0;
	border-radius: 12px;
}

/* ==================================================================
 * Tilgængelighed
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bb-sv-card__image,
	.bb-sv-card__overlay,
	.bb-sv-card__button,
	.bb-sv-modal__backdrop,
	.bb-sv-modal__dialog,
	.bb-sv-modal__content,
	.bb-sv-modal__close,
	.bb-sv-button {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}

	.bb-sv-modal__dialog,
	.bb-sv-modal__content {
		transform: none;
	}

	.bb-sv-modal__dialog::before {
		transition-duration: 0.01ms !important;
	}

	.bb-sv-card__trigger:hover .bb-sv-card__image {
		transform: none;
	}
}

/* Fallback hvis temaet ikke selv definerer .screen-reader-text. */
.bb-sv-card__trigger .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==================================================================
 * Responsiv + touch (gennemgang)
 *
 * Samlet blok for hele filen, så den kan findes (og fjernes) ét sted.
 *  - dvh: 90vh er for højt på mobil, mens browserens adresselinje er
 *    synlig (100vh = skærmen UDEN linjen). dvh følger den synlige højde.
 *  - safe-area: holder popup'en fri af iPhone-notch og hjemme-streg.
 *  - touch-action: pan-y på scroll-området giver ren lodret fingerscroll;
 *    none på baggrunden stopper at siden bagved trækkes med.
 *  - touch-action: manipulation fjerner dobbelttryk-zoom-forsinkelsen.
 *  - pointer: coarse = fingre — større trykflader (min. ca. 44 px).
 *  - liggende telefon (lav skærmhøjde): mindre luft, så der er plads.
 * ================================================================== */

.bb-sv-modal {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@supports (padding: max(0px)) {
	.bb-sv-modal {
		padding-top: max(clamp(0.75rem, 4vw, 3rem), env(safe-area-inset-top));
		padding-right: max(clamp(0.75rem, 4vw, 3rem), env(safe-area-inset-right));
		padding-bottom: max(clamp(0.75rem, 4vw, 3rem), env(safe-area-inset-bottom));
		padding-left: max(clamp(0.75rem, 4vw, 3rem), env(safe-area-inset-left));
	}
}

@supports (height: 100dvh) {
	.bb-sv-modal__dialog {
		max-height: min(90dvh, 100%);
	}
}

.bb-sv-modal__backdrop {
	touch-action: none;
}

.bb-sv-modal__content {
	touch-action: pan-y;
	overflow-wrap: anywhere;
}

.bb-sv-card__trigger,
.bb-sv-modal__close,
.bb-sv-button {
	touch-action: manipulation;
}

@media (pointer: coarse) {
	.bb-sv-modal__close {
		width: 2.75rem;
		height: 2.75rem;
	}
}

@media (max-height: 520px) {
	.bb-sv-modal {
		padding: 0.5rem;
	}

	@supports (padding: max(0px)) {
		.bb-sv-modal {
			padding-top: max(0.5rem, env(safe-area-inset-top));
			padding-right: max(0.5rem, env(safe-area-inset-right));
			padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
			padding-left: max(0.5rem, env(safe-area-inset-left));
		}
	}

	.bb-sv-modal__dialog {
		max-height: 100%;
	}
}

/* Beskrivelsesteksten kommer fra en rich-text-editor: billeder, iframes og
   tabeller må aldrig være bredere end popup'en (ellers vandret scroll på
   mobil). Brede tabeller scroller vandret i sig selv. */
.bb-sv-text img,
.bb-sv-text iframe,
.bb-sv-text video {
	max-width: 100%;
	height: auto;
}

.bb-sv-text table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/*
 * Justering pr. blok (data-align på kolonnen, valgt i Content Builderen).
 * Tekst følger text-align; link-grupper/-knapper har egne regler, der
 * overstyrer et enkelt links egen placering, når blokken er sat til midt/højre.
 */
.bb-sv-col[data-align="center"] {
	text-align: center;
}

.bb-sv-col[data-align="right"] {
	text-align: right;
}

.bb-sv-col[data-align="center"] .bb-sv-button-wrap {
	text-align: center;
}

.bb-sv-col[data-align="right"] .bb-sv-button-wrap {
	text-align: right;
}

/*
 * Justering af SELVE blokken (ikke kun teksten i den): en blok der er smallere
 * end rækken (fx 2/3 bredde) rykkes til midten eller højre med auto-margener
 * i flex-rækken, så der opstår luft på den ene eller begge sider. Virker
 * uanset hvad der står ved siden af — står der flere blokke på samme linje,
 * fordeler auto-margenerne den resterende plads imellem dem. En blok i fuld
 * bredde har ingen plads at flytte sig i.
 */
.bb-sv-col[data-align="center"] {
	margin-left: auto;
	margin-right: auto;
}

.bb-sv-col[data-align="right"] {
	margin-left: auto;
}