/* =========================================================
   Blok: seo (SEO-tekstblok met CSS-only "Lees meer"-toggle)
   1:1 overgenomen uit sectie 9 (SEO-TEKSTBLOK) van
   assets/css/pages/home.css. Zelfde selectors; uitsluitend
   bestaande --sellabees-* tokens. Zie BLOCKS-GUIDE.md.
   ========================================================= */

.sellabees-seo .sellabees-container { max-width: 1248px; }

.sellabees-seo { padding-block: 48px 64px; background: var(--sellabees-search-bg); }
.sellabees-seo__title {
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 32px;
	color: var(--sellabees-black);
	text-transform: uppercase;
	margin: 0 0 18px;
}
.sellabees-seo__subtitle {
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 22px;
	color: var(--sellabees-black);
	text-transform: uppercase;
	margin: 28px 0 12px;
}
.sellabees-seo p {
	font-family: var(--sellabees-font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.7;
	color: #4a4a4a;
	margin: 0 0 14px;
	max-width: 1202px;
}
/* ---- "Lees meer"-toggle (CSS-only checkbox-hack, geen JS) ----
   SEO-tekst is op álle breedtes ingeklapt (max-height + fade) met een "Lees meer";
   bij :checked klapt 'ie volledig uit ("Lees minder"). De checkbox staat visueel
   verborgen; het <label> schakelt 'm. */
.sellabees-seo__toggle-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.sellabees-seo__body {
	position: relative;
	max-height: 135px;             /* ingeklapt op álle breedtes: ~1e alinea, rest achter "Lees meer" */
	overflow: hidden;
	transition: max-height .35s ease;
}
.sellabees-seo__body::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
	background: linear-gradient(to bottom, rgba(235,235,235,0), var(--sellabees-search-bg));
	pointer-events: none;
	opacity: 1;                    /* ingeklapt: fade zichtbaar onderaan */
	transition: opacity .25s ease;
}
.sellabees-seo__toggle-input:checked ~ .sellabees-seo__body { max-height: 2400px; }
.sellabees-seo__toggle-input:checked ~ .sellabees-seo__body::after { opacity: 0; }
.sellabees-seo__more {
	display: inline-block;         /* "Lees meer" zichtbaar (ook op desktop) */
	margin-top: 14px;
	cursor: pointer;
	font-family: var(--sellabees-font-body);
	font-weight: 800;
	font-size: 14px;
	color: var(--sellabees-red);
	text-decoration: underline;
}
.sellabees-seo__more:hover { color: var(--sellabees-red-dark); }
.sellabees-seo__toggle-input:focus-visible ~ .sellabees-seo__more { outline: 2px solid var(--sellabees-red); outline-offset: 3px; }
.sellabees-seo__more-close { display: none; }
.sellabees-seo__toggle-input:checked ~ .sellabees-seo__more .sellabees-seo__more-open { display: none; }
.sellabees-seo__toggle-input:checked ~ .sellabees-seo__more .sellabees-seo__more-close { display: inline; }

/* ---- Mobiel (≤981px) ---- */
@media (max-width: 981px) {
	.sellabees-seo__title { font-size: 26px; }
	.sellabees-seo__subtitle { font-size: 19px; }
}