/* Church family coverflow carousel */
.church-family {
  --family-ink: #0e2a47;
  --family-blue: #135b91;
  --family-gold: #f3b644;
  padding: clamp(3rem, 6vw, 5.5rem) 1rem clamp(3.5rem, 7vw, 6.5rem);
  overflow: hidden;
  color: var(--family-ink);
  background: radial-gradient(ellipse at 50% 42%, #fff 0%, #f4f8fc 57%, #eaf1f8 100%);
}
.church-family__container { width: min(1120px, 100%); margin: 0 auto; }
.church-family__heading { max-width: 680px; margin: 0 auto 2rem; text-align: center; }
.church-family__eyebrow { margin: 0 0 .7rem; color: var(--family-blue); font-size: .76rem; font-weight: 800; letter-spacing: .18em; }
.church-family__heading h2 { margin: 0; color: var(--family-ink); font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.1; }
.church-family__heading > p:last-child { max-width: 590px; margin: 1rem auto 0; color: #526577; font-size: 1.05rem; line-height: 1.65; }
.member-carousel { position: relative; max-width: 1100px; margin: 0 auto; perspective: 1400px; }
.member-carousel__stage { position: relative; height: 230px; transform-style: preserve-3d; }
.church-family .member-carousel { container-type: inline-size; }
.church-family .member-carousel__stage { height: min(32vw, 290px); height: min(32cqw, 290px); }
.church-family .member-carousel__slide { width: min(42%, 410px); }
.member-carousel__slide {
  position: absolute; inset: 0; width: min(62%, 560px); height: 100%; margin: auto; overflow: hidden;
  border: 1px solid rgba(255,255,255,.72); border-radius: 24px; background: #163a57;
  box-shadow: 0 28px 70px rgba(14,42,71,.24), 0 4px 12px rgba(14,42,71,.12);
  opacity: 0; transform: translateX(0) scale(.68); transition: transform .72s cubic-bezier(.2,.75,.2,1), opacity .55s ease, filter .72s ease;
  pointer-events: none; filter: saturate(.72); will-change: transform, opacity;
}
.member-carousel__slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }
.member-carousel__slide img.member-carousel__portrait { transform: scale(1.2); }
.member-carousel__slide img.member-carousel__portrait--director { object-position: left center; }
.member-carousel__slide:first-child img { object-position: center 48%; }
.member-carousel__slide::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(5,22,38,.02) 35%, rgba(5,22,38,.9) 100%); }
.member-carousel__slide.is-active { z-index: 4; opacity: 1; transform: translateX(0) scale(1); filter: none; pointer-events: auto; }
.member-carousel__slide.is-prev { z-index: 2; opacity: .58; transform: translateX(-70%) rotateY(17deg) scale(.78); }
.member-carousel__slide.is-next { z-index: 2; opacity: .58; transform: translateX(70%) rotateY(-17deg) scale(.78); }
.church-family:not(.event-gallery) .member-carousel__slide.is-prev-2 { z-index: 1; opacity: .38; transform: translateX(-112%) rotateY(22deg) scale(.68); }
.church-family:not(.event-gallery) .member-carousel__slide.is-next-2 { z-index: 1; opacity: .38; transform: translateX(112%) rotateY(-22deg) scale(.68); }
.member-carousel__slide.is-hidden { z-index: 0; opacity: 0; transform: translateX(0) scale(.62); }
.member-carousel__caption { position: absolute; z-index: 1; right: clamp(1rem, 2.5vw, 1.75rem); bottom: clamp(1rem, 2.5vw, 1.5rem); left: clamp(1rem, 2.5vw, 1.75rem); color: #fff; }
.member-carousel__caption span { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .4rem; color: #ffe1a1; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.member-carousel__caption span::before { width: 20px; height: 2px; content: ""; background: var(--family-gold); }
.member-carousel__caption h3 { margin: 0; color: #fff; font-size: clamp(1.1rem, 2vw, 1.6rem); line-height: 1.12; text-shadow: 0 2px 14px rgba(0,0,0,.25); }
.member-carousel__caption p { max-width: 470px; margin: .45rem 0 0; color: rgba(255,255,255,.88); font-size: clamp(.78rem, 1.15vw, .92rem); line-height: 1.45; }
.member-carousel__arrow { position: absolute; z-index: 6; top: 42%; display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgba(14,42,71,.12); border-radius: 50%; color: var(--family-ink); background: rgba(255,255,255,.95); box-shadow: 0 8px 26px rgba(14,42,71,.16); cursor: pointer; transition: transform .2s ease, color .2s ease, background .2s ease; }
.member-carousel__arrow span { font-size: 1.5rem; line-height: 1; }
.member-carousel__arrow:hover { transform: scale(1.08); color: white; background: var(--family-blue); }
.member-carousel__arrow:focus-visible, .church-family__link:focus-visible { outline: 3px solid var(--family-gold); outline-offset: 4px; }
.member-carousel__arrow--prev { left: 5%; }
.member-carousel__arrow--next { right: 5%; }
.member-carousel__progress { height: 3px; overflow: hidden; border-radius: 3px; background: #dbe5ed; }
.member-carousel__progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--family-blue), #53a4c8, var(--family-gold)); }
.member-carousel.is-playing .member-carousel__progress span { animation: family-progress 6.5s linear infinite; }
@keyframes family-progress { to { transform: scaleX(1); } }
.member-carousel__hint { margin: .7rem 0 0; color: #708294; font-size: .75rem; text-align: center; }
.church-family__link { display: flex; width: fit-content; align-items: center; gap: .65rem; margin: 1.7rem auto 0; color: var(--family-blue); font-weight: 800; text-decoration: none; }
.church-family__link span { transition: transform .2s ease; }
.church-family__link:hover span { transform: translateX(4px); }
@media (max-width: 700px) {
  .church-family { padding-right: .5rem; padding-left: .5rem; }
  .church-family__heading { margin-bottom: 1.4rem; padding: 0 .5rem; }
  .member-carousel__stage { height: clamp(190px, 60vw, 230px); }
  .church-family .member-carousel__stage { height: min(44vw, 290px); height: min(44cqw, 290px); }
  .church-family .member-carousel__slide { width: min(62%, 410px); }
  .member-carousel__slide { width: 82%; border-radius: 18px; }
  .member-carousel__caption h3 { font-size: clamp(1rem, 4.8vw, 1.4rem); }
  .member-carousel__caption p { font-size: clamp(.76rem, 3.5vw, .88rem); }
  .member-carousel__slide.is-prev { transform: translateX(-51%) rotateY(11deg) scale(.82); opacity: .48; }
  .member-carousel__slide.is-next { transform: translateX(51%) rotateY(-11deg) scale(.82); opacity: .48; }
  .church-family:not(.event-gallery) .member-carousel__slide.is-prev { transform: translateX(-48%) rotateY(9deg) scale(.7); opacity: .5; }
  .church-family:not(.event-gallery) .member-carousel__slide.is-next { transform: translateX(48%) rotateY(-9deg) scale(.7); opacity: .5; }
  .church-family:not(.event-gallery) .member-carousel__slide.is-prev-2 { transform: translateX(-72%) rotateY(12deg) scale(.52); opacity: .34; }
  .church-family:not(.event-gallery) .member-carousel__slide.is-next-2 { transform: translateX(72%) rotateY(-12deg) scale(.52); opacity: .34; }
  .member-carousel__arrow { top: auto; bottom: 76px; width: 42px; height: 42px; }
  .member-carousel__arrow--prev { left: 2%; }
  .member-carousel__arrow--next { right: 2%; }
}
@media (prefers-reduced-motion: reduce) {
  .member-carousel__slide, .member-carousel__arrow, .church-family__link span { transition: none; }
  .member-carousel.is-playing .member-carousel__progress span { animation: none; }
}

/* Events page gallery: larger circular slides with a spin when each photo becomes active. */
.event-gallery { --event-photo-size: min(338px, calc(23.81vw + 66.57px)); }
.event-gallery .member-carousel { max-width: 1100px; }
.event-gallery .member-carousel__stage { height: var(--event-photo-size); }
.event-gallery .member-carousel__slide {
  width: var(--event-photo-size);
  height: var(--event-photo-size);
  border-radius: 50%;
}
.event-gallery .member-carousel__slide img { border-radius: 50%; }
.event-gallery .member-carousel__slide.is-prev { transform: translateX(-82%) rotateY(12deg) scale(.82); opacity: .52; }
.event-gallery .member-carousel__slide.is-next { transform: translateX(82%) rotateY(-12deg) scale(.82); opacity: .52; }
.event-gallery .member-carousel__arrow--prev { left: calc(50% - 237px); }
.event-gallery .member-carousel__arrow--next { right: calc(50% - 237px); }
.event-gallery .member-carousel__caption {
  right: 10%;
  bottom: 13%;
  left: 10%;
  text-align: center;
}
.event-gallery .member-carousel__caption h3 { font-size: clamp(1rem, 2.1vw, 1.45rem); }
.event-gallery .member-carousel__caption p { margin-right: auto; margin-left: auto; }
.event-gallery .member-carousel__slide.is-active img {
  animation: event-carousel-photo-spin .9s cubic-bezier(.2,.75,.2,1) both;
}
.event-gallery .member-carousel__slide.is-active img.member-carousel__portrait {
  animation-name: event-carousel-portrait-spin;
}
@keyframes event-carousel-photo-spin {
  from { transform: rotate(0deg) scale(1.08); }
  to { transform: rotate(360deg) scale(1.08); }
}
@keyframes event-carousel-portrait-spin {
  from { transform: rotate(0deg) scale(1.2); }
  to { transform: rotate(360deg) scale(1.2); }
}
@media (min-width: 601px) and (max-width: 979px) {
  .event-gallery { --event-photo-size: calc(50vw + 64px); }
  .event-gallery .member-carousel__arrow--prev { left: calc(50% - 25vw - 100px); }
  .event-gallery .member-carousel__arrow--next { right: calc(50% - 25vw - 100px); }
}
@media (max-width: 600px) {
  .event-gallery { --event-photo-size: min(calc(100vw + 54px), calc(100vw - 24px)); }
  .event-gallery .member-carousel__caption h3 { font-size: clamp(.95rem, 4.1vw, 1.25rem); }
  .event-gallery .member-carousel__slide.is-prev { transform: translateX(-82%) rotateY(9deg) scale(.82); }
  .event-gallery .member-carousel__slide.is-next { transform: translateX(82%) rotateY(-9deg) scale(.82); }
}
@media (max-width: 700px) {
  .event-gallery .member-carousel__arrow { top: 50%; bottom: auto; transform: translateY(-50%); }
  .event-gallery .member-carousel__arrow:hover { transform: translateY(-50%) scale(1.08); }
  .event-gallery .member-carousel__arrow--prev { left: 2%; }
  .event-gallery .member-carousel__arrow--next { right: 2%; }
}
@media (prefers-reduced-motion: reduce) {
  .event-gallery .member-carousel__slide.is-active img { animation: none; }
}