/* ============================================================
   MEDIA-TABEL
   ============================================================ */

/*
  Wrapper:
  - zorgt dat de tabel nooit buiten de sitebreedte valt
  - eventueel horizontaal kan scrollen als het echt nodig is
*/
.media-table-wrapper {
  max-width: 100%;
  overflow-x: auto;
  margin-top: 1.5rem;
}

/*
  Tabel:
  - geen lijnen
  - alleen zo breed als nodig
  - maar nooit buiten de wrapper
*/
.media-table {
  width: auto;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

/* Geen randen/lijnen */
.media-table,
.media-table th,
.media-table td {
  border: none;
}

/* Tabelkoppen */
.media-table th {
  padding: 0 1.5rem 0.75rem 0;
  text-align: left;
  vertical-align: top;
  font-weight: 700;
  white-space: nowrap;
}

/* Klikbare koppen */
.media-table th a {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}

.media-table th a:hover {
  text-decoration: underline;
}

/* Tabelcellen */
.media-table td {
  padding: 0 1.5rem 0.85rem 0;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/*
  Laat de kolommen zich natuurlijk gedragen:
  breed genoeg voor de inhoud, maar niet breder dan nodig
*/
.media-table th:last-child,
.media-table td:last-child {
  padding-right: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .media-table th,
  .media-table td {
    padding-right: 1rem;
    font-size: 0.95rem;
  }
}