/* Buiten.studio Recepten — overzicht / grid / layout
   De kaart-typografie volgt het thema via UIkit-klassen (uk-h3, uk-text-meta,
   uk-link-heading, uk-border-rounded). De filter-zijkolom hergebruikt de
   .br-filter*/.br-term-styling uit recept.css. Hieronder alleen de layout. */

/* Neemt de breedte van de YOOtheme-sectie/kolom waarin de shortcode staat. */
.br-listing { width: 100%; }

/* ---- 2-koloms layout: filters links, grid rechts (desktop) -------------- */
.br-layout { display: flex; gap: 40px; align-items: flex-start; }
.br-col-filters { flex: 0 0 230px; }
.br-col-main    { flex: 1 1 auto; min-width: 0; }

/* Onder de mobiel-breakpoint (< @m van het thema): één kolom.
   De .br-filter zelf wordt dan een uitschuifpaneel via recept.css. */
@media (max-width: 959px) {
    .br-layout      { display: block; }
    .br-col-filters { flex: none; }
}

/* ---- Grid --------------------------------------------------------------- */
.br-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}
@media (min-width: 640px) { .br-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .br-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- Kaart: alle opmaak via UIkit-klassen (uk-card / uk-card-body /
   uk-card-title / uk-text-meta). Het enige wat we zelf regelen is de foto
   uniform croppen — via de UIkit-selector, geen eigen class op het element. */
.br-listing .uk-card-media-top img {
    width: 100%;
    aspect-ratio: 610 / 548;
    object-fit: cover; display: block;
    border-radius: 10px; /* iets minder rond dan het thema-15px */
}

/* ---- Meer laden --------------------------------------------------------- */
.br-load-wrap { text-align: center; margin-top: 32px; }

.br-empty { text-align: center; padding: 30px 0; }

/* Intro (boven) en uitgebreide SEO-tekst (onder) krijgen bewust GEEN eigen
   opmaak — de typografie komt van YOOtheme/het thema. */

/* Zoekveld in de filterbalk (zoekt ook in ingrediënten) */
.br-filter-search { padding: 2px 2px 10px; }
.br-filter-search .br-zoek-input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	background: #fff;
}
.br-filter-search .br-zoek-input:focus {
	border-color: #999;
	outline: none;
}