/* -------------------------------------------------------------------------
   MERK-/MODEL-LANDINGSPAGINA'S (brand_landing.phtml, model_landing.phtml -
   /auto-onderdelen/{merk}[/{model}]). Kept as its own file rather than
   appended to bridge.css: bridge.css is already close to a size where
   tubalmartin/cssmin (Magento's default CSS minifier) hits PHP's
   pcre.backtrack_limit during setup:static-content:deploy and fails the
   whole deploy outright (see part-hub.css's own header comment for the
   same, earlier-hit issue). Confirmed live: adding this block to bridge.css
   made `setup:static-content:deploy` error with "contents ... can't be
   read" because bridge.min.css was never written at all.
   ------------------------------------------------------------------------- */

/* Hero: .kc-brand-hero__grid (2-col copy+photo), the logo badge, proof
   pills and the framed vehicle photo on the right had zero CSS anywhere -
   copy and visual just stacked in plain document flow and the logo
   rendered as a bare, unstyled 120x120 <img> at the top, which is what
   read as "op een rare plek" (in a weird spot). Also fixed in the two
   templates themselves: the inline background-image gradient used to fade
   to near-white (meant to keep the hero photo visible), which combined
   with this file's white hero title/subtitle text made the title unreadable
   - changed to a dark fade instead, same idea as the homepage's .hero-dark. */
.kc-brand-page .kc-brand-hero{ background-size: cover; background-position: center; }
.kc-brand-hero__grid{ display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8); align-items: center; }
@media (max-width: 900px){ .kc-brand-hero__grid{ grid-template-columns: 1fr; } }
.kc-brand-mark-wrap{ margin-bottom: var(--space-4); }
.kc-brand-hero__logo{
  width: 64px; height: 64px; object-fit: contain; border-radius: var(--radius-md);
  background: #fff; padding: 8px; box-shadow: var(--shadow-md); display: block;
}
.kc-brand-mark{
  width: 64px; height: 64px; border-radius: var(--radius-md); background: #fff; color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); box-shadow: var(--shadow-md);
}
.kc-brand-hero__proofs{ display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.kc-brand-hero__proofs span{
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #fff;
  font-size: var(--text-xs); font-weight: 700; padding: 6px 12px; border-radius: var(--radius-full);
}
.kc-brand-hero__visual{ display: none; }
@media (min-width: 901px){
  .kc-brand-hero__visual{ display: block; }
  .kc-brand-hero__vehicle-frame{ border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); aspect-ratio: 4 / 3; }
  .kc-brand-hero__vehicle-frame img{ width: 100%; height: 100%; object-fit: cover; display: block; }
}

/* Kenteken/handmatig search card below the hero - .kc-brand-search__split,
   .kc-brand-panel* and .kc-brand-search__divider also had zero CSS, so the
   two search panels just stacked as plain unstyled blocks instead of the
   intended side-by-side card layout. */
.kc-brand-search{ padding-block: var(--space-8); }
.kc-brand-search__card{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: var(--space-6);
}
.kc-brand-search__split{ display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-6); align-items: start; }
@media (max-width: 900px){ .kc-brand-search__split{ grid-template-columns: 1fr; } }
.kc-brand-search__divider{ width: 1px; background: var(--line); }
@media (max-width: 900px){ .kc-brand-search__divider{ width: 100%; height: 1px; } }
.kc-brand-panel__copy{ margin-bottom: var(--space-4); }
.kc-brand-panel__title{ font-size: var(--text-md); font-weight: 800; margin: 0 0 4px; }
.kc-brand-panel__text{ font-size: var(--text-sm); color: var(--ink-soft); margin: 0; }

/* "Alle modellen" quick-link chip row - .kc-brand-chip(-row) had zero CSS,
   so every model name just rendered as a plain inline text link. */
.kc-brand-chip-row{ display: flex; flex-wrap: wrap; gap: var(--space-2); }
.kc-brand-chip{
  display: inline-flex; align-items: center; padding: 8px 14px; border-radius: var(--radius-full);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: var(--text-sm); font-weight: 600;
  text-decoration: none; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.kc-brand-chip:hover{ border-color: var(--brand); background: var(--brand-50); color: var(--brand); }

/* SEO content block ("X onderdelen kopen?") - .kc-brand-content-box* had
   zero CSS, so the two-column copy/points layout with its brand-initial
   mark just stacked as plain paragraphs. */
.kc-brand-content-box{
  display: grid; grid-template-columns: 1.3fr 1px 1fr; gap: var(--space-6); align-items: start;
  background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6);
}
@media (max-width: 900px){ .kc-brand-content-box{ grid-template-columns: 1fr; } }
.kc-brand-content-box h2{ font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.kc-brand-content-box p{ font-size: var(--text-sm); color: var(--ink-soft); margin: 0 0 var(--space-3); }
.kc-brand-content-box__divider{ width: 1px; background: var(--line); }
@media (max-width: 900px){ .kc-brand-content-box__divider{ display: none; } }
.kc-brand-content-box__points{ position: relative; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.kc-brand-content-box__points > div:not(.kc-brand-content-box__mark){ padding-left: var(--space-5); position: relative; }
.kc-brand-content-box__points > div:not(.kc-brand-content-box__mark)::before{
  content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--brand);
}
.kc-brand-content-box__mark{
  margin-top: var(--space-3); width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg);
}

/* FAQ accordion - same proven pattern as .kc-partnumber-faq__item (bridge.
   css), just scoped to this grid's bare <details> (.kc-brand-faq-grid had
   zero CSS). */
.kc-brand-faq-grid details{ border-bottom: 1px solid var(--line); }
.kc-brand-faq-grid summary{
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) 0; font-weight: 700; gap: var(--space-3);
}
.kc-brand-faq-grid summary::-webkit-details-marker{ display: none; }
.kc-brand-faq-grid summary::after{
  content: "+"; flex: none; width: 22px; height: 22px; border-radius: var(--radius-full); border: 1px solid var(--brand);
  color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-sm);
}
.kc-brand-faq-grid details[open] summary::after{ content: "\2212"; }
.kc-brand-faq-grid p{ padding-bottom: var(--space-4); color: var(--ink-soft); max-width: 68ch; margin: 0; }

/* "Populaire X onderdelen" product cards reuse .product-card (styles.css)
   wholesale - .kc-brand-product-card is just a hook for the "Populair"
   ribbon, which had no CSS of its own. */
.kc-brand-product-card{ position: relative; }
.kc-brand-product-card__badge{
  position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1;
  background: var(--brand); color: #fff; font-size: var(--text-xs); font-weight: 700;
  padding: 3px 10px; border-radius: var(--radius-full);
}

/* .kc-brand-card__image had zero CSS anywhere despite wrapping a real
   <img width="640" height="420">, so cards rendered as tall, mostly-empty
   boxes at the image's own intrinsic aspect ratio. --fallback is added
   client-side (see brand_landing.phtml/model_landing.phtml's onerror)
   when a model/brand photo is missing (e.g. no assets uploaded yet for a
   given merk), showing a generic car icon instead of a broken-image glyph. */
.kc-brand-card__image{
  display: flex; align-items: center; justify-content: center; aspect-ratio: 640 / 420;
  border-radius: var(--radius-md); background: var(--surface-soft); overflow: hidden; margin-bottom: var(--space-3);
}
.kc-brand-card__image img{ width: 100%; height: 100%; object-fit: contain; }
.kc-brand-card__image--fallback{ color: var(--line-strong); }
.kc-brand-card__image--fallback::before{
  content: ""; width: 40%; height: 40%;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.6%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 16v-3.2l1.7-4A2 2 0 0 1 7.6 7.5h8.8a2 2 0 0 1 1.9 1.3l1.7 4V16%27/%3E%3Cpath d=%27M4 16h16v2a1 1 0 0 1-1 1h-1.5a1 1 0 0 1-1-1v-.5H7.5V18a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2Z%27/%3E%3Ccircle cx=%277.5%27 cy=%2716%27 r=%271.4%27 fill=%27black%27/%3E%3Ccircle cx=%2716.5%27 cy=%2716%27 r=%271.4%27 fill=%27black%27/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.6%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 16v-3.2l1.7-4A2 2 0 0 1 7.6 7.5h8.8a2 2 0 0 1 1.9 1.3l1.7 4V16%27/%3E%3Cpath d=%27M4 16h16v2a1 1 0 0 1-1 1h-1.5a1 1 0 0 1-1-1v-.5H7.5V18a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2Z%27/%3E%3Ccircle cx=%277.5%27 cy=%2716%27 r=%271.4%27 fill=%27black%27/%3E%3Ccircle cx=%2716.5%27 cy=%2716%27 r=%271.4%27 fill=%27black%27/%3E%3C/svg%3E") center / contain no-repeat;
}

/* "Waarom klanten hier bestellen" (.kc-brand-why-*) - icon-badge card,
   moved here from bridge.css alongside the rest of this page's styling. */
.kc-brand-why-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); }
.kc-brand-why-item{
  display: flex; gap: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-sm); padding: var(--space-5);
  transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.kc-brand-why-item:hover{ box-shadow: var(--shadow-md); border-color: var(--brand); transform: translateY(-2px); }
.kc-brand-why-item__icon{
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: var(--radius-md); background: var(--brand-50); color: var(--brand);
}
.kc-brand-why-item__icon svg{ width: 22px !important; height: 22px !important; display: block; }
.kc-brand-why-item strong{ display: block; font-size: var(--text-sm); font-weight: 800; margin-bottom: 4px; }
.kc-brand-why-item p{ font-size: var(--text-sm); color: var(--ink-soft); margin: 0; }