/* ============================================================
   SimulateIT — modulekaart
   Implementeert docs/SIMULATEIT_MODULE_CARDS_UI_UX.md §5

   Gebruikt bewust de bestaande tokens uit css/main.css (:root) in
   plaats van een tweede --sit-* set te introduceren: de waarden in de
   handoff zijn identiek aan wat main.css al definieert.
     --sit-bg        -> --bg-deep     (#0d0f15)
     --sit-surface   -> --bg-panel    (#14171e)
     --sit-surface-2 -> --bg-panel-2  (#181b24)
     --sit-text      -> --text        (#e8eaf0)
     --sit-muted     -> --text-muted  (#9095a8)
     --sit-cyan      -> --cyan        (#34D399)
     --sit-radius-card -> --radius    (14px)
   Mono-font gaat via var(--font-mono); JetBrains Mono staat al in die
   stack en wordt door IBM Plex Mono overschaduwd — niet opnieuw laden.

   Dit bestand moet NA main.css, ctf.css en landing.css geladen worden.
   ============================================================ */

/* ---------- grid ---------- */
/* Maximaal vier kaarten naast elkaar (handoff §8). */

.module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

@media (max-width: 1199px) { .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px)  { .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .module-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

/* ---------- kaart ---------- */

.module-card {
  --module-accent: var(--cyan);
  /* Kolom-flex zodat de docentvariant een actieregel NAAST de kaartlink kan
     hangen. Met height:100% op de link pakte die de volle articlehoogte en
     viel de actieregel buiten de kaart, waar overflow:hidden hem wegknipte. */
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.module-card[data-kind="essentials"] { --module-accent: var(--cyan); }
.module-card[data-kind="course"]     { --module-accent: var(--blue); }
.module-card[data-kind="kali"]       { --module-accent: var(--green); }
.module-card[data-kind="lab"]        { --module-accent: var(--green); }
.module-card[data-kind="simulation"] { --module-accent: var(--purple); }
.module-card[data-kind="ctf"]        { --module-accent: var(--red); }
.module-card[data-kind="live-lab"]   { --module-accent: var(--amber); }
.module-card[data-kind="path"]       { --module-accent: var(--blue); }

.module-card__link {
  display: grid;
  grid-template-rows: auto 1fr;
  flex: 1 1 auto;
  min-height: 0;
  color: inherit;
  text-decoration: none;
}

.module-card__link:hover { color: inherit; }

/* ---------- mediazone ---------- */

.module-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-panel-2);
}

.module-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(transparent, rgb(13 15 21 / 72%));
  pointer-events: none;
}

.module-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease, filter 180ms ease;
}

/* Typebadge linksboven, statusbadge rechtsboven. */
.module-card__type,
.module-card__status {
  position: absolute;
  z-index: 1;
  top: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 999px;
  color: var(--text);
  background: rgb(13 15 21 / 86%);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.module-card__type {
  left: 12px;
  color: var(--module-accent);
  border-color: color-mix(in srgb, var(--module-accent) 40%, transparent);
}

.module-card__status { right: 12px; gap: 6px; }

.module-card[data-status="completed"] .module-card__status { color: var(--green); }
.module-card[data-status="locked"]    .module-card__status { color: var(--text-muted); }
.module-card[data-status="live"]      .module-card__status { color: var(--amber); }

/* Statische dot voor live labs — bewust niet knipperend (handoff §4.6). */
.module-card__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

/* ---------- body ---------- */

/* Kolom-flex in plaats van een vast 6-rijen-grid: niet elke kaart heeft een
   voortgangsblok of een vergrendelnotitie, en bij een grid schoof de
   actieregel dan een rij omhoog. De min-heights op eyebrow, titel en
   leeruitkomst lijnen de metadata uit; margin-top:auto op de actieregel
   duwt die naar de onderkant. Samen geeft dat wat §8 eist: binnen een rij
   gelijk uitgelijnde metadata en actieregel. */
.module-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}

.module-card__eyebrow {
  margin: 0;
  min-height: 1em;
  color: var(--module-accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.module-card h3 {
  min-height: 2.5em;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.module-card__outcome {
  margin: 0;
  min-height: 3em;
  color: var(--text-muted);
  font-size: 0.83rem;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* ---------- metadata ---------- */

.module-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.module-card__meta:empty { padding-top: 0; border-top: 0; }
.module-card__meta div { display: grid; gap: 3px; }

.module-card__meta dt {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.module-card__meta dd {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
}

/* ---------- voortgang ---------- */

.module-card__progress-copy {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.module-card__track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg-input);
  border: 1px solid var(--border);
}

.module-card__track > span {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--cyan);
  transition: width 280ms ease;
}

.module-card[data-status="completed"] .module-card__track > span { background: var(--green); }

/* ---------- vergrendeld ---------- */

.module-card__lock {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.module-card[data-status="locked"] .module-card__media img {
  filter: grayscale(0.75) brightness(0.72);
}

/* ---------- actieregel ---------- */

.module-card__cta {
  margin-top: auto;
  color: var(--text);
  font-weight: 700;
  font-size: 0.85rem;
}

/* ---------- interactie ---------- */

.module-card:hover,
.module-card:focus-within {
  border-color: color-mix(in srgb, var(--module-accent) 55%, transparent);
  box-shadow: 0 12px 32px rgb(0 0 0 / 28%);
  transform: translateY(-2px);
}

.module-card:hover .module-card__media img {
  transform: scale(1.025);
  filter: saturate(1.06);
}

.module-card[data-status="locked"]:hover .module-card__media img {
  transform: none;
  filter: grayscale(0.75) brightness(0.72);
}

.module-card__link:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: -3px;
}

/* ---------- docentvariant ---------- */
/* Acties staan buiten de kaartlink: geen geneste interactieve controls. */

.module-card__teacher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg-panel-2);
}

.module-card__teacher .badge { margin-right: auto; }

/* In de docentvariant is de student-actieregel dubbelop: "Bekijken" staat al
   in de docentacties. Weglaten scheelt ruis en zorgt dat de kaarten in een rij
   wél gelijk uitlijnen, ook als de ene kaart meer chips heeft dan de andere.
   Zonder :has()-ondersteuning blijft de regel gewoon staan; geen regressie. */
.module-card:has(> .module-card__teacher) .module-card__cta { display: none; }

/* Bij meerdere docentchips zou die margin-right:auto elke badge apart naar
   rechts duwen. De chips staan daarom in één groep die zelf de ruimte pakt. */
.module-card__teacher-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-right: auto;
}

.module-card__teacher-meta .badge { margin-right: 0; max-width: 100%; }

.module-card__teacher-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* Interactieve doelen minimaal 44px hoog (handoff §8), net als de filters. */
.module-card__teacher-actions .btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Compacte lijstweergave voor bulkbeheer (handoff §7). */
.module-grid--compact { grid-template-columns: minmax(0, 1fr); gap: 8px; }

.module-grid--compact .module-card__link {
  grid-template-rows: none;
  grid-template-columns: 132px 1fr;
  align-items: center;
}

.module-grid--compact .module-card h3 {
  min-height: 0;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.module-grid--compact .module-card__body {
  grid-template-rows: none;
  gap: 6px;
  padding: 12px 16px;
}

.module-grid--compact .module-card__outcome,
.module-grid--compact .module-card__progress,
.module-grid--compact .module-card__cta { display: none; }

.module-grid--compact .module-card__type,
.module-grid--compact .module-card__status { display: none; }

@media (max-width: 599px) {
  .module-grid--compact .module-card__link { grid-template-columns: 96px 1fr; }
}

/* ---------- "Ga verder"-rail en filters ---------- */

.module-resume { margin-bottom: 28px; }

.module-filters-panel { margin-bottom: 16px; }

/* Desktop: het paneel staat altijd open, de samenvatting is overbodig. */
.module-filters-panel > summary { display: none; }

@media (max-width: 599px) {
  .module-filters-panel > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    color: var(--text);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .module-filters-panel[open] > summary { margin-bottom: 12px; }
}

.module-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.module-filters label { display: inline-flex; flex-direction: column; gap: 4px; }

/* Het zoekveld groeit mee; de flex-waarde hoort op het label, niet op de
   input. In een kolom-flexcontainer is flex-basis de HOOGTE, waardoor
   flex:1 1 240px het veld 240px hoog zou maken. */
.module-filters__search { flex: 1 1 260px; max-width: 420px; }

.module-filters select,
.module-filters input[type="search"] {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: 0.85rem;
}

.module-filters__label {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.module-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

.module-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 6px 4px 12px;
  color: var(--text);
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.78rem;
}

.module-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1;
}

.module-chip button:hover { color: var(--text); background: var(--bg-elev); }

.module-count {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.module-empty {
  padding: 32px 20px;
  color: var(--text-muted);
  text-align: center;
  background: var(--bg-panel);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .module-card,
  .module-card__media img,
  .module-card__track > span { transition: none; }
  .module-card:hover { transform: none; }
  .module-card:hover .module-card__media img { transform: none; }
}