/* Samtalegrupper med klang — 1:1 port of the staging React page.
   Design tokens (from the app):
   cream/background hsl(40 20% 96%) · foreground hsl(160 30% 15%)
   muted-foreground hsl(160 10% 45%) · border hsl(35 20% 82%)
   resonantia-dark hsl(160 30% 12%) · resonantia-cream hsl(40 20% 96%) */

.vs-samtalegrupper {
	--sg-bg: hsl(40 20% 96%);
	--sg-fg: hsl(160 30% 15%);
	--sg-muted: hsl(160 10% 45%);
	--sg-border: hsl(35 20% 82%);
	--sg-dark: hsl(160 30% 12%);
	--sg-cream: hsl(40 20% 96%);
	background: var(--sg-bg);
	color: var(--sg-fg);
	font-size: 16px;
	line-height: 1.625;
}

.vs-samtalegrupper *,
.vs-samtalegrupper *::before,
.vs-samtalegrupper *::after { box-sizing: border-box; }

.vs-samtalegrupper h1,
.vs-samtalegrupper h2,
.vs-samtalegrupper h3 {
	font-family: "Domine", Georgia, serif !important;
	margin: 0;
}
.vs-samtalegrupper p { margin: 0; }

/* Layout widths */
.vs-sg-narrow { max-width: 48rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.vs-sg-mid    { max-width: 56rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.vs-sg-wide   { max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.vs-sg-section { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 768px) { .vs-sg-section { padding-top: 5rem; padding-bottom: 5rem; } }

/* Hero */
.vs-sg-hero {
	position: relative;
	height: 50vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
@media (min-width: 768px) { .vs-sg-hero { height: 60vh; } }
.vs-sg-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.vs-sg-hero__overlay { position: absolute; inset: 0; background: hsl(160 30% 12% / 0.5); }
.vs-sg-hero__inner { position: relative; z-index: 10; text-align: center; padding-left: 1.5rem; padding-right: 1.5rem; max-width: 56rem; }
.vs-sg-hero__title {
	font-size: 1.875rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--sg-cream);
}
.vs-sg-hero__subtitle {
	margin-top: 1.5rem;
	font-size: 1.125rem;
	color: hsl(40 20% 96% / 0.8);
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.625;
}
@media (min-width: 768px) {
	.vs-sg-hero__title { font-size: 3rem; }
	.vs-sg-hero__subtitle { font-size: 1.25rem; }
}
@media (min-width: 1024px) { .vs-sg-hero__title { font-size: 3.75rem; } }

/* Headings & text */
.vs-sg-h2 {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--sg-fg);
	text-align: center;
	margin-bottom: 3rem;
}
@media (min-width: 768px) { .vs-sg-h2 { font-size: 2.25rem; } }
.vs-sg-cta .vs-sg-h2,
.vs-sg-mid .vs-sg-h2 { margin-bottom: 1.5rem; }
.vs-sg-narrow.vs-sg-section .vs-sg-h2 { margin-bottom: 2rem; }

.vs-sg-lead { font-size: 1rem; color: var(--sg-muted); line-height: 1.625; }
@media (min-width: 768px) { .vs-sg-lead { font-size: 1.125rem; } }

.vs-sg-intro {
	font-size: 1rem;
	color: var(--sg-muted);
	line-height: 1.625;
	text-align: center;
	max-width: 48rem;
	margin: 0 auto 3rem;
}
@media (min-width: 768px) { .vs-sg-intro { font-size: 1.125rem; } }

.vs-sg-prose { margin-top: 3rem; display: flex; flex-direction: column; gap: 1.25rem; font-size: 1rem; color: var(--sg-muted); line-height: 1.625; }
@media (min-width: 768px) { .vs-sg-prose { font-size: 1.125rem; } }

/* Divider */
.vs-sg-divider { border-top: 1px solid hsl(35 20% 82% / 0.6); }

/* Three-element cards */
.vs-sg-grid3 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .vs-sg-grid3 { grid-template-columns: repeat(3, 1fr); } }
.vs-sg-card {
	display: flex;
	flex-direction: column;
	border-radius: 1rem;
	overflow: hidden;
	padding: 1.5rem;
}
@media (min-width: 768px) { .vs-sg-card { padding: 2rem; } }
.vs-sg-card--light { background-color: #D8D9D3; }
.vs-sg-card__icon {
	width: 3rem; height: 3rem;
	border-radius: 9999px;
	background: hsl(160 30% 12% / 0.2);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 1.25rem;
	color: var(--sg-dark);
}
.vs-sg-card__icon svg { width: 1.5rem; height: 1.5rem; }
.vs-sg-card__title { font-size: 1.125rem; font-weight: 600; color: var(--sg-dark); margin-bottom: 0.75rem; }
.vs-sg-card__text { font-size: 0.875rem; color: hsl(160 30% 12% / 0.8); line-height: 1.625; flex-grow: 1; }

/* KLANG list */
.vs-sg-klang { display: flex; flex-direction: column; gap: 1.5rem; }
.vs-sg-klang__row {
	display: flex; align-items: flex-start; gap: 1.25rem;
	border-radius: 1rem;
	padding: 1.5rem;
	background-color: #B3A794;
}
@media (min-width: 768px) { .vs-sg-klang__row { padding: 2rem; } }
.vs-sg-klang__letter {
	flex-shrink: 0;
	width: 3rem; height: 3rem;
	border-radius: 9999px;
	background: var(--sg-dark);
	display: flex; align-items: center; justify-content: center;
}
.vs-sg-klang__letter span { color: var(--sg-cream); font-weight: 700; font-size: 1.125rem; }
.vs-sg-klang__body { padding-top: 0.125rem; }
.vs-sg-klang__title { font-size: 1.125rem; font-weight: 600; color: var(--sg-dark); margin-bottom: 0.25rem; }
.vs-sg-klang__text { font-size: 0.875rem; color: hsl(160 30% 12% / 0.8); line-height: 1.625; }
@media (min-width: 768px) { .vs-sg-klang__text { font-size: 1rem; } }

/* CTA */
.vs-sg-cta { text-align: center; }
.vs-sg-cta .vs-sg-lead { margin: 0 auto 2.5rem; max-width: 42rem; }
.vs-sg-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
	padding: 1rem 2rem;
	background: var(--sg-dark);
	color: var(--sg-cream);
	font-size: 1rem; font-weight: 500;
	border-radius: 0.75rem;
	text-decoration: none;
	transition: background-color .2s;
}
.vs-sg-btn:hover { background: hsl(160 30% 12% / 0.9); color: var(--sg-cream); }
.vs-sg-btn svg { width: 1.25rem; height: 1.25rem; }

/* Re-assert the vertical rhythm with priority over the active theme's global
   heading/paragraph margins (pxl-style.min.css compresses them on the live site).
   Extra breathing room under the "Dannelse kræver tre elementer" heading and the
   KLANG intro, matching the staging design. */
.vs-samtalegrupper .vs-sg-h2 { margin-bottom: 3rem !important; }
.vs-samtalegrupper .vs-sg-mid .vs-sg-h2,
.vs-samtalegrupper .vs-sg-cta .vs-sg-h2 { margin-bottom: 1.5rem !important; }
.vs-samtalegrupper .vs-sg-narrow.vs-sg-section .vs-sg-h2 { margin-bottom: 2rem !important; }
.vs-samtalegrupper .vs-sg-intro { margin: 0 auto 3rem !important; }
.vs-samtalegrupper .vs-sg-prose { margin-top: 3rem !important; }

/* Section padding modifiers — let a logical section be split across several
   editable Elementor text widgets + shortcodes while keeping the same vertical
   rhythm (matches .vs-sg-section's 4rem / 5rem = Tailwind py-16/md:py-20). */
.vs-samtalegrupper .vs-sg-sec-top { padding-top: 4rem; }
.vs-samtalegrupper .vs-sg-sec-bottom { padding-bottom: 4rem; }
@media (min-width: 768px) {
	.vs-samtalegrupper .vs-sg-sec-top { padding-top: 5rem; }
	.vs-samtalegrupper .vs-sg-sec-bottom { padding-bottom: 5rem; }
}
.vs-samtalegrupper .vs-sg-btnwrap { text-align: center; }

/* All vertical rhythm comes from the vs-sg-* classes, never from Elementor's
   default 20px per-widget spacing — neutralise it on this page's container.
   (Scoped by the container's stable element id, since each block self-wraps in
   .vs-samtalegrupper and the widget wrapper is its ancestor.) */
.elementor-element-sgroot01 .elementor-widget { margin-bottom: 0 !important; }

/* Elementor's Text-editor widget injects its own heading font (DM Sans) and a
   dark text colour that beat our element/class rules. Re-assert the design with
   higher specificity inside text-editor widgets (the card grids are shortcodes
   and unaffected). */
.vs-samtalegrupper .elementor-widget-text-editor h1,
.vs-samtalegrupper .elementor-widget-text-editor h2,
.vs-samtalegrupper .elementor-widget-text-editor h3 {
	font-family: "Domine", Georgia, serif !important;
}
.vs-samtalegrupper .elementor-widget-text-editor .vs-sg-hero__title { color: var(--sg-cream) !important; }
.vs-samtalegrupper .elementor-widget-text-editor .vs-sg-hero__subtitle { color: hsl(40 20% 96% / 0.8) !important; }
.vs-samtalegrupper .elementor-widget-text-editor .vs-sg-h2 { color: var(--sg-fg) !important; margin-bottom: 3rem !important; }
.vs-samtalegrupper .elementor-widget-text-editor .vs-sg-mid .vs-sg-h2,
.vs-samtalegrupper .elementor-widget-text-editor .vs-sg-cta .vs-sg-h2 { margin-bottom: 1.5rem !important; }
.vs-samtalegrupper .elementor-widget-text-editor .vs-sg-narrow.vs-sg-section .vs-sg-h2 { margin-bottom: 2rem !important; }
.vs-samtalegrupper .elementor-widget-text-editor .vs-sg-lead,
.vs-samtalegrupper .elementor-widget-text-editor .vs-sg-intro,
.vs-samtalegrupper .elementor-widget-text-editor .vs-sg-prose,
.vs-samtalegrupper .elementor-widget-text-editor .vs-sg-prose p { color: var(--sg-muted) !important; }
.vs-samtalegrupper .elementor-widget-text-editor .vs-sg-intro { margin: 0 auto 3rem !important; }

/* Paint the whole page container cream so no white page-background shows through
   the gaps/margins between the self-wrapped .vs-samtalegrupper blocks. */
.elementor-element-sgroot01 { background-color: hsl(40 20% 96%); }