/* ==========================================================================
   Events page: hand-authored, not Nicepage output. Never re-export it.
   Layers on mbc-site.css, which supplies the tokens, type, bands, buttons,
   page hero, header and footer. This file holds only what is unique to
   Events: the weekly schedule, flyer cards, jump links, lightbox and the
   back-to-top button.

   Every class mbc-cms.js writes (renderDay / renderCard) is styled here:
   mbc-day, mbc-day--sunday, mbc-day__name, mbc-day__list, mbc-day__none,
   mbc-day__cancelled, mbc-time, mbc-tag, mbc-card, mbc-card__media,
   mbc-zoom, mbc-zoom__hint, mbc-card__body, mbc-card__kicker(--alert),
   mbc-card__title, mbc-details, mbc-names, mbc-card__note, mbc-actions,
   and mbc-band--empty.

   Body text stays at 1.25rem or larger and labels at 1.125rem or larger:
   the congregation includes members with low vision.
   ========================================================================== */

:root {
  --mbc-ev-hairline: rgba(92, 22, 189, 0.16);
  --mbc-ev-alert: #b3261e;
}

/* --------------------------------------------------------------- hero --- */

/* The Women's Day group photo. On phones it sits above the text at its own
   16:9 shape, uncropped, so every head stays in frame. From tablets up it
   fills the band behind the text, with the overlay only along the bottom
   (where the text sits) so the faces along the top stay clear. */
@media (max-width: 47.99em) {
  .mbc-evhero {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .mbc-evhero .mbc-hero__media {
    position: relative;
    z-index: auto;
    aspect-ratio: 1800 / 1012;
  }

  .mbc-evhero::after {
    display: none;
  }

  .mbc-evhero .mbc-hero__content {
    padding: 1.75rem var(--mbc-gutter) 2.5rem;
  }
}

@media (min-width: 48em) {
  .mbc-evhero {
    min-height: clamp(20rem, 55vw, 34rem);
  }

  .mbc-evhero::after {
    background: linear-gradient(to top, rgba(26, 8, 51, 0.95) 0%, rgba(26, 8, 51, 0.82) 30%, rgba(26, 8, 51, 0.2) 58%, rgba(26, 8, 51, 0) 72%);
  }
}

/* ---------------------------------------------------------- this week --- */

/* Phones and tablets: heading, flyer, jump links, one after another.
   Desktop: the flyer on the left spanning both rows, the heading and jump
   links stacked on the right. The empty third row absorbs leftover height
   so the jump links hug the heading. */
.mbc-week__top {
  display: grid;
  gap: 1.75rem;
  margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
}

@media (min-width: 64em) {
  .mbc-week__top {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "flyer intro"
      "flyer jump"
      "flyer .";
    column-gap: 3rem;
    align-items: start;
  }

  .mbc-week__intro { grid-area: intro; }
  .mbc-week__flyer { grid-area: flyer; }
  .mbc-jump { grid-area: jump; }
}

.mbc-week__title sup {
  font-size: 0.5em;
  line-height: 0;
}

.mbc-week__theme {
  margin: 0 0 0.5rem;
  font-size: clamp(1.375rem, 2.6vw, 1.625rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--mbc-gold-ink);
}

.mbc-week__verse {
  margin: 0;
  letter-spacing: 0.04em;
  color: var(--mbc-ink-soft);
}

.mbc-week__verse abbr,
.mbc-verse abbr {
  text-decoration: none;
}

/* Fallback notice from mbc-cms.js. No display rule here, so [hidden]
   keeps working. */
.mbc-status {
  margin: 1.25rem 0 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--mbc-gold);
  border-radius: 0 10px 10px 0;
  background-color: var(--mbc-lavender-50);
}

.mbc-week__flyer {
  margin: 0;
}

/* ------------------------------------------------------- jump links --- */

.mbc-jump__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mbc-jump__list a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.5rem 1.125rem;
  border: 2px solid var(--mbc-purple);
  border-radius: 999px;
  color: var(--mbc-purple);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.mbc-jump__list a:hover {
  background-color: var(--mbc-purple);
  color: var(--mbc-white);
}

/* Phones: every option visible at once, full width, no sideways scroll. */
@media (max-width: 39.99em) {
  .mbc-jump__list {
    flex-direction: column;
  }
}

/* ---------------------------------------------------- seven-day grid --- */

.mbc-days {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40em) {
  .mbc-days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .mbc-days {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mbc-day {
  padding: 1.5rem 1.5rem 1.75rem;
  border-top: 4px solid var(--mbc-gold);
  border-radius: var(--mbc-radius);
  background-color: var(--mbc-white);
  box-shadow: 0 10px 28px rgba(26, 8, 51, 0.08);
}

/* Sunday spans the row and echoes the flyer: plum panel, gold type. */
.mbc-day--sunday {
  grid-column: 1 / -1;
  background-color: var(--mbc-plum-900);
  color: var(--mbc-white);
}

.mbc-day__name {
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 3vw, 1.75rem);
}

.mbc-day--sunday .mbc-day__name {
  color: var(--mbc-gold);
}

.mbc-day__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mbc-day__list > li {
  position: relative;
  margin-bottom: 0.875rem;
  padding-left: 1.25rem;
  line-height: 1.5;
}

.mbc-day__list > li:last-child {
  margin-bottom: 0;
}

.mbc-day__list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--mbc-gold);
}

.mbc-time {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mbc-gold-ink);
}

.mbc-day--sunday .mbc-time {
  color: var(--mbc-gold-bright);
}

.mbc-tag {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.0625rem 0.625rem;
  border-radius: 999px;
  background-color: var(--mbc-lavender-50);
  color: var(--mbc-purple);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}

.mbc-day--sunday .mbc-tag {
  background-color: var(--mbc-gold);
  color: var(--mbc-plum-950);
}

.mbc-day__none {
  margin: 0;
  font-style: italic;
  color: var(--mbc-ink-soft);
}

.mbc-day--sunday .mbc-day__none {
  color: rgba(255, 255, 255, 0.85);
}

.mbc-day__cancelled {
  font-style: italic;
  color: var(--mbc-ink-soft);
}

.mbc-day__list > .mbc-day__cancelled::before {
  background-color: rgba(74, 61, 89, 0.4);
}

/* Phones: the text schedule folds behind a gold bar (the flyer above is
   the schedule there). Wider screens hide the bar and <details> stays open. */
.mbc-days-toggle__summary {
  display: none;
}

@media (max-width: 47.99em) {
  .mbc-days-toggle__summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 52px;
    padding: 0.75rem 1.5rem;
    border-radius: var(--mbc-radius-btn);
    background-color: var(--mbc-gold);
    color: var(--mbc-plum-950);
    font-size: 1.25rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
  }

  .mbc-days-toggle__summary::-webkit-details-marker {
    display: none;
  }

  .mbc-days-toggle__summary::after {
    content: "\25be";
  }

  .mbc-days-toggle[open] .mbc-days-toggle__summary::after {
    content: "\25b4";
  }

  .mbc-days-toggle[open] .mbc-days {
    margin-top: 1.25rem;
  }
}

/* ------------------------------------------------------- card bands --- */

/* mbc-cms.js hides a band with no cards this week (and its jump link). */
.mbc-band--empty,
.mbc-band[hidden] {
  display: none;
}

/* One column until desktop, two there. A card never grows past a two-up
   column, so a lone card or a one-column tablet layout stays centred at a
   readable width instead of stretching a flyer across the band. */
.mbc-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}

@media (min-width: 64em) {
  .mbc-grid {
    grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
  }
}

.mbc-grid > .mbc-card:not(.mbc-card--wide) {
  width: 100%;
  max-width: 36rem;
  justify-self: center;
}

.mbc-grid--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 58rem;
  margin-inline: auto;
}

/* ------------------------------------------------------- flyer cards --- */

.mbc-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 4px solid var(--mbc-gold);
  border-radius: var(--mbc-radius);
  background-color: var(--mbc-white);
  color: var(--mbc-ink);
  box-shadow: 0 10px 28px rgba(26, 8, 51, 0.1);
  --mbc-focus: var(--mbc-purple);
}

/* White cards also sit on the plum band: keep their headings, links and
   outline buttons in the light-surface colours. These tie or beat the
   deep-band rules in mbc-site.css and come later, so they win. */
.mbc-card .mbc-card__title {
  margin: 0 0 1.25rem;
  color: var(--mbc-plum-900);
}

.mbc-band--plum .mbc-card a:not(.mbc-btn),
.mbc-band--deep .mbc-card a:not(.mbc-btn) {
  color: var(--mbc-purple);
}

.mbc-card .mbc-btn--secondary {
  color: var(--mbc-purple);
}

.mbc-card .mbc-btn--secondary:hover {
  color: var(--mbc-white);
}

@media (min-width: 64em) {
  .mbc-card--wide {
    flex-direction: row;
    align-items: stretch;
  }

  .mbc-card--wide .mbc-card__media {
    flex: 0 0 42%;
  }

  .mbc-card--wide .mbc-card__body {
    flex: 1 1 auto;
  }
}

/* Flyers are contained, not cropped, so no printed text is cut off. The
   fixed box keeps cards aligned despite mixed flyer shapes. */
.mbc-card__media {
  aspect-ratio: 4 / 5;
  border-radius: 0;
}

@media (max-width: 47.99em) {
  .mbc-card__media {
    aspect-ratio: 3 / 4;
  }
}

/* The card clips its corners, so the focus ring goes inside the flyer. */
.mbc-card__media:focus-visible {
  outline-offset: -6px;
}

.mbc-card__body {
  padding: clamp(1.5rem, 4vw, 2rem);
}

.mbc-card__kicker {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mbc-purple);
}

.mbc-card__kicker--alert {
  color: var(--mbc-ev-alert);
}

.mbc-card__lede {
  margin: 0 0 1.25rem;
  color: var(--mbc-ink-soft);
}

.mbc-card__note {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--mbc-ev-hairline);
  color: var(--mbc-ink-soft);
  line-height: 1.55;
}

/* Detail lists: label above value. */
.mbc-details {
  margin: 0 0 1.25rem;
}

.mbc-details dt {
  margin: 0 0 0.125rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mbc-purple);
}

.mbc-details dd {
  margin: 0 0 1rem;
  line-height: 1.5;
}

.mbc-details dd:last-child {
  margin-bottom: 0;
}

.mbc-tel,
.mbc-link {
  color: var(--mbc-purple);
  font-weight: 700;
}

/* The numbers already use a no-break space and hyphen, so they stay whole
   unless the card is narrower than the number (largest text on a small
   phone); then they wrap rather than run off the card. */
.mbc-tel {
  font-size: 1.375rem;
  overflow-wrap: anywhere;
  /* A dial-in number is tapped on its own: give it a full 44px target. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.mbc-code {
  display: inline-block;
  padding: 0.0625rem 0.625rem;
  border-radius: 6px;
  background-color: var(--mbc-lavender-50);
  color: var(--mbc-plum-900);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Name lists. */
.mbc-names {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.5;
}

.mbc-names > li {
  position: relative;
  padding: 0.375rem 0 0.375rem 1.25rem;
  border-bottom: 1px solid var(--mbc-ev-hairline);
  break-inside: avoid;
}

.mbc-names > li:last-child {
  border-bottom: 0;
}

.mbc-names > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--mbc-gold);
}

@media (min-width: 48em) {
  .mbc-names--two {
    columns: 2;
    column-gap: 2rem;
  }
}

/* Verses. */
.mbc-verse {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--mbc-gold);
  border-radius: 0 10px 10px 0;
  background-color: var(--mbc-lavender-50);
}

.mbc-verse p {
  margin: 0 0 0.625rem;
  font-style: italic;
}

.mbc-verse cite {
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mbc-purple);
}

.mbc-subhead {
  margin: 0 0 0.75rem;
  font-size: 1.375rem;
}

/* Giving amounts and ways to pay. */
.mbc-giving,
.mbc-ways {
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
  line-height: 1.5;
}

.mbc-giving > li,
.mbc-ways > li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--mbc-ev-hairline);
}

.mbc-giving > li:last-child,
.mbc-ways > li:last-child {
  border-bottom: 0;
}

.mbc-amount {
  display: inline-block;
  min-width: 5.5rem;
  font-family: var(--mbc-font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--mbc-purple);
}

.mbc-way__label {
  display: inline-block;
  min-width: 7.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mbc-purple);
}

@media (max-width: 29.99em) {
  .mbc-way__label,
  .mbc-amount {
    display: block;
    min-width: 0;
  }
}

/* Action buttons: the clickable version of a flyer's QR code. */
.mbc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin: 1.5rem 0 0;
}

@media (max-width: 29.99em) {
  .mbc-actions > .mbc-btn {
    flex: 1 1 100%;
  }
}

/* ------------------------------------------------------------ closing --- */

.mbc-closing .mbc-btns {
  justify-content: center;
}

.mbc-closing__address {
  line-height: 1.8;
}

.mbc-closing__pastor {
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------- zoom + lightbox --- */

/* Any .mbc-zoom with data-full opens the lightbox (inline script). */
.mbc-zoom {
  display: block;
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background-color: var(--mbc-lavender-50);
  cursor: zoom-in;
}

.mbc-zoom img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.35s ease;
}

.mbc-zoom:hover img,
.mbc-zoom:focus-visible img {
  transform: scale(1.03);
}

.mbc-zoom__hint {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background-color: rgba(26, 8, 51, 0.82);
  color: var(--mbc-white);
  font-size: 1.125rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.mbc-zoom:hover .mbc-zoom__hint,
.mbc-zoom:focus-visible .mbc-zoom__hint {
  opacity: 1;
}

/* A hover affordance; on touch screens it only adds noise. */
@media (hover: none) {
  .mbc-zoom__hint {
    display: none;
  }
}

/* The week flyer shows at its own shape, capped on desktop so it fits the
   window; on phones it runs full width, because there the flyer is the
   schedule and its printed text needs every pixel. */
.mbc-week__flyer .mbc-zoom {
  background-color: transparent;
}

.mbc-week__flyer img {
  width: auto;
  height: auto;
  max-width: 100%;
  margin-inline: auto;
}

@media (max-width: 47.99em) {
  .mbc-week__flyer img {
    width: 100%;
  }
}

@media (min-width: 64em) {
  .mbc-week__flyer img {
    max-height: min(calc(100vh - 10rem), 780px);
    max-height: min(calc(100dvh - 10rem), 780px);
  }
}

.mbc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  background-color: rgba(26, 8, 51, 0.95);
  cursor: zoom-out;
  --mbc-focus: var(--mbc-gold-bright);
}

.mbc-lightbox[hidden] {
  display: none;
}

.mbc-lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.mbc-lightbox__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  cursor: default;
}

.mbc-lightbox__caption {
  max-width: 40rem;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
}

.mbc-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  width: 54px;
  height: 54px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.14);
  color: var(--mbc-white);
  font-size: 2.25rem;
  line-height: 1;
  cursor: pointer;
}

.mbc-lightbox__close:hover {
  border-color: var(--mbc-gold-bright);
  background-color: rgba(255, 255, 255, 0.26);
}

@media (max-width: 29.99em) {
  .mbc-lightbox {
    padding: 1.25rem 0.75rem;
  }

  .mbc-lightbox__close {
    top: 0.625rem;
    right: 0.75rem;
  }
}

body.mbc-noscroll {
  overflow: hidden;
}

/* ------------------------------------------------------ back to top --- */

.mbc-totop {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 800;
  width: 60px;
  height: 60px;
  border: 3px solid var(--mbc-gold);
  border-radius: 50%;
  background-color: var(--mbc-plum-900);
  color: var(--mbc-white);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(26, 8, 51, 0.34);
  --mbc-focus: var(--mbc-purple);

  /* Hidden until scrolled, and never a tab stop while invisible. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.mbc-totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mbc-totop:hover {
  background-color: var(--mbc-plum-800);
}

.mbc-totop__arrow {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 47.99em) {
  .mbc-totop {
    right: 1rem;
    bottom: 1rem;
    width: 54px;
    height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mbc-totop {
    transform: none;
  }

  .mbc-zoom:hover img,
  .mbc-zoom:focus-visible img {
    transform: none;
  }
}