/* ===== HS Times (volledige file) =====
   - Vandaag-balk alleen achter label + tijd
   - Links/rechts ~10px overlap
   - Labelkolom vast 110px, kleine gap 12px
   - Font groottes erven van Divi
*/

/* Reset binnen blok (voorkomt Divi/Theme overrides) */
.hs-times, .hs-times * { box-sizing: border-box; }
.hs-times ul { margin:0 !important; padding:0 !important; list-style:none !important; }
.hs-times { overflow: visible; }

/* Rij: INLINE-GRID zodat de rij krimpt tot de contentbreedte
   (label + gap + tijd) in plaats van 100% kolombreedte. */
.hs-times li{
  display: inline-grid;
  grid-template-columns: 110px 12px max-content; /* label | gap | tijd */
  align-items: baseline;
  padding: 6px 0;
  position: relative; /* referentie voor de pill */
}

/* Daglabel links (vaste kolom) */
.hs-times .label{
  color: var(--hs-fg-muted, #5f6368);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tijd (breedte = eigen tekst) */
.hs-times .value{
  grid-column: 3;
  color: var(--hs-fg, #161616);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: left;
}

/* Vandaag-balk als absolute overlay binnen de (gekrompen) rij
   met lichte overlap links en rechts. */
.hs-times li.is-today::before{
  content:"";
  position: absolute;
  z-index: 0;
  top: 0; bottom: 0;
  left: -10px; right: -10px;          /* overlap L/R */
  background: var(--hs-card-today-bg, #e6e6e6);
  outline: 1px solid var(--hs-card-today-outline, rgba(0,0,0,.12));
  border-radius: 0;
}

/* Tekst boven de pill */
.hs-times li > *{
  position: relative;
  z-index: 1;
}

/* Mobiel: iets smallere labelkolom + gap */
@media (max-width: 980px){
  .hs-times li{ grid-template-columns: 100px 10px max-content; }
}