/* Scoped overrides to style [church_events] shortcode on home page
   Matches the Events List card aesthetic but does not affect the Events List page
   (only loaded by shortcode rendering) */

.church-events-list.events-list {
  margin: 0;
  padding: 0;
}

.church-events-list.events-list .events-card {
  border-color: rgba(255, 255, 255, 0.18);
}

/* Date column */
.church-events-list.events-list .event-date-col .event-dow {
  color: rgba(255, 255, 255, 0.85);
}
.church-events-list.events-list .event-date-col .event-day {
  color: #ffffff;
}

/* Title & links */
.church-events-list.events-list .event-content-col .event-title a {
  color: #ffffff;
}
.church-events-list.events-list .event-content-col .event-title a:hover,
.church-events-list.events-list .event-content-col .event-title a:focus {
  color: #ffffff;
  opacity: 0.9;
}

/* Meta & excerpt */
.church-events-list.events-list .event-meta,
.church-events-list.events-list .event-meta .event-date,
.church-events-list.events-list .event-meta .event-location,
.church-events-list.events-list .event-excerpt {
  color: rgba(255, 255, 255, 0.85);
}

.church-events-list.events-list .event-series-tag,
.church-events-list.events-list .event-details-link {
  color: rgba(255, 255, 255, 0.85);
}

/* Thumbnail */
.church-events-list.events-list .event-thumb-col .event-thumb {
  border-radius: 8px;
}

/* View More CTA for the shortcode */
.church-events-list.events-list + .shortcode-view-more {
  margin-top: 24px;
}
.church-events-list.events-list + .shortcode-view-more .button {
  background: #ffffff;
  color: #1f1c6e; /* deep indigo to complement purple background */
  border: none;
  border-radius: 9999px;
  padding: 10px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.church-events-list.events-list + .shortcode-view-more .button:hover {
  opacity: 0.95;
}

/* Responsive stacking for small devices
   Ensure date/content columns stack vertically on mobile */
@media (max-width: 768px) {
  /* Force the grid container to single column on Elementor sections */
  .elementor-page .cem-struct-scope .church-events-list,
  .elementor-page .cem-struct-scope .church-events-list.events-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 16px !important;
  }

  .church-events-list.events-list .event-item {
    /* Base list view uses flex; stack vertically on small screens */
    display: flex;
    flex-direction: column;
    gap: 0.5rem !important;
  }

  .church-events-list.events-list .event-date-col {
    /* Place date above content and align nicely */
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    text-align: left !important;
  }

  .church-events-list.events-list .event-content-col {
    margin-top: 0.25rem;
  }
}