/* ==========================================================================
   EP Events — frontend styles
   ========================================================================== */

:root {
  --ep-color-text:        #000000;
  --ep-color-meta:        #000000;
  --ep-color-border:      #cccccc;
  --ep-color-blue:        #003399;
  --ep-color-red:         #d91a1d;
  --ep-color-bg:          #ffffff;
  --ep-color-bg-alt:      #f4f4f4;

  --ep-font-size-title:   1.6rem;
  --ep-font-size-meta:    1.1rem;
  --ep-font-size-body:    1.1rem;

  --ep-spacing-inner:     1.5rem;

  --ep-radius:            4px;
  --ep-image-size:        280px;
  --ep-date-card-width:   82px;
}

/* --------------------------------------------------------------------------
   List wrapper
   -------------------------------------------------------------------------- */

.ep-events {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   Single event row
   -------------------------------------------------------------------------- */

.ep-event {
  display: flex;
  align-items: flex-start;
  gap: var(--ep-spacing-inner);
  padding: var(--ep-spacing-inner) 0;
  border-bottom: 1px solid var(--ep-color-border);
  position: relative;
  transition: opacity 0.2s ease;
}

.ep-event:hover {
  opacity: 0.6;
}

.ep-event:first-child {
  border-top: 1px solid var(--ep-color-border);
}

/* --------------------------------------------------------------------------
   Date column — big number, month, year below
   -------------------------------------------------------------------------- */

.ep-event__date-col {
  flex: 0 0 var(--ep-date-card-width);
  text-align: center;
}

.ep-event__date-header { display: contents; }
.ep-event__date-body   { display: contents; }

.ep-events .ep-event__date-day {
  display: block !important;
  font-size: 56px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #000000 !important;
}

.ep-events .ep-event__date-month {
  display: block !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #000000 !important;
  margin-top: 4px !important;
}

.ep-events .ep-event__date-year {
  display: block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #000000 !important;
}

.ep-events .ep-event__date-time {
  display: block !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #000000 !important;
  margin-top: 8px !important;
  line-height: 1.4 !important;
}

/* --------------------------------------------------------------------------
   Thumbnail
   -------------------------------------------------------------------------- */

.ep-event__image {
  flex: 0 0 var(--ep-image-size);
}

.ep-event__image img {
  width: var(--ep-image-size);
  height: var(--ep-image-size);
  object-fit: contain;
  border-radius: var(--ep-radius);
  display: block;
}

/* --------------------------------------------------------------------------
   Body
   -------------------------------------------------------------------------- */

.ep-event__body {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0.2rem;
}

.ep-events .ep-event__title {
  margin: 0 0 0.5rem !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #000000 !important;
}

.ep-events .ep-event__title a {
  color: #000000 !important;
  text-decoration: none !important;
}

.ep-events .ep-event__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.ep-events .ep-event__title a:hover {
  color: #000000 !important;
  text-decoration: none !important;
}

.ep-events .ep-event__location {
  margin: 0 0 0.4rem !important;
  font-size: 17px !important;
  color: #000000 !important;
}

.ep-event__venue::after {
  content: ' · ';
}

.ep-event__venue:last-child::after {
  content: '';
}

.ep-events .ep-event__participants {
  margin: 0 0 0.3rem !important;
  font-size: 17px !important;
  color: #000000 !important;
}

.ep-events .ep-event__info,
.ep-events .ep-event__info p {
  font-size: 17px !important;
  color: #000000 !important;
}

.ep-event__info p { margin: 0 0 0.25em; }
.ep-event__info p:last-child { margin-bottom: 0; }

/* Featured / sticky events — red left accent */
.ep-event--featured {
  border-left: 4px solid var(--ep-color-red);
  padding-left: calc(var(--ep-spacing-inner) - 4px);
}

/* Archive context — no opacity reduction */

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.ep-no-events {
  color: var(--ep-color-meta);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  :root {
    --ep-image-size:    180px;
    --ep-spacing-inner: 1rem;
  }
}

@media (max-width: 480px) {
  .ep-event {
    flex-wrap: wrap;
  }

  /* Date: horizontal strip across full width */
  .ep-event__date-col {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
  }

  .ep-event__date-header {
    border-radius: var(--ep-radius);
    min-width: 58px;
    text-align: center;
  }

  .ep-event__date-body {
    border: none;
    background: transparent;
    padding: 0;
  }

  .ep-event__date-day {
    font-size: 2.5rem;
  }

  .ep-event__date-time {
    margin-top: 0;
  }

  /* Image full width */
  .ep-event__image {
    flex: 0 0 100%;
  }

  .ep-event__image img {
    width: 100%;
    height: 220px;
  }
}

/* ==========================================================================
   Single event detail page
   ========================================================================== */

.ep-single-event {
  padding: 2rem 0;
}

/* Back link */

.ep-single-event__back {
  margin-bottom: 1.5rem;
}

.ep-single-event__back a {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #000000 !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease;
}

.ep-single-event__back a:hover {
  opacity: 0.6;
}

/* Hero image */

.ep-single-event__hero {
  margin-bottom: 2rem;
}

.ep-single-event__hero img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Header — date + title side by side */

.ep-single-event__header {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

/* Date column — calendar sheet, same language as list */

.ep-single-event__date {
  flex: 0 0 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ep-single-event__date-day {
  display: block !important;
  font-size: 64px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #000000 !important;
}

.ep-single-event__date-month {
  display: block !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: #000000 !important;
  margin-top: 4px !important;
}

.ep-single-event__date-year {
  display: block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #000000 !important;
}

.ep-single-event__date-time {
  display: block !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #000000 !important;
  margin-top: 8px !important;
  line-height: 1.4 !important;
}

/* Title — fills remaining space, vertically centred with the date */

.ep-single-event__title {
  flex: 1 1 auto;
  margin: 0 !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #000000 !important;
  align-self: center;
}

/* Meta table */

.ep-single-event__meta {
  border-top: 1px solid var(--ep-color-border);
  border-bottom: 1px solid var(--ep-color-border);
  padding: 1.25rem 0;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ep-single-event__meta-row {
  display: flex;
  gap: 1.5rem;
}

.ep-single-event__meta-label {
  flex: 0 0 8rem;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  padding-top: 2px;
}

.ep-single-event__meta-value,
.ep-single-event__meta-value strong {
  flex: 1 1 auto;
  font-size: 17px !important;
  color: #000000 !important;
}

.ep-single-event__meta-info p {
  margin: 0 0 0.25em;
  font-size: 17px !important;
  color: #000000 !important;
}

.ep-single-event__meta-info p:last-child {
  margin-bottom: 0;
}

/* Content */

.ep-single-event__content {
  margin-bottom: 2rem;
  line-height: 1.65;
}

.ep-single-event__content,
.ep-single-event__content p,
.ep-single-event__content li {
  font-size: 17px !important;
  color: #000000 !important;
}

/* CTA link */

.ep-single-event__cta {
  margin-top: 2rem;
}

.ep-single-event__link {
  display: inline-block !important;
  padding: 0.65rem 1.5rem !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  transition: opacity 0.2s ease !important;
}

.ep-single-event__link:hover {
  opacity: 0.6 !important;
  color: #ffffff !important;
}

@media (max-width: 600px) {
  .ep-single-event__header {
    flex-direction: column;
    gap: 1rem;
  }

  .ep-single-event__date {
    flex: none;
    align-items: flex-start;
    text-align: left;
  }

  .ep-single-event__date-day {
    font-size: 48px !important;
  }

  .ep-single-event__meta-row {
    flex-direction: column;
    gap: 0.2rem;
  }

  .ep-single-event__meta-label {
    flex: none;
  }
}