/* ==========================================================================
   Rachel Cuevas Campaign — EVENTS (single + archive, on-light backgrounds)
   Requires tokens.css, base.css, layout.css, components.css to be loaded
   first (enqueued by functions.php).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Single event — meta row, featured image, entry content headings
   -------------------------------------------------------------------------- */
.event-meta {
  margin-top: var(--space-md);
}

.event-meta__row {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-xs);
}

.event-featured-image img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-lg);
}

.entry-content h2,
.entry-content h3 {
  margin-bottom: var(--space-sm);
  margin-top: var(--space-lg);
}

.entry-content p {
  margin-bottom: var(--space-md);
}

/* --------------------------------------------------------------------------
   Registration form (on-light background: .section--offwhite)
   -------------------------------------------------------------------------- */
.event-registration-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 32rem;
  margin-top: var(--space-md);
}

.event-registration-form .form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.event-registration-form .form-field label {
  font-weight: var(--font-weight-body-bold);
  font-size: 0.95rem;
  color: var(--color-text-dark);
}

.event-registration-form .form-field input {
  padding: 0.7em 0.9em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
  background-color: var(--color-white);
  color: var(--color-text-dark);
}

.event-registration-form .form-field input:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.event-registration-form button[type="submit"] {
  align-self: flex-start;
  margin-top: var(--space-sm);
}

.event-registration__notice {
  max-width: 32rem;
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px dashed var(--color-red);
  border-radius: var(--radius-md);
  color: var(--color-red);
  background-color: rgba(198, 40, 61, 0.06);
}

.form-status {
  max-width: 32rem;
  margin-top: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background-color: var(--color-offwhite);
  font-weight: var(--font-weight-body-medium);
}

.form-status--error {
  color: var(--color-red);
  background-color: rgba(198, 40, 61, 0.08);
}

/* --------------------------------------------------------------------------
   Archive — upcoming events grid
   -------------------------------------------------------------------------- */
.event-card {
  display: block;
  text-decoration: none;
  color: var(--color-text-dark);
}

.event-card__image {
  width: 100%;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  object-fit: cover;
  aspect-ratio: 16 / 10;
}

.event-card__date {
  color: var(--color-red);
  font-weight: var(--font-weight-body-bold);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-xs);
}

.event-card__title {
  margin-bottom: var(--space-xs);
}

.event-card__location {
  color: var(--color-text-muted);
  margin-bottom: 0;
}