/* =========================================================
   Blok: tekst_afbeelding (tekstkolom + foto naast elkaar)
   1:1 overgenomen uit de home-sectie "Wij zijn Brock"
   (.sellabees-about*). Volledig gescoped onder
   .sellabees-block--tekst_afbeelding; alleen --sellabees-* tokens.
   Zie BLOCKS-GUIDE.md.
   ========================================================= */

/* Smalle content-container (gelijk aan home: max 1248px). */
.sellabees-block--tekst_afbeelding .sellabees-container {
	max-width: 1248px;
}

/* Sectie-padding + achtergrond (home: padding-block 0 56px). */
.sellabees-block--tekst_afbeelding {
	padding-block: 0 56px;
	background: var(--sellabees-white);
	overflow-x: clip;
}

/* Direct ná een paginakop (grijze titelbalk): ~50px lucht tussen de balk en de
   content/foto (Figma 482:11444: balk-onderkant y=358 → foto-top y=408 = 50px).
   Het generieke blok erft padding-top:0 van de home-sectie, waardoor de foto
   anders strak tegen de balk plakt. Mobiel compacter (legacy-waarde ~26px). */
.sellabees-block--paginakop + .sellabees-block--tekst_afbeelding {
	padding-top: 50px;
}
@media (max-width: 981px) {
	.sellabees-block--paginakop + .sellabees-block--tekst_afbeelding {
		padding-top: 26px;
	}
}

/* Sectietitel — zelfde styling als .sellabees-home-section__title op de home,
   hier mee gescoped zodat het blok ook zonder home.css correct rendert. */
.sellabees-block--tekst_afbeelding .sellabees-home-section__title {
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 48px;
	line-height: 1.05;
	color: var(--sellabees-ink);
	text-transform: uppercase;
	margin: 0 0 22px;
}

/* Figma: tekstkolom ~590px links (x357), foto x1024→1920 full-bleed rechts (896×576). */
.sellabees-block--tekst_afbeelding .sellabees-about__inner {
	display: grid;
	grid-template-columns: minmax(0, 590px) 1fr;
	gap: 77px;
	align-items: center;
}

.sellabees-block--tekst_afbeelding .sellabees-about__body p {
	font-family: var(--sellabees-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.65;
	color: var(--sellabees-black);
	margin: 0 0 18px;
	max-width: 590px;
}

.sellabees-block--tekst_afbeelding .sellabees-about__body .sellabees-btn {
	margin-top: 10px;
	min-width: 233px;
}

.sellabees-block--tekst_afbeelding .sellabees-about__media {
	margin-right: calc(50% - 50vw);   /* foto loopt door tot de rechter viewport-rand */
	height: 576px;
}

.sellabees-block--tekst_afbeelding .sellabees-about__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------------------------------------------------------
   Modifier: foto LINKS (beeld_positie = links).
   Mediakolom naar voren, smalle tekstkolom rechts. Bij
   full-bleed loopt de foto naar de LINKER viewport-rand.
   --------------------------------------------------------- */
.sellabees-block--tekst_afbeelding.sellabees-about--beeld-links .sellabees-about__inner {
	grid-template-columns: 1fr minmax(0, 590px);
}
.sellabees-block--tekst_afbeelding.sellabees-about--beeld-links .sellabees-about__body {
	order: 2;
}
.sellabees-block--tekst_afbeelding.sellabees-about--beeld-links .sellabees-about__media {
	order: 1;
	margin-right: 0;
	margin-left: calc(50% - 50vw);   /* foto loopt door tot de linker viewport-rand */
}

/* ---------------------------------------------------------
   Modifier: NIET full-bleed (volle_breedte = false).
   Foto blijft binnen de container i.p.v. naar de viewport-rand.
   --------------------------------------------------------- */
.sellabees-block--tekst_afbeelding.sellabees-about--in-container .sellabees-about__media {
	margin-right: 0;
	margin-left: 0;
}

/* ---------------------------------------------------------
   ≤981px — één kolom, foto in de container (geen full-bleed),
   zoals de home (max-width: 981px). De order-modifier vervalt:
   beeld komt bij beeld-links boven de tekst.
   --------------------------------------------------------- */
@media (max-width: 981px) {
	/* Titel kleiner op mobiel (1:1 met home.css `.sellabees-home-section__title
	   { font-size: 30px }` ≤981px). Zonder deze regel houdt de block-titel 48px
	   en wordt de sectie ~18px te hoog op mobiel. */
	.sellabees-block--tekst_afbeelding .sellabees-home-section__title {
		font-size: 30px;
		margin-bottom: 22px;
	}
	.sellabees-block--tekst_afbeelding .sellabees-about__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.sellabees-block--tekst_afbeelding .sellabees-about__media {
		margin-right: 0;
		margin-left: 0;
		height: 285px;
	}
	/* Knop NIET full-width tussen ~500–981px (oogt te fors): blijft op inhouds-
	   breedte (min 233px uit de basis). Full-width pas op telefoon → zie de
	   @media (max-width: 500px) onder dit blok. */
}

/* Knop: full-width pas op telefoon (≤500px). Daarboven (t/m 981px) blijft-ie op
   inhoudsbreedte (min 233px), anders is de volle breedte te groot. */
@media (max-width: 500px) {
	.sellabees-block--tekst_afbeelding .sellabees-about__body .sellabees-btn {
		width: 100%;
	}
}

/* ---------------------------------------------------------
   Losse <img> in de WYSIWYG-tekst (o.a. de betaalmethode-logo's op de
   Betaalmogelijkheden-pagina, Figma 482:11444). De globale `img{display:block}`
   stapelt ze onder elkaar; hier weer inline + op uniforme HOOGTE (40px, conform
   Figma/het legacy .sellabees-bm__logos) zodat ze als rij naast elkaar staan.
   `width:auto` overrulet een eventuele hardcoded width="…" uit de editor.
   --------------------------------------------------------- */
/* De logo-rij zelf flex-wrap maken met een VERTICALE gap, zodat een logo dat naar
   een nieuwe regel wrapt (bv. Vooruitbetalen op smal scherm) ruimte krijgt t.o.v.
   de rij erboven. Horizontaal blijft de margin-right:16px de tussenruimte verzorgen.
   :has(img) raakt alléén de logo-alinea, niet de gewone tekst-alinea's. */
.sellabees-block--tekst_afbeelding .sellabees-about__body p:has(img) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 14px;
}
.sellabees-block--tekst_afbeelding .sellabees-about__body p img {
	display: inline-block;
	vertical-align: middle;
	width: auto;
	height: 40px;
	margin-right: 16px;
}
.sellabees-block--tekst_afbeelding .sellabees-about__body p img:last-child {
	margin-right: 0;
}

@media (max-width: 981px) {
	/* Logo's compacter op mobiel (Figma ~27–40px; legacy gebruikte 32px). */
	.sellabees-block--tekst_afbeelding .sellabees-about__body p img {
		height: 32px;
	}
}