/* ════════════════════════════════════════════════
   EVENIMENTE PAGE — hero + events listing
   ════════════════════════════════════════════════ */

body { background: var(--lemon); color: var(--carbon); }

/* ── HERO ── */
.events-hero {
  background: var(--majorelle) url('images/hero-pattern.png') center / cover;
  padding: 10rem 4rem 5rem;
  text-align: center;
}
.events-hero .section-label {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--lemon); font-weight: 500; margin-bottom: 1rem; opacity: 0.75;
}
.events-hero h1 {
  font-family: 'ZTNature', sans-serif; font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4rem); color: var(--white);
  letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 1rem;
}
.events-hero p {
  font-size: 1.35rem; color: rgba(255,255,255,0.75); max-width: 640px;
  margin: 0 auto; line-height: 1.6; font-weight: 100;
}

/* ── LISTING — rectangular cards, one per row ── */
.events-main {
  max-width: 1100px; margin: 0 auto;
  padding: 5rem 4rem;
}
.events-main .events-grid { margin-top: 0; grid-template-columns: 1fr; }
.events-main .event-card { flex-direction: row; }

/* Image slot on the left — drop an <img> inside .event-img to replace the pattern */
.event-img {
  flex: 0 0 280px;
  background: var(--majorelle) url('images/hero-pattern.png') center / cover;
}
.event-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Right side: date row, then title, description, CTA at the bottom */
.event-content { flex: 1; display: flex; flex-direction: column; }
.event-content .event-body { flex: 1; }

@media (max-width: 700px) {
  .events-main .event-card { flex-direction: column; }
  .event-img { display: none; }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .events-hero { padding: 8rem 1.5rem 4rem; }
  .events-main { padding: 3rem 1.5rem; }
}