/* =========================================================================
   Pagina "Bezorgen & Afhalen" — Figma-node 482:11916
   Body-content (header/footer komen uit get_header()/get_footer()).
   ========================================================================= */

.sellabees-bezorgen {
	font-family: var(--sellabees-font-body);
	color: var(--sellabees-black);
}

/* --- Hero (grijze balk met titel, Figma rect h=178px) ------------------- */
.sellabees-bezorgen__hero {
	background: var(--sellabees-search-bg);
	min-height: 178px;
	display: flex;
	align-items: center;
}

.sellabees-bezorgen__title {
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 64px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--sellabees-black);
	margin: 0;
}

/* Titel-break alleen op mobiel (Figma 491:1023: "Bezorgen &" / "Afhalen"). */
.sellabees-bezorgen__title-br {
	display: none;
}

/* --- Hoofdsectie: tekst + afbeelding ------------------------------------ */
/* Figma: afbeelding (rechts) y=408, band eindigt y=358 → 50px. */
.sellabees-bezorgen__body {
	background: #fff;
	padding: 50px 0 50px;
}

/* Figma 482:11916: tekst x=359 w=567 (≈104px inspring t.o.v. container-rand),
   afbeelding x=971 w=590 (rechterrand op 104px inspring), gat ≈45px. */
.sellabees-bezorgen__grid {
	display: grid;
	grid-template-columns: 567fr 590fr;
	column-gap: 45px;
	align-items: start;
}

.sellabees-bezorgen__content {
	padding-left: 104px;
	padding-top: 31px; /* Figma: tekst y=439 ligt 31px onder afbeelding-top y=408 */
}

.sellabees-bezorgen__content p {
	font-family: var(--sellabees-font-body);
	font-weight: 300; /* Avenir 45 Book */
	font-size: 14px;
	line-height: 27px;
	color: var(--sellabees-black);
	margin: 0 0 27px;
}

.sellabees-bezorgen__content p:last-child {
	margin-bottom: 0;
}

.sellabees-bezorgen__media {
	width: 100%;
}

.sellabees-bezorgen__media img {
	display: block;
	width: 100%;
	height: 439px;
	object-fit: cover;
	object-position: center;
}

/* --- USP-strip met cirkels (grijze sectie) ------------------------------ */
.sellabees-bezorgen__usps {
	background: var(--sellabees-search-bg);
	padding: 76px 0 84px;
}

.sellabees-bezorgen__usps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	text-align: center;
}

.sellabees-bezorgen__usp {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sellabees-bezorgen__usp-circle {
	width: 117px;
	height: 117px;
	border-radius: 50%;
	background: #dcdcdc;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 27px;
	color: var(--sellabees-red);
}

.sellabees-bezorgen__usp-circle img {
	display: block;
}

.sellabees-bezorgen__usp-title {
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 20px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--sellabees-black);
	margin: 0 0 16px;
}

.sellabees-bezorgen__usp-text {
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 27px;
	color: var(--sellabees-black);
	max-width: 383px;
	margin: 0;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1200px) {
	.sellabees-bezorgen__grid {
		grid-template-columns: 1fr 1fr;
		column-gap: 40px;
	}
	.sellabees-bezorgen__content {
		padding-left: 0;
		padding-top: 0;
	}
}

@media (max-width: 960px) {
	.sellabees-bezorgen__grid {
		grid-template-columns: 1fr;
		row-gap: 40px;
	}
	.sellabees-bezorgen__usps-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}
}

/* --- Mobiel (Figma 491:1023, 393px) ------------------------------------- */
@media (max-width: 981px) {
	/* Titelbalk lager (162px), titel Impact 35px, ~49px zijmarge. */
	.sellabees-bezorgen__hero {
		min-height: 162px;
	}
	.sellabees-bezorgen__hero .sellabees-container,
	.sellabees-bezorgen__body .sellabees-container {
		padding-inline: 49px;
	}
	.sellabees-bezorgen__title {
		font-size: 35px;
	}
	/* Titel over 2 regels (Figma 491:1023). */
	.sellabees-bezorgen__title-br {
		display: inline;
	}
	.sellabees-bezorgen__body {
		padding: 26px 0 48px;
	}
	/* Eén kolom: tekst eerst, afbeelding eronder (Figma mobiel). */
	.sellabees-bezorgen__grid {
		row-gap: 32px;
	}
	.sellabees-bezorgen__content {
		padding-top: 0;
	}
	/* Afbeelding full-width, Figma-verhouding ~295x220. */
	.sellabees-bezorgen__media img {
		height: auto;
		aspect-ratio: 295 / 220;
	}
}