/* route-switch.css — de voertuigkeuze boven de heldenzone.
 *
 * Eigen bestand met een eigen .rt-prefix, zodat css/styles.css (gedeeld met de
 * KS1-route) en css/aanhanger.css onaangeroerd blijven. Beide pagina's laden dit
 * bestand; de kleuren komen uit de variabelen van styles.css, dus een
 * partnerkleur werkt hier automatisch net als in de rest van de interface. */

/* Geen eigen breedte of horizontale padding: de strook staat als broer van
   .hero in #start en krijgt daar al exact dezelfde box. Met padding erbij zou
   het label 20px naar binnen staan ten opzichte van de rand van de heldenkaart
   eronder, en dat valt op. */
[data-route-switch] {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
[data-route-switch][hidden] { display: none; }

.rt-label {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: .3px;
  text-transform: uppercase;
}

.rt-tabs {
  display: flex;
  gap: 6px;
  padding: 5px;
  border-radius: 12px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  /* Op de volle kolom (904px) horen alle drie de tabs op één regel — de maten
     hieronder zijn daarop gepast, met marge. Alleen op een smaller venster
     (tablet, smal iframe) wikkelt de laatste tab naar een tweede regel in
     plaats van uit de kaart te steken. */
  flex-wrap: wrap;
}

.rt-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 11px 7px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-muted);
  transition: background .16s ease, color .16s ease;
  white-space: nowrap;
}
.rt-tekst { display: flex; align-items: baseline; gap: 7px; }
.rt-tab strong { font-weight: 500; font-size: 13.5px; }
.rt-tab small { font-size: 11px; opacity: .75; }

/* De voertuigen zijn vrijstaand (RGBA) en staan dus rechtstreeks op de tab —
   geen eigen vlak eronder. Zelfde aanpak als de typekaarten in de aanhangerstap,
   die `background:transparent` op .product-img zetten.
   Vaste hoogte, breedte volgt de verhouding: de beelden zijn krap gesneden, dus
   een oplegger wordt breder dan een aanhangwagen. Dat verschil is echt en mag je
   zien; een gelijke doos voor beide zou de oplegger tot een streepje persen.
   31px en niet 34: met drie routes miste de rij op een handvol pixels en
   wikkelde de derde tab naar een tweede regel. */
.rt-beeld {
  display: block;
  height: 31px;
  width: auto;
  max-width: 128px;
  flex: 0 0 auto;
}

/* Alleen de niet-actieve tab is een link, dus hover hoort daar ook alleen. */
a.rt-tab:hover {
  background: var(--bg-card);
  color: var(--text);
}

.rt-tab.is-actief {
  background: var(--red);
  color: #fff;
  cursor: default;
}
.rt-tab.is-actief small { opacity: .85; }

/* Op een telefoon staat het label boven de tabs en vullen die de breedte —
   anders loopt de strook buiten het scherm. */
@media (max-width: 560px) {
  [data-route-switch] {
    gap: 8px;
    margin-bottom: 14px;
  }
  .rt-label { width: 100%; font-size: 11px; }
  .rt-tabs { width: 100%; }
  /* Naast elkaar passen twee tabs met beeld én tekst niet op een telefoon; de
     tekst gaat daarom onder het beeld staan. */
  .rt-tab {
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 6px;
  }
  .rt-tekst { flex-direction: column; align-items: center; gap: 1px; }
  .rt-tab strong { font-size: 12px; white-space: normal; text-align: center; line-height: 1.25; }
  .rt-beeld { height: 30px; max-width: 100%; }
}