/* Home page: upcoming events and the weekly routine grid. */

.events { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.event {
  display: flex; gap: 16px; padding: 12px 14px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--c, var(--accent));
}
.event .when { min-width: 92px; display: flex; flex-direction: column; }
.event .local { font-weight: 650; font-variant-numeric: tabular-nums; }
.event .date { font-size: 13px; color: var(--muted); }
.event .head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.event .title { font-weight: 600; }
.event .note { margin: 4px 0; font-size: 14px; }
.event .rel { font-size: 12.5px; }
.tag {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c); border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px;
}

/* event kind -> colour */
.raid { --c: var(--raid); }
.roster { --c: var(--roster); }
.signup { --c: var(--signup); }
.poll { --c: var(--poll); }
.war { --c: var(--war); }

.grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.day { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px; min-width: 0; }
.day p { margin: 0 0 6px; font-size: 13px; }
.mini { border-left: 3px solid var(--c); padding-left: 6px; }
.mini b { font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .event { flex-direction: column; gap: 4px; }
  .grid { grid-template-columns: 1fr; }
}