/* ===================================================================
   Event Pulse — Frontend Styles
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Barlow:wght@400;500;600&display=swap');

/* ── Variables ──────────────────────────────────────────────────── */
:root {
  --ep-maroon:       #3d1a24;
  --ep-maroon-dark:  #2e1219;
  --ep-maroon-light: #5c2a38;
  --ep-cream:        #f5f0e8;
  --ep-cream-light:  #f9f6f1;
  --ep-border:       #3d1a24;
  --ep-open:         #4a9fd4;
  --ep-coming-soon:  #e8a838;
  --ep-sold-out:     #e05c5c;
  --ep-cancelled:    #888;
  --ep-expired:      #aaa;
  --ep-link-blue:    #4a9fd4;
  --ep-font-head:    'Barlow Condensed', 'Arial Narrow', sans-serif;
  --ep-font-body:    'Barlow', system-ui, sans-serif;
  --ep-radius:       8px;
}

.ep-no-events {
  font-family: var(--ep-font-body);
  text-align: center;
  padding: 2rem;
  color: #777;
}

/* ===================================================================
   EVENT CARD GRID
   =================================================================== */
.wpem-main.wpem-event-listings.wpem-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.wpem-event-box-col { padding: 10px; box-sizing: border-box; }
.wpem-col-lg-4      { width: 33.333%; }
.wpem-col-md-6      { width: 50%; }

@media (max-width: 900px) { .wpem-col-lg-4 { width: 50%; } }
@media (max-width: 600px) { .wpem-col-lg-4, .wpem-col-md-6 { width: 100%; } }

.wpem-event-layout-wrapper { height: 100%; }

.event_listing {
  height: 100%;
  border-radius: var(--ep-radius);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(61,26,36,.25);
  transition: transform .25s, box-shadow .25s;
}
.event_listing:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(61,26,36,.35);
}

.wpem-event-action-url {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: var(--ep-maroon);
}

/* ── Banner ─────────────────────────────────────────────────────── */
.wpem-event-banner-img {
  width: 100%;
  height: 220px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.ep-gem-icon {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  z-index: 2;
}

.wpem-event-banner-img .wpem-event-date {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 3;
}

.wpem-event-date-type { display: flex; align-items: stretch; }

.wpem-from-date, .wpem-to-date {
  background: #fff;
  color: var(--ep-maroon);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  min-width: 48px;
  border-radius: 4px;
}

.wpem-date {
  font-family: var(--ep-font-head);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ep-maroon);
}

.wpem-month {
  font-family: var(--ep-font-body);
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ep-maroon);
  line-height: 1;
  margin-top: 2px;
}

/* ── Card body ──────────────────────────────────────────────────── */
.wpem-event-infomation {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--ep-maroon);
}

.wpem-event-body-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px 10px;
  flex: 1;
}

.wpem-event-body-text { flex: 1; min-width: 0; }

.wpem-event-description {
  font-family: var(--ep-font-body);
  font-size: .8rem;
  color: rgba(255,255,255,.85);
  margin: 0 0 8px;
  line-height: 1.5;
}

.wpem-schedule-highlight {
  font-family: var(--ep-font-body);
  font-size: .8rem;
  font-weight: 600;
  color: var(--ep-link-blue);
  margin: 0 0 4px;
  line-height: 1.4;
}

.wpem-schedule-text {
  font-family: var(--ep-font-body);
  font-size: .78rem;
  color: var(--ep-link-blue);
  opacity: .9;
  margin: 0 0 8px;
  line-height: 1.4;
}

.wpem-facilitator-label {
  font-family: var(--ep-font-body);
  font-size: .78rem;
  color: rgba(255,255,255,.7);
  margin: 0;
  line-height: 1.4;
}
.wpem-facilitator-label strong { color: #fff; font-weight: 600; }
.wpem-facilitator-label em    { font-style: italic; opacity: .75; }

.wpem-facilitator-img {
  width: 70px !important;
  height: 70px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 3px solid var(--ep-maroon-light) !important;
  display: block;
}

/* ── Title / meta strip ─────────────────────────────────────────── */
.wpem-event-details {
  padding: 10px 16px 16px;
  border-top: 1px solid rgba(255,255,255,.1);
  background: var(--ep-maroon-dark);
}

.wpem-event-title .wpem-heading-text {
  font-family: var(--ep-font-head);
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.2;
  letter-spacing: .01em;
}

.wpem-event-date-time,
.wpem-event-location {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--ep-font-body);
  font-size: .78rem;
  color: rgba(255,255,255,.7);
  margin-bottom: 5px;
}

.wpem-icon { flex-shrink: 0; font-size: .9rem; line-height: 1.4; }

/* Date chips */
.wpem-date-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: 8px; }

.wpem-chip {
  font-family: var(--ep-font-body);
  font-size: .7rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: 999px;
}
.wpem-chip--open        { background: rgba(74,159,212,.2);   color: var(--ep-open); }
.wpem-chip--coming-soon { background: rgba(232,168,56,.2);   color: var(--ep-coming-soon); }
.wpem-chip--sold-out    { background: rgba(224,92,92,.2);    color: var(--ep-sold-out); }
.wpem-chip--cancelled   { background: rgba(136,136,136,.15); color: var(--ep-cancelled); }
.wpem-chip--expired     { background: rgba(170,170,170,.1);  color: var(--ep-expired); }

/* ===================================================================
   CAROUSEL
   =================================================================== */
.ep-carousel-outer { width: 100%; }
.ep-carousel-viewport { overflow: hidden; width: 100%; }

.ep-carousel-track {
  display: flex;
  flex-wrap: nowrap !important;
  transition: transform .5s cubic-bezier(.77,0,.175,1);
  will-change: transform;
}

.ep-carousel-track .wpem-event-box-col { flex-shrink: 0; }

.ep-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
}

.ep-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--ep-maroon);
  background: #fff;
  color: var(--ep-maroon);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
}
.ep-nav-btn:hover { background: var(--ep-maroon); color: #fff; }

.ep-dots { display: flex; gap: .45rem; }

.ep-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--ep-maroon);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .2s;
}
.ep-dot--active { background: var(--ep-maroon); }

/* ===================================================================
   CALENDAR  — JS-rendered, full monthly grid
   =================================================================== */
.ep-calendar-wrapper { font-family: var(--ep-font-body); }

/* ── Filter tabs ─────────────────────────────────────────────────── */
.ep-cal-filter-bar {
  display: flex;
  gap: .5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.ep-cal-filter {
  padding: .38rem 1.1rem;
  border: 2px solid var(--ep-maroon);
  border-radius: 999px;
  background: transparent;
  color: var(--ep-maroon);
  font-family: var(--ep-font-body);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.ep-cal-filter:hover,
.ep-cal-filter--active { background: var(--ep-maroon); color: #fff; }

/* ── Month navigation bar ────────────────────────────────────────── */
.ep-cal-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}

.ep-cal-current-month {
  font-family: var(--ep-font-head);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ep-maroon);
  margin: 0;
  flex: 1;
  text-align: center;
  letter-spacing: .02em;
}

.ep-cal-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--ep-maroon);
  background: #fff;
  color: var(--ep-maroon);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .18s, color .18s;
}
.ep-cal-nav-btn:hover { background: var(--ep-maroon); color: #fff; }

/* ── Calendar grid ───────────────────────────────────────────────── */
.ep-cal-grid {
  border: 2px solid var(--ep-border);
  border-radius: var(--ep-radius);
  overflow: hidden;
}

/* Header: maroon day-name row */
.ep-cal-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--ep-maroon);
}

.ep-cal-hcell {
  text-align: center;
  padding: .7rem .25rem;
  font-family: var(--ep-font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: rgba(255,255,255,.9);
  border-right: 1px solid rgba(255,255,255,.12);
}
.ep-cal-hcell:last-child { border-right: none; }

/* Body grid */
.ep-cal-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

/* Day cells */
.ep-cal-cell {
  min-height: 90px;
  padding: .4rem .5rem;
  border-right: 1px solid var(--ep-border);
  border-bottom: 1px solid var(--ep-border);
  background: var(--ep-cream-light);
  position: relative;
  transition: background .15s;
}
.ep-cal-cell:nth-child(7n)  { border-right: none; }

/* Empty padding cells */
.ep-cal-empty {
  min-height: 90px;
  border-right: 1px solid var(--ep-border);
  border-bottom: 1px solid var(--ep-border);
  background: var(--ep-cream);
}
.ep-cal-empty:nth-child(7n) { border-right: none; }

/* Today */
.ep-cal-cell--today { background: #fff5f5; }
.ep-cal-cell--today .ep-cal-day {
  background: var(--ep-maroon);
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
}

/* Day number */
.ep-cal-day {
  display: block;
  font-family: var(--ep-font-body);
  font-size: .8rem;
  font-weight: 600;
  color: var(--ep-maroon);
  margin-bottom: .3rem;
  line-height: 1;
}

/* Events list in cell */
.ep-cal-events {
  display: flex;
  flex-direction: column;
  gap: .18rem;
}

.ep-cal-event {
  display: flex;
  align-items: flex-start;
  gap: .28rem;
  text-decoration: none;
  font-family: var(--ep-font-body);
  font-size: .68rem;
  font-weight: 500;
  line-height: 1.3;
  padding: .18rem .35rem;
  border-radius: 3px;
  transition: opacity .15s;
}
.ep-cal-event:hover { opacity: .8; }

.ep-cal-event-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  margin-top: .25rem;
}

.ep-cal-event-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-cal-event-time {
  font-size: .62rem;
  opacity: .75;
  white-space: nowrap;
  margin-left: auto;
  padding-left: .2rem;
}

/* Status colours */
.ep-cal-event--open        { background: rgba(74,159,212,.15);  color: #1a6fa0; }
.ep-cal-event--coming-soon { background: rgba(232,168,56,.18);  color: #8a5e00; }
.ep-cal-event--sold-out    { background: rgba(224,92,92,.15);   color: #a83030; }
.ep-cal-event--cancelled   { background: rgba(136,136,136,.12); color: #666; }
.ep-cal-event--expired     { background: rgba(100,100,100,.08); color: #999; }

/* Responsive */
@media (max-width: 640px) {
  .ep-cal-cell, .ep-cal-empty { min-height: 60px; padding: .25rem .2rem; }
  .ep-cal-event-name  { max-width: 44px; font-size: .6rem; }
  .ep-cal-event-time  { display: none; }
  .ep-cal-hcell       { font-size: .65rem; padding: .5rem .1rem; }
  .ep-cal-current-month { font-size: 1.2rem; }
}