/* Per-day accent colours (replace with your real colours) */
.cs-day--tuesday   { --cs-accent: #3B738E; } /* gold */
.cs-day--wednesday { --cs-accent: #A542A1; } /* green */
.cs-day--thursday  { --cs-accent: #29856B; } /* blue */
.cs-day--friday    { --cs-accent: #56CDCC; } /* red */

.cs {
  width: 100%;
}

.cs-grid {
  display: grid;
  gap: 18px;
}

/* Desktop: 4 columns */
@media (min-width: 901px) {
  .cs-grid {
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
  }
}

/* Day card */
.cs-day {
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  overflow: hidden;
}

/* Day header */
.cs-day__header {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 16px 22px 10px;
  border: 0;
  cursor: pointer;
  background: #0f2430; /* tweak per day if desired */
  color: #fff;
}
.cs-day__stack{
  display: grid;
	text-align: left;
}
.cs-day__title {
	font-family: var(--wp--preset--font-family--tay-jukebox-johnny);
  font-weight: 500;
  letter-spacing: .5px;
  font-size: 19px;
}

.cs-day__date {
	font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 800;
  font-size: 14px;
}

.cs-day__chev {
  font-size: 14px;
  opacity: .9;
	color: #56CDCC;
}

/* Lists */
.cs-item__time {
  font-size: 12px;
  opacity: .7;
}

.cs-item__title {
  font-size: 14px;
  font-weight: 700;
}

.cs-item--empty {
  opacity: .7;
}

/* Desktop condensed list visible; mobile accordion body visible */
.cs-day__desktoplist { display: block; }
.cs-day__body { display: none; }

/* Mobile actions */
.cs-day__actions {
  padding: 0 14px 14px;
}

.cs-btn {
  width: 100%;
  border: 2px solid  #a542a1;
  border-radius: 0px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
  background: #a542a1;
  color: #fff;
}
.cs-btn:hover, .cs-btn:active {
	  background: #fff;
  color: #a542a1;
}

/* Modal */
.cs-modal {
  width: min(980px, calc(100vw - 24px));
  border: 0;
  padding: 0;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.cs-modal::backdrop {
  background: rgba(0,0,0,.55);
}

.cs-modal__inner {
  background: #fff;
}

.cs-modal__topbar {
  background: #0f2430;
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cs-modal__heading {
  display: grid;
  gap: 2px;
}

.cs-modal__day {
	font-family: var(--wp--preset--font-family--tay-jukebox-johnny);
  font-weight: 500;
  letter-spacing: .5px;
  font-size: 19px;
}

.cs-modal__date {
	font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 800;
  font-size: 14px;
}

.cs-modal__close {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 6px 8px;
}

.cs-modal__content {
  padding: 16px;
  display: grid;
  gap: 16px;
}

/* Event block */
.cs-event {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
  padding: 12px;
}

@media (max-width: 700px) {
  .cs-event {
    grid-template-columns: 1fr;
  }
}

.cs-event__imgwrap {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.cs-event__img {
  width: 100%;
  height: auto;
  display: block;
}

.cs-event__time {
  font-size: 12px;
  opacity: .75;
  margin-bottom: 4px;
}

.cs-event__title {
  margin: 0 0 8px;
  font-size: 18px;
}

.cs-event__desc {
  margin-bottom: 10px;
}

.cs-event__meta {
  display: grid;
  gap: 6px;
  font-size: 14px;
}

.cs-event__address a {
  text-decoration: underline;
}

/* Timeline list: NO gaps so the line segments touch */
.cs-list{
  list-style:none;
  margin:0;
  padding: 12px 14px 14px;
  display:grid;
  gap:0;
}
/* Tweak these two to match your mock */
.cs-list{
  --cs-dot-size: 14px;
  --cs-dot-top: 10px;  /* distance from top of each row */
  --cs-line-x: 15px;   /* x-position of the line */
}

/* Each row */
.cs-item{
  position:relative;
  padding: 8px 0 8px 40px; /* left padding creates the gutter for dot/line */
}

/* The vertical line: full height on every item by default */
.cs-item::after{
  content:"";
  position:absolute;
  left: var(--cs-line-x);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--cs-accent, #204ce5);
  opacity: 0.95;
}

/* The dot (ring with white centre) */
.cs-item::before{
  content:"";
  position:absolute;
  left: calc(var(--cs-line-x) - (var(--cs-dot-size) / 2) + 1px);
  top: var(--cs-dot-top);
  width: var(--cs-dot-size);
  height: var(--cs-dot-size);
  border-radius: 999px;
  background: #fff; /* white centre */
  border: 5px solid var(--cs-accent, #204ce5); /* coloured ring */
  box-sizing: border-box;
    z-index: 9;
}

/* Trim the line ABOVE the first dot (start at dot center) */
.cs-item:first-child::after{
  top: calc(var(--cs-dot-top) + (var(--cs-dot-size) / 2));
}

/* Trim the line BELOW the last dot (end at dot center) */
.cs-item:last-child::after{
  bottom: auto;
  height: calc(var(--cs-dot-top) + (var(--cs-dot-size) / 2));
}

/* Empty state: no dot/line */
.cs-item--empty{
  padding-left:0;
}
.cs-item--empty::before,
.cs-item--empty::after{
  display:none;
}

/* =========================
   HEADER: day above date + plus icon
   ========================= */
.cs-day__header{
  grid-template-columns: 1fr auto; /* override the 1fr auto auto */
  gap: 10px;
}

.cs-day__title,
.cs-day__date{
  display: block; /* force stacking */
}

.cs-day__title{
  line-height: 1.05;
  margin: 0 0 4px;
}

.cs-day__date{
  line-height: 1.1;
}

/* plus icon */
.cs-day__chev{
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  opacity: .95;
  transform: none; /* override mobile transform */
}

/* =========================
   TIMELINE: more space between line/dot and text
   ========================= */
.cs-list{
  --cs-line-x: 16px; /* move line slightly left/right as needed */
  --cs-dot-size: 14px;
  --cs-dot-top: 10px;
}

.cs-day__body { display: none; }

@media (max-width: 900px) {
  .cs-day__body { display: none; }                 /* keep hidden by default */
  .cs-day__body:not([hidden]) { display: block; }  /* show only when opened */
  .cs-day__desktoplist { display: none; }
}