/* Gatherings. Single-column stack of
   full-width event cards, bracketed by an Upcoming/Past divider (real h2s,
   not styled divs — same SEO rule as every other section title on the
   site). Card action buttons reuse the same bordered-pill shape as
   product/article "more" links. */

/* The anchor has to rest below the sticky trigger line (header height) on
   load, or js/sticky-chips.js's IntersectionObserver reads the chips as
   already stuck and folds them before the page is scrolled. Whatever sits
   above it normally supplies that offset; this margin is the fallback for
   when too little does. */
.chips-anchor--gatherings {
  margin-top: var(--space-3);
}

/* An intro paragraph supplies far more offset than the fallback, so drop it
   and keep the gap before the chips identical to shop/journal. */
.collection-intro + .chips-anchor--gatherings {
  margin-top: 0;
}

/* .page's own top padding (--space-3) isn't wanted here — the chips row
   right above already provides the gap before content. */
.page.gatherings {
  padding-top: 0;
}

/* pill recipe shared via .divider-pill (base.css) */
.gatherings__divider--upcoming {
  padding-inline: 2.4em; /* 20% more than the base 2em */
  background: #b4ffa1; /* same green family as the site's other "active/positive" pills */
}

.gatherings__divider--past {
  background: #fa5252; /* salmon/red */
}

.events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Author styles can silently defeat the browser's own [hidden]{display:none}
   default — explicit here since JS filtering relies on it. */
.gatherings__section[hidden],
.event-card[hidden] {
  display: none;
}

.event-card__img {
  display: block;
  width: 100%;
  height: auto; /* the poster's own height, uncropped */
}

.event-card__img--empty {
  aspect-ratio: 1 / 1; /* the placeholder has no ratio of its own */
  background: #ececec; /* neutral placeholder until a photo is set, matches product-card/article-card */
}

.event-card__title {
  margin-top: 0.5rem;
  font-size: var(--text-body); /* 20px, matches product-card/article-card at rest */
  font-weight: var(--weight-medium);
}

.event-card__date {
  margin-top: 0.25rem;
  font-size: var(--text-body);
  font-weight: var(--weight-light);
}

.event-card__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* Same rule as journal's featured-card "Read" button (.article-card--
   featured .article-card__more) — bordered pill, no fill, regular weight. */
.event-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25em 1em;
  border: var(--border-thin);
  border-radius: var(--radius-l);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: 1;
  text-decoration: none;
}

.event-card__action--attend {
  background: #b4ffa1; /* same green as .gatherings__divider--upcoming */
}

/* inverts into the section's own two greens — the Gatherings teal
   (header tint / home pill) behind its bright green at rest */
.event-card__action--attend:focus-visible {
  background: #50bb9f;
  color: #b4ffa1;
}

@media (hover: hover) {
  .event-card__action--attend:hover {
    background: #50bb9f;
    color: #b4ffa1;
  }
}

/* Event Journal takes the Journal section's yellow — it links there, and
   it has no fill of its own to trade. Scoped to the page: in the home
   column that card sits ON the teal, where home.css gives it white. */
.page.gatherings .event-card__action:not(.event-card__action--attend):focus-visible {
  background: #fdff90;
}

@media (hover: hover) {
  .page.gatherings .event-card__action:not(.event-card__action--attend):hover {
    background: #fdff90;
  }
}

/* iPad band: two cards to a row (the stack reads endless at this
   width); tops align on the grid row, bottoms stay free like desktop */
@media (min-width: 46rem) and (max-width: 71.9375rem) {
  .page.gatherings .events {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* ============================================================
   Desktop: one continuous three-column grid,
   upcoming flowing into past, the group markers alone telling the
   two apart. After nine cards, More Past Events
   (gatherings-filter.js).
   ============================================================ */

@media (min-width: 72rem) {
  /* Row-gap 0, group gap via card margin instead — same pattern as
     journal.css's listing. */
  .page.gatherings {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--space-4);
    padding-top: var(--space-3); /* air under the chips row */
  }

  /* sections dissolve into the one grid; their [hidden] still wins
     (display:none above outranks contents) when a filter empties them.
     Scoped: .events also lists the home gathering column, whose padding
     box must survive. */
  .page.gatherings .gatherings__section,
  .page.gatherings .events {
    display: contents;
  }

  .gatherings__divider--upcoming,
  .gatherings__divider--past {
    display: none;
  }

  /* Cards flow as plain blocks: image tops align (row start), and each
     card's title/date/buttons follow its own poster at a constant gap —
     bottoms deliberately don't align. The card BOX still stretches to the
     row's tallest card (grid default), which is what the group marker's
     line spans (::before below). */
  /* re-beats the display:block below, which outranks the plain
     .event-card[hidden] rule at the top of this file and would render
     every paginated-away card */
  .page.gatherings .event-card[hidden] {
    display: none;
  }

  .page.gatherings .event-card {
    display: block;
    margin-bottom: var(--space-4); /* the group gap between card rows — still enough for a pill to sit in it */
  }

  /* Group markers: the mobile divider pills, redrawn at
     the first visible card of their group — a line down that card's left
     with the pill perched on top. They ride the card, so filters move
     them and an emptied group simply has none. The h2 dividers above
     stay in the DOM for SEO and mobile; this is their desktop face. */
  .page.gatherings .event-card--group-first {
    position: relative;
  }

  /* The pill is a fixed 2rem tall with a true pill radius, so its bottom
     corner's curve starts exactly half its height (1rem) in from its left
     edge — the pill is shifted left by that much, putting the curve-start
     point right on the line, which rises through the 0.375rem gap to meet
     it. The pill pokes past the content gutter by design (the one element
     allowed to). */
  .page.gatherings .event-card--group-first::before {
    content: '';
    position: absolute;
    left: -0.75rem;
    top: -0.375rem;
    bottom: 0;
    width: 2px;
    background: var(--color-ink);
  }

  .page.gatherings .event-card--group-first::after {
    content: attr(data-group-label);
    position: absolute;
    left: calc(-0.75rem - 1rem);
    bottom: calc(100% + 0.375rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8.5rem; /* fixed so the two pills share one footprint, as mobile's dividers do */
    height: 2rem;
    border: var(--border-thin);
    border-radius: var(--radius-pill);
    background: #b4ffa1; /* upcoming green, same as the mobile pill */
    font-size: var(--text-ui);
    font-weight: var(--weight-medium);
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .page.gatherings .event-card--group-first.event-card--past::after {
    background: #fa5252; /* past salmon, same as the mobile pill */
  }

  /* headroom for the pills above the first row */
  .page.gatherings {
    padding-top: var(--space-5);
  }

  /* the grid places it; the pill itself is .load-more (base.css) */
  .gatherings__more {
    grid-column: 1 / -1;
    justify-self: center;
    /* the last card row's own bottom margin (the group gap) already
       equals the air the pill wants — grid item margins never collapse */
    margin-top: 0;
    margin-bottom: var(--space-3);
  }
}