:root {
  --page: #2b2b2b;
  --text: #3b3b3b;
  --row: #f6f6f6;
  --row-alt: #e9e9e9;
  --header: #2980b9;
  --header-today: #ea6153;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 400 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.agenda {
  display: grid;
  grid-template-columns: auto minmax(12em, 2fr) minmax(8em, 3fr) auto;
  margin-bottom: 40px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

/* Dag-secties en events doen mee in het raster van .agenda, zodat alle kolommen uitlijnen. */
.day, .event { display: contents; }

/* De datum staat in de titelkolom, zoals in de oude tabel. */
.day h2 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  margin: 0;
  background: var(--header);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}
.day h2 > span { grid-column: 2 / -1; padding: 6px 12px; }
.day.today h2 { background: var(--header-today); }

.event > span {
  padding: 6px 12px;
  background: var(--row);
}
.event:nth-of-type(even) > span { background: var(--row-alt); }

.time { min-width: 3.5em; font-variant-numeric: tabular-nums; }
.birthday .title::before,
.birthday .title::after { content: " 🎂 "; }
.training .title::before { content: "🎓 "; }
.meeting .title::before { content: "👥 "; }

.more {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 16px;
  padding: 10px 20px;
  border-radius: 4px;
  background: var(--header);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.more:hover, .more:focus-visible { background: #3498db; }

.empty, .warning {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px;
  color: #fff;
}
.warning { color: #f5b7b1; font-size: 12px; }

@media (max-width: 963px) {
  body { font-size: 18px; line-height: 24px; }
  .day h2 { font-size: 20px; }
  .event > span { padding: 8px 14px; }
}

@media (max-width: 580px) {
  .agenda { display: block; }
  .day h2 { display: block; }
  .event {
    display: block;
    padding: 8px 0;
    background: var(--row);
  }
  .event:nth-of-type(even) { background: var(--row-alt); }
  .event > span {
    display: block;
    padding: 2px 12px;
    background: none !important;
  }
  .event > span:empty { display: none; }
  .time { font-weight: 700; }
  .more { display: block; width: fit-content; margin: 16px auto; }
}