/*
  Paginapatronen — Schoonheidsstudio Ingrid Buelens
  Basisinstructie 14.3 en 15, versie 0.1.0

  Layoutpatronen voor de kernpagina's. Alles verwijst naar tokens.css.
  Mobile-first vanaf 320 px; media queries verruimen, ze verkleinen nooit.
*/

/* ------------------------------------------------------------------ */
/*  Titelbalk van TheGem                                               */
/* ------------------------------------------------------------------ */

/*
  De kop in die balk erft h1 uit tokens.css en wordt daar tot 60 pixels groot.
  Dat is de maat voor een hoofdkop midden op een pagina, niet voor een smalle
  balk waarin de titel alleen aankondigt waar je bent. Hier een eigen schaal,
  die op een telefoon niet over drie regels breekt.

  De hoogte van de balk zelf staat in functions.php: dat is een instelling van
  TheGem en geen CSS, dus daar hoort ze thuis.
*/
#page-title .page-title-title h1 {
	font-size: clamp(calc(var(--basis) * 1.75), calc(var(--basis) * 1.35) + 1.6vw, calc(var(--basis) * 2.75));
	line-height: var(--lh-heading);
	margin: 0;
}

/* Het kruimelpad is navigatie, geen lopende tekst: kleiner en rustiger. */
#page-title .breadcrumbs {
	font-size: var(--fs-sm);
	letter-spacing: 0.01em;
	line-height: 1.4;
}

/*
  TheGem hangt het kruimelpad met `position: absolute; bottom: 0` aan de
  onderrand van de titelbalk. Dat had twee gevolgen: het pad plakte tegen de
  onderkant zonder enige ruimte, en de hele padding onderaan bleef ongebruikt —
  waardoor alle lucht bovenaan zat en de titel te ver naar beneden leek te staan.

  Terug in de normale stroom. Dan telt de padding van de balk weer aan beide
  kanten mee en bepaalt de marge hieronder de afstand tussen titel en pad.
*/
#page-title .breadcrumbs-container {
	position: static;
	margin-block-start: var(--space-3);
	/* De container erfde de regelhoogte van de lopende tekst en werd daardoor
	   hoger dan het kruimelpad zelf. */
	line-height: 1.4;
}

/* Zonder deze regel houdt de balk de hoogte die TheGem berekende voor de
   absolute variant. */
#page-title .page-title-block-inner,
#page-title .container {
	min-height: 0;
}

/* ------------------------------------------------------------------ */
/*  Basisritme                                                         */
/* ------------------------------------------------------------------ */

.ssb-wrap {
	width: 100%;
	max-width: var(--breedte-wrap);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

.ssb-wrap--narrow { max-width: var(--breedte-smal); }

/*
  De lucht binnen een band.

  Dit stond eerst op --space-16 (64 px) boven én onder, daarna op --space-12
  (48 px). Nog altijd te veel, en het valt vooral op bij de kórte banden. Een
  band met twee regels tekst kreeg evenveel lucht als een band met een volledige
  behandelbeschrijving: 96 pixels om 120 pixels inhoud. Dat leest niet als
  ruimte maar als leegte, en het duwt de pagina uit elkaar.

  Nu --space-8 (32 px) op een breed scherm, dus 64 tussen twee banden. De banden
  wisselen al van achtergrondkleur; die kleurwissel doet het scheidingswerk, de
  ruimte hoeft dat niet nog eens over te doen.
*/
.ssb-section {
	padding-block: var(--space-6);
}

@media (min-width: 48rem) {
	.ssb-wrap { padding-inline: var(--space-8); }
	.ssb-section { padding-block: var(--space-8); }
}

/*
  De afsluitende band: de opmerking over de duur en de verwijzing terug naar het
  overzicht. Twee regels, meer niet. Die hoort niet even zwaar te wegen als een
  band met inhoud, en krijgt daarom nog minder lucht.
*/
.ssb-section--slot {
	padding-block: var(--space-4);
}

@media (min-width: 48rem) {
	.ssb-section--slot { padding-block: var(--space-6); }
}

/*
  De eerste band na de titelbalk krijgt minder lucht bovenaan. Die balk is zelf
  al een gekleurd vlak met ruimte eronder; nog eens de volle sectiepadding
  erbovenop duwt de inhoud onnodig ver naar beneden.
*/
#page-title + * .ssb-section:first-child,
#main-content > .ssb-section:first-child,
.main-content > .ssb-section:first-child {
	padding-block-start: var(--space-6);
}

@media (min-width: 48rem) {
	#page-title + * .ssb-section:first-child,
	#main-content > .ssb-section:first-child,
	.main-content > .ssb-section:first-child {
		padding-block-start: var(--space-8);
	}
}

.ssb-section--alt { background-color: var(--paper-2); }
.ssb-section--bone { background-color: var(--bone); }

.ssb-section > * + * { margin-block-start: var(--space-6); }

/*
  De tussenkoppen in een tekstblok.

  TheGem zet elke h3 in hoofdletters, met marges van 1,13em boven én onder. Op
  een blok met één kop valt dat niet op. Op een behandelpagina staan er acht
  onder elkaar — "Werking", "Resultaat", "Het masker" — en dan roept de pagina
  in plaats van te vertellen, met telkens 36 pixels lucht aan beide kanten.

  Dus: gewone schrijfwijze, een maat kleiner, en de ruimte bóven een kop veel
  groter dan die eronder. Een kop hoort bij de tekst die volgt en niet bij de
  alinea die eraan voorafgaat; staat er evenveel lucht aan beide kanten, dan
  zweeft hij ertussen en moet de lezer zelf uitmaken waar hij bij hoort.

  Alleen in --narrow, want dat is het tekstblok. De koppen op de kaarten in het
  overzicht houden hun eigen opmaak.
*/
.ssb-wrap--narrow h3 {
	font-size: var(--fs-h4);
	text-transform: none;
	letter-spacing: var(--ls-display);
	margin-block: var(--space-8) var(--space-2);
}

.ssb-wrap--narrow > h3:first-child {
	margin-block-start: 0;
}

/* Bovenschrift boven een kop. Kleur alleen is niet genoeg, dus ook hoofdletters + spatiëring. */
.ssb-eyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--accent-text);
	margin-block-end: var(--space-2);
}

/* Kopgroep (eyebrow + kop + leadtekst) hoort visueel bij elkaar; de browser-standaardmarge van de kop is te ruim voor die samenhang. */
.ssb-eyebrow + h2 {
	margin-block: 0 var(--space-3);
}

h2 + .ssb-lead {
	margin-block-start: 0;
}

.ssb-lead {
	font-size: var(--fs-lg);
	color: var(--ink-soft);
	max-width: var(--breedte-lezen);
}

/* ------------------------------------------------------------------ */
/*  Hero                                                               */
/* ------------------------------------------------------------------ */

.ssb-hero {
	background-color: var(--paper);
	padding-block: var(--space-12) var(--space-16);
}

.ssb-hero h1 { margin-block: var(--space-2) var(--space-4); }

.ssb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-block-start: var(--space-8);
}

/*
  Hoofdbeeld naast de tekst vanaf 64rem. Daaronder staat het beeld ónder de
  tekst: op een telefoon moet de boodschap eerst komen, niet de foto.
*/
.ssb-hero__grid {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 64rem) {
	.ssb-hero__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--space-12);
	}
}

.ssb-hero--media .ssb-facts { margin-block-start: var(--space-12); }

/* ------------------------------------------------------------------ */
/*  Tekst naast beeld                                                  */
/* ------------------------------------------------------------------ */

.ssb-split {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 48rem) {
	.ssb-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
	/* Het beeld eerst in de bron zou de leesvolgorde omdraaien; daarom
	   verplaatsen we het visueel en laat de DOM-volgorde de tekst voorgaan. */
	.ssb-split--beeld-links .ssb-split__tekst { order: 2; }
}

.ssb-split__tekst > * + * { margin-block-start: var(--space-4); }

/* ------------------------------------------------------------------ */
/*  Knoppen                                                            */
/* ------------------------------------------------------------------ */

.ssb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--tap-min);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-pill);
	border: 1px solid var(--ink);
	background-color: var(--ink);
	color: var(--paper);
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-base);
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.ssb-btn:hover,
.ssb-btn:focus-visible {
	background-color: var(--accent-text);
	border-color: var(--accent-text);
	color: var(--paper);
}

.ssb-btn--ghost {
	background-color: transparent;
	color: var(--ink);
	border-color: var(--line-strong);
}

.ssb-btn--ghost:hover,
.ssb-btn--ghost:focus-visible {
	background-color: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

/* ------------------------------------------------------------------ */
/*  Kerncijfers                                                        */
/* ------------------------------------------------------------------ */

.ssb-facts {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
	margin-block-start: var(--space-8);
	padding-block-start: var(--space-6);
	border-top: 1px solid var(--line);
	list-style: none;
	padding-inline-start: 0;
}

@media (min-width: 36rem) {
	.ssb-facts { grid-template-columns: repeat(3, 1fr); }
}

.ssb-facts dt,
.ssb-facts .ssb-facts__label {
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--ink-soft);
}

.ssb-facts dd,
.ssb-facts .ssb-facts__value {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	color: var(--ink);
}

/* ------------------------------------------------------------------ */
/*  Kaartenraster                                                      */
/* ------------------------------------------------------------------ */

.ssb-grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
	list-style: none;
	padding-inline-start: 0;
	margin-block-start: var(--space-8);
}

@media (min-width: 40rem) { .ssb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .ssb-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.ssb-treatment {
	background-color: var(--bone);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.ssb-treatment h3 {
	font-size: var(--fs-h4);
	margin: 0;
}

.ssb-treatment p {
	margin: 0;
	color: var(--ink-soft);
}

/* De verwijzing naar de detailpagina staat onderaan de kaart, los van de
   lopende tekst, zodat ze op elke kaart op dezelfde plek staat. */
.ssb-treatment__meer {
	margin-block-start: auto;
	padding-block-start: var(--space-3);
	border-top: 1px solid var(--line);
	font-weight: var(--fw-medium);
}

/*
  Een link die alleen in een alinea staat, is geen link ín een zin: de
  uitzondering van WCAG 2.5.8 op de minimummaat van 24 bij 24 pixels gaat hier
  dus niet op. Zonder deze regel is zo'n link 19 pixels hoog, en dat is met een
  vinger op een telefoon net te weinig.
*/
.ssb-treatment__meer a,
.ssb-treatment > p:last-child > a:only-child,
.ssb-wrap > p > a:only-child,
.ssb-wrap > * > p > a:only-child {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* ------------------------------------------------------------------ */
/*  De werkzame stoffen en het verloop van een verzorging              */
/* ------------------------------------------------------------------ */

/*
  Naam en omschrijving van een werkzame stof. De naam staat op een eigen regel
  en in het accent: dat zijn de namen waarop iemand die de producten kent gaat
  scannen, en ze horen niet weg te vallen in de lopende tekst.
*/
.ssb-stoffen {
	margin: 0;
}

.ssb-stoffen dt {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-weight: var(--fw-semibold);
	color: var(--accent-text);
	letter-spacing: var(--ls-caps);
	margin-block-start: var(--space-6);
}

.ssb-stoffen dt:first-child {
	margin-block-start: 0;
}

/*
  Het ronde beeldje bij de stof. Het komt uit de catalogus van Casmara en staat
  daar naast dezelfde naam; het is versiering bij een naam die er als tekst al
  staat, en draagt daarom een leeg alt.

  De vaste breedte én hoogte staan er met opzet bij: zonder hoogte schuift de
  hele lijst nog op zodra de beeldjes binnenkomen. Niet elk beeldje bestaat —
  van een aantal stoffen heeft de catalogus er geen — en dan valt de flexregel
  gewoon terug op alleen de naam.
*/
.ssb-stof__beeld {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
}

.ssb-stoffen dd {
	margin: var(--space-1) 0 0;
	color: var(--ink-soft);
}

/* Uitlijnen onder de naam, zodat de omschrijving niet onder het beeldje duikt. */
.ssb-stoffen dt:has(.ssb-stof__beeld) + dd {
	padding-inline-start: calc(52px + var(--space-3));
}

@media (max-width: 34rem) {
	.ssb-stoffen dt:has(.ssb-stof__beeld) + dd {
		padding-inline-start: 0;
	}
}

/*
  Het verloop in de cabine. Genummerd, want de volgorde ís de inhoud. Het
  nummer staat in een eigen kolom zodat de regels eronder netjes uitlijnen —
  met een gewone opsomming schuift de tweede regel onder het cijfer door.

  `value` op de li's blijft leidend: staat er ooit een fase niet in de lijst,
  dan blijft de nummering die van Casmara en gaat er niet stilzwijgend
  hernummerd worden.
*/
.ssb-fasen {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

/*
  De kolom is breed genoeg voor "Fase 6" in kapitalen mét letterspatiëring:
  ongeveer 53 pixels. Ze stond op 3,2rem, en omdat het label niet mag afbreken
  liep het onder de zin ernaast door. Het nummer was daardoor onleesbaar.
*/
.ssb-fasen li {
	display: grid;
	grid-template-columns: 6rem 1fr;
	gap: var(--space-3);
	align-items: baseline;
	padding-block: var(--space-3);
	border-block-start: 1px solid var(--line);
}

.ssb-fasen li:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

.ssb-fasen li::before {
	content: "Fase " attr(value);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--muted-text);
	white-space: nowrap;
}

@media (max-width: 30rem) {
	.ssb-fasen li {
		grid-template-columns: 1fr;
		gap: var(--space-1);
	}
}

.ssb-tag {
	align-self: flex-start;
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--accent-text);
	background-color: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	padding: var(--space-1) var(--space-3);
}

/*
  Prijs en duur staan bewust nog niet in de opmaak: die gegevens zijn volgens
  basisinstructie 4.2 nog niet bevestigd. Zodra ze er zijn, komt hier een
  .ssb-treatment__meta met var(--font-mono) en tabular-nums.
*/

/* ------------------------------------------------------------------ */
/*  Afbeeldingen en tijdelijke plaatshouders                           */
/* ------------------------------------------------------------------ */

.ssb-figure {
	margin: 0 0 var(--space-4);
	border-radius: var(--radius);
	overflow: hidden;
	background-color: var(--paper-2);
}

/*
  De foto op een behandelkaart is een link naar de detailpagina. Zonder
  `display: block` blijft de link een inline element en houdt hij de paar pixels
  ruimte onder het beeld die uit de regelhoogte komen.

  De link staat op tabindex="-1" en aria-hidden="true" — zie de toelichting in
  dev/tools/behandelpaginas.php. Er is dus geen focusstijl nodig: hij kán geen
  focus krijgen. Wat wel nodig is, is dat de muisgebruiker ziet dat er iets te
  klikken valt.
*/
.ssb-figure__link {
	display: block;
	cursor: pointer;
}

.ssb-figure__link img {
	transition: transform var(--dur-slow, 0.4s) var(--ease), opacity var(--dur) var(--ease);
}

/*
  Bij aanwijzen komt het beeld rustig naar voren. Geen schaduw of rand: de kaart
  heeft er al een, en twee signalen tegelijk maken het onrustig.
*/
.ssb-treatment:hover .ssb-figure__link img,
.ssb-figure__link:hover img {
	transform: scale(1.03);
}

/* Wie beweging liever niet heeft, krijgt ze niet. */
@media (prefers-reduced-motion: reduce) {
	.ssb-figure__link img {
		transition: none;
	}

	.ssb-treatment:hover .ssb-figure__link img,
	.ssb-figure__link:hover img {
		transform: none;
		opacity: 0.92;
	}
}

/*
  De aangeleverde bestanden staan al op 16:9 (dev/tools/beeldmateriaal.py).
  aspect-ratio staat hier toch expliciet: dan reserveert de browser de plaats
  al vóór het beeld binnen is en verspringt de tekst eronder niet.
  object-fit vangt af wat er gebeurt als er later een beeld met een andere
  verhouding wordt ingezet.
*/
.ssb-figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ssb-figure figcaption {
	padding: var(--space-3) var(--space-4);
	font-size: var(--fs-sm);
	color: var(--ink-soft);
	background-color: var(--paper-2);
}

/*
  Het hoofdbeeld op de voorpagina staat naast de tekst en vult daar een hogere
  kolom. Het bestand is daarom al op 4:3 aangeleverd (zie
  dev/tools/beeldmateriaal.json); deze regel volgt dat, hij snijdt niet bij.
  Bijsnijden met object-fit zou pas in de browser zichtbaar worden, en op deze
  foto zou dat het gezicht kunnen raken.
*/
.ssb-figure--hero img { aspect-ratio: 4 / 3; }

/* Beeld over de volle breedte van de tekstkolom, met wat lucht erboven en
   eronder. De verhouding blijft 16:9: alle bestanden zijn zo aangeleverd. */
.ssb-figure--breed { margin-block: var(--space-8); }

/*
  Productfoto's. Die zijn 4:3 aangeleverd en niet bijgesneden maar aangevuld
  (zie de pasvorm "passen" in dev/tools/beeldmateriaal.py): bij een flacon
  waarvan de dop wegvalt, denkt de bezoeker aan een fout in plaats van aan een
  bewuste uitsnede.
*/
.ssb-figure--product {
	background-color: var(--paper);
	border: 1px solid var(--line);
}

.ssb-figure--product img { aspect-ratio: 4 / 3; object-fit: contain; }

/*
  Gescand of gefotografeerd document (diploma). Het bestand is 4:3 aangeleverd
  en mag niet bijgesneden worden: anders valt een stuk van het kader of de tekst
  weg. Daarom de eigen verhouding behouden in plaats van de standaard 16:9.
*/
.ssb-figure--document img { aspect-ratio: 4 / 3; object-fit: contain; }

/* ------------------------------------------------------------------ */
/*  Prijs bij een behandeling                                          */
/* ------------------------------------------------------------------ */

.ssb-prijs {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2);
	margin-block: var(--space-4);
}

/*
  Het bedrag in monospace met tabular-nums. Onder elkaar in het overzicht
  lijnen de cijfers dan uit, waardoor 85,00 en 105,00 in één oogopslag te
  vergelijken zijn.
*/
.ssb-prijs__bedrag {
	font-family: var(--font-mono);
	font-size: var(--fs-h4);
	font-variant-numeric: tabular-nums;
	font-weight: var(--fw-medium);
	color: var(--ink);
}

/* "inclusief btw" is verplichte context bij een consumentenprijs, maar het is
   geen onderdeel van het bedrag; daarom kleiner en rustiger. */
.ssb-prijs__noot {
	font-size: var(--fs-sm);
	color: var(--ink-soft);
}

/* In een kaart staat de prijs boven de verwijzing, tegen de onderrand aan. */
.ssb-treatment .ssb-prijs { margin-block: var(--space-2) 0; }

/* Bronvermelding onder een blok dat niet onze eigen tekst is. */
.ssb-bron {
	font-size: var(--fs-sm);
	color: var(--muted-text);
	font-style: italic;
}

/* ------------------------------------------------------------------ */
/*  Productlijst bij een behandeling                                   */
/* ------------------------------------------------------------------ */

.ssb-producten {
	list-style: none;
	padding-inline-start: 0;
	margin-block: var(--space-6);
	border-top: 1px solid var(--line);
}

.ssb-producten li {
	display: grid;
	gap: var(--space-1);
	padding-block: var(--space-4);
	border-bottom: 1px solid var(--line);
}

.ssb-producten__naam {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	color: var(--ink);
	line-height: var(--lh-heading);
}

.ssb-producten__omschrijving { color: var(--ink-soft); }

/* De inhoud in monospace met tabular-nums: 30 ml en 500 ml lijnen dan onder
   elkaar uit, wat het vergelijken van formaten makkelijker maakt. */
.ssb-producten__inhoud {
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
	color: var(--muted-text);
}

/*
  Plaatshouder tot de echte foto's er zijn.
  Vervangen door <img src="..." alt="..."> en de modifier weghalen.
  De verhouding staat vast, zodat de layout niet verspringt bij de vervanging.
*/
.ssb-figure--placeholder {
	position: relative;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--line-strong);
	background-color: var(--paper-2);
	background-image: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 10px,
		rgba(43, 32, 27, 0.03) 10px,
		rgba(43, 32, 27, 0.03) 20px
	);
}

.ssb-figure--placeholder .ssb-figure__label {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--ink-soft);
	text-align: center;
	padding: var(--space-3);
}

.ssb-figure--square { aspect-ratio: 1 / 1; }
.ssb-figure--wide { aspect-ratio: 21 / 9; }

.ssb-treatment .ssb-figure { margin-block-end: var(--space-2); }

/* ------------------------------------------------------------------ */
/*  Citaat van Ingrid                                                  */
/* ------------------------------------------------------------------ */

.ssb-quote {
	background-color: var(--ink);
	color: var(--paper);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
}

.ssb-quote blockquote {
	border-left-color: var(--accent-soft);
	color: var(--paper);
	margin: 0;
}

.ssb-quote cite {
	display: block;
	margin-block-start: var(--space-4);
	font-family: var(--font-body);
	font-style: normal;
	font-size: var(--fs-sm);
	color: var(--accent-soft);
}

/* ------------------------------------------------------------------ */
/*  Contact                                                            */
/* ------------------------------------------------------------------ */

.ssb-contact {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.ssb-contact { grid-template-columns: repeat(2, 1fr); }
}

.ssb-contact__block {
	background-color: var(--bone);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}

.ssb-contact__block h2,
.ssb-contact__block h3 { margin-block-start: 0; }

/*
  Een lang e-mailadres in monospace loopt op 320 px buiten de kaart. Alleen
  daar breken we midden in het woord af; bij de rest zou dat het lezen juist
  moeilijker maken.
*/
.ssb-contact__value--breek {
	overflow-wrap: anywhere;
	font-size: var(--fs-base);
}

/*
  Tekst die alleen voor een schermlezer bedoeld is. Niet display:none en niet
  visibility:hidden: die twee halen de tekst ook uit de toegankelijkheidsboom.
*/
.ssb-extern {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Telefoonnummer en adres in monospace met tabular-nums: makkelijker te lezen en over te nemen. */
.ssb-contact__value {
	font-family: var(--font-mono);
	font-size: var(--fs-lg);
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	display: block;
	margin-block: var(--space-2);
}

/* Openingsuren als beschrijvingslijst; gesloten dagen krijgen ook tekst, niet enkel een streepje. */
.ssb-hours {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-2) var(--space-6);
	font-variant-numeric: tabular-nums;
}

.ssb-hours dt { color: var(--ink-soft); }
.ssb-hours dd { margin: 0; color: var(--ink); font-family: var(--font-mono); font-size: var(--fs-sm); }
.ssb-hours dd.is-closed { color: var(--ink-soft); font-family: var(--font-body); }

/* ------------------------------------------------------------------ */
/*  Nota's en voorbehoud                                               */
/* ------------------------------------------------------------------ */

.ssb-note {
	background-color: var(--paper-2);
	border-left: 3px solid var(--warm);
	border-radius: var(--radius);
	padding: var(--space-4) var(--space-6);
	font-size: var(--fs-sm);
	color: var(--ink-soft);
}

/* ------------------------------------------------------------------ */
/*  Sla-over-link voor toetsenbordgebruikers, basisinstructie 15       */
/* ------------------------------------------------------------------ */

.ssb-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background-color: var(--ink);
	color: var(--paper);
	padding: var(--space-3) var(--space-6);
	border-radius: 0 0 var(--radius) 0;
}

.ssb-skip-link:focus {
	left: 0;
}

/* ------------------------------------------------------------------ */
/*  Geen horizontale overflow op 320 px                                */
/* ------------------------------------------------------------------ */

.ssb-section img,
.ssb-section table,
.ssb-section pre { max-width: 100%; }

/* ------------------------------------------------------------------ */
/*  Merken met een eigen opbouw (Nomige)                               */
/*  Zie dev/tools/behandelpaginas-nomige.php                           */
/* ------------------------------------------------------------------ */

/* Negen stappen doorlopend genummerd, niet "Fase 1..9". */
.ssb-fasen--stappen li::before { content: "Stap " attr(value); }

h4 + .ssb-fasen { margin-block-start: var(--space-3); }
.ssb-fasen + h4 { margin-block-start: var(--space-8); }

/* Drie begrippen naast elkaar, op smal scherm onder elkaar. */
.ssb-tegels {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
	margin: var(--space-6) 0 0;
}

@media (min-width: 48rem) {
	.ssb-wrap--narrow .ssb-tegels { grid-template-columns: repeat(3, 1fr); }
}

.ssb-tegels__item {
	background-color: var(--bone);
	border-radius: var(--radius);
	padding: var(--space-4) var(--space-5, var(--space-4));
}

.ssb-tegels dt {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	color: var(--ink);
	margin-block-end: var(--space-2);
}

.ssb-tegels dd {
	margin: 0;
	color: var(--ink-soft);
	font-size: var(--fs-sm);
}

/* Het traject: drie bezoeken onder elkaar, met een lijn ertussen. */
.ssb-traject {
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: 0;
	counter-reset: traject;
}

.ssb-traject li {
	counter-increment: traject;
	position: relative;
	padding: 0 0 var(--space-6) calc(var(--basis) * 3);
	border-inline-start: 1px solid var(--line-strong);
	margin-inline-start: calc(var(--basis) * 0.75);
}

.ssb-traject li:last-child { border-inline-start-color: transparent; padding-block-end: 0; }

.ssb-traject li::before {
	content: counter(traject);
	position: absolute;
	inset-inline-start: calc(var(--basis) * -0.75 - 0.5px);
	inset-block-start: 0;
	inline-size: calc(var(--basis) * 1.5);
	block-size: calc(var(--basis) * 1.5);
	border-radius: var(--radius-pill);
	background-color: var(--ink);
	color: var(--paper);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	display: grid;
	place-items: center;
}

.ssb-traject h4 { margin: 0 0 var(--space-2); }

.ssb-traject__duur {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--muted-text);
	margin-inline-start: var(--space-2);
}

/* De vier kleurlijnen. De kleur is decoratief: de naam zegt het al. */
.ssb-lijn { border-block-start: 4px solid var(--lijn, var(--accent)); }
.ssb-lijn--blauw { --lijn: #6f8ea6; }
.ssb-lijn--rood  { --lijn: #a8564a; }
.ssb-lijn--geel  { --lijn: #c9a24a; }
.ssb-lijn--zwart { --lijn: #2b201b; }

/* Vragen en antwoorden. */
.ssb-faq dt {
	font-weight: var(--fw-semibold);
	color: var(--ink);
	margin-block-start: var(--space-6);
}

.ssb-faq dt:first-child { margin-block-start: 0; }
.ssb-faq dd { margin: var(--space-2) 0 0; color: var(--ink-soft); }

/* Prijslijst op een merkpagina. */
.ssb-prijslijst { margin: var(--space-6) 0; }

.ssb-prijslijst__item {
	padding-block: var(--space-4);
	border-block-start: 1px solid var(--line);
}

.ssb-prijslijst__item:first-child { border-block-start: 0; padding-block-start: 0; }

.ssb-prijslijst dt {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-4);
}

.ssb-prijslijst__naam {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	color: var(--ink);
}

.ssb-prijslijst dd { margin: var(--space-2) 0 0; color: var(--ink-soft); }

/* Verplichte verwijzing naar de website van een merk in de webshop. */
.ssb-merkverwijzing {
	font-size: var(--fs-sm);
	color: var(--ink-soft);
	margin-block: var(--space-4);
}