/* =========================================================
   EVENTS — events.css
   Site look and feel (display headings, square edges,
   navy/red core) with the club's playful accent palette.
   ========================================================= */

:root {
  --ev-sun:    #f5a623;
  --ev-blue:   #2f7fd4;
  --ev-green:  #2d9e6b;
  --ev-purple: #8c52c7;
  --ev-coral:  #e8564a;
  --ev-teal:   #1a7a8c;
}

/* ── HERO BACKGROUND ──────────────────────────────────── */
.hero__background--events {
  position: absolute;
  inset: 0;
  background-image: url('../img/hero-images/events-hero.jpg');
  background-image: image-set(
    url('../img/hero-images/events-hero.webp') type('image/webp'),
    url('../img/hero-images/events-hero.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-position: center;
}

.hero__background--events::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(4, 51, 108, 0.55);
}

/* ── SHARED EYEBROW ───────────────────────────────────── */
.ev-eyebrow {
  display: block;
  max-width: none;
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: var(--space-sm);
}

.ev-eyebrow--light {
  color: var(--ev-sun);
}

/* ── SHARED HEADINGS (site-style) ─────────────────────── */
.ev-flagship__header h2,
.ev-term__header h2,
.ev-workshops__header h2,
.ev-regular__header h2,
.ev-calendar__text h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: var(--space-md);
}

/* =========================================================
   FLAGSHIP EVENTS
   ========================================================= */
.ev-flagship {
  padding: var(--space-4xl) 0;
  background: var(--color-white);
}

.ev-flagship__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.ev-flagship__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-3xl);
}

.ev-flagship__header h2 { color: var(--color-navy); }

.ev-flagship__sub {
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: none;
  width: 100%;
}

.ev-flagship-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.ev-flagship-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-navy-25, #d0dae8);
  background: var(--color-white);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ev-flagship-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(4,51,108,0.14);
}

.ev-flagship-card__date {
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.ev-flagship-card--festival .ev-flagship-card__date { background: var(--color-red); }
.ev-flagship-card--show     .ev-flagship-card__date { background: var(--ev-purple); }
.ev-flagship-card--awards   .ev-flagship-card__date { background: var(--ev-sun); color: var(--color-navy); }

.ev-flagship-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--color-navy);
  padding: var(--space-lg) var(--space-lg) var(--space-sm);
  margin: 0;
}

.ev-flagship-card__body {
  color: var(--color-text);
  line-height: 1.65;
  padding: 0 var(--space-lg);
  flex: 1;
  max-width: none;
  width: 100%;
}

.ev-flagship-card__details {
  list-style: none;
  padding: var(--space-md) var(--space-lg);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ev-flagship-card__details li {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  padding-left: 1.2em;
  position: relative;
}

.ev-flagship-card__details li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-red);
  font-weight: 700;
}

.ev-flagship-card .btn {
  margin: 0 var(--space-lg) var(--space-lg);
  text-align: center;
}

/* =========================================================
   EVERY TERM  (dark navy background)
   ========================================================= */
.ev-term {
  padding: var(--space-4xl) 0;
  background: var(--color-navy);
  color: #fff;
}

.ev-term__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.ev-term__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-3xl);
}

.ev-term__header h2 { color: #fff; }

.ev-term__sub {
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  max-width: none;
  width: 100%;
}

.ev-term-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  align-items: stretch;
}

.ev-term-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ev-term-card:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
}

.ev-term-card__icon {
  width: 52px;
  height: 52px;
  background: var(--ev-sun);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
  margin-bottom: var(--space-md);
}

.ev-term-card__who {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ev-sun);
  margin-bottom: var(--space-sm);
}

.ev-term-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  margin-bottom: var(--space-sm);
}

.ev-term-card p {
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
  max-width: none;
  width: 100%;
  flex: 1;
}

/* =========================================================
   WORKSHOPS & SPECIAL EVENTS  (light grey)
   ========================================================= */
.ev-workshops {
  padding: var(--space-4xl) 0;
  background: var(--color-bg-light, #f8f9fb);
}

.ev-workshops__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.ev-workshops__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-3xl);
}

.ev-workshops__header h2 { color: var(--color-navy); }

.ev-workshops__sub {
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: none;
  width: 100%;
}

.ev-workshops-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.ev-workshop-card {
  background: var(--color-white);
  overflow: hidden;
  border: 1px solid var(--color-navy-25, #d0dae8);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ev-workshop-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(4,51,108,0.12);
  border-color: var(--color-navy);
}

.ev-workshop-card__accent {
  height: 4px;
  background: var(--ev-sun);
}

.ev-workshop-card__accent--2 { background: var(--ev-blue); }
.ev-workshop-card__accent--3 { background: var(--ev-purple); }
.ev-workshop-card__accent--4 { background: var(--color-red); }
.ev-workshop-card__accent--5 { background: var(--ev-coral); }
.ev-workshop-card__accent--6 { background: var(--ev-green); }

.ev-workshop-card__body {
  padding: var(--space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ev-workshop-card__body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}

.ev-workshop-card__body p {
  color: var(--color-text-muted);
  line-height: 1.65;
  flex: 1;
  max-width: none;
  width: 100%;
}

.ev-workshop-card__who {
  display: inline-block;
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
  opacity: 0.6;
}

/* =========================================================
   REGULAR SESSIONS  (white)
   ========================================================= */
.ev-regular {
  padding: var(--space-4xl) 0;
  background: var(--color-white);
}

.ev-regular__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.ev-regular__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-3xl);
}

.ev-regular__header h2 { color: var(--color-navy); }

.ev-regular-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.ev-regular-card {
  overflow: hidden;
  border: 1px solid var(--color-navy-25, #d0dae8);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ev-regular-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(4,51,108,0.14);
  border-color: var(--color-navy);
}

.ev-regular-card__top {
  padding: var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  min-height: 100px;
}

.ev-regular-card__top--camps  { background: var(--ev-sun); color: var(--color-navy); }
.ev-regular-card__top--family { background: var(--color-red); }
.ev-regular-card__top--open   { background: var(--color-navy); }

.ev-regular-card__body {
  padding: var(--space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ev-regular-card__when {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.ev-regular-card__body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}

.ev-regular-card__body p {
  color: var(--color-text-muted);
  line-height: 1.65;
  flex: 1;
  max-width: none;
  width: 100%;
}

.ev-regular-card__link {
  display: block;
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-red);
}

/* =========================================================
   CALENDAR CALLOUT  (site navy)
   ========================================================= */
.ev-calendar {
  padding: var(--space-4xl) 0;
  background: var(--color-navy);
  border-top: 4px solid var(--ev-sun);
  color: #fff;
}

.ev-calendar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3xl);
  align-items: center;
}

.ev-calendar__text .ev-eyebrow {
  color: var(--ev-sun);
}

.ev-calendar__text h2 { color: #fff; }

.ev-calendar__text p {
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: var(--space-xl);
}

.ev-calendar__actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.ev-calendar__graphic {
  flex-shrink: 0;
}

.ev-calendar__icon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  padding: var(--space-xl) var(--space-2xl);
  color: #fff;
  text-align: center;
}

.ev-calendar__icon-wrap svg {
  color: var(--ev-sun);
}

.ev-calendar__icon-wrap p {
  color: rgba(255,255,255,0.85);
  font-size: var(--fs-sm);
  line-height: 1.5;
  max-width: none;
  width: 100%;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1000px) {
  .ev-flagship-grid,
  .ev-term-grid,
  .ev-workshops-grid,
  .ev-regular-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .ev-calendar__inner {
    grid-template-columns: 1fr;
  }

  .ev-calendar__graphic {
    display: none;
  }
}

@media (max-width: 640px) {
  .ev-flagship-grid,
  .ev-term-grid,
  .ev-workshops-grid,
  .ev-regular-row {
    grid-template-columns: 1fr;
  }

  .ev-flagship__inner,
  .ev-term__inner,
  .ev-workshops__inner,
  .ev-regular__inner,
  .ev-calendar__inner {
    padding: 0 var(--space-md);
  }
}