/* Pagina Stijlgids (page-stijlgids.php) — Stijlgids.dc.html */

/* Hero */
.sg-hero {
	position: relative;
	overflow: hidden;
	background: var(--aubergine);
	color: var(--linnen);
}

.sg-watermerk {
	position: absolute;
	right: -60px;
	top: -80px;
	width: 420px;
	height: auto;
	opacity: .09;
	transform: rotate(18deg);
	pointer-events: none;
}

.sg-hero__binnen {
	position: relative;
	max-width: var(--max-breedte);
	margin: 0 auto;
	padding: clamp(56px, 8vw, 112px) var(--gutter);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sg-hero .bovenregel {
	color: var(--lichtgroen);
}

.sg-hero h1 {
	font-size: clamp(48px, 8vw, 112px);
	line-height: .95;
	letter-spacing: -.03em;
}

.sg-hero__intro {
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.5;
	color: var(--tekst-op-donker);
	max-width: 640px;
}

.sg-inhoud {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sg-inhoud a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 14px;
	border-radius: var(--radius-pil);
	border: 1px solid var(--lijn-op-donker);
	font-size: 14px;
	line-height: 1.2;
	color: var(--linnen);
}

.sg-inhoud a:hover {
	background: var(--linnen);
	color: var(--aubergine);
}

/* Secties */
.sg-main {
	max-width: var(--max-breedte);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.sg-sectie {
	padding: var(--sectie-ruimte) 0;
	border-bottom: 1px solid var(--lijn-sectie);
	display: flex;
	flex-direction: column;
	gap: 32px;
	scroll-margin-top: 16px;
}

.sg-sectie:last-child {
	border-bottom: 0;
}

.sg-sectie--zij {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 40px;
}

.sg-sectie--zij > :last-child {
	min-width: 0;
}

/* Vanaf 768 px is er ruimte voor twee kolommen: inhoud beslaat er twee */
@media (min-width: 768px) {
	.sg-sectie--zij > :last-child {
		grid-column: span 2;
	}
}

.sg-kop {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sg-kop__nummer {
	font-size: 13px;
	line-height: 1.5;
	color: var(--pruim);
	font-weight: 600;
}

.sg-kop h2 {
	font-size: 40px;
	line-height: 1;
}

.sg-kop p {
	margin-top: 8px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--tekst);
	max-width: 680px;
}

.sg-stapel {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.sg-lead {
	font-size: 18px;
	line-height: 1.7;
	color: var(--tekst-intro);
	text-wrap: pretty;
}

/* Rasters en kaarten */
.sg-raster {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sg-min, 340px)), 1fr));
}

.sg-raster--240 { --sg-min: 240px; }
.sg-raster--260 { --sg-min: 260px; }
.sg-raster--220 { --sg-min: 220px; }

.sg-kaart {
	background: var(--wit);
	border-radius: var(--radius);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.sg-kaart--donker {
	background: var(--aubergine);
	color: var(--linnen);
}

.sg-kaart__label {
	font-size: 13px;
	line-height: 1.5;
	color: var(--grijs-tekst);
}

.sg-kaart__titel {
	font-weight: 600;
	line-height: 1.5;
}

.sg-kaart__tekst {
	font-size: 15px;
	line-height: 1.6;
	color: var(--tekst);
}

.sg-kaart__noot {
	font-size: 14px;
	line-height: 1.6;
	color: var(--grijs-tekst);
}

.sg-kaart--donker .sg-kaart__noot {
	color: var(--tekst-op-donker);
}

/* Logo op licht en donker */
.sg-logo {
	min-height: 220px;
	align-items: center;
	justify-content: center;
}

.sg-logo img {
	display: block;
	width: 100%;
	max-width: 340px;
	height: auto;
}

/* Beeldmerk, app-icoon en favicon */
.sg-logovarianten {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
}

.sg-logovarianten img {
	display: block;
}

.sg-logovarianten__vlak {
	display: flex;
	align-items: center;
	padding: 20px 28px;
	border-radius: var(--radius);
	background: var(--wit);
}

.sg-logovarianten__vlak img {
	width: auto;
	height: 72px;
}

.sg-logovarianten__vlak--donker {
	background: var(--aubergine);
}

.sg-logovarianten__app {
	border-radius: 21px;
	box-shadow: var(--schaduw-icoon);
}

/* Definitielijst (Naam / Tagline / Logo, Hoeken / …) */
.sg-lijst {
	margin: 0;
	border-top: 1px solid var(--inkt);
}

.sg-lijst > div {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--lijn);
}

/* Vanaf 768 px de brede labelkolom uit het ontwerp */
@media (min-width: 768px) {
	.sg-lijst > div {
		grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
	}
}

.sg-lijst dt {
	color: var(--grijs-tekst);
	font-size: 15px;
	line-height: 1.6;
}

.sg-lijst dd {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

/* Kleur */
.sg-kleuren {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: 16px;
}

.sg-kleur {
	background: var(--wit);
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--lijn-kaart);
}

.sg-kleur__staal {
	height: 120px;
	display: flex;
	align-items: flex-end;
	padding: 14px;
	font-family: var(--font-kop);
	font-size: 22px;
	line-height: 1;
}

.sg-kleur__info {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sg-kleur__naam {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.5;
}

.sg-kleur__hex {
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 1.5;
	color: var(--grijs-tekst);
}

.sg-kleur__gebruik {
	font-size: 14px;
	line-height: 1.5;
	color: var(--tekst);
	margin-top: 4px;
}

.sg-verhouding {
	display: flex;
	height: 40px;
	border-radius: var(--radius-pil);
	overflow: hidden;
}

.sg-verhouding span:nth-child(1) { flex: 6; background: var(--linnen); border: 1px solid rgba(40, 48, 42, .12); border-radius: var(--radius-pil) 0 0 var(--radius-pil); }
.sg-verhouding span:nth-child(2) { flex: 2; background: var(--inkt); }
.sg-verhouding span:nth-child(3) { flex: 1.2; background: var(--pruim); }
.sg-verhouding span:nth-child(4) { flex: .8; background: var(--aubergine); }
.sg-verhouding span:nth-child(5) { flex: .3; background: var(--blad); }

.sg-verhouding-tekst {
	margin-top: -16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--grijs-tekst);
}

/* Typografie */
.sg-aa {
	font-size: 96px;
	line-height: 1;
}

.sg-aa--kop {
	font-family: var(--font-kop);
}

.sg-aa--accent {
	font-family: var(--font-accent);
	color: var(--pruim);
}

.sg-aa--tekst {
	font-weight: 500;
}

.sg-typeschaal {
	border-top: 1px solid var(--inkt);
}

.sg-typeregel {
	display: grid;
	grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
	gap: 16px 32px;
	align-items: baseline;
	padding: 22px 0;
	border-bottom: 1px solid var(--lijn);
}

.sg-typeregel__naam {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sg-typeregel__naam strong {
	font-weight: 600;
	font-size: 14px;
	line-height: 1.5;
}

.sg-typeregel__naam code {
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--grijs-tekst);
}

.sg-typeregel__voorbeeld {
	line-height: 1.1;
	min-width: 0;
}

.sg-t-display  { font-family: var(--font-kop); font-size: clamp(40px, 12vw, 72px); letter-spacing: -.025em; }
.sg-t-kop1     { font-family: var(--font-kop); font-size: clamp(32px, 9vw, 52px); letter-spacing: -.02em; }
.sg-t-kop2     { font-family: var(--font-kop); font-size: 34px; letter-spacing: -.01em; }
.sg-t-accent   { font-family: var(--font-accent); font-size: clamp(28px, 6vw, 40px); line-height: 1.3; color: var(--pruim); }
.sg-t-intro    { font-size: 19px; color: var(--tekst-intro); }
.sg-t-tekst    { font-size: 17px; color: var(--tekst); }
.sg-t-bijschrift { font-size: 14px; color: var(--grijs-tekst); }

/* Display en Kop 1 schalen mee op smalle schermen; vanaf 768 px de maat uit het ontwerp */
@media (min-width: 768px) {
	.sg-t-display { font-size: 72px; }
	.sg-t-kop1 { font-size: 52px; }
}

/* Knoppen */
.sg-knoppen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.sg-kaart--knoppen {
	gap: 20px;
}

.sg-voorbeeld-boekknop {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	padding: 14px 22px;
	border-radius: var(--radius-pil);
	background: var(--pruim);
	color: var(--linnen);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: var(--schaduw-zwevend);
}

/* Componenten */
.sg-sectiekop-kop {
	font-family: var(--font-kop);
	font-size: 40px;
	line-height: 1;
	letter-spacing: -.02em;
}

.sg-prijsregel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 6px 16px;
	padding: 16px 0;
	border-top: 1px solid var(--inkt);
	border-bottom: 1px solid var(--lijn);
}

.sg-prijsregel__naam {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
}

.sg-prijsregel__titel,
.sg-prijsregel__prijs {
	font-family: var(--font-kop);
	font-size: 22px;
	line-height: 1.3;
}

.sg-prijsregel__prijs {
	color: var(--pruim);
}

.sg-prijsregel__duur {
	font-size: 13px;
	color: var(--mos-tekst);
	font-weight: 600;
}

.sg-prijsregel__onderdelen {
	grid-column: 1 / -1;
	font-size: 14px;
	line-height: 1.5;
	color: var(--grijs-tekst);
}

/* Voorbeeld van de dichte stand; de werkende uitklapvraag volgt bij de pagina's */
.sg-faq {
	border-top: 1px solid var(--inkt);
	border-bottom: 1px solid var(--lijn);
	padding: 16px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.sg-faq__vraag {
	font-family: var(--font-kop);
	font-size: 20px;
	line-height: 1.3;
}

.sg-faq__plus {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid rgba(40, 48, 42, .3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pruim);
}

.sg-opsomming {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sg-opsomming li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	line-height: 1.5;
}

/* Beeld */
.sg-beeld {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sg-beeld__vlak {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--lila);
}

/* Bloemen: liggend 3:2 */
.sg-beeld__vlak--breed {
	aspect-ratio: 3 / 2;
}

.sg-beeld__vlak img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 68% center;
}

.sg-beeld__vlak--leeg {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
	color: var(--grijs-tekst);
}

.sg-beeld__vlak--donker {
	background: var(--aubergine);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sg-beeld__vlak--donker svg {
	width: 70%;
	height: auto;
	opacity: .35;
}

.sg-beeld__bijschrift {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Tone of voice */
.sg-toon {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 16px;
}

.sg-toon .sg-kaart {
	padding: 28px;
	gap: 10px;
}

.sg-toon .sg-kaart p {
	font-size: 16px;
	line-height: 1.7;
}

.sg-toon .bovenregel--wel {
	color: var(--mos-tekst);
}

.sg-citaat {
	grid-column: 1 / -1;
	margin: 0;
	background: var(--lila);
	border-radius: var(--radius);
	padding: 28px;
	font-family: var(--font-kop);
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.3;
}

/* Pagina's */
.sg-paginas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 12px;
}

.sg-paginas a {
	height: 100%;
	background: var(--wit);
	border: 1px solid var(--lijn-kaart);
	border-radius: var(--radius);
	padding: 20px 22px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.sg-paginas a:hover {
	border-color: var(--pruim);
	color: var(--pruim);
}

.sg-paginas__tekst {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sg-paginas__titel {
	font-family: var(--font-kop);
	font-size: 20px;
	line-height: 1.2;
}

.sg-paginas__soort {
	font-size: 13px;
	line-height: 1.5;
	color: var(--grijs-tekst);
}

.sg-sectie--paginas {
	gap: 28px;
}