/*
 * Main stylesheet wrapper.
 * The original stylesheet is preserved in style-original.css, and is now
 * loaded as its own direct <link> tag (in index.html/gallery.html, right
 * before this file) instead of via @import — @import forced the browser
 * to fetch it only after this file had fully downloaded, which on a slow
 * connection left the page unstyled for the combined time of both fetches
 * instead of just the slower one. Same cascade order either way.
 */

/* Full-size gallery viewer: preserve the complete photograph without cropping. */
.lightbox > img,
.lightbox figure img {
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 100px) !important;
  max-height: calc(100vh - 100px) !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Home-page full-photo viewer: keep the image centered and keep the caption below it. */
#home-photo-viewer .photo-viewer-main {
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr) 50px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#home-photo-viewer .photo-main-image-wrap {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#home-photo-viewer #home-photo-main-image {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(100vh - 220px) !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  flex: 0 0 auto !important;
}

#home-photo-viewer .photo-caption {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  overflow-y: auto !important;
}

/* Event images are optional: only an asset that really exists should be rendered. */
.event-image-wrap { grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 7; overflow: hidden; border-radius: 16px; background: #2b1110; }
.event-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.event-card.has-event-image { grid-template-columns: 110px minmax(0, 1fr) !important; }

@media (max-width: 760px) {
  #photo-viewer .photo-dialog { width: 98vw !important; height: 96vh !important; max-height: 96svh !important; border-radius: 16px !important; }
  #photo-viewer .photo-viewer-main { min-height: 0 !important; height: auto !important; flex: 1 1 auto !important; overflow: hidden !important; }
  #photo-viewer .photo-main-image-wrap { width: 100% !important; height: auto !important; min-height: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; }
  #photo-viewer .photo-main-image-wrap img, #photo-viewer #photo-main-image, #photo-main-image { display: block !important; width: auto !important; height: auto !important; max-width: calc(100vw - 90px) !important; max-height: calc(96svh - 270px) !important; object-fit: contain !important; object-position: center center !important; margin: 0 auto !important; flex: 0 0 auto !important; }
  #photo-viewer .photo-caption { max-height: 24svh !important; overflow-y: auto !important; }
}
@media (max-width: 420px) {
  #photo-viewer .photo-dialog { width: 96vw !important; height: 96svh !important; }
  #photo-viewer .photo-main-image-wrap img, #photo-viewer #photo-main-image, #photo-main-image { max-width: calc(100vw - 70px) !important; max-height: calc(96svh - 250px) !important; }
}

.videos-section .video-card { background: var(--cream, #fffaf2) !important; background-image: none !important; border-radius: 22px !important; box-shadow: 0 18px 50px rgba(55, 24, 12, .10) !important; overflow: hidden !important; }
.videos-section .video-card-button,.videos-section .video-card-button:hover,.videos-section .video-card-button:focus,.videos-section .video-card-button:active { background: transparent !important; background-image: none !important; border-color: transparent !important; box-shadow: none !important; transform: none !important; }
.videos-section .video-card-content { background: transparent !important; background-image: none !important; }
.videos-section .video-thumbnail { border-radius: 18px !important; overflow: hidden !important; }
.videos-section .video-meta { border-top-color: rgba(63, 84, 38, .16) !important; }
.site-header .brand { overflow: visible !important; flex: 0 1 auto !important; min-width: 0 !important; }
.site-header .brand-logo { display: block !important; width: 310px !important; height: auto !important; max-width: calc(100vw - 110px) !important; max-height: 68px !important; min-width: 0 !important; flex: 0 1 auto !important; object-fit: contain !important; object-position: center center !important; }
.site-header .brand > span { min-width: 0 !important; flex: 0 1 auto !important; }
.site-header .brand-logo,.page-loader .brand-logo { content: normal !important; }
.hero-art .mandala::before,.hero-art .mandala::after { content: none !important; display: none !important; }
@media (max-width: 768px) { .site-header .brand-logo { width: 225px !important; max-width: calc(100vw - 100px) !important; max-height: 58px !important; } }
@media (max-width: 480px) { .site-header .brand-logo { width: 200px !important; max-width: calc(100vw - 90px) !important; max-height: 52px !important; } }
.donation-quote .donation-quote-lamp:first-child { transform: scaleX(-1); }
@media (max-width: 1050px) {
  .site-header { z-index: 3000 !important; }
  .site-header .nav-wrap { position: relative; width: 100% !important; max-width: none !important; padding-left: 58px !important; padding-right: 58px !important; box-sizing: border-box; }
  .site-header .brand { min-width: 0 !important; max-width: calc(100% - 52px) !important; }
  .site-header .brand-logo { width: 225px !important; max-width: 100% !important; height: auto !important; max-height: 58px !important; }
  .site-header .menu-toggle { display: flex !important; position: relative; z-index: 3002 !important; flex: 0 0 42px !important; }
  .site-header .main-nav { display: none !important; position: absolute !important; top: calc(100% + 4px) !important; left: 8px !important; right: 8px !important; width: auto !important; max-height: calc(100svh - 90px); overflow-y: auto; z-index: 3001 !important; background: rgba(56, 12, 10, .93) !important; backdrop-filter: blur(18px) saturate(140%) !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important; border: 1px solid rgba(255, 255, 255, .1) !important; box-shadow: 0 18px 46px rgba(0, 0, 0, .38) !important; }
  .site-header .main-nav.open { display: flex !important; }
  /* Solid, blurred backdrop above makes the transparent-background text
     hack (mix-blend-mode + stroke) unnecessary — and actively wrong, since
     blend-mode recolors text against our own panel now, not the page
     behind it. Plain white/gold text (the same colors the desktop nav
     already uses) reads correctly against this backdrop instead. */
  .site-header .main-nav a:not(.nav-donate) { color: #fff !important; -webkit-text-fill-color: #fff !important; }
  .site-header .main-nav a:hover:not(.nav-donate),.site-header .main-nav a:focus-visible:not(.nav-donate) { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; }
  .site-header .main-nav .nav-donate { color: #35120c !important; -webkit-text-fill-color: #35120c !important; }
  .corner-logos { display: block !important; visibility: visible !important; opacity: 1 !important; z-index: 3004 !important; pointer-events: none !important; }
  .corner-logo { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: none !important; position: fixed !important; z-index: 3004 !important; object-fit: contain !important; }
  .corner-logo-left { left: 6px !important; top: 6px !important; width: 54px !important; height: 54px !important; }
  .corner-logo-right { right: 6px !important; top: 6px !important; width: 50px !important; height: 50px !important; }
}
@media (max-width: 500px) {
  .site-header .nav-wrap { padding-left: 52px !important; padding-right: 52px !important; }
  .site-header .brand-logo { width: 200px !important; max-width: 100% !important; max-height: 52px !important; }
  .site-header .menu-toggle { width: 40px !important; height: 40px !important; flex-basis: 40px !important; }
  .corner-logo-left { left: 4px !important; top: 5px !important; width: 46px !important; height: 46px !important; }
  .corner-logo-right { right: 4px !important; top: 5px !important; width: 44px !important; height: 44px !important; }
}
@media (max-width: 360px) {
  .site-header .nav-wrap { padding-left: 44px !important; padding-right: 44px !important; }
  .site-header .brand-logo { width: 180px !important; max-height: 48px !important; }
  .site-header .menu-toggle { width: 38px !important; height: 38px !important; flex-basis: 38px !important; }
  .site-header .main-nav { top: calc(100% + 4px) !important; }
  .corner-logo-left { left: 3px !important; top: 4px !important; width: 40px !important; height: 40px !important; }
  .corner-logo-right { right: 3px !important; top: 4px !important; width: 38px !important; height: 38px !important; }
}
.event-date { min-width: 0 !important; box-sizing: border-box !important; }
.event-date.recurring { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; padding: 9px 4px 10px !important; min-height: 78px !important; height: auto !important; overflow: hidden !important; white-space: nowrap !important; }
.event-date.recurring strong { order: 1 !important; display: block !important; width: 100% !important; min-width: 0 !important; color: #fff !important; font-size: .58rem !important; font-weight: 700 !important; line-height: 1.6 !important; height: auto !important; margin: 0 !important; padding: 2px 0 !important; text-align: center !important; white-space: nowrap !important; word-break: keep-all !important; overflow: visible !important; }
.event-date.recurring span { order: 2 !important; display: block !important; width: 100% !important; min-width: 0 !important; color: var(--gold) !important; font-size: 1rem !important; font-weight: 800 !important; line-height: 1.35 !important; height: auto !important; margin: 0 !important; padding: 2px 0 !important; text-align: center !important; white-space: nowrap !important; word-break: keep-all !important; overflow: visible !important; text-overflow: clip !important; }
.event-status { max-width: 100% !important; box-sizing: border-box !important; white-space: normal !important; }
@media (max-width: 600px) {
  .event-card { grid-template-columns: 88px minmax(0, 1fr) !important; gap: 14px !important; }
  .event-date.recurring { min-height: 76px !important; padding: 8px 3px 10px !important; }
  .event-date.recurring strong { font-size: .51rem !important; line-height: 1.65 !important; padding-top: 2px !important; padding-bottom: 2px !important; }
  .event-date.recurring span { font-size: .84rem !important; line-height: 1.4 !important; padding-top: 2px !important; padding-bottom: 2px !important; }
}

/* =========================================================
   ALBUM SUMMARY POPUP — IMAGE ABOVE DESCRIPTION
   This is the first popup (#album-viewer), not the full photo viewer.
   Force a single vertical column so the description can never sit beside
   the image on mobile.
   ========================================================= */
#album-viewer.open .album-summary {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 0 !important;
}
#album-viewer.open .album-summary-image-wrap {
  order: 1 !important;
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
#album-viewer.open #album-main-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 52svh !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
}
#album-viewer.open .album-summary-details {
  order: 2 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
@media (max-width: 760px) {
  #album-viewer.open .album-summary,
  #album-viewer.open .album-summary-details { display: flex !important; flex-direction: column !important; }
  #album-viewer.open .album-summary-image-wrap { width: 100% !important; max-width: 100% !important; }
  #album-viewer.open #album-main-image { width: 100% !important; height: auto !important; max-width: 100% !important; max-height: 48svh !important; }
}

/* Keep the expanded header untouched. Add top clearance to the hero only so
   the first eyebrow remains fully visible below the large fixed header/logo.
   The header brand is now a stacked logo-above-tagline lockup (see
   style.css), taller than the old single-row brand, so this clearance is
   sized to the header's tallest rendered height in each tier (measured
   with a real render), not just the logo's own height. */
.hero {
  padding-top: 125px !important;
}
@media (max-width: 1050px) {
  .hero {
    padding-top: 105px !important;
  }
}
@media (max-width: 600px) {
  .hero {
    padding-top: 90px !important;
  }
}