/**
 * Altus — homepage-opmaak die niet in Bricks zelf staat.
 * Vaste px (de site zet html op 10px, dus rem is hier geen 16px).
 */

/* "Extra deals" / "Tweedekans" onder de hero: twee gelijke knoppen die samen
   de volledige breedte van hun container innemen, met tussenruimte, rand en
   afgeronde hoeken (op verzoek van Sylvie, 02/10/2026). */
.altus-deals-knoppen {
	display: flex !important;
	flex-direction: row !important;
	gap: 14px;
	width: 100% !important;
	max-width: 100% !important;
	margin: 22px 0 6px !important;
	padding: 0 24px;
	box-sizing: border-box;
}

/* Lichter gemaakt na de eerste versie ("die komt nu wel heel lomp over"):
   lager, dunnere rand, geen schaduw, kleiner en minder zwaar lettertype.
   Aanpassen kan hier: padding = hoogte van de knop, font-size/-weight = de
   tekst, border = de rand, border-radius = de afronding. */
.altus-deals-knoppen .altus-deals-knop {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 11px 18px;
	border: 1px solid var(--altus-navy, #223a80) !important;
	border-radius: 8px !important;
	background: #ffd64f;
	color: var(--altus-navy, #223a80);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-shadow: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.altus-deals-knoppen .altus-deals-knop:hover {
	background: var(--altus-oranje, #ff6a00);
	color: var(--altus-navy, #223a80);
}

@media (max-width: 767px) {
	.altus-deals-knoppen {
		gap: 10px;
		padding: 0 16px;
	}

	.altus-deals-knoppen .altus-deals-knop {
		padding: 10px 8px;
		font-size: 15px;
	}
}

/* Drie knoppen óp de Altus Deals-banner (Alle Altus Deals / Xtra Altus Deals /
   Tweedekans), onderaan gecentreerd. Op telefoon staat de banner te laag om
   knoppen op te laten rusten: daar komen ze er gewoon onder. */
.altus-dealsbanner {
	position: relative;
	width: 100%;
}

.altus-dealsbanner > img,
.altus-dealsbanner > .brxe-image {
	display: block;
	width: 100%;
	/* Maak je de banner hoger (hoogte op het afbeeldingselement of een ander
	   bestand), dan wordt de afbeelding bijgesneden i.p.v. uitgerekt. */
	object-fit: cover;
	object-position: center;
}

.altus-dealsbanner .altus-deals-knoppen {
	position: absolute;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	width: min(820px, calc(100% - 48px)) !important;
	margin: 0 !important;
	padding: 0;
	z-index: 2;
}

@media (max-width: 767px) {
	.altus-dealsbanner .altus-deals-knoppen {
		position: static;
		transform: none;
		width: 100% !important;
		flex-wrap: wrap;
		margin: 12px 0 0 !important;
		padding: 0 16px;
	}

	.altus-dealsbanner .altus-deals-knoppen .altus-deals-knop {
		flex: 1 1 100%;
	}
}

/* Review-score onder de hero ("★ 4,7/5 uit 116 reviews"): link naar de Google-reviews van Altus.
   Onderlijning bij hover, zodat duidelijk is dat het aanklikbaar is. */
#brxe-blasqn:hover,
#brxe-blasqn:focus-visible {
	text-decoration: underline;
}