/**
 * Altus — mobiele fixes voor de homepage (los verzameld naarmate ze opduiken
 * bij Sylvies mobiele controle, 29/09/2026).
 *
 * Rechtstreeks via Bricks' eigen breakpoint-instellingen aanpassen werkt niet
 * betrouwbaar via een script (Bricks' gecompileerde CSS-bestand wordt enkel
 * ververst bij opslaan in de builder zelf, en dat bestand wordt bovendien via
 * een mu-plugin herschreven naar de LIVE-site-URL, niet de lokale). Daarom
 * hier als losse, direct werkende overrides — zelfde patroon als de andere
 * feature-specifieke CSS-bestanden in dit project.
 */

/* ---------------------------------------------------- hero ("Top banner") --- */

/* De padding-links van #brxe-sdmnda staat vast op 150px (bedoeld voor desktop,
   naast de afbeelding rechts) en heeft geen eigen mobiele instelling — op een
   telefoonbreedte (375px) liep de tekst half van het scherm af doordat er maar
   375-150=225px overbleef voor de tekstkolom. */

@media (max-width: 767px) {
	#brxe-sdmnda {
		padding-top: 32px !important;
		padding-bottom: 32px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		column-gap: 20px !important;
		row-gap: 24px !important;
	}
}

@media (max-width: 478px) {
	#brxe-sdmnda {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* GEEN align-self hier zetten op .hero-img-band-0 (eerder wel gedaan, samen
   met een intussen teruggedraaide aspect-ratio-poging) — dat element is
   position:absolute met top/right/bottom/left:0 (vult zijn ouder #brxe-bvnbtt
   volledig), en align-self:flex-start bleek die hoogte-berekening kapot te
   maken: de foto kreeg dan height:0 en werd onzichtbaar, op ELKE
   schermbreedte (29/09/2026, Sylvie: "nu krijg ik daar niets meer te zien").
   Bevestigd met een live A/B-test in de browser (align-self terug op "auto"
   zetten herstelde de hoogte meteen naar 510px). */

/* --------------------------------------------- "Populaire producten"-rij --- */

/* Dit WooCommerce-productraster (#brxe-homepagetop, 9 producten) staat vast op
   4 (ongelijke) kolommen, zonder mobiele instelling — de kaarten duwden de
   hele pagina breder dan het scherm. Twee kolommen op telefoon, één op de
   smalste telefoons (< 400px, kaarten zelf ~180px breed anders te krap). */
@media (max-width: 767px) {
	#brxe-homepagetop ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 400px) {
	#brxe-homepagetop ul.products {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}