/* DBR Case Builder — frontend-visninger */
.dbrcb-cases {
	--dbrcb-primary: #327039;
	--dbrcb-primary-light: #EEF5EC;
	--dbrcb-ink: #111827;
	--dbrcb-muted: #6B7280;
	--dbrcb-line: #E5E7EB;
	--dbrcb-radius: 14px;
	--dbrcb-gap: 20px;
}

/* ── Filter-piller ─────────────────────────────────────────────────── */
.dbrcb-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.dbrcb-filter-btn {
	padding: 8px 16px;
	border: 1px solid var(--dbrcb-line); border-radius: 999px;
	background: #fff; color: var(--dbrcb-ink);
	font-size: .85rem; font-weight: 600; cursor: pointer;
	transition: background .12s, color .12s, border-color .12s;
}
.dbrcb-filter-btn:hover { border-color: var(--dbrcb-primary); }
.dbrcb-filter-btn.is-active { background: var(--dbrcb-ink); color: #fff; border-color: var(--dbrcb-ink); }

/* ── Kort (fælles) ─────────────────────────────────────────────────── */
.dbrcb-card { border-radius: var(--dbrcb-radius); overflow: hidden; background: #fff; border: 1px solid var(--dbrcb-line); }
.dbrcb-card.is-hidden { display: none; }
.dbrcb-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.dbrcb-card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--dbrcb-primary-light); }
.dbrcb-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.dbrcb-card:hover .dbrcb-card-media img { transform: scale(1.04); }
.dbrcb-card-noimg { display: grid; place-items: center; height: 100%; font-size: 2rem; opacity: .4; }
.dbrcb-card-body { position: relative; padding: 16px 18px 18px; flex: 1; }
.dbrcb-card-label {
	font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--dbrcb-primary); margin: 0 0 6px;
}
.dbrcb-card-title { font-size: 1.15rem; line-height: 1.3; margin: 0 0 8px; color: var(--dbrcb-ink); }
.dbrcb-card-excerpt, .dbrcb-card-quote { font-size: .9rem; color: var(--dbrcb-muted); margin: 0; line-height: 1.5; }
.dbrcb-verified { display: inline-block; font-size: .7rem; font-weight: 700; color: var(--dbrcb-primary); text-transform: uppercase; letter-spacing: .04em; }
.dbrcb-card-arrow {
	position: absolute; right: 16px; bottom: 14px;
	width: 34px; height: 34px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--dbrcb-primary-light); color: var(--dbrcb-primary);
	font-weight: 700; transition: background .12s, color .12s;
}
.dbrcb-card:hover .dbrcb-card-arrow { background: var(--dbrcb-primary); color: #fff; }

/* ── 1) Kort (grid) ───────────────────────────────────────────────── */
.dbrcb-layout-cards .dbrcb-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--dbrcb-gap); }

/* ── 1b) Overlay: tekst ovenpå billedet (gradient, guld-label) ────── */
.dbrcb-layout-overlay .dbrcb-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--dbrcb-gap); }
.dbrcb-layout-overlay .dbrcb-card { border: 0; background: #16211a; }
.dbrcb-layout-overlay .dbrcb-card-link { position: relative; display: block; aspect-ratio: 4/5; }
.dbrcb-layout-overlay .dbrcb-card-media { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.dbrcb-layout-overlay .dbrcb-card-body {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 90px 74px 22px 22px; /* luft til pil-cirklen nederst til højre */
	background: linear-gradient(to top, rgba(10,14,11,.88) 0%, rgba(10,14,11,.55) 55%, rgba(10,14,11,0) 100%);
}
.dbrcb-layout-overlay .dbrcb-card-label { color: #E3C481; }
.dbrcb-layout-overlay .dbrcb-card-title { color: #fff; font-size: 1.45rem; }
.dbrcb-layout-overlay .dbrcb-card-excerpt,
.dbrcb-layout-overlay .dbrcb-card-quote { color: rgba(255,255,255,.85); }
.dbrcb-layout-overlay .dbrcb-verified { color: #E3C481; }
.dbrcb-layout-overlay .dbrcb-card-arrow { background: #fff; color: var(--dbrcb-ink); right: 18px; bottom: 18px; width: 42px; height: 42px; }
.dbrcb-layout-overlay .dbrcb-card:hover .dbrcb-card-arrow { background: var(--dbrcb-primary); color: #fff; }

/* ── 2) Mosaik: hvert 5. kort fylder dobbelt ──────────────────────── */
.dbrcb-layout-mosaic .dbrcb-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--dbrcb-gap); grid-auto-flow: dense; }
.dbrcb-layout-mosaic .dbrcb-card:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }
.dbrcb-layout-mosaic .dbrcb-card:nth-child(5n+1) .dbrcb-card-media { aspect-ratio: auto; flex: 1; }

/* ── 3) Liste: billede + tekst side om side ───────────────────────── */
.dbrcb-layout-list .dbrcb-grid { display: flex; flex-direction: column; gap: var(--dbrcb-gap); }
.dbrcb-layout-list .dbrcb-card-link { flex-direction: row; }
.dbrcb-layout-list .dbrcb-card-media { width: 38%; flex-shrink: 0; aspect-ratio: 3/2; }
.dbrcb-layout-list .dbrcb-card-body { display: flex; flex-direction: column; justify-content: center; }

/* ── 4) Spotlight: første kort stort, resten grid ─────────────────── */
.dbrcb-layout-spotlight .dbrcb-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--dbrcb-gap); }
.dbrcb-layout-spotlight .dbrcb-card--featured { grid-column: 1 / -1; }
.dbrcb-layout-spotlight .dbrcb-card--featured .dbrcb-card-media { aspect-ratio: 21/9; }
.dbrcb-layout-spotlight .dbrcb-card--featured .dbrcb-card-title { font-size: 1.6rem; }

/* ── 5) Karrusel: swipe m. scroll-snap + pile ─────────────────────── */
.dbrcb-track-wrap { position: relative; }
.dbrcb-layout-carousel .dbrcb-grid {
	display: flex; gap: var(--dbrcb-gap);
	overflow-x: auto; scroll-snap-type: x mandatory;
	padding-bottom: 8px; scrollbar-width: thin;
}
.dbrcb-layout-carousel .dbrcb-card { flex: 0 0 320px; scroll-snap-align: start; }
.dbrcb-track-nav {
	position: absolute; top: 40%; z-index: 2;
	width: 42px; height: 42px; border-radius: 50%;
	border: 1px solid var(--dbrcb-line); background: #fff;
	font-size: 22px; line-height: 1; cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.dbrcb-track-prev { left: -8px; }
.dbrcb-track-next { right: -8px; }

/* ── Single-visning ───────────────────────────────────────────────── */
/* Divi (og lignende temaer) renderer ofte det udvalgte billede via sin EGEN
   skabelon-funktion i stedet for WordPress' standard the_post_thumbnail() —
   derfor kan pluginets PHP-filter (post_thumbnail_html) ikke fange den visning.
   Denne CSS-regel er et målrettet, sikkert supplement specifikt for Divis
   kendte klasse; den rører kun billedet, ikke titel/dato i samme wrapper. */
body.single-dbr_case .et_post_meta_wrapper img { display: none !important; }

.dbrcb-back { margin: 0 0 10px; }
.dbrcb-back a {
	display: inline-block; padding: 7px 14px;
	border: 1px solid #E5E7EB; border-radius: 999px;
	font-size: .82rem; font-weight: 600; text-decoration: none; color: inherit;
	transition: border-color .12s, background .12s;
}
.dbrcb-back a:hover { border-color: #327039; background: #EEF5EC; }
.dbrcb-single-meta { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #327039; }
.dbrcb-single-gallery { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 24px 0; }
.dbrcb-single-gallery .dbrcb-lb-item {
	display: block; aspect-ratio: 1 !important; overflow: hidden; border-radius: 10px;
	border: 0; padding: 0; margin: 0; background: none; font: inherit; cursor: zoom-in;
	width: 100%; max-width: none !important;
}
.dbrcb-single-gallery .dbrcb-lb-item img {
	width: 100% !important; height: 100% !important; max-width: none !important;
	object-fit: cover !important; display: block; transition: transform .3s ease;
}
.dbrcb-single-gallery .dbrcb-lb-item:hover img { transform: scale(1.05); }
.dbrcb-single-testimonial {
	margin: 24px 0; padding: 18px 22px;
	border-left: 4px solid #327039; background: #EEF5EC; border-radius: 0 12px 12px 0;
	font-style: italic;
}
.dbrcb-single-testimonial cite { display: block; margin-top: 8px; font-style: normal; font-size: .85rem; color: #6B7280; }

.dbrcb-single-gallery a { cursor: zoom-in; }

/* ── Lightbox ─────────────────────────────────────────────────────── */
.dbrcb-lightbox {
	position: fixed; inset: 0; z-index: 99999;
	background: rgba(10, 12, 10, .94);
	display: none; align-items: center; justify-content: center;
	/* display sættes til "flex" via inline style af JS ved åbning — bevidst
	   IKKE styret via [hidden]-attributten: et [hidden]-selektor og en klasse
	   har samme specificitet, så alt efter indlæsningsrækkefølge kan en almindelig
	   "display: flex"-regel her permanent overtrumfe [hidden], hvilket gjorde at
	   lightboxen aldrig reelt kunne skjules igen. */
}
.dbrcb-lightbox img {
	max-width: min(92vw, 1400px); max-height: 88vh;
	object-fit: contain; border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.dbrcb-lightbox button {
	position: absolute; z-index: 2;
	width: 46px; height: 46px; border: 0; border-radius: 50%;
	background: rgba(255,255,255,.12); color: #fff;
	font-size: 26px; line-height: 1; cursor: pointer;
	transition: background .12s;
}
.dbrcb-lightbox button:hover { background: rgba(255,255,255,.25); }
.dbrcb-lightbox-close { top: 16px; right: 16px; }
.dbrcb-lightbox-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.dbrcb-lightbox-next { right: 12px; top: 50%; transform: translateY(-50%); }
.dbrcb-lightbox-count {
	position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
	color: rgba(255,255,255,.75); font-size: .85rem; font-weight: 600;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@media (max-width: 560px) {
	.dbrcb-lightbox-prev, .dbrcb-lightbox-next { width: 40px; height: 40px; }
}

/* ── Responsivt ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.dbrcb-layout-cards .dbrcb-grid,
	.dbrcb-layout-overlay .dbrcb-grid,
	.dbrcb-layout-spotlight .dbrcb-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.dbrcb-layout-mosaic .dbrcb-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.dbrcb-single-gallery { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 560px) {
	.dbrcb-layout-cards .dbrcb-grid,
	.dbrcb-layout-mosaic .dbrcb-grid,
	.dbrcb-layout-overlay .dbrcb-grid,
	.dbrcb-layout-spotlight .dbrcb-grid { grid-template-columns: 1fr; }
	.dbrcb-layout-mosaic .dbrcb-card:nth-child(5n+1) { grid-column: auto; grid-row: auto; }
	.dbrcb-layout-list .dbrcb-card-link { flex-direction: column; }
	.dbrcb-layout-list .dbrcb-card-media { width: 100%; }
	.dbrcb-single-gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
}