/**
 * Altus — Steiger-snelzoeker (homepage), shortcode [altus_steiger_snelzoeker].
 * Visuele stijl overgenomen uit Sylvies screenshot van steigerverkoop.nl
 * (29/09/2026), maar met Altus' eigen kleuren (--altus-navy/--altus-oranje).
 */

.altus-snelzoeker {
	background: #f0f2f5;
	border-radius: 8px;
	padding: 32px;
	/* Zonder dit erft deze container Bricks' vaste standaardbreedte (1100px) als
	   eigen inhoud-breedte i.p.v. de werkelijk beschikbare breedte van de sectie
	   erboven — op mobiel (375px) blies dat de hele pagina op tot 1100px breed
	   (concreet ontdekt: Sylvie, 29/09/2026, "mobiele weergave" — hero-tekst en
	   snelzoeker liepen allebei half van het scherm af). Zelfde onderliggende
	   oorzaak als de eerdere grid-overloop-fix bij .altus-snelzoeker__stap. */
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

@media (max-width: 780px) {
	.altus-snelzoeker {
		padding: 20px;
	}
}

.altus-snelzoeker__titel {
	margin: 0 0 24px;
	font-size: 22px;
	font-weight: 800;
	color: var(--altus-navy, #223a80);
}

.altus-snelzoeker__stappen {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 24px;
}

@media (max-width: 780px) {
	.altus-snelzoeker__stappen {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.altus-snelzoeker__stappen {
		grid-template-columns: 1fr;
	}
}

.altus-snelzoeker__stap {
	background: #fff;
	border: 1px solid #e2e6ec;
	border-radius: 8px;
	padding: 16px;
	/* Zonder dit weigert elke grid-kolom te krimpen onder de min-content-breedte
	   van haar inhoud (browser-standaard min-width:auto voor grid-items) — bij
	   een leeg Bricks-afbeeldingselement blies dat elke kolom op tot de volledige
	   breedte van de rij, 3x naast elkaar (concreet ontdekt: Sylvie, 29/09/2026,
	   "klopt niet" + screenshot met horizontale overloop). */
	min-width: 0;
	/* Bricks geeft een "container"-element zonder eigen breedte-instelling de
	   globale standaard containerbreedte (hier 1100px) als voorkeursbreedte —
	   dat won het van de 1fr-verdeling van de grid hierboven (elke kolom eiste
	   dus onafhankelijk 1100px op, 3x naast elkaar). width:100% dwingt de kolom
	   om wél de grid-celbreedte te volgen. */
	width: 100%;
	box-sizing: border-box;
	/* Nummer komt los in de linkerbovenhoek te staan (op verzoek van Sylvie,
	   29/09/2026: "Kan het nummer in de linker bovenhoek"), dus ruimte
	   vrijhouden bovenaan en de kaart als positioneringscontext instellen. */
	position: relative;
	padding-top: 40px;
	/* Elke kaart heeft dezelfde opbouw, onder elkaar: afbeelding, titel, dropdown
	   (Sylvie, 05/10/2026: "deze moeten allemaal gelijk zijn / even hoog"). Vroeger stonden
	   afbeelding en titel naast elkaar zolang de titel paste ("Kies je werkhoogte") en
	   eronder als de titel langer was, waardoor de eerste kaart lager was dan de andere
	   twee. De kaarten zijn even hoog door de grid; de dropdown staat onderaan. Bricks
	   zet dit element zelf op flex-direction:column via zijn eigen (op
	   altus.be gehoste) gegenereerde CSS — !important nodig om dat te winnen,
	   want die regel gebruikt een ID-selector (specifieker dan een klasse). */
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap;
	align-items: stretch;
	row-gap: 10px;
}

/* De shortcode-wrapper van Bricks (.brxe-shortcode) zelf uit de flow halen,
   zodat .altus-snelzoeker__kop en .altus-snelzoeker__select-wrap zich als
   rechtstreekse flex-items van .altus-snelzoeker__stap gedragen — naast de
   afbeelding i.p.v. eronder. */
.altus-snelzoeker__stap > .brxe-shortcode {
	display: contents;
}

.altus-snelzoeker__kop {
	flex: 0 0 auto;
	min-width: 0;
}

.altus-snelzoeker__kop label {
	font-size: 14px;
	font-weight: 700;
	color: var(--altus-navy, #223a80);
	margin: 0;
}

/* Losstaand in de hoek i.p.v. naast het label (op verzoek van Sylvie,
   29/09/2026: "Kan het nummer in de linker bovenhoek"). */
.altus-snelzoeker__nr {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: var(--altus-navy, #223a80);
	color: #fff;
	font-weight: 800;
	font-size: 14px;
}

/* Altijd onderaan de kaart, ook als de titel van een andere kaart korter of langer is. */
.altus-snelzoeker__select-wrap {
	flex: 0 0 auto;
	margin-top: auto;
}

/* Eigen afbeelding, rechtstreeks als Bricks-afbeeldingselement door Sylvie in te vullen.
   De afbeelding wordt NOOIT afgekapt (Sylvie, 05/10/2026: "moet steeds volledig getoond
   worden"). De ruimte voor het icoon is bij alle kaarten even hoog (120px, dus de kaarten
   blijven gelijk); de afbeelding staat daar volledig in, gecentreerd (object-fit:contain), en
   krimpt mee als de kaart smal is. Vroeger sneed object-fit:cover de zijkanten weg, waardoor
   het rechterpoppetje van Steigerbreedte een stukje kwijtraakte.
   Tip: de huidige bestanden (760x256) hebben veel witruimte rond het tekeningetje, waardoor het
   icoon klein oogt. Bestanden die strak op het tekeningetje bijgesneden zijn vullen de ruimte
   volledig; die verhoudingen worden vanzelf goed getoond. */
.altus-snelzoeker__icoon--afbeelding {
	display: block;
	width: 100%;
	height: 120px;
	object-fit: contain;
	object-position: center;
	flex: 0 0 auto;
}

.altus-snelzoeker__select-wrap {
	position: relative;
}

.altus-snelzoeker__select {
	width: 100%;
	height: 42px;
	padding: 0 36px 0 12px;
	border: 1px solid #dde;
	border-radius: 6px;
	background: #fff;
	font-size: 14px;
	color: var(--altus-navy, #223a80);
	font-family: inherit;
	box-sizing: border-box;
	/* Eigen pijltje via .altus-snelzoeker__chevron hieronder i.p.v. de
	   standaard-pijl van de browser — die viel bij Sylvie niet op genoeg
	   ("toon een pijltje zodat mensen weten dat ze nog iets kunnen kiezen"). */
	appearance: none;
	-webkit-appearance: none;
}

/* Eigen keuzelijst (JS: altus-steiger-snelzoeker.php) i.p.v. de standaardlijst van de browser, zodat rand en
   hover in Altus-oranje kunnen (Sylvie, 06/10/2026). De echte <select> blijft bestaan, maar is verborgen. */
.altus-snelzoeker__select--verborgen {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.altus-sz-dd__knop {
	background: #fff;
	border: 1px solid #dde;
	border-radius: 6px;
	box-sizing: border-box;
	color: var(--altus-navy, #223a80);
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	height: 42px;
	overflow: hidden;
	padding: 0 36px 0 12px;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

.altus-sz-dd__knop--leeg {
	color: #6b7490;
}

.altus-sz-dd__knop:hover,
.altus-sz-dd__knop:focus,
.altus-sz-dd__knop:focus-visible,
.altus-sz-dd__knop[aria-expanded="true"] {
	border-color: var(--altus-oranje, #ff6a00);
	box-shadow: 0 0 0 2px rgba(255, 106, 0, 0.25);
	outline: 0;
}

.altus-sz-dd__lijst {
	background: #fff;
	border: 1px solid var(--altus-oranje, #ff6a00);
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(34, 58, 128, 0.18);
	box-sizing: border-box;
	left: 0;
	list-style: none;
	margin: 4px 0 0;
	max-height: 260px;
	overflow-y: auto;
	padding: 4px 0;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 20;
}

.altus-sz-dd__lijst[hidden] {
	display: none;
}

.altus-sz-dd__optie {
	color: var(--altus-navy, #223a80);
	cursor: pointer;
	font-size: 14px;
	line-height: 1.3;
	margin: 0;
	padding: 9px 12px;
}

.altus-sz-dd__optie--gekozen {
	font-weight: 700;
}

.altus-sz-dd__optie--actief {
	background: var(--altus-oranje, #ff6a00);
	color: #fff;
}

.altus-sz-dd__optie--uit {
	color: #b3b8c9;
	cursor: not-allowed;
}

.altus-snelzoeker__chevron {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	color: var(--altus-oranje, #ff6a00);
	font-size: 13px;
	pointer-events: none;
}

.altus-snelzoeker__knop {
	display: block;
	margin-left: auto;
	height: 48px;
	padding: 0 28px;
	border: 0;
	border-radius: 6px;
	background: var(--altus-oranje, #ff6a00);
	color: #fff;
	font-weight: 800;
	font-size: 15px;
	cursor: pointer;
}

.altus-snelzoeker__knop:hover {
	background: #e55f00;
}