/* ==========================================================================
   aanbod-responsive.css · responsive rules of the new Aanbod overview
   = the mockup's responsive CSS (brandcars.css, "Responsive" part), Aanbod rules only, same breakpoints
   (1100 px and 640 px), same selectors, same values. Load AFTER aanbod-style.css.
   Lines marked "addition" and the block at the bottom (fluid sizes below 1728 px, wrap side space, 1 car per row <= 991 px) are NOT in the mockup; they stay last so they win.
   ========================================================================== */
@media (max-width:1100px){
  .bc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .bc-grid{grid-template-columns:minmax(0,1fr)}
  .bc-card__info{height:auto;row-gap:8px}
  .bc-card__title{white-space:normal;line-height:1.2}
  .bc-card__chips{flex-wrap:wrap;grid-column:1/-1}
  .bc-card__price{grid-column:1/-1;grid-row:auto;text-align:left}
}

@media (max-width:991px){
  .bc-filter__row{grid-template-columns:1fr 1fr}   /* moved from 1100 px: 992-1199 px keeps the 5-column filter like 1200 px */
  .bc-filter__row .bc-btn-dark{grid-column:1/-1}
  .inner-banner-sec.aanbodtop{display:none}   /* addition: below 992 px the desktop header is hidden and the mobile header is in the page flow */
}

/* ---- additions (not in the mockup), kept last on purpose ---- */
.bc-filter{padding-top:clamp(24px,2.31vw,40px)}
.bc-filter__box{padding:clamp(16px,2.03vw,35px) clamp(16px,2.03vw,35px) clamp(14px,1.33vw,23px) clamp(16px,1.74vw,30px)}
.bc-select{height:clamp(52px,4.05vw,70px);padding-left:clamp(12px,1.33vw,23px);background-position:right clamp(14px,3.4vw,59px) center;padding-right:calc(clamp(14px,3.4vw,59px) + 18px)}
.bc-btn-dark{height:clamp(52px,4.05vw,70px)}
.bc-grid{gap:clamp(14px,1.16vw,20px);padding:clamp(24px,2.31vw,40px) 0 clamp(40px,4.05vw,70px)}
.bc-card{gap:clamp(8px,.64vw,11px)}
.bc-card__info{padding:clamp(12px,3.86cqw,18px) clamp(10px,calc(6.16cqw - 7.7px),21px);column-gap:clamp(5px,2.15cqw,10px);grid-template-columns:minmax(0,1fr) auto;row-gap:0}
.bc-card__title{font-size:clamp(16px,4.29cqw,20px);white-space:nowrap;line-height:.964}
.bc-card__sub{margin-top:clamp(6px,1.93cqw,9px);font-size:clamp(13px,3cqw,14px)}
.bc-card__chips{gap:clamp(2px,calc(5.3cqw - 14.7px),10px);flex-wrap:nowrap}
.bc-chip{padding:5px clamp(2px,calc(8.4cqw - 25.1px),14px);font-size:clamp(10px,3.3cqw,12px)}
.bc-card__price b{font-size:clamp(12px,3.9cqw,16px)}
.bc-card__price b small{font-size:clamp(10.5px,3.3cqw,12px)}
.bc-card__price span{font-size:clamp(10.5px,3.3cqw,14px)}
/* bc-wrap: below 992 px = side space that grows with the viewport (mobile header is full width);
   from 992 px = the SAME container as the header (header = Bootstrap .container: 960 / 1140 / 1320 / 1380 / 1563 px, 15 px padding),
   so the filter and the cars start and end exactly under the header content at every width. */
@media (max-width:991px){ .bc-wrap{max-width:none;padding:0 clamp(20px,5vw,80px)} }
@media (min-width:992px){ .bc-wrap{max-width:960px;padding:0 15px} }
@media (min-width:1200px){ .bc-wrap{max-width:1140px} }
@media (min-width:1400px){ .bc-wrap{max-width:1320px} }
@media (min-width:1500px){ .bc-wrap{max-width:1380px} }
@media (min-width:1650px){ .bc-wrap{max-width:1563px} }
@media (max-width:1199px){ .bc-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:991px){
  .bc-grid{grid-template-columns:minmax(0,1fr)}
  .bc-card__price{margin-top:14px}
}

/* price BELOW the car variables (chips) - mobile (<= 640 px), and whenever the card is too narrow to hold chips and price side by side
   (container query on the card, so it works for 3, 2 or 1 cars per row and can never overlap) */
@media (max-width:640px){
  .bc-card__info{grid-template-rows:auto auto 1fr auto}
  .bc-card__chips{grid-column:1/-1}
  .bc-card__price{grid-column:1/-1;grid-row:4;text-align:left;margin-top:14px;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px}
  .bc-card__price span{margin-top:0}
}
/* safety net: if a card is ever too narrow for chips + price side by side, the price drops below (never overlaps) */
@container (max-width:330px){
  .bc-card__info{grid-template-rows:auto auto 1fr auto}
  .bc-card__chips{grid-column:1/-1}
  .bc-card__price{grid-column:1/-1;grid-row:4;text-align:left;margin-top:14px;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px}
  .bc-card__price span{margin-top:0}
}

/* mobile (<= 640 px): smaller filter text so "Transmissie" is not cut off, more air in the white info box, bigger chips, space below the uitvoering line */
@media (max-width:640px){
  .bc-select{font-size:13px;padding-left:12px;padding-right:28px;background-position:right 10px center}
  .bc-card__info{padding:clamp(16px,5.5cqw,22px) clamp(12px,5.5cqw,22px)}
  .bc-card__sub{margin-bottom:16px}
  .bc-card__chips{gap:clamp(4px,2.2cqw,10px)}
  .bc-chip{padding:5px clamp(5px,2.4cqw,12px);font-size:clamp(12px,3.4cqw,13px)}
  .bc-card__title{font-size:clamp(18px,5.4cqw,20px)}
  .bc-card__sub{font-size:14px}
  .bc-card__price{margin-top:11px}   /* + 5 px under the chips = 16 px, same as the gap below .bc-card__sub */
  .bc-card__price b{font-size:clamp(14px,4.2cqw,16px)}
  .bc-card__price b small{font-size:clamp(12px,3.6cqw,13px)}
  .bc-card__price span{font-size:clamp(12px,3.8cqw,14px)}
}

/* ======================= AANBOD DETAIL · responsive (view_car.ctp) ======================= */
@media (max-width:1399px){
  .bc-contact__links{margin-left:0}
}
@media (max-width:1199px){
  .bc-tab{font-size:15px}
}
@media (min-width:992px) and (max-width:1199px){
  .bc-btn--green img{width:13px;height:13px}                    /* smaller WhatsApp icon so the label fits */
}
@media (max-width:1100px){   /* same breakpoint as the mockup: gallery and panel stacked, 1 kenmerken column, 1 form column */
  .bc-top{grid-template-columns:minmax(0,1fr);row-gap:30px}
  .bc-gallery__main{flex:none}
  .bc-kenm{grid-template-columns:minmax(0,1fr)}
  .bc-form{grid-template-columns:minmax(0,1fr);row-gap:14px}
  .bc-form__submit{grid-column:1;justify-self:start}
}
@media (max-width:991px){
  .bc-sec-back{padding:clamp(24px,5vw,40px) 0 clamp(20px,4vw,32px)}
  .bc-tab{font-size:13px;padding:10px 8px;gap:6px}
  .bc-kenm__line{display:none}
  .bc-arrow--prev{left:20px}.bc-arrow--next{right:20px}
  .bc-related__bg{height:100% !important}                           /* dark band covers the whole section (1 slide per view) */
}
@media (min-width:768px) and (max-width:991px){
  .bc-contact__text{margin-right:16px}
}
@media (max-width:767px){
  .bc-panel__price b{font-size:22px}   /* top price, mobile only */
  .bc-onderhoud .each-onderhoud-block{flex-direction:column;margin-bottom:16px}                 /* red date bar on top, details below */
  .bc-onderhoud .left-bg-block{flex:none;width:100%;padding:12px 16px;justify-content:flex-start}
  .bc-onderhoud .left-bg-block h6{display:flex;flex-wrap:wrap;gap:0 14px;font-size:15px}
  .bc-onderhoud .left-bg-block h6 br{display:none}
  .bc-onderhoud .block-dtls{width:100%;min-height:0;border-left:1px solid #0a0a0a;border-top:0;padding:16px 16px 4px}
  .bc-onderhoud .block-dtls h5{font-size:16px;margin:0 0 4px}
  .bc-onderhoud .block-dtls h6{font-size:14px;margin-bottom:16px}
  .bc-thumbs{display:none}                                                 /* no thumbnails on mobile */
  .bc-specs--3{display:none}
  .bc-specs--2{display:block}                                              /* 2 spec items per row */
  .bc-btn-outline{height:44px;padding:8px 16px;font-size:13px}
  .bc-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}   /* 2 tab buttons per row */
  .bc-tab{height:auto;min-height:48px;white-space:normal;text-align:center;font-size:13px;line-height:1.25}
  .bc-contact__btns{flex-wrap:wrap;justify-content:center}                /* 2 buttons per row, centred */
  .bc-btn{flex:0 0 calc(50% - 4px);height:52px;font-size:14px;padding:0 10px;white-space:normal;line-height:1.2;text-align:center}
}
@media (max-width:640px){
  .bc-contact__red{flex-wrap:wrap}
  .bc-arrow--prev,.bc-related__prev{left:10px}.bc-arrow--next,.bc-related__next{right:10px}
  .bc-arrow,.bc-ai,.bc-related__prev,.bc-related__next{width:36px;height:36px}
  .bc-arrow{margin-top:-18px}
  .bc-thumbs__more{inset:0}
  .bc-specs--2 .bc-specs__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:18px 16px}
  .bc-specs__cell{padding-left:14px}
  .bc-specs__cell small{font-size:12px}
  .bc-specs__cell b{font-size:clamp(13px,3.7vw,15px)}
  .bc-pop__dialog{width:calc(100% - 24px);height:80vh;padding:20px 16px}
  .bc-pop__close{top:12px;right:12px}
  .bc-pop__content > ul li{font-size:12.5px;line-height:1.35;padding-top:9px;padding-bottom:9px}
  .bc-pop__content > ul li:nth-child(odd){width:46%;padding-right:8px}
  .bc-pop__content > ul li:nth-child(even){width:54%;padding-left:8px}
  .bc-pop__content h4{font-size:15px}
}
@media (max-width:400px){
  .bc-specs--2 .bc-specs__row{padding:16px 12px}
  .bc-specs__cell{padding-left:10px}
  .bc-specs__cell b{font-size:13px}
  .bc-btn{font-size:13px;padding:0 8px}
  .bc-panel__price{column-gap:8px}
  .bc-panel__price b{font-size:18px}
  .bc-panel__price span{font-size:12px}
}