/**
 * BenjaBuilder — Logo, frontend.
 *
 * Popup-mekanikken (backdrop, dialog, Content Builder-grid, embeds,
 * tilgængelighed) er en bevidst kopi af Portfolio-modulets frontend.css
 * med `bb-lg-` 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 eneste der reelt er NYT her er selve trigger-visningen: logoet
 * vises i sin naturlige billedform (ingen kvadratisk beskæring, ingen
 * mørk hover-overlay som i Portfolio-grid'et) — det er et logo, ikke et
 * portfolio-kort.
 *
 * Font: samme selv-hostede Inter som Portfolio, men egne filer i denne
 * mappe (modules/logo/assets/fonts/) — moduler skal kunne stå helt
 * alene, jf. arkitekturen i README.md.
 */

@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-lg-wrap,
.bb-lg-modal {
	--bb-lg-radius: clamp(0.75rem, 1.6vw, 1.375rem);
	/* Samme brandfarve som Services-modulets tekstbokse — se
	   --bb-sv-gold-bg/--bb-sv-gold-fg i modules/services/assets/css/
	   frontend.css hvis nuancen nogensinde skal ændres begge steder.
	   (Variabelnavnet der hedder "gold" er historisk — farven er ikke
	   længere gylden, men er ikke omdøbt for ikke at røre unødigt meget.) */
	--bb-lg-modal-bg: #8197ac;
	--bb-lg-modal-fg: #000000;
	/* Tekstfarven i popup'ens kasser. Adskilt fra --bb-lg-modal-fg, som
	   luk-knappen og diashowets pile bruger (mørke ikoner på lys baggrund). */
	--bb-lg-modal-text: #ffffff;
	/* Kanten om kasserne, som på mockup'en. Sæt til "transparent" hvis
	   kasserne skal stå helt uden kontur. */
	--bb-lg-modal-border: rgba(0, 0, 0, 0.85);
	/* Hvor meget den højre kasse lapper ind over den venstre. */
	--bb-lg-overlap: clamp(0.75rem, 2vw, 1.75rem);
	/*
	 * Kompositionen af de to kasser er bygget ud fra ÉN fælles højde,
	 * --bb-lg-dialog-h, så de altid står i samme forhold til hinanden:
	 *   - højre kasse (dialogen) har præcis denne højde (indholdet scroller),
	 *   - venstre kasse er den samme højde minus forskydningen foroven og
	 *     forneden, og bredden følger af 4:5.
	 * Højden er højst --bb-lg-dialog-max-h (på store skærme er alt altså
	 * IDENTISK, uanset skærmens størrelse) og skrumper kun proportionalt, hvis
	 * vinduet er for lavt. Sæt max-h op/ned for en større/mindre popup.
	 */
	--bb-lg-dialog-max-h: 780px;
	/* Popup'ens afstand til skærmkanten (samme som .bb-lg-modal's padding). */
	--bb-lg-gutter: clamp(0.75rem, 4vw, 3rem);
	/* 1 % af den SYNLIGE skærmhøjde (dvh følger mobilens adresselinje). */
	--bb-lg-vh: 1vh;
	--bb-lg-dialog-h: min(var(--bb-lg-dialog-max-h), calc(var(--bb-lg-vh) * 88), calc(var(--bb-lg-vh) * 100 - 2 * var(--bb-lg-gutter)));
	/* Hvor meget venstre kasse er trukket ind foroven OG forneden — 7 % af
	   den fælles højde, så forskydningen følger med når alt skaleres. */
	--bb-lg-aside-inset: calc(var(--bb-lg-dialog-h) * 0.07);
	/* Venstre kasses højde: den fælles højde minus forskydningen (2 gange). */
	--bb-lg-aside-h-fit: calc(var(--bb-lg-dialog-h) - 2 * var(--bb-lg-aside-inset));
	/* Ingen padding — billedet skal fylde HELE kassen, kant til kant.
	   .bb-lg-modal__panel har overflow: hidden og border-radius, så
	   billedet klippes pænt til de samme runde hjørner som resten af
	   popup'en, uden ekstra CSS. */
	--bb-lg-aside-pad: 0;
	--bb-lg-modal-accent: #ffffff;
	--bb-lg-modal-accent-fg: #0c0c0e;
	--bb-lg-accent: #16181d;
	--bb-lg-ease: cubic-bezier(0.22, 0.75, 0.28, 1);
	--bb-lg-font: 'BB Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--bb-lg-modal-pad: clamp(1.25rem, 4vw, 3rem);
	font-family: var(--bb-lg-font);
}

/* ==================================================================
 * Selve logoet
 * ================================================================== */

.bb-lg-wrap {
	display: inline-flex;
	max-width: 100%;
	line-height: 0;
}

/* Klikflade — nulstiller browserens knap-styling. */
.bb-lg-trigger {
	display: inline-flex;
	max-width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 4px;
}

/* Ingen gennemsigtighed ved hover: logoet skal stå fuldt dækkende. Hover-
   effekten er KUN det valgfrie hover-billede (se .bb-lg-image--hover). */

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

/*
 * Hover-billede (valgfrit, sat i backend under "Hover-billede"). De to
 * billeder ligger oven på hinanden — hover-billedet absolut positioneret,
 * skjult (opacity: 0) som udgangspunkt — og fades ind ved hover/fokus.
 * Uden et hover-billede findes .bb-lg-image-stack slet ikke i markup'et
 * (se render_logo_image() i class-bb-logo-shortcode.php), så intet af
 * dette påvirker et logo uden hover-billede.
 */
.bb-lg-image-stack {
	position: relative;
	display: inline-flex;
	max-width: 100%;
	line-height: 0;
}

/*
 * Selektoren skrives som ".bb-lg-image-stack .bb-lg-image--hover" (to
 * klasser, ikke én) — specificitet (0,2,0) — for GARANTERET at vinde over
 * ".bb-lg-wrap img, .bb-lg-image" (0,1,0) længere nede i filen, uanset
 * rækkefølgen de to regler står i. Uden det ville hover-billedet blot
 * ligge i sin egen naturlige størrelse i øverste venstre hjørne af
 * stakken (bredde/højde sat med !important af den delte regel), i stedet
 * for at dække PRÆCIS samme flade som det almindelige logo — det var
 * årsagen til at de to billeder så ud til at "spøgelses-overlappe"
 * hinanden i stedet for at det ene rent erstattede det andet.
 */
.bb-lg-image-stack .bb-lg-image--hover {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	/* "contain" i stedet for "cover": hele hover-billedet skal være
	   synligt, ikke beskåret, selv hvis dets billedforhold afviger en
	   smule fra logoets. Upload gerne samme format/størrelse som logoet
	   for det reneste resultat. */
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

/*
 * Det ALMINDELIGE billede skal fade UD præcis når hover-billedet fader IND
 * — en rigtig krydstoning, så der kun er ét billede ad gangen (bortset fra
 * det ganske korte øjeblik midt i selve overgangen på 0.25s). Uden denne
 * regel blev det almindelige logo IKKE tonet ud — det lå bare der under
 * hover-billedet, og skinnede igennem gennem eventuelle gennemsigtige
 * områder i det (fx mellem bogstaverne) som et andet, forskudt logo.
 */
.bb-lg-image--default {
	opacity: 1;
	transition: opacity 0.25s ease;
}

/*
 * To selektorer pr. billede, fordi logoet nogle gange er en <button>
 * (klikbart, åbner popup) og nogle gange bare et <span> (intet at åbne —
 * se render() i class-bb-logo-shortcode.php): .bb-lg-trigger dækker
 * knap-tilfældet, .bb-lg-image-stack:hover dækker når billedet IKKE er
 * pakket i en knap.
 */
.bb-lg-trigger:focus-visible .bb-lg-image--hover {
	opacity: 1;
}

.bb-lg-trigger:focus-visible .bb-lg-image--default {
	opacity: 0;
}

/* Hover-billedet kun på enheder med rigtig hover (på touch ville det blive
   hængende efter et tryk, når popup'en lukkes igen). */
@media (hover: hover) {
	.bb-lg-trigger:hover .bb-lg-image--hover,
	.bb-lg-image-stack:hover .bb-lg-image--hover {
		opacity: 1;
	}

	.bb-lg-trigger:hover .bb-lg-image--default,
	.bb-lg-image-stack:hover .bb-lg-image--default {
		opacity: 0;
	}
}

/*
 * Logoet vises som udgangspunkt i sin FULDE, naturlige billedstørrelse —
 * ingen begrænsning, ingen komprimering. Juster den faktiske visnings-
 * størrelse udefra (fx padding eller container-bredde i Elementor), eller
 * sæt shortcode-attributten height="60" for at styre det direkte herfra.
 *
 * var(--bb-lg-height, auto): findes den inline --bb-lg-height custom
 * property IKKE (dvs. height-attributten var 0/ikke sat), falder den
 * tilbage til "auto" = billedets egen, naturlige højde. Er den sat,
 * bruges den i stedet. Bredden følger altid automatisk af højden (eller
 * omvendt ved auto), så billedet aldrig forvrænges.
 *
 * Selektoren er igen bevidst skrevet med to niveauer + !important, af
 * samme grund som i Portfolio: mange temaer sætter ".entry-content img
 * { height: auto; max-width: 100%; }", som ellers ville vinde over en
 * enkelt klasse og forhindre den (eventuelle) faste højde i at slå igennem.
 */
.bb-lg-wrap img,
.bb-lg-image {
	display: block;
	height: var(--bb-lg-height, auto) !important;
	width: auto !important;
	max-width: 100% !important;
}

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

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

.bb-lg-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-lg-modal[hidden] {
	display: none;
}

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

.bb-lg-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-lg-modal.is-open .bb-lg-modal__backdrop {
	opacity: 1;
	transition-duration: 0.6s;
}

/*
 * Dialogen er nu KUN en gennemsigtig ramme, der holder én eller to
 * "kasser" (.bb-lg-modal__panel). Selve det gyldne udseende — baggrund,
 * kant, runde hjørner, padding, skygge — er flyttet ned på kasserne, så
 * der kan være to af dem ved siden af hinanden.
 *
 * FLIP-animationen (se frontend.js) sætter stadig transform på DENNE
 * boks, så begge kasser vokser ud fra logoet som én samlet enhed.
 */
.bb-lg-modal__dialog {
	position: relative;
	width: min(1100px, 100%);
	max-height: min(90vh, 100%);
	display: flex;
	align-items: stretch;
	background: none;
	padding: 0;
	box-shadow: none;
	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;
}

/* Selve kassen (baggrundsfarve: --bb-lg-modal-bg). Der er én som standard
   — to når der er et diasshow. */
.bb-lg-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: var(--bb-lg-modal-bg);
	color: var(--bb-lg-modal-text);
	border: 1px solid var(--bb-lg-modal-border);
	border-radius: clamp(0.875rem, 2vw, 1.5rem);
	padding: var(--bb-lg-modal-pad);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

/*
 * VIGTIGT: display på .bb-lg-modal__panel ovenfor ville ellers vinde over
 * browserens indbyggede [hidden] { display: none } — uden denne regel
 * ville den tomme diasshow-kasse blive vist, også når der intet diasshow er.
 */
.bb-lg-modal__panel[hidden] {
	display: none;
}

/*
 * Venstre kasse: diasshowet. Den er ALTID lavere end den højre — præcis
 * 2 × inset lavere — hvilket giver den forskudte, lagdelte effekt fra
 * mockup'en.
 *
 * align-self: stretch + lodrette margener gør højden STYRET af kassen selv
 * i stedet for af billedet. Med align-self: center ville højden i stedet
 * følge billedets 4:5-forhold, og så endte den (som i praksis) med at blive
 * lige så høj som indholdskassen — og billedet blev for højt til at være
 * der, hvilket udløste den scrollbar der ikke gav mening.
 */
.bb-lg-modal__panel--aside {
	/* Fast størrelse: højden er sat, bredden følger af 4:5. Lodret centreret
	   i dialogen, så den står lavere end den højre kasse (se min-height på
	   dialogen længere nede). */
	flex: 0 0 auto;
	align-self: center;
	margin: 0;
	height: var(--bb-lg-aside-h-fit);
	aspect-ratio: 4 / 5;
	padding: var(--bb-lg-aside-pad);
	/* Ligger ØVERST — dens skygge falder ned på indholdskassen og
	   forstærker lagdelingen. Luk-krydset har z-index 3 og bliver derfor
	   liggende over dem begge. */
	z-index: 2;
}

/* Højre kasse: indholdet. Ligger BAGVED og stikker ud over og under. */
.bb-lg-modal__panel--main {
	flex: 1 1 0;
	z-index: 1;
}

.bb-lg-modal.has-aside .bb-lg-modal__panel--main {
	margin-left: calc(-1 * var(--bb-lg-overlap));
}

/* Med diasshow er dialogen mindst lige så høj som venstre kasse + forskydning
   foroven og forneden, så den højre kasse ALTID stikker ud over og under den
   venstre (den forskudte effekt), også når teksten er kort. */
@media (min-width: 861px) {
	.bb-lg-modal.has-aside .bb-lg-modal__dialog {
		/* Fast højde (se --bb-lg-dialog-h) — den højre kasse er altid lige høj,
		   og dens indhold scroller. Lidt bredere end uden diasshow, så den højre
		   kasse stadig får en rimelig tekstbredde ved siden af billedet. */
		width: min(1240px, 100%);
		height: var(--bb-lg-dialog-h);
		max-height: var(--bb-lg-dialog-h);
	}
}

/* Uden diasshow: én kasse i fuld bredde — præcis som før. */
.bb-lg-modal:not(.has-aside) .bb-lg-modal__panel--main {
	flex: 1 1 100%;
}

/*
 * Diasshowet fylder sin kasse ud — ingen scroll. Kassen har en fast højde
 * (se .bb-lg-modal__panel--aside), og billedet tilpasser sig DEN, i stedet
 * for at kassen tilpasser sig billedet.
 */
.bb-lg-modal__aside {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

/*
 * Her lader vi kassens højde vinde over billedets 4:5-forhold: viewporten
 * får den plads der er tilbage, og billedet dækker den (object-fit: cover
 * + fokuspunktet fra backend). Uden min-height: 0 kan et flex-element ikke
 * krympe under sit indhold, og så ville billedet skubbe kassen ud igen.
 */
.bb-lg-modal__panel--aside .bb-lg-instagram {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.bb-lg-modal__panel--aside .bb-lg-instagram__viewport {
	flex: 1 1 auto;
	min-height: 0;
}

/*
 * Billedkassen skal være ren billede, kant til kant — ingen blå kant:
 *  - Den 1 px kant, som den højre kasse har (85 % sort), lå hen over kassens
 *    BLÅ baggrundsfarve og blev til en tynd mørkeblå streg rundt om billedet.
 *    Her fjernes den, og baggrunden bliver mørk i stedet for blå, så et
 *    evt. brøkpixel-hul (ved skærmzoom/retina) aldrig lyser blåt.
 *  - Billedets egne afrundede hjørner (en anelse mindre end kassens) lod
 *    kassens baggrund skinne frem i hjørnerne som en blå halvmåne. Billedet
 *    får derfor ingen egne hjørner; kassen (overflow: hidden + border-radius)
 *    klipper det.
 */
.bb-lg-modal__panel--aside {
	border: 0;
	background: #0c0c0e;
}

.bb-lg-modal__panel--aside .bb-lg-instagram__viewport {
	border-radius: 0;
}


/*
 * Mobil/smalle skærme: kasserne kan ikke stå ved siden af hinanden, så de
 * stables — diasshowet øverst (samme læserækkefølge som venstre → øverst)
 * og UDEN overlap, som bare ville se ved siden af sig selv i en søjle.
 *
 * Her scroller hele dialogen i stedet for hver kasse for sig, ellers ville
 * man sidde med to små, uafhængige scroll-områder på en lille skærm.
 */
@media (max-width: 860px) {
	.bb-lg-modal__dialog {
		flex-direction: column;
		gap: clamp(0.75rem, 2vw, 1.25rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.bb-lg-modal.has-aside .bb-lg-modal__panel--main,
	.bb-lg-modal__panel--aside,
	.bb-lg-modal__panel--main {
		flex: 0 0 auto;
		align-self: stretch;
		margin: 0;
		max-height: none;
		overflow: visible;
	}

	/* Stablet har kassen ingen fast størrelse — den fylder bredden, og
	   billedet bestemmer selv højden. */
	.bb-lg-modal__panel--aside {
		height: auto;
		aspect-ratio: auto;
	}

	/* Billedet får sit 4:5-forhold tilbage. */
	.bb-lg-modal__panel--aside .bb-lg-instagram,
	.bb-lg-modal__panel--aside .bb-lg-instagram__viewport {
		flex: 0 0 auto;
		min-height: auto;
	}

	/* Scrollbar-tricket giver ingen mening når dialogen selv scroller. */
	.bb-lg-modal__content {
		overflow: visible;
		margin-right: 0;
		padding-right: 0;
	}

	.bb-lg-modal__aside {
		overflow: visible;
	}
}

.bb-lg-modal.is-open .bb-lg-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);
}

/*
 * Luk-krydset sidder på DIALOGEN, ikke inde i en af kasserne — så ligger
 * det altid øverst til højre i hele popup'en, uanset om der er én eller to
 * kasser, og uanset om de er stablet på mobil. z-index 3 lægger det over
 * begge kasser (aside = 1, main = 2).
 */
.bb-lg-modal__close {
	position: absolute;
	top: clamp(0.5rem, 1.5vw, 1rem);
	right: clamp(0.5rem, 1.5vw, 1rem);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* Mørk, gennemsigtig cirkel — modsat det hvide der blev brugt da
	   popup'en var mørk. En hvid cirkel ville drukne i den lysere,
	   mellemtonede baggrund (--bb-lg-modal-bg). */
	background: rgba(0, 0, 0, 0.08);
	color: var(--bb-lg-modal-fg);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.bb-lg-modal__close:hover,
.bb-lg-modal__close:focus-visible {
	background: rgba(0, 0, 0, 0.15);
	transform: rotate(90deg);
}

.bb-lg-modal__content {
	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-lg-modal-pad) + 2px);
	margin-right: calc(-1 * var(--bb-lg-modal-pad));
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

/* Diasshow-kassen fader ind sammen med indholdet. */
.bb-lg-modal__aside {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.bb-lg-modal.is-open .bb-lg-modal__content,
.bb-lg-modal.is-open .bb-lg-modal__aside {
	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-lg-modal__content::-webkit-scrollbar {
	width: 8px;
}

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

.bb-lg-modal__content::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.25);
	border-radius: 999px;
}

.bb-lg-modal__content::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.4);
}

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

.bb-lg-row {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
	align-items: start;
}

.bb-lg-col {
	grid-column: span var(--bb-span, 12);
	min-width: 0;
}

@media (max-width: 980px) {
	.bb-lg-col[data-span="3"],
	.bb-lg-col[data-span="4"] {
		grid-column: span 6;
	}

	.bb-lg-col[data-span="8"],
	.bb-lg-col[data-span="9"] {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.bb-lg-col {
		grid-column: 1 / -1;
	}
}

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

.bb-lg-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.
 *
 * TRE uafhængige indstillinger fra builderen styrer dette billede:
 *   - Bredde (--bb-span, på .bb-lg-col)   → hvor meget PLADS blokken
 *     har i rækken (delt med alle andre bloktyper).
 *   - Billedstørrelse (--bb-lg-image-size, sat herunder) → hvor STORT
 *     billedet fylder af den plads (kun "Billede"-blokken har dette).
 *   - Justering (data-align, på .bb-lg-col) → hvor billedet SIDDER,
 *     hvis det ikke fylder al pladsen (100%).
 * De tre er bevidst adskilt: uden en selvstændig størrelse ville bredden
 * skulle gøre dobbelt arbejde (både plads OG størrelse), hvilket gør det
 * umuligt at have et lille, centreret billede i en fuldbred række.
 *
 * display:inline-block gør at text-align på .bb-lg-content-image (sat af
 * data-align) kan positionere billedet.
 *
 * !important er PÅKRÆVET her (samme grund som .bb-lg-image/.bb-lg-wrap
 * img andre steder i filen): mange temaer sætter regler som
 * ".entry-content img { width: 100%; height: auto; }", som uden
 * !important ville vinde over denne enkelt-klasse-selektor og tvinge
 * billedet til altid at fylde 100% — hvilket gjorde både størrelse og
 * justering usynlige, uanset hvad de var sat til.
 */
.bb-lg-content-image {
	line-height: 0;
}

.bb-lg-content-image__img {
	display: inline-block !important;
	width: auto !important;
	max-width: var(--bb-lg-image-size, 100%) !important;
	height: auto !important;
	border-radius: clamp(0.5rem, 1.2vw, 0.875rem);
}

.bb-lg-col[data-align="center"] .bb-lg-content-image {
	text-align: center;
}

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

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

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

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

.bb-lg-button-wrap {
	margin: 1.25em 0 0;
}

/* "Link-knap"-blokken — sin egen selvstændige blok (adskilt fra
   "Beskrivelse"), samme data-align-mekanik som "Billede"-blokken herover. */
.bb-lg-col[data-align="center"] .bb-lg-button-wrap {
	text-align: center;
}

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

.bb-lg-button {
	display: inline-block;
	padding: 0.75em 1.6em;
	border-radius: 999px;
	background: var(--bb-lg-modal-accent);
	color: var(--bb-lg-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-lg-button:hover,
.bb-lg-button:focus-visible {
	opacity: 0.85;
	transform: translateY(-1px);
	color: var(--bb-lg-modal-accent-fg);
}

/*
 * "Instagram diashow"-blokken — manuelt kurateret, INGEN Instagram-API.
 * Billederne beskæres non-destruktivt til et lodret 4:5-format via
 * object-fit: cover + object-position (fokuspunktet valgt i backend,
 * se .bb-instagram-slide__focal i admin.css for samme forhold).
 *
 * Klikflade og bladre-knapper er bevidst SIBLINGS, ikke indlejrede i
 * hinanden: hvert billede er sin egen <a> (åbner instagram_link i ny
 * fane), mens pile/prikker ligger UDENFOR de <a>-elementer og derfor
 * aldrig kan udløse linket ved et klik.
 */
.bb-lg-instagram {
	position: relative;
	width: 100%;
}

.bb-lg-instagram__viewport {
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--bb-lg-radius);
}

.bb-lg-instagram__track {
	display: flex;
	height: 100%;
	transition: transform 0.45s var(--bb-lg-ease);
	will-change: transform;
}

.bb-lg-instagram__slide {
	position: relative;
	flex: 0 0 100%;
	display: block;
	height: 100%;
	line-height: 0;
	transition: opacity 0.2s ease;
}

.bb-lg-instagram__slide:hover,
.bb-lg-instagram__slide:focus-visible {
	opacity: 0.92;
}

.bb-lg-instagram__img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: var(--bb-lg-focal-x, 50%) var(--bb-lg-focal-y, 50%);
}

.bb-lg-instagram__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-top: -1.125rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: var(--bb-lg-modal-fg);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.bb-lg-instagram__nav:hover,
.bb-lg-instagram__nav:focus-visible {
	background: #fff;
	transform: scale(1.06);
}

.bb-lg-instagram__nav--prev {
	left: 0.625rem;
}

.bb-lg-instagram__nav--next {
	right: 0.625rem;
}

/*
 * Prikkerne ligger OVEN PÅ billedet, ikke under det. Rammen om billedet er
 * bevidst tynd (--bb-lg-aside-pad), og en række prikker under billedet
 * ville give en tyk bundkant og bryde indtrykket af, at billedet fylder
 * kassen ud. Pilene ligger i forvejen oven på billedet, så det er samme
 * formsprog.
 */
.bb-lg-instagram__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.75rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
}

/* Hvide prikker med skygge — skal kunne ses oven på et vilkårligt foto. */
.bb-lg-instagram__dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.bb-lg-instagram__dot.is-active {
	background: #ffffff;
	transform: scale(1.2);
}

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
	.bb-lg-modal__backdrop,
	.bb-lg-modal__dialog,
	.bb-lg-modal__content,
	.bb-lg-modal__aside,
	.bb-lg-modal__close,
	.bb-lg-button,
	.bb-lg-trigger,
	.bb-lg-instagram__track,
	.bb-lg-instagram__nav,
	.bb-lg-instagram__dot {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}

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

/* Fallback hvis temaet ikke selv definerer .screen-reader-text. */
.bb-lg-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-lg-modal {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@supports (padding: max(0px)) {
	.bb-lg-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-lg-modal__dialog {
		max-height: min(90dvh, 100%);
	}
}

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

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

.bb-lg-trigger,
.bb-lg-modal__close,
.bb-lg-instagram__nav,
.bb-lg-instagram__dot,
.bb-lg-button {
	touch-action: manipulation;
}

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

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

	@supports (padding: max(0px)) {
		.bb-lg-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-lg-modal__dialog {
		max-height: 100%;
	}
}

/* Logo: på smalle skærme scroller hele dialogen (se @media 860px ovenfor).
   Luk-krydset er absolut positioneret og ville derfor scrolle væk med
   indholdet — her gøres det "sticky", så det følger med øverst til højre,
   men uden at fylde plads i søjlen (negativ bundmargin = dets egen højde +
   afstanden til næste kasse). */
@media (max-width: 860px) {
	.bb-lg-modal__dialog {
		--bb-lg-stack-gap: clamp(0.75rem, 2vw, 1.25rem);
		-webkit-overflow-scrolling: touch;
		touch-action: pan-y;
		scrollbar-width: thin;
	}

	.bb-lg-modal__close {
		position: sticky;
		top: 0.5rem;
		right: auto;
		flex: 0 0 auto;
		align-self: flex-end;
		margin: 0.5rem 0.5rem calc(-2.5rem - var(--bb-lg-stack-gap)) 0;
	}
}

/* Rettelse: @media 860px længere oppe forsøger at gøre .bb-lg-modal__content
   til et almindeligt (ikke-scrollende) element, men grundreglen for
   .bb-lg-modal__content står LÆNGERE NEDE og vandt derfor — indholdet var
   stadig en egen scroll-container med overscroll-behavior: contain og
   negativ margin, indlejret i dialogen der egentlig er den der scroller.
   Et indlejret scroll-område uden noget at scrolle kan "æde" fingerens
   stryg på nogle touch-browsere. Her er reglerne placeret EFTER grundreglen. */
@media (max-width: 860px) {
	.bb-lg-modal__content {
		overflow: visible;
		overscroll-behavior: auto;
		margin-right: 0;
		padding-right: 0;
	}
}

/* Liggende telefon (lav skærm, smal nok til at kasserne er stablet):
   diashowet må ikke fylde flere skærmhøjder, før teksten kommer. */
@media (max-width: 860px) and (max-height: 520px) {
	.bb-lg-modal__panel--aside .bb-lg-instagram__viewport {
		aspect-ratio: 16 / 9;
		max-height: 70dvh;
	}
}

@media (max-width: 860px) and (pointer: coarse) {
	.bb-lg-modal__close {
		margin-bottom: calc(-2.75rem - var(--bb-lg-stack-gap));
	}
}

/* Diashowet: lodret scroll må ikke blokeres af vandret swipe, og pile/prikker
   skal kunne ramme med en finger. */
.bb-lg-instagram__viewport {
	touch-action: pan-y;
}

.bb-lg-instagram__dot {
	position: relative;
}

.bb-lg-instagram__dot::before {
	content: '';
	position: absolute;
	inset: -0.6rem -0.2rem;
}

@media (pointer: coarse) {
	.bb-lg-instagram__nav {
		width: 2.75rem;
		height: 2.75rem;
		margin-top: -1.375rem;
	}

	.bb-lg-instagram__dots {
		gap: 0.6rem;
	}
}

/* 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-lg-text img,
.bb-lg-text iframe,
.bb-lg-text video {
	max-width: 100%;
	height: auto;
}

.bb-lg-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-lg-col[data-align="center"] {
	text-align: center;
}

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

/* Følg den synlige skærmhøjde (mobilens adresselinje) hvor dvh findes. */
@supports (height: 1dvh) {
	.bb-lg-modal {
		--bb-lg-vh: 1dvh;
	}
}