/* ==========================================================================
   aanbod-style.css · new Aanbod overview (Figma node 4917:112)
   Source: APPROVED CSS (brandcars.css, MI 02-11-2026), Aanbod part only.

   Rules of this build
   - >= 1728 px viewport = Figma values (466 px cards, 20 px gap, 1436 px container).
   - < 1728 px: padding / margin / font-size scale down with clamp(); no text below 12 px.
   - Card content scales with the CARD width (container query units, cqw), so it also works
     when 3, 2 or 1 cards sit in a row.
   - Columns: >= 1200 px 3 | 992-1199 px 2 | 320-991 px 1.
   - Car variables (title, uitvoering, chips, price) stay on ONE line in every viewport.
   - Images get NO height from CSS (width:100%; height:auto), the feed image decides.
   - Height of the white info boxes is NOT set in CSS: the script at the bottom of
     aanbod-section.ctp equalises it per row.
   Breakpoints (@media / @container) live in aanbod-responsive.css, load it AFTER this file.
   Not included on purpose: header / footer / floating buttons / detail rules (live ones stay).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

.bc-aanbod{
  --bc-dark:#121212; --bc-red:#b10002; --bc-grey-bg:#f8f8f8; --bc-line-2:#dfdfdf;
  --bc-lama-r:'LamaSansRegular','Lama Sans','Plus Jakarta Sans',Arial,sans-serif;
  --bc-lama-m:'LamaSansMedium','Lama Sans','Plus Jakarta Sans',Arial,sans-serif;
  --bc-inter:'Inter',Arial,sans-serif;
  --bc-w:1436px;
  font-family:var(--bc-inter);color:var(--bc-dark);
}
.bc-aanbod, .bc-aanbod *{box-sizing:border-box}
.bc-aanbod img{display:block;max-width:100%}
.bc-aanbod a{color:inherit;text-decoration:none}

/* ---------- container ---------- */
.bc-aanbod .bc-wrap{width:100%;max-width:var(--bc-w);margin:0 auto;padding:0}   /* < 1600 px: see aanbod-responsive.css */

/* ---------- filter bar (no hero banner: filter starts right below the header, no top space) ---------- */
.bc-aanbod.bc-filter{background:var(--bc-grey-bg);padding-top:0}   /* starts right below the header, all viewports */
.bc-aanbod .bc-filter__box{margin:0;background:#fff;
  padding:clamp(16px,2.03vw,35px) clamp(16px,2.03vw,35px) clamp(14px,1.33vw,23px) clamp(16px,1.74vw,30px)}
.bc-aanbod .bc-filter__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.39fr);gap:7.5px}
.bc-aanbod .bc-select{--bc-arrow-r:clamp(12px,1.5vw,26px);
  height:clamp(52px,4.05vw,70px);border:1px solid var(--bc-line-2);border-radius:0;margin:0;width:100%;
  background:#fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAYCAYAAACBbx+6AAAD00lEQVR42s3WPW/bRhgH8OdeKNCkRX6HfoaOGUQUbWzToihbMhKg6dZqi0d7o70V3ZpOgjs1meQCtQ1pCJCCNpDJ7dLNhYEiCFJkyWDx5SSad3w6VA5U144d2XF8ALc74Mc//7w70u12/6CUflIUBSAigVs4CCFIKQWl1F8cEW1d16fTNEXGGEHE24YFpRTquk7SNLUpY+zOcDg8MAyDSCklIsJteqSU0jAMkmXZAWPsDp2bm3uVZdlsnucvDcPgiKhuS7qIqAzD4FLKl8PhcHZubu4VDcOQ1+v1F8Ph8Aul1Gtd19ltQCOi0nWdKaVex3F8t16vvwjDkFPHcWQQBNz3/T+FEHeLonhTKpVYURTFx8IWRVGMDG+iKJppNBoHQRBwx3Hk210hDEPuOI7c2tr6dGpq6hki2nmeF4QQesPJFpqmUUJIP0mSzxcXF387sQEAvMU4jiPDMOS+7/+epuk8pTTVNI0iYnHTWEppmmXZ/Gnsf8Dj6IWFhedpmtYopRnnnNwEGhELzjmhlGZCCN/zvOensf8Dj6Pr9fqvQohFxpjinMOHRI+wwBgrBoNBw/f9Z2dhzwSfoNvttub7fk8IcZ8xRhhjgB/gVEFEZIwBY4xkWXavVqt12+22dhYWAOCdR/HJW25vb39pmubj4+NjpZSihBByjdiiVCoxIcRXnuc9brfbWqvVys9b884d4CTpWq32RAjxta7rjFJaXEfSiIiU0kLXdTYYDL65DPZCMABAq9XK2+225nnej0KIh4ZhMEqpugp6hFWGYbAkSZar1erGZbCXAo+j5+fnf0iSZGV6epoTQhQATIJGQogyTZNHUbTqed6jy2Iv7PB5nd7Z2Qls216L41gCAH9PsCyXyzyKovVqtbp23m5wLWAAIGEYMsdxZLfb/dayrJV+vy8JIfySVZC2bfOjo6PvPM9bGWHf60uRCfpHdnd3meM4stfrfV8ulx9GUZQDgHbB0tyyLC2O40eu6y6HYcgrlYoihLxXregkt/9KpaI6nQ5zXXc5iqINy7I0AMgvwkZRtOG67nKn02GTYCdKeDzpzc1NurS0pHq93k/lcvnBWUkjYm7bthbH8RPXdR90Oh3WbDaLSbBXAp+g/w2dYLfb7ViW1ej3+zkhRDuF/dl13aXRfJwUO1ElTtcDADAIAiKEuJckSde2bQ0R5egH05Ik6e3v798PguDK2CuDx9DQbDaLw8PDRhzHT03T5KZp8iRJngLA4tramhqfe5XBruNOsLe3hwBAV1dX5czMzC+lUukzKeXfjDF3dnZ2AAB0fX39Wm57/wCchbRD6IecdAAAAABJRU5ErkJggg==") no-repeat;   /* arrow from Figma (select-arrow.png), cropped + embedded */
  background-size:11px auto;background-position:right var(--bc-arrow-r) center;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  /* text never runs under the arrow: right padding = arrow offset + arrow width + 10 px air */
  padding:0 calc(var(--bc-arrow-r) + 11px + 10px) 0 clamp(12px,1.33vw,23px);
  font:400 14.6px var(--bc-inter);color:#b4b4b4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-aanbod .bc-btn-dark{height:clamp(52px,4.05vw,70px);background:var(--bc-dark);border:2px solid var(--bc-dark);border-radius:0;color:#fff;
  font:400 15px var(--bc-inter);letter-spacing:.4px;text-transform:uppercase;cursor:pointer;width:100%;padding:0;
  transition:background-color .3s ease,border-color .3s ease}
.bc-aanbod .bc-btn-dark:hover,
.bc-aanbod .bc-btn-dark:focus-visible{background:var(--bc-red);border-color:var(--bc-red)}
.bc-aanbod .bc-filter__reset{display:block;text-align:right;margin-top:0;font:400 14.6px/24px var(--bc-inter);color:var(--bc-dark);
  transition:color .3s ease}
.bc-aanbod .bc-filter__reset:hover,
.bc-aanbod .bc-filter__reset:focus-visible{color:var(--bc-red)}                /* text colour changes, not the background */

/* ---------- grid (3 columns here; 2 / 1 columns in brandcars-aanbod-responsive.css) ---------- */
.bc-aanbod .bc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.16vw,20px);
  padding:clamp(24px,2.31vw,40px) 0 clamp(40px,4.05vw,70px)}

/* ---------- car card ---------- */
.bc-aanbod .bc-card{display:flex;flex-direction:column;gap:clamp(8px,.64vw,11px);color:var(--bc-dark);
  container-type:inline-size}                                  /* children scale with the card width (cqw) */
.bc-aanbod .bc-card__img{background:#ddd}                      /* NO height here: the image decides */
.bc-aanbod .bc-card__img img{width:100%;height:auto}
.bc-aanbod .bc-card__info{background:#fff;                      /* height = set by the script (equal per row) */
  padding:clamp(12px,3.86cqw,18px) clamp(12px,calc(6.16cqw - 7.7px),21px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;column-gap:clamp(5px,2.15cqw,10px);
  transition:background .2s,color .2s}
.bc-aanbod .bc-card__title{grid-column:1;margin:0;min-width:0;font:500 clamp(16px,4.29cqw,20px)/.964 var(--bc-lama-m);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-bottom:2px}
.bc-aanbod .bc-card__sub{grid-column:1;margin:clamp(6px,1.93cqw,9px) 0 0;min-width:0;font:400 clamp(13px,3cqw,14px)/20px var(--bc-lama-r);
  color:rgba(18,18,18,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-aanbod .bc-card__chips{grid-column:1;grid-row:3;align-self:end;display:flex;flex-wrap:nowrap;min-width:0;
  gap:clamp(4px,calc(3.42cqw - 5.9px),10px);margin-bottom:5px;padding-top:8px}
/* chips: 12 px (Figma) down to 10.5 px only when the card is narrower than 320 px;
   side padding shrinks first (14 px at a 466 px card -> 3 px at 320 px) so the three chips never break */
.bc-aanbod .bc-chip{flex:0 0 auto;border:1px solid rgba(18,18,18,.2);border-radius:5px;
  padding:5px clamp(3px,calc(6.85cqw - 17.9px),14px);font:500 clamp(10.5px,3.75cqw,12px)/20px var(--bc-lama-m);white-space:nowrap}
.bc-aanbod .bc-card__price{grid-column:2;grid-row:3;align-self:end;text-align:right;margin-bottom:5px;white-space:nowrap}
.bc-aanbod .bc-card__price b{display:block;font:500 clamp(12.5px,4.4cqw,16px) var(--bc-lama-m)}
.bc-aanbod .bc-card__price b small{display:block;font:400 clamp(10.5px,3.75cqw,12px)/16px var(--bc-lama-r)}   /* "excl. BTW" */
.bc-aanbod .bc-card__price span{display:block;margin-top:6px;font:400 clamp(10.5px,3.75cqw,14px) var(--bc-lama-r);color:rgba(18,18,18,.5)}

/* hover = red state from Figma (first card) */
.bc-aanbod .bc-card:hover .bc-card__info,
.bc-aanbod .bc-card:focus-visible .bc-card__info{background:var(--bc-red);color:#fff}
.bc-aanbod .bc-card:hover .bc-card__sub,
.bc-aanbod .bc-card:focus-visible .bc-card__sub{color:rgba(255,255,255,.8)}
.bc-aanbod .bc-card:hover .bc-chip,
.bc-aanbod .bc-card:focus-visible .bc-chip{border-color:rgba(255,255,255,.2)}
.bc-aanbod .bc-card:hover .bc-card__price span,
.bc-aanbod .bc-card:focus-visible .bc-card__price span{color:rgba(255,255,255,.5)}

.bc-aanbod .bc-empty{padding:70px 0;text-align:center;font:500 16px var(--bc-inter);color:var(--bc-red)}