.cgs-events-list { display: flex; flex-direction: column; gap: 1em; }
.cgs-events-list--single { max-width: 680px; margin-left: auto; margin-right: auto; }
.cgs-event { position: relative; z-index: 1; background: #fff; border: 1px solid #e6e6e6; border-radius: 8px; padding: 1.25em 1.5em; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
.cgs-event-header { display: flex; align-items: center; justify-content: space-between; gap: .5em; flex-wrap: wrap; }
.cgs-event-title { margin: 0; font-size: 1.25em; line-height: 1.25; }
.cgs-event-location + .cgs-event-datetime::before { content: "\2022"; margin-right: .75em; color: #bbb; }
.cgs-badge { font-size: .75em; padding: .15em .6em; border-radius: 999px; background: #eee; color: #555; }
.cgs-badge--private { background: #fde68a; color: #92400e; }
.cgs-event-meta { display: flex; flex-wrap: wrap; gap: .75em; color: #555; font-size: .9em; margin-top: .35em; }
.cgs-toggle-details { margin-top: .6em; background: none; border: 1px solid #999; border-radius: 4px; padding: .3em .8em; cursor: pointer; font-size: .85em; }
.cgs-event-description { margin-top: .6em; }
.cgs-event-description[hidden] { display: none; }

.cgs-calendar { max-width: 100%; }
.cgs-calendar-header { display: flex; align-items: center; justify-content: space-between; gap: .5em; margin-bottom: .75em; }
.cgs-calendar-title { margin: 0; }
/* Nav buttons match the site's brand green button style */
.cgs-calendar .cgs-cal-nav { display: inline-block; text-decoration: none; border: none; border-radius: 4px; padding: .4em 1em; font-size: .9em; line-height: 1.4; cursor: pointer; background: #52b35f; color: #fff; }
.cgs-calendar .cgs-cal-nav:hover,
.cgs-calendar .cgs-cal-nav:focus { background: #47a054; color: #fff; }
.cgs-calendar-dow { font-weight: bold; text-align: center; padding: .3em 0; font-size: .8em; }

/* ----- Desktop: week rows with continuous, column-spanning event bars -----
   Each week is a relative box; the day cells are an absolute background grid,
   and day numbers + event bars sit above it. Bars are placed with an inline
   grid-column span and auto-flow into lanes (the browser handles stacking). */
.cgs-cal-weeks { display: block; }
.cgs-week-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.cgs-week { position: relative; margin-bottom: 4px; }
.cgs-week-bg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; z-index: 0; }
.cgs-bgcell { border: 1px solid #eee; border-radius: 4px; }
.cgs-bgcell.cgs-out { background: #fafafa; border-color: transparent; }
.cgs-bgcell.cgs-today { border-color: #52b35f; box-shadow: inset 0 0 0 1px #52b35f; }
.cgs-week-body { position: relative; z-index: 1; min-height: 88px; }
.cgs-week-nums { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cgs-num { padding: .3em; font-size: .8em; font-weight: bold; }
.cgs-num.cgs-out { color: #bbb; font-weight: normal; }
.cgs-week-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: min-content; grid-auto-flow: row dense; gap: 2px 4px; padding: 2px .25em 4px; }

/* Mobile-only containers, hidden on desktop */
.cgs-cal-agenda { display: none; }
.cgs-calendar-empty { display: none; }

/* ----- Event pill / bar (shared by the week bars and the agenda) ----- */
.cgs-calendar-event { display: flex; align-items: flex-start; gap: 3px; margin: 0 0 2px; padding: 2px 5px; border-radius: 3px; background: #eef2ff; color: #333; text-decoration: none; min-width: 0; }
.cgs-week-bars .cgs-calendar-event { margin: 0; }
.cgs-calendar-event.cgs-span-open-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cgs-calendar-event.cgs-span-open-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cgs-calendar-event-title { flex: 1 1 auto; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.cgs-calendar-event-info { flex: 0 0 auto; width: 12px; height: 12px; margin-top: 1px; opacity: .55; }
.cgs-calendar-event.cgs-event--restricted { background: #fde68a; color: #92400e; }
.cgs-calendar-event.cgs-has-details { cursor: pointer; }
.cgs-calendar-event.cgs-has-details:hover,
.cgs-calendar-event.cgs-has-details:focus { outline: 2px solid #52b35f; outline-offset: 1px; }
.cgs-calendar.cgs-loading { opacity: .5; pointer-events: none; }

.cgs-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 100000; padding: 1em; }
.cgs-modal-overlay[hidden] { display: none; }
.cgs-modal { background: #fff; border-radius: 10px; padding: 1.75em; max-width: 480px; width: 100%; position: relative; max-height: 85vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,.28); }
/* Override the theme's global button styling for a subtle, self-contained close control */
.cgs-modal-overlay .cgs-modal-close {
    position: absolute; top: .55em; right: .55em;
    display: flex; align-items: center; justify-content: center;
    width: 2em; height: 2em; padding: 0 !important;
    background: transparent !important; border: none !important; box-shadow: none !important;
    border-radius: 50% !important; color: #999 !important;
    font-size: 1.5em; line-height: 1; cursor: pointer;
}
.cgs-modal-overlay .cgs-modal-close:hover,
.cgs-modal-overlay .cgs-modal-close:focus { background: #f0f0f0 !important; color: #222 !important; }
.cgs-modal-title { margin: 0 1.6em .5em 0; }
.cgs-modal-badge-wrap:not(:empty) { margin-bottom: .6em; }
.cgs-modal-meta { color: #555; font-size: .9em; }
.cgs-modal-meta-row { display: flex; align-items: flex-start; gap: .5em; margin-bottom: .3em; }
.cgs-modal-meta-icon { flex: 0 0 auto; width: 15px; height: 15px; margin-top: .15em; color: #52b35f; display: inline-flex; }
.cgs-modal-meta-icon svg { width: 100%; height: 100%; display: block; }
.cgs-modal-description { white-space: pre-line; margin-top: .9em; padding-top: .9em; border-top: 1px solid #eee; }
.cgs-modal-description[hidden] { display: none; }

/* ---------- Responsive (phones) ---------- */
@media (max-width: 600px) {
    /* List meta reads better stacked than wrapped-with-a-leading-dot on phones */
    .cgs-event-meta { flex-direction: column; gap: .15em; }
    .cgs-event-location + .cgs-event-datetime::before { content: none; }

    /* Stack the calendar header: month name on top, nav buttons centred below */
    .cgs-calendar-header { flex-wrap: wrap; justify-content: center; gap: .5em; }
    .cgs-calendar .cgs-calendar-title { order: -1; flex-basis: 100%; text-align: center; font-size: 1.3rem; }

    /* Swap the desktop week grid for a vertical agenda of event days. Bars are
       useless at phone width, so each event day becomes a card with the full
       date label and full-width event pills (title + info icon). */
    .cgs-cal-weeks { display: none; }
    .cgs-cal-agenda { display: block; }
    .cgs-agenda-day { margin-bottom: .5em; padding: .7em .9em; border: 1px solid #e6e6e6; border-radius: 6px; }
    .cgs-agenda-day.cgs-today { border-color: #52b35f; box-shadow: inset 0 0 0 1px #52b35f; }
    .cgs-agenda-label { font-weight: 700; color: #333; margin-bottom: .4em; }
    .cgs-cal-agenda .cgs-calendar-event { padding: .4em .6em; margin-bottom: .35em; gap: 6px; border-radius: 4px; }
    .cgs-cal-agenda .cgs-calendar-event:last-child { margin-bottom: 0; }
    .cgs-calendar-event-info { width: 14px; height: 14px; margin-top: 2px; }

    /* Empty-month placeholder (PHP renders it only when there are no events) */
    .cgs-calendar-empty { display: block; text-align: center; color: #777; font-style: italic; padding: 1.5em 0; }
}