/* ===== Theme accents ===== */
:root{
  --blue:   #4f83ff;  /* donker blauw */
  --blue-2: #3b6cf0;  /* hover/active */
  --green:  #16a34a;  /* donker groen */
  --green-2:#0f8a3c;  /* hover/active */
}

/* ===== Typography & basics ===== */
h1, .day h2, .title,
.event-title{ color: var(--blue); }

/* Utilities */
.text-blue{  color: var(--blue)  !important; }
.text-green{ color: var(--green) !important; }

/* Optional generic “chip” (nav/labels) */
.chip{
  color: var(--blue);
  border: 1px solid #2b3a55;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
}
.chip.is-soon{
  color: #d1fae5;
  border-color: var(--green);
  background: rgba(22,163,74,.12);
}

/* Buttons */
a.btn{
  border: 1px solid #2b3a55;
  border-radius: 8px;
  padding: 6px 10px;
  text-decoration: none;
  color: inherit;
}
a.btn:hover{
  border-color: var(--blue-2);
  color: var(--blue);
}

/* Legacy row timing (safe to keep) */
.row strong{ color: var(--green); }

/* Countdown color */
.count{ color: var(--green); font-weight: 700; }

/* ===== Day group ===== */
.day{ margin: 22px 0; }
.day h2{
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 10px;
}

/* ===== Card grid ===== */
.card-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width:640px){  .card-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width:1024px){ .card-grid{ grid-template-columns: 1fr 1fr 1fr; } }

/* ===== Event card ===== */
.event-card{
  position: relative;
  background: linear-gradient(180deg, rgba(20,26,36,.9), rgba(12,16,24,.9));
  border: 1px solid #243246;
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}
.event-card::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  opacity: .85;
}
.event-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  border-color: #2f425c;
}
.event-card:focus-within{ outline: 2px solid var(--blue); outline-offset: 2px; }

/* Header */
.event-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.event-title{
  font-weight: 700;
  letter-spacing: .1px;
}

/* “Starts soon” badge for cards */
.badge-soon{
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--green);
  color: #d1fae5;
  background: rgba(22,163,74,.12);
}

/* Car strip */
.car-strip{
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 6px 0 8px;
}
.event-car, .car-thumb{           /* allow both class names */
  width: 78px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
  opacity: .98;
  transition: opacity .15s ease;
}
.event-car:hover, .car-thumb:hover{ opacity: 1; }

/* Rows in card */
.event-row{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #d1d5db;
}
.event-row strong{ color: var(--green); }
.event-foot{ margin-top: 6px; font-size: 14px; }

/* ===== (Optional) legacy list style — keep only if still used ===== */
/*
.list{
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 8px;
}
.list .card{
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  position: relative;
}
.list .card + .card{ border-top: 1px dashed #2b3a55; }
.list .card:hover{ background: rgba(79,131,255,.06); }
.list .card .top{ gap: 8px; }
.list .card::before{
  content: "";
  position: absolute;
  left: 4px; top: 12px; bottom: 12px;
  width: 3px; border-radius: 3px; opacity: .6;
  background: var(--blue);
}
*/
.event-track{
  display:flex; align-items:center; gap:8px;
  font-size:14px; color:#cbd5e1;
  margin:4px 0 6px;
}
.event-track i{ opacity:.9; }

  .notice {
    background: linear-gradient(180deg, rgba(20,26,36,.9), rgba(12,16,24,.9));
    border: 1px solid #243246;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 6px 0 14px;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
  }
  .notice .row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
  .notice .tag {
    font-size: 11px; font-weight: 700; letter-spacing:.3px;
    border:1px solid #2b3a55; border-radius:999px; padding:2px 8px; color:#9ec1ff;
  }
  .notice p { margin: 6px 0 0; color:#d1d5db; font-size:14px; }