/* ==========================================================================
   il-core · Vergelijkbaar aanbod · assets/vergelijkbaar.css
   Geladen door 38-vergelijkbaar.php (alleen productpagina's / bij de shortcode),
   versie = IL_VGL_VERSION. Vervangt style.css sectie 56: daar niet meer plakken.
   Tokens (--il-*, --space-*, --gap-*, --fs-*) komen uit style.css sectie 1.
   ==========================================================================
   VERGELIJKBAAR AANBOD — productpagina, lijst met specificaties
   --------------------------------------------------------------------------
   Markup: il-core/38-vergelijkbaar.php (vergelijkbaar/class-il-vergelijkbaar.php)
   section.il-vgl > header + ol.il-vgl__list > li.il-vgl__item > article.il-vgl__car
     .il-vgl__media · .il-vgl__head (h3 + uitvoering) · dl.il-vgl__specs (4×) · .il-vgl__aside
   Smal (< 46rem):  kaartrij: foto links, titel + prijs rechts, specs 2×2 eronder.
   Breed (≥ 46rem): tabelachtige lijst; li en article zijn subgrid, dus alle
                    specs staan per kolom op één lijn, ongeacht tekstlengte.
   Schaalt op aantal: elke extra auto is één rij, geen kaart-grid dat breekt.
   Hergebruikt: .il-eyebrow (41.1), .il-link-arrow (46.4), .il-label (55),
   .il-visually-hidden (46.5). Hele rij klikbaar via ::after op de titel-link.
   Component-API: --_img-w, --_gap, --_row-pad, --_hover.
   ========================================================================== */
.il-vgl {
  container: il-vgl / inline-size;
  --_img-w: 7.5rem;
  --_gap: var(--gap-m);
  --_row-pad: var(--space-xs);
  --_hover: var(--il-surface);
  /* chip-defaults voor .il-label (sectie 55 zet ze op .il-labels) */
  --_chip-pad: 0.2rem 0.45rem;
  --_fs: 0.62rem;
  --_ls: 0.04em;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin-block: var(--space-l) 0;
  padding-block: var(--space-l);
  border-top: var(--border-light);
  clear: both;
}

/* ── 56.1  KOP ── */
.il-vgl__header { display: flex; flex-direction: column; gap: var(--gap-xs); }
.il-vgl__eyebrow { margin: 0; }
.il-vgl__title {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--il-contrast);
}
.il-vgl__intro {
  margin: 0;
  max-width: 60ch;
  font-size: var(--fs-sm);
  color: var(--il-text-muted);
}

/* ── 56.2  LIJST ── */
.il-vgl__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-light);
}
.il-vgl__list::before,
.il-vgl__list::after { content: none; }
.il-vgl :is(ol, li, dl, dt, dd, h2, h3, p) { text-indent: 0; }
.il-vgl .il-vgl__list,
.il-vgl .il-vgl__item { list-style: none; margin-inline: 0; padding-inline: 0; }
.il-vgl .il-vgl__item::marker { content: none; }
.il-vgl dl, .il-vgl dd { margin-inline-start: 0; }
.il-vgl img.il-vgl__img { max-width: 100%; margin: 0; }

.il-vgl__item {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--border-light);
  background: transparent;
  transition: background-color var(--t-card);
}
.il-vgl__item:hover { background: var(--_hover); }
.il-vgl__item:has(.il-vgl__link:focus-visible) {
  outline: 3px solid var(--il-accent);
  outline-offset: -3px;
}

/* Smal: kaartrij */
.il-vgl__car {
  display: grid;
  grid-template-columns: var(--_img-w) minmax(0, 1fr);
  grid-template-areas:
    "media head"
    "media aside"
    "specs specs";
  align-items: start;
  gap: var(--gap-xs) var(--_gap);
  padding: var(--_row-pad) 0;
}

.il-vgl__media { grid-area: media; }
.il-vgl__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio-photo);
  object-fit: cover;
  border-radius: 0;
  background: var(--il-surface);
}
.il-vgl__img--leeg { border: var(--border-light); }

.il-vgl__head { grid-area: head; min-width: 0; }
.il-vgl__name {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-tight);
  max-width: none;
}
.il-vgl__link {
  color: var(--il-contrast);
  text-decoration: none;
  transition: color var(--t-card);
}
.il-vgl__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.il-vgl__link:focus-visible { outline: none; }
.il-vgl__item:hover .il-vgl__link { color: var(--il-accent); }

.il-vgl__variant {
  margin: 0.15rem 0 0;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--il-text-muted);
  max-width: none;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.il-vgl__aside {
  grid-area: aside;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-xs) var(--gap-s);
  min-width: 0;
}
.il-vgl__price {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.2;
  color: var(--il-contrast);
  white-space: nowrap;
  max-width: none;
}
.il-vgl__price .iwc-price-note,
.il-vgl__price small { font-size: 0.75em; font-weight: 400; color: var(--il-text-muted); }

/* Specs: 2 × 2 onder de rij */
.il-vgl__specs {
  grid-area: specs;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-xs) var(--_gap);
  margin: var(--gap-xs) 0 0;
  padding: var(--gap-s) 0 0;
  border-top: var(--border-light);
}
.il-vgl__spec { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; margin: 0; }
.il-vgl__spec dt {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--il-text-muted);
}
.il-vgl__spec dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--il-contrast);
  overflow-wrap: break-word;   /* body zet anywhere: dat breekt "Vierwielaandrijving" midden in een lettergreep */
  hyphens: auto;
}
.il-vgl__spec--leeg dd { color: var(--il-text-muted); font-weight: 400; }
.il-vgl__spec--leeg { display: none; }

.il-vgl__chip { position: relative; z-index: 2; }

.il-vgl__footer { margin: 0; max-width: none; }
/* Terug naar het modelarchief: op smal de volle breedte, als duidelijke vervolgstap */
.il-vgl__all { width: 100%; box-sizing: border-box; }
@container il-vgl (width >= 46rem) {
  .il-vgl__all { width: auto; }
}

/* ── 56.3  BREED: kolommen via subgrid ── */
@container il-vgl (width >= 46rem) {
  .il-vgl__list {
    --_img-w: 9rem;
    grid-template-columns:
      var(--_img-w)
      minmax(11rem, 1.4fr)
      repeat(4, minmax(0, 1fr))
      minmax(8rem, auto);
    column-gap: var(--_gap);
  }

  .il-vgl__item,
  .il-vgl__car {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
  }

  .il-vgl__car {
    grid-template-areas: none;
    align-items: center;
    row-gap: 0;
  }

  .il-vgl__media,
  .il-vgl__head,
  .il-vgl__specs,
  .il-vgl__aside { grid-area: auto; }

  .il-vgl__spec--leeg { display: flex; }

  .il-vgl__specs {
    display: contents;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .il-vgl__aside {
    flex-direction: column;
    align-items: flex-end;
    justify-self: end;
    text-align: right;
  }

  .il-vgl__name { font-size: var(--fs-lg); }
  .il-vgl__price { font-size: var(--fs-lg); }
}

/* Zeer smal (oude telefoons): foto kleiner */
@container il-vgl (width < 22rem) {
  .il-vgl__car { --_img-w: 5.5rem; }
  .il-vgl__specs { grid-template-columns: minmax(0, 1fr); }
}

/* ── 56.4  HOOG CONTRAST ── */
@media (forced-colors: active) {
  .il-vgl__item:has(.il-vgl__link:focus-visible) { outline-color: Highlight; }
}