/* --- COMPACT ROW LAYOUT --- */
.event{
  display:grid;
  grid-template-columns: 96px 120px 1fr;
  grid-template-areas:
    "date time top"
    "date time desc"
    "date time meta";
  padding:10px 12px;                 /* kleiner */
  border-top:1px solid rgba(255, 255, 255, 0.877);
  row-gap:4px;                       /* minder hoogte */
    transition:
    transform 0.18s ease,
    outline 0.18s ease,
    filter 0.18s ease;
}
.event > *{
  min-width:0;
}
.event:hover{
  outline: 2px solid rgba(255,255,255,0.65);
  outline-offset: -2px;
  transform: translateY(-1px);
  filter: brightness(1.02);
}
/* Kolommen strakker */
.event__dateblock{
  display:flex;
  flex-direction:column;
  height:100%;
}

.event__date{
  flex:1;                     /* bovenste helft */
  display:flex;
  flex-direction:column;
  justify-content:center;     /* verticaal center */
  align-items:center;         /* horizontaal center */
  text-align:center;
}

.event__time{
  flex:1;                     /* onderste helft */
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.event__top{
  grid-area:top;
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:10px;
}

.event__desc{
  grid-area:desc;
  padding-left:10px;
  margin:0;                          /* geen extra ruimte */
}

.event__meta{
  grid-area:meta;
  padding-left:10px;
  margin:0;
}

/* --- DATE: compact maar duidelijk --- */
.event__day{
  font-size:26px;                    /* kleiner */
  font-weight:900;
  line-height:1;
}
.event__dow{
  margin-top:2px;
  font-size:12px;
  font-weight:700;
  line-height:1.1;
}
.event__month{
  font-size:11px;
  opacity:0.85;
  line-height:1.1;
}

/* --- TIME: 2 regels max --- */
.event__clock{
  font-size:12px;
  font-weight:800;
  line-height:1.1;
}
.event__inloop{
  margin-top:2px;
  font-size:11px;
  opacity:0.85;
  line-height:1.1;
}

/* --- PHOTO: iets kleiner (scheelt veel hoogte) --- */
.event__media img{
  width:58px;
  height:58px;
  border-radius:50%;
  object-fit:cover;
  display:block;
}

/* --- TYPO: strakker ritme (feng shui feel) --- */
.event__title{
  margin:0 0 8px 0;
  font-size:31px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-0.01em;
}

.event__speaker{
  margin:2px 0 0 0;
  font-size:12.5px;
  font-weight:700;
  line-height:1.15;
}

/* Description: kort, overzichtelijk (max 2 regels) */
.event__desc{
 
    max-width: inherit;
    margin: 0 0 10px 0;
    font-size: 23px;
    font-weight: 000;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta: 1 regel */
.event__meta{
  margin:0;
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  opacity:0.85;
}
/* blok 2 = foto + naam */
.event__mainblock{
  display:flex;
  flex-direction:column;
  justify-content:center;   /* verticaal midden */
  align-items:center;       /* horizontaal midden */
  text-align:center;
  padding:6px 8px;
  height:100%;
}

/* foto container */
.event__media{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:10px;
}

/* foto groter */
.event__media img{
  width:82px;
  height:82px;
  border-radius:50%;
  object-fit:cover;
  display:block;
}

/* naam onder foto */
.event__person{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

/* naam styling */
.event__speaker{
  margin:0;
  font-size:13px;
  font-weight:700;
  line-height:1.2;
}

/* --- MIRRORING blijft hetzelfde (jij had dit al) --- */
.event:nth-child(odd){
  background:transparent;
  text-align:left;
}
.event:nth-child(odd) .event__top{
  flex-direction:row;
  justify-content:flex-start;
}

.event:nth-child(even){
  text-align:right;
}
.event:nth-child(even) .event__top{
  flex-direction:row-reverse;
  justify-content:flex-end;
}

/* Even row: date/time ook rechts uitlijnen */
.event:nth-child(even) .event__date,
.event:nth-child(even) .event__time{
  text-align:right;
}

/* --- Even background colors blijven (zoals jij had) --- */
/* even reeks: groen → geel → rood */
.event:nth-child(6n + 2){
  background: #7cd897;
}

.event:nth-child(6n + 4){
  background: #f9d076;
}

.event:nth-child(6n + 6){
  background: #ff5248;
}
/* --- MOBILE: nog steeds cards --- */
@media (max-width:820px){
  .event{
    grid-template-columns: 1fr;
    grid-template-areas:
      "date"
      "time"
      "top"
      "desc"
      "meta";
    padding:12px 12px;
    row-gap:6px;
  }

  .event__date,
  .event__time{
    border-right:none;
    padding:0;
  }

  .event__top,
  .event__desc,
  .event__meta{
    padding-left:0;
  }

  .event__media img{
    width:56px;
    height:56px;
  }
}