/* ==========================================================================
   aanbod-style.css · new Aanbod overview (Figma 4917:112)
   PART 1 = the APPROVED CSS from the mockup (brandcars.css), Aanbod part: SAME class names, selectors, values, order.
            Only changes: select arrow path (/images/select-arrow.png), the 4 global resets (*, body, img, a) are
            limited to .bc-aanbod so no other page is touched, fonts come from /fonts (self-hosted).
   PART 2 = ADDITIONS that are not in the mockup (each one says why). Nothing in part 1 is edited.
   Breakpoints = the mockup's (1100 px and 640 px) in aanbod-responsive.css.
   ========================================================================== */

/* ---- fonts: the families the mockup asks for ('Plus Jakarta Sans' cards, 'Inter' filter), self-hosted ---- */
@font-face{font-family:'Plus Jakarta Sans';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/PlusJakartaSans-Regular.woff2') format('woff2'),url('../fonts/PlusJakartaSans-Regular.woff') format('woff')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/PlusJakartaSans-Medium.woff2') format('woff2'),url('../fonts/PlusJakartaSans-Medium.woff') format('woff')}
@font-face{font-family:'Inter';font-weight:400 700;font-style:normal;font-display:swap;src:url('../fonts/Inter-Regular.woff2') format('woff2'),url('../fonts/Inter-Regular.woff') format('woff')}

/* ======================= PART 1 · APPROVED CSS (mockup) ======================= */
:root{
  --bc-dark:#121212; --bc-dark-2:#1b1b1b; --bc-red:#b10002; --bc-red-dot:#b10000;
  --bc-grey-bg:#f8f8f8; --bc-tab-bg:#f5f5f5; --bc-line:#dddddd; --bc-line-2:#dfdfdf;
  --bc-green:#2ab540; --bc-wa:#36b84e; --bc-float:#171717;
  --bc-lama:'Lama Sans','Plus Jakarta Sans',Arial,sans-serif;   /* Lama Sans: use the font file NEO already has */
  --bc-jakarta:'Plus Jakarta Sans',Arial,sans-serif;
  --bc-inter:'Inter',Arial,sans-serif;
  --bc-w:1436px;
}
.bc-aanbod, .bc-aanbod *{box-sizing:border-box}
.bc-aanbod{font-family:var(--bc-inter);color:var(--bc-dark)}
.bc-aanbod img{display:block;max-width:100%}
.bc-aanbod a{color:inherit;text-decoration:none}
.bc-wrap{max-width:var(--bc-w);margin:0 auto;padding:0 20px}
@media (min-width:1476px){.bc-wrap{padding:0}}
.bc-dot{color:var(--bc-red-dot)}

/* ---------- Aanbod: filter bar ---------- */
.bc-filter{background:var(--bc-grey-bg);padding-top:40px}  /* no hero banner on Aanbod (removed by MI 02-11-2026) */
.bc-filter__box{max-width:1533px;margin:0 auto;background:#fff;padding:35px 35px 23px 30px}
.bc-filter__row{display:grid;grid-template-columns:repeat(4,1fr) 1.39fr;gap:7.5px}
.bc-select{height:70px;border:1px solid var(--bc-line-2);background:#fff url(/images/select-arrow.png) no-repeat;background-size:10px 10px;background-position:77% 50%;
  appearance:none;-webkit-appearance:none;padding:0 23px;font:400 14.6px var(--bc-inter);color:#b4b4b4;width:100%}
.bc-btn-dark{height:70px;background:var(--bc-dark);border:2px solid var(--bc-dark);color:#fff;font:400 15px var(--bc-inter);letter-spacing:.4px;text-transform:uppercase;cursor:pointer;width:100%}
.bc-filter__reset{display:block;text-align:right;margin-top:0;font:400 14.6px/24px var(--bc-inter);color:var(--bc-dark)}

/* ---------- Car card (Aanbod grid + Gerelateerde auto's) ---------- */
.bc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:40px 0 70px}
.bc-card{display:flex;flex-direction:column;gap:11px;color:var(--bc-dark)}
.bc-card__img{aspect-ratio:466/307;overflow:hidden;background:#ddd}
.bc-card__img img{width:100%;height:100%;object-fit:cover}
.bc-card__info{background:#fff;height:141px;padding:18px 21px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto 1fr;column-gap:10px;transition:background .2s,color .2s}
.bc-card__title{grid-column:1;font:500 20px/0.964 var(--bc-lama);white-space:nowrap}
.bc-card__sub{grid-column:1;margin-top:9px;font:400 14px/20px var(--bc-lama);color:rgba(18,18,18,.8)}
.bc-card__chips{grid-column:1;align-self:end;display:flex;gap:10px;margin-bottom:5px}
.bc-chip{border:1px solid rgba(18,18,18,.2);border-radius:5px;padding:5px 14px;font:500 12px/20px var(--bc-lama);white-space:nowrap}
.bc-card__price{grid-column:2;grid-row:3;align-self:end;text-align:right;margin-bottom:5px}
.bc-card__price b{display:block;font:500 16px var(--bc-lama)}
.bc-card__price span{display:block;margin-top:6px;font:400 14px var(--bc-lama);color:rgba(18,18,18,.5)}
/* hover = red state from Figma (first card) */
.bc-card:hover .bc-card__info{background:var(--bc-red);color:#fff}
.bc-card:hover .bc-card__sub{color:rgba(255,255,255,.8)}
.bc-card:hover .bc-chip{border-color:rgba(255,255,255,.2)}
.bc-card:hover .bc-card__price span{color:rgba(255,255,255,.5)}

/* ======================= PART 2 · ADDITIONS (not in the mockup) ======================= */
/* empty banner block that top-banner-section.ctp prints above the filter: dark like the header; its height is synced to the header by the script in aanbod-section.ctp */
.inner-banner-sec.aanbodtop{background:#121212;padding:0;margin:0;height:178px;min-height:0}

/* select: text ends in "..." before the arrow (arrow stays where the mockup has it at 1728 px) */
.bc-select{border-radius:0;margin:0;-moz-appearance:none;background-position:right 59px center;
  padding-right:77px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ZOEKEN + Reset: red hover (#b10002) with smooth transition; Reset changes its text colour */
.bc-btn-dark{padding:1px 6px;transition:background-color .3s ease,border-color .3s ease}
.bc-btn-dark:hover,.bc-btn-dark:focus-visible{background:var(--bc-red);border-color:var(--bc-red)}
.bc-filter__reset{transition:color .3s ease}
.bc-filter__reset:hover,.bc-filter__reset:focus-visible{color:var(--bc-red)}

/* card: image gets no height from CSS (the feed image decides); info box height is set by the script in aanbod-section.ctp */
.bc-card__img{aspect-ratio:auto}
.bc-card__img img{height:auto}
.bc-card__info{height:auto}
.bc-card__chips{grid-row:3}
.bc-card__price b small{display:block;font:400 12px/16px var(--bc-lama)}   /* "excl. BTW" line */
.bc-card:focus-visible .bc-card__info{background:var(--bc-red);color:#fff}
.bc-card:focus-visible .bc-card__sub{color:rgba(255,255,255,.8)}
.bc-card:focus-visible .bc-chip{border-color:rgba(255,255,255,.2)}
.bc-card:focus-visible .bc-card__price span{color:rgba(255,255,255,.5)}
.bc-empty{padding:70px 0;text-align:center;font:500 16px var(--bc-inter);color:var(--bc-red)}

/* one-line card variables: title / uitvoering / chips / price never wrap; children scale with the card width (cqw, used in aanbod-responsive.css) */
.bc-card{container-type:inline-size}
.bc-card__sub{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-chip{flex:0 0 auto}
.bc-card__price{white-space:nowrap}