/* Sellgrip: grote functie-illustratie in de kop (founder, 30 okt 2026).
 *
 * Rechts van de kop van elke functiepagina (en van een paar rekenhulpen en
 * gidsen met dezelfde lege rechterkant) staat de functie als lijntekening:
 * lijnen in inkt, één of twee vlakken in de kleur van het gebied. De tekening
 * zweeft rustig. Bij het label boven de kop staat dezelfde tekening klein, in
 * de gebiedskleur, in plaats van het III-merk.
 *
 * HTML: scripts/feature-art.py (herhaalbaar). Tekeningen op een 24-raster;
 * de lijnen schalen niet mee (vector-effect): 2 tot 3px groot, 1,5px klein.
 * Alles in px: de pagina schaalt zelf mee (html zoom, --vz).
 */

/* ------------------------------------------------------------- kleuren */
.fa-hero {
	--fa-acc: #1a7f4b;
	--fa-mini: #1a7f4b;
	--fa-mini-op: 0.28;
}

.fa-grow { --fa-acc: #1a7f4b; --fa-mini: #1a7f4b; }
.fa-earn { --fa-acc: #e2b84d; --fa-mini: #9a7212; --fa-mini-op: 0.45; }
.fa-protect { --fa-acc: #d40f1a; --fa-mini: #d40f1a; }
.fa-sell { --fa-acc: #d40f1a; --fa-mini: var(--ink); --fa-mini-op: 1; }
.fa-team { --fa-acc: #2f5fb3; --fa-mini: #2f5fb3; }

@media screen {
	html[data-theme="dark"] .fa-grow { --fa-acc: #5fd38d; --fa-mini: #5fd38d; }
	html[data-theme="dark"] .fa-earn { --fa-acc: #e2b84d; --fa-mini: #e2b84d; --fa-mini-op: 0.35; }
	html[data-theme="dark"] .fa-protect { --fa-acc: #f2525c; --fa-mini: #f2525c; }
	html[data-theme="dark"] .fa-sell { --fa-acc: #f2525c; }
	html[data-theme="dark"] .fa-team { --fa-acc: #7aa2e8; --fa-mini: #7aa2e8; }
}

@media screen and (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .fa-grow { --fa-acc: #5fd38d; --fa-mini: #5fd38d; }
	html:not([data-theme="light"]) .fa-earn { --fa-acc: #e2b84d; --fa-mini: #e2b84d; --fa-mini-op: 0.35; }
	html:not([data-theme="light"]) .fa-protect { --fa-acc: #f2525c; --fa-mini: #f2525c; }
	html:not([data-theme="light"]) .fa-sell { --fa-acc: #f2525c; }
	html:not([data-theme="light"]) .fa-team { --fa-acc: #7aa2e8; --fa-mini: #7aa2e8; }
}

/* ------------------------------------------------------------ tekening */
.fa-svg,
.fa-mini {
	display: block;
	overflow: visible;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fa-svg * ,
.fa-mini * {
	vector-effect: non-scaling-stroke;
}

.fa-l { fill: none; stroke: currentColor; }
.fa-a { fill: var(--fa-acc); stroke: none; }
.fa-al { fill: var(--fa-acc); stroke: currentColor; }
.fa-pl { fill: var(--paper); stroke: currentColor; }
.fa-d { fill: currentColor; stroke: none; }

.fa-svg {
	width: 100%;
	height: 100%;
	color: var(--ink);
	stroke-width: 2px;
}

/* Bij het label blijft het gewone Sellgrip-merk (drie grijze streepjes), zoals op de andere pagina's
 * (founder, 30 okt 2026). */

.fa-mini {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--fa-mini);
	stroke-width: 1.5px;
}

.fa-mini .fa-a,
.fa-mini .fa-al {
	fill-opacity: var(--fa-mini-op);
}

/* --------------------------------------------------------------- plaats
 * Groot (functiepagina's, gidsen met een hoge kop) en middel (rekenhulpen
 * met een korte kop). --fa-w is de strook rechts; de tekstkolom wijkt
 * ervoor, de tekening staat midden in die strook. */
.fa-art {
	display: none;
}

@media (min-width: 768px) {
	.fa-hero .wrap {
		position: relative;
		padding-right: calc(var(--gutter) + var(--fa-w));
	}

	.fa-art {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		right: var(--gutter);
		width: var(--fa-w);
		height: var(--fa-s);
		margin-top: calc(var(--fa-s) / -2);
		pointer-events: none;
	}

	.fa-art .fa-svg {
		width: var(--fa-s);
		height: var(--fa-s);
		stroke-width: var(--fa-sw);
	}

	.fa-lg { --fa-w: 240px; --fa-s: 190px; --fa-sw: 2px; }
	.fa-md { --fa-w: 200px; --fa-s: 150px; --fa-sw: 1.75px; }
}

@media (min-width: 1024px) {
	.fa-lg { --fa-w: 380px; --fa-s: 330px; --fa-sw: 2.5px; }
	.fa-md { --fa-w: 290px; --fa-s: 220px; --fa-sw: 2px; }
}

@media (min-width: 1280px) {
	.fa-lg { --fa-w: 460px; --fa-s: 400px; --fa-sw: 3px; }
	.fa-md { --fa-w: 340px; --fa-s: 250px; --fa-sw: 2.25px; }
}

/* Geen beweging: het icoon staat stil (founder, 30 okt 2026). */

@media print {
	.fa-art {
		display: none;
	}
}

/* Founder, 30 okt 2026: het icoon is letterlijk het menu-icoon, 1:1 uitvergroot. Zwart, in dark mode
 * wit; geen kleurvlakken, de lijn schaalt mee zoals bij een vergroting. */
.fa-art .fa-svg,
.fa-mini {
	color: var(--ink);
	stroke-width: 1.5;
}
/* Groot is de lijn dunner dan in het menu, anders oogt hij vet (founder, 30 okt 2026). */
.fa-art .fa-svg {
	stroke-width: 0.55;
}
.fa-art .fa-svg *,
.fa-mini * {
	vector-effect: none;
	fill: none;
}
/* Behalve wat het menu-icoon zelf vult (de toetsen van de rekenmachine, stippen): anders oogde de
 * winstcalculator als een lege telefoon (QA 1 Nov 2026). */
.fa-art .fa-svg [fill="currentColor"],
.fa-mini [fill="currentColor"] {
	fill: currentColor;
}

/* ------------------------------------------------- functiepagina's (founder, 1 nov 2026)
 * Het echte scherm van de functie naast de H1 (spotlight- of tooluitsnede, met "Beispieldaten"
 * eronder) en het icoon klein bij het label, in plaats van het III-merk en de grote tekening.
 * HTML: scripts/feature-art.py. Telefoon: het scherm onder de knoppen. */
.fa-label::before {
	content: none;
}

.fa-label .fa-mini {
	width: 16px;
	height: 16px;
}

.fa-shot {
	margin: 28px 0 0;
}

.fa-shot-frame {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--card);
}

.fa-shot picture,
.fa-shot img {
	display: block;
	width: 100%;
	height: auto;
}

.fa-shot .fa-shot-dark {
	display: none;
}

.fa-shot figcaption {
	margin-top: 8px;
	font-size: 0.8125rem;
	color: var(--muted);
}

@media screen {
	html[data-theme="dark"] .fa-shot .fa-shot-light {
		display: none;
	}

	html[data-theme="dark"] .fa-shot .fa-shot-dark {
		display: block;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .fa-shot .fa-shot-light {
		display: none;
	}

	html:not([data-theme="light"]) .fa-shot .fa-shot-dark {
		display: block;
	}
}

@media (min-width: 1000px) {
	.fa-has-shot > .wrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		column-gap: clamp(32px, 4vw, 64px);
		align-items: start;
	}

	.fa-has-shot > .wrap > * {
		grid-column: 1;
	}

	.fa-has-shot > .wrap > .breadcrumb {
		grid-column: 1 / -1;
	}

	.fa-has-shot > .wrap > .fa-shot {
		grid-column: 2;
		grid-row: 2 / span 12;
		align-self: center;
		margin: 0;
	}

	.fa-has-shot h1 {
		font-size: clamp(2.25rem, 3.3vw, 3.25rem);
	}
}

@media print {
	.fa-shot {
		display: none;
	}
}

/* How it works, first paragraph: the method and its limits, moved from the hero (scripts/feature-leads.py). */
.tp-method-note {
	max-width: 760px;
	margin: 0 0 28px;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--graphite);
}