/* CT4 — Oriëntatie-router (navy slotblok; verticale padding via .section,
   achtergrond via .section--dark uit base.css, GEEN watermerk). Kopgroep
   links-zwaar + drie label-first dienstkaarten: navy-800-kaarten
   (--surface-card-dark) met line-inv rand, blue-200-labels (oranje-limiet:
   hier nergens gevuld oranje) en btn--link als enige affordance — geen
   link-op-de-hele-kaart, hover alleen randkleur, geen lift
   (DESIGN-SPEC-CONTACT §CT4). Kleuren uitsluitend via tokens.css.
   BESLISSING Timo 2026-08-11 (call 5 augustus 2026): het zijn er nog twee, geen
   drie. De zin hierboven ("drie label-first dienstkaarten") is de oude waarde en
   blijft als herkomst staan. */

/* Kopgroep-idioom sitebreed (ti4/rpo-head-familie): flex-column, 18px gap. */
.ct-orient-head {
  max-width: 62ch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.ct-orient-sub {
  color: var(--text-body-inv);
  max-width: 52ch;
}

/* Regelval-sturing (review r1): zonder deze span brak de vraagkop op drie
   viewports als "...AAN EEN / GESPREK?" met een weeswoord. Nu breekt hij op
   "Nog niet toe aan / een gesprek?" waar hij niet op één regel past. */
.ct-orient-nowrap { white-space: nowrap; }

.ct-orient-rij {
  display: grid;
  /* BESLISSING Timo 2026-08-11 (call 5 augustus 2026): nog maar twee diensten,
     dus twee oriëntatiekaarten. Oude waarde verbatim: repeat(3, minmax(0, 1fr));
     met drie kolommen bleef de derde cel leeg. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  margin-top: clamp(36px, 5vh, 48px);
  /* Twee kaarten over de volle container (1380px) worden ~640px breed en gaan er
     dan uitzien als banners in plaats van kaarten. De rij krijgt een maximum zodat
     een kaart ongeveer even breed blijft als in de oude drieluik-opzet, en blijft
     links uitlijnen op de linkszware kopgroep (dus bewust geen margin-inline:
     auto). Nieuw in deze ronde (er was geen oude waarde). */
  max-width: 900px;
}

.ct-orient-kaart {
  background: var(--surface-card-dark);
  border: 1px solid var(--line-inv);
  border-radius: var(--r-md);
  padding: clamp(24px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  transition: border-color .2s;
}
.ct-orient-kaart:hover {
  border-color: var(--blue-200);
}

.ct-orient-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-200);
  margin-bottom: 12px;
}

.ct-orient-regel {
  color: var(--text-body-inv);
  line-height: 1.65;
  flex: 1;
}

.ct-orient-link {
  margin-top: 18px;
  /* Flex-kind in een column-kaart: zonder align-self rekt de 2px underline
     over de volle kaartbreedte. */
  align-self: flex-start;
}

/* ---------- Responsive ---------- */

/* BESLISSING Timo 2026-08-11 (call 5 augustus 2026): de tussenstap op 1024px is
   vervallen. Hij bestond alleen om drie kolommen naar twee te brengen met de
   derde kaart full-width; er zijn nu nog maar twee kaarten, dus die regel zou een
   weeskaart maken van kaart 2 zodra hij ooit weer zou aanslaan. Oude waarde
   verbatim:
   @media (max-width: 1024px) {
     [Review r1: op 3 kolommen (~250px binnenmaat) wrapten de linklabels en
      rekte de btn--link-underline over de volle kaartbreedte. Twee kolommen
      met de derde kaart full-width houdt elke link op één regel.]
     .ct-orient-rij {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
     .ct-orient-kaart:nth-child(3) {
       grid-column: 1 / -1;
     }
   }
*/

@media (max-width: 880px) {
  .ct-orient-rij {
    grid-template-columns: 1fr;
  }

  .ct-orient-kaart {
    max-width: 560px;
  }
}