/* ==========================================================================
   pages/events.css: "Coming up & looking back" event cards.
   (The church calendar itself is styled in calendar.css.)
   ========================================================================== */

/* Photo crop for this page's header. */
.page-hero .bg-photo img { object-position: 55% 38%; }

/* ---------- Event cards ---------- */
.event-list { display: grid; gap: 1.2rem; }
.event {
  display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 1.6rem; align-items: start;
  background: var(--paper); border: 1px solid var(--line); padding: 1.3rem 1.5rem;
}
.event > div { min-width: 0; }
.event.past { opacity: 0.78; }
.event h3 { font-size: 1.6rem; margin-bottom: 0.25rem; }
.event p { margin: 0; color: var(--ink-soft); font-size: 1rem; }
/* An optional photo on an event (set in the website editor) */
.event-photo { display: block; width: 100%; max-width: 460px; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin-top: 0.9rem; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }

.date-block { text-align: center; border-right: 1px solid var(--line); padding-right: 1.4rem; }
.date-block .mo { font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; color: var(--crimson); font-size: 0.9rem; }
.date-block .dd { font-family: var(--f-display); font-size: 2.6rem; line-height: 1; white-space: nowrap; }
.date-block .yr { font-family: var(--f-label); letter-spacing: 0.14em; font-size: 0.8rem; color: var(--ink-soft); }

/* "Coming up" / "Held · Praise God" (set by dates.js from data-ends). */
.pill { font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; font-size: 0.78rem; padding: 0.35em 0.8em; border-radius: 999px; background: var(--paper-3); white-space: nowrap; }
.pill.up { background: var(--crimson); color: #fff; }
.event .pill { margin-top: 0.4rem; }

/* Speaker, location, contacts, times... */
.event-details {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 0.9rem 1.6rem;
  margin: 1rem 0 0; padding-top: 1rem; border-top: 1px dashed rgba(36, 22, 27, 0.2);
}
.event-details .wide { grid-column: 1 / -1; }
.event-details dt { font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; font-size: 0.78rem; color: var(--crimson); margin-bottom: 0.2rem; }
.event-details dd { margin: 0; font-size: 0.98rem; line-height: 1.45; color: var(--ink); overflow-wrap: break-word; text-wrap: pretty; }

@media (max-width: 700px) {
  .event { grid-template-columns: 5.5rem 1fr; gap: 1rem; }
  .event .pill { grid-column: 2; justify-self: start; }
  .date-block { padding-right: 0.8rem; }
}
/* Phones: the date runs across the top of the card (month, day, year on one
   line) with the badge beside it, and the details get the full card width. */
@media (max-width: 560px) {
  .event { grid-template-columns: minmax(0, 1fr) auto; gap: 0.9rem 0.8rem; padding: 1.1rem 1rem 1.2rem; }
  .date-block {
    grid-column: 1; grid-row: 1;
    display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
    text-align: left; border-right: 0; padding-right: 0;
  }
  .date-block .dd { font-size: 1.9rem; }
  .event .pill { grid-column: 2; grid-row: 1; align-self: center; margin-top: 0; }
  .event > div:not(.date-block) { grid-column: 1 / -1; grid-row: 2; }
  .event-details { grid-template-columns: minmax(0, 1fr); }
}