/* ============================================================
   Homepage — hero image, dynamic 3-column widget section.
   Widget styling mirrors the original MEC masonry widgets:
   elliptical images, oversized serif dates, pill buttons.
   ============================================================ */

/* parallax: the hero stays pinned at the viewport top while the
   rest of the page scrolls over it */
.home-hero {
  position: sticky;
  top: 0;
  z-index: 0;
  width: 100%;
  overflow: hidden;
  background: var(--offwhite);
}
.template-home .site-main,
.template-home .site-footer {
  position: relative;
  z-index: 1;
}
/* keep the header's own stacking level (z 100) so open dropdowns are not
   painted over (= clipped) by the white main area */
.template-home .site-header:not(.is-sticky) {
  position: relative;
  z-index: 100;
}
.template-home .site-main { background: var(--white); }
.home-hero img {
  display: block;
  width: 100%;
  height: auto;
  animation: hero-fade 1.2s ease;
}
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }

.home-content { padding-top: 0; padding-bottom: 0; }
.home-content > .container > .section:first-child { padding-top: 25px; }

/* the homepage quote is larger than on content pages
   (live: gold, 32px, weight 500, italic, centered) */
.home-content blockquote {
  color: var(--gold);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.7;
}

/* the original homepage renders its h5 heading oversized (gold band);
   h4 sizing comes from the global .section rule */
.home-content .section:not(.home-dynamic) h5 { font-size: 42px; font-weight: 700; }

section.section.home-dynamic {
  background: var(--beige);
  padding-top: 75px;
  padding-bottom: 50px;
  margin-top: 25px;
}
.home-widgets { text-align: center; }
.home-widgets h3 { margin-bottom: 30px; }

/* --- event widgets (next event / highlight) --- */
.event-widget-img img,
.news-widget-img img {
  display: block;
  width: 100%;
  height: 232px;
  object-fit: cover;
  border-radius: 500px;
}
/* compact date row: big serif day, month + time beside it */
.event-widget-when {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px 0 12px;
}
.event-widget-day {
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  color: var(--dark-red);
}
.event-widget-mt { text-align: left; }
.event-widget-month {
  display: block;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--dark-red);
}
.event-widget-time { display: block; font-size: 15px; line-height: 1.4; }
.event-widget-addr { font-size: 15px; line-height: 1.4; margin: 0 0 10px; }
.event-widget-addr strong { font-weight: 700; }
.event-widget-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 20px;
}
.home-widgets .event-widget-title a {
  color: var(--dark-red);
  font-family: var(--font-heading);
  text-decoration: none;
  font-weight: 700;
}
.home-widgets .event-widget-title a:hover { color: var(--red); }

/* --- news widget --- */
/* crossfading image slider (images of the newest posts, like the original) */
.news-slider { position: relative; height: 232px; }
.news-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
}
.news-slide.is-active { opacity: 1; }
.news-slide img {
  display: block;
  width: 100%;
  height: 232px;
  object-fit: cover;
  border-radius: 500px;
}

.news-widget-title { font-size: 25px; font-weight: 700; margin: 18px 0 10px; }
.home-widgets .news-widget-title a {
  color: var(--dark-red);
  font-family: var(--font-heading);
  text-decoration: none;
  font-weight: 700;
}
.home-widgets .news-widget-title a:hover { color: var(--red); }
.news-widget-excerpt {
  font-size: 18px;
  line-height: 1.55;
  margin: 0 0 22px;
}
.news-widget-excerpt p { margin: 0 0 10px; }
.news-widget-more { margin-top: 10px; }