/* -------------------------------------------------------------------------
   VEHICLE RESULTS PAGE - "Kies een onderdeel" category hub
   (results_grid.phtml, /auto-onderdelen/merk/model/jaren/motor).
   Server-rendered <a href> cards, real product counts - see
   ResultsList::getPartCategoryHub(). Desktop: 4 cards/row, compact,
   sits above the existing filters/grid (never replaces them). Mobile:
   2 cards/row, 48px+ touch targets, no horizontal overflow.

   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 silently emits an empty file (no exception outside Magento's
   own error-handler context, a hard "Deprecated ... preg_replace()"
   exception inside it) - confirmed by minifying bridge.css with and
   without this block in isolation: this block alone minifies fine, the
   combined file does not. Splitting avoids depending on any php.ini
   change (out of scope, see task section 42).
   ------------------------------------------------------------------- */
.part-hub{ margin: var(--space-6) 0; }
.part-hub__heading{
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800;
  color: var(--ink); margin: 0 0 var(--space-4);
}
.part-hub__grid{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3);
  list-style: none; padding: 0; margin: 0;
}
.part-hub__grid > li{ min-width: 0; }
.part-hub__card{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: 48px; padding: var(--space-3) var(--space-4); min-width: 0;
  border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface);
  font-weight: 700; font-size: var(--text-sm); color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.part-hub__card:hover{ border-color: var(--brand); background: var(--brand-50); box-shadow: var(--shadow-sm); }
.part-hub__card-label{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.part-hub__card-count{
  flex: none; min-width: 26px; height: 22px; padding: 0 6px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-soft); color: var(--muted); font-size: var(--text-xs); font-weight: 800;
}
.part-hub__card:hover .part-hub__card-count{ background: var(--brand); color: var(--brand-ink); }
.part-hub__all-link{ display: inline-block; margin-top: var(--space-4); font-weight: 700; font-size: var(--text-sm); color: var(--brand); }
.part-hub__all-link:hover{ text-decoration: underline; }

/* Vehicle+Part SEO Growth v1: overflow onderdelen (rank 13+) beyond the
   top-12 cards above - a native <details> disclosure, so every link stays a
   real, crawlable <a href> in the server-rendered HTML whether the section
   is open or collapsed (no JS required to reveal it). */
.part-hub__more{ margin-top: var(--space-4); }
.part-hub__more-toggle{
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 700; font-size: var(--text-sm); color: var(--brand); padding: var(--space-2) 0;
}
.part-hub__more-toggle::-webkit-details-marker{ display: none; }
.part-hub__more-toggle::before{
  content: '+'; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: var(--radius-full); border: 1px solid var(--brand);
  font-size: var(--text-xs); line-height: 1;
}
.part-hub__more[open] .part-hub__more-toggle::before{ content: '\2212'; }
.part-hub__grid--overflow{ margin-top: var(--space-3); }

.category-header__subheading{
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--line);
}
.category-header__subheading h2{ margin: 0; font-size: var(--text-lg); font-weight: 800; }
.category-header__subheading-count{ font-size: var(--text-sm); font-weight: 600; color: var(--muted); white-space: nowrap; }

@media (max-width: 1023px){
  .part-hub__grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .part-hub__grid{ grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .part-hub__card{ padding: var(--space-2) var(--space-3); }
  .part-hub__card-label{ font-size: var(--text-xs); }
}