/* ===== Upcoming Event page (match Rehoboth styling) ===== */

:root {
  --text-light: #f5f3ef; /* warm off-white */
  --card: #ffffff;
  --muted: #6b6b6b;

  --accent: #b08a6b; /* your tan/brown buttons */
  --accent-dark: #9a7559;
  --accent-soft: #eadfd6;

  --radius-xl: 28px;
  --radius-lg: 18px;
  --shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
  --border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Page background should feel like your other pages */
.body {
  background: var(--bg-dark);
  --bg-dark: #3f3f3f; /* your site’s dark gray vibe */
  color: var(--text-light);
}

/* Keep content aligned like your other sections */
.events-page {
  width: min(1100px, 92%);
  margin: 0 auto;
  padding: 60px 0 90px;
}

/* Top title/intro area */
.events-hero {
  color: white;
  display: flex;
  gap: 16px;
  margin-top: 40px;
  flex-direction: column;
  align-items: center;
}

.events-title {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 0.95;
  margin: 0;
}

.events-subtitle {
  max-width: 820px;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(245, 243, 239, 0.88);
  margin: 0;
}

/* Main event card */
.event-card {
  background: var(--card);
  color: #222;
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  border: var(--border);
  padding: clamp(22px, 3.2vw, 34px);
  display: flex;
  flex-direction: column;
}

.event-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-soft);
  color: #3b2b20;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 16px;
}

.event-name {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 600;
  margin: 0 0 14px;
  line-height: 1.1;
}

.event-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 0 18px;
}

.meta-item {
  background: rgba(0, 0, 0, 0.03);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.meta-label {
  font-size: 13px;
  color: var(--muted);
  padding: 0;
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.meta-value {
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

/* Scripture highlight like your rounded “pill/box” feel */
.scripture {
  margin: 18px 0 18px;
  padding: 16px 18px;
  border-left: 6px solid var(--accent);
  background: rgb(176 138 107 / 18%);
  border-radius: 14px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}

/* Description */
.event-desc {
  align-self: center;
  font-size: 18px;
  line-height: 1.75;
  margin: 0 0 22px;
  color: #2a2a2a;
}

/* Buttons matching your tan style */
.event-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease,
    border-color 0.12s ease;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--accent-dark);
  border-color: var(--accent);
}

.btn-secondary:hover {
  background: rgba(176, 138, 107, 0.12);
  transform: translateY(-1px);
}

@media (max-width: 810px) {
  .event-actions {
    flex-direction: column;
    align-items: center;
  }
}
/* Responsive */
@media (max-width: 760px) {
  .event-meta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 570px) {
  .event-desc {
    padding: 0;
  }
}

@media (max-width: 487px) {
  .events-subtitle {
    padding: 20px 0;
  }
}

@media (max-width: 459px) {
  .events-hero {
    padding: 40px 0;
  }

  .events-title {
    font-size: clamp(40px, 5vw, 64px);
  }
}

@media (max-width: 407px) {
  .events-title {
    font-size: clamp(37px, 5vw, 64px);
  }
}

@media (max-width: 377px) {
  .events-title {
    font-size: clamp(31px, 5vw, 64px);
  }
  .event-name {
    font-size: clamp(24px, 3.2vw, 44px);
  }
}