/* =========================================================
   Brock Biljartfabriek — Ruilen & Retourneren
   Figma-node 482:11685.
   Body-content: grijze titelbanner, tweekoloms tekst+afbeelding,
   page-USP-icoonstrip.
   Header/footer (incl. footer-USP-balk + reviews) komen via
   get_header()/get_footer().
   ========================================================= */

.sellabees-ruilen {
	font-family: var(--sellabees-font-body);
	color: var(--sellabees-ink);
}

/* ---------------------------------------------------------
   1. Grijze titelbanner (#ebebeb, hoogte 178px, Impact 64px)
   --------------------------------------------------------- */
.sellabees-ruilen__hero {
	background: var(--sellabees-search-bg);
	min-height: 178px;
	display: flex;
	align-items: center;
}

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

/* Titel-break alleen op mobiel (Figma 491:728: "Ruilen &" / "Retourneren"). */
.sellabees-ruilen__title-br {
	display: none;
}

/* ---------------------------------------------------------
   2. Tweekoloms tekstblok + showroom-afbeelding
   Figma: tekst x=359 w=567, afbeelding x=971 w=590 h=617.
   Binnen 1410-container (start x=255 op 1920) springt de tekst
   ca. 104px in; gat tussen tekst en beeld ca. 45px.
   --------------------------------------------------------- */
/* Figma: afbeelding (rechts) y=408, band eindigt y=358 → 50px. */
.sellabees-ruilen__content {
	background: #fff;
	padding: 50px 0 50px;
}

.sellabees-ruilen__grid {
	display: grid;
	grid-template-columns: 567fr 590fr;
	column-gap: 45px;
	align-items: start;
}

.sellabees-ruilen__text {
	padding-left: 104px;
	padding-top: 25px;
}

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

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

.sellabees-ruilen__media {
	width: 100%;
}

.sellabees-ruilen__media img {
	display: block;
	width: 100%;
	height: 617px;
	max-height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* ---------------------------------------------------------
   3. Page-USP-icoonstrip (grijze balk, 3 ronde iconen)
   Figma: #ebebeb, hoogte 385px. Cirkels 117px (#D9D9D9),
   titels Impact 20px uppercase, tekst Avenir Book 16px / 27px,
   kolombreedte 383px, gecentreerd. "[Op poppen]"-noot in rood.
   --------------------------------------------------------- */
.sellabees-ruilen__usps {
	background: var(--sellabees-search-bg);
	padding: 22px 0 60px;
}

.sellabees-ruilen__usps-note {
	margin: 0 0 18px;
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 27px;
	color: var(--sellabees-red);
}

/* .sellabees-page-usps* staat globaal in layout.css (incl. 56px-iconclamp +
   responsive) — duplicaat hier verwijderd om CSS-overlap te voorkomen. */

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 1024px) {
	.sellabees-ruilen__title {
		font-size: 44px;
	}
	.sellabees-ruilen__grid {
		grid-template-columns: 1fr 1fr;
		column-gap: 32px;
	}
	.sellabees-ruilen__text {
		padding-left: 0;
	}
}

/* --- Mobiel (Figma 491:728, 393px) -------------------------------------- */
@media (max-width: 981px) {
	/* Titelbalk lager (162px), titel Impact 35px, ~49px zijmarge. */
	.sellabees-ruilen__hero {
		min-height: 162px;
	}
	.sellabees-ruilen__hero .sellabees-container,
	.sellabees-ruilen__content .sellabees-container {
		padding-inline: 49px;
	}
	.sellabees-ruilen__title {
		font-size: 35px;
	}
	/* Titel over 2 regels (Figma 491:728). */
	.sellabees-ruilen__title-br {
		display: inline;
	}
	.sellabees-ruilen__content {
		padding: 26px 0 48px;
	}
	/* Eén kolom: TEKST eerst, afbeelding eronder (Figma mobiel). */
	.sellabees-ruilen__grid {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}
	.sellabees-ruilen__text {
		padding-top: 0;
		order: 1;
	}
	.sellabees-ruilen__media {
		order: 2;
	}
	/* Afbeelding full-width, Figma-verhouding ~295x309. */
	.sellabees-ruilen__media img {
		height: auto;
		aspect-ratio: 295 / 309;
	}
}