/* v61: this file intentionally loads after every historical style override. */
.result-grid > article {
  overflow: hidden !important;
}

/* v76：導覽列英文宮名靠近中文宮名，保留原導覽列尺寸 */
@media (min-width: 701px) {
  .site-header .brand-copy small {
    margin-top: 3px !important;
  }
}

.result-grid > article > .donation-preview,
.result-grid > article:nth-child(2) > .donation-preview {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-width: 100% !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  background: transparent !important;
  border: 0 !important;
  transform: none !important;
}

.result-grid > article:nth-child(1) > .donation-preview {
  object-position: center 74% !important;
}

.result-grid > article:nth-child(2) > .donation-preview {
  object-position: center 50% !important;
}

.result-grid > article:nth-child(3) > .donation-preview {
  object-position: center 32% !important;
}

.result-grid > article:nth-child(4) > .donation-preview {
  object-position: center 28% !important;
}

@media (max-width: 1180px) {
  .hero-temple-base,
  .hero-deity-photo {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .hero-deity-photo {
    background-size: cover !important;
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 72%,
      rgba(0, 0, 0, 0.66) 86%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 72%,
      rgba(0, 0, 0, 0.66) 86%,
      transparent 100%
    ) !important;
  }
}

/* Pages CMS image variables preserve the original layered hero artwork. */
.hero-deity-photo {
  background-image: var(--cms-hero-deity-image, url("/temple-deities-no-sign.png")) !important;
}

@media (min-width: 1181px) {
  .hero-temple-base {
    background-image:
      linear-gradient(90deg, #360906f0 0%, #560e0ab8 24%, #eee1c41a 48%, #0618242e 75%, #eee1c433),
      var(--cms-hero-temple-image, url("/hero-production.png")) !important;
  }
}

@media (min-width: 701px) and (max-width: 1180px) {
  .hero-temple-base {
    background-image:
      linear-gradient(90deg, rgba(54, 8, 6, .46), rgba(54, 8, 6, .05) 28% 72%, rgba(54, 8, 6, .46)),
      var(--cms-hero-temple-image, url("/hero-production.png")) !important;
  }
}

@media (max-width: 700px) {
  .hero-temple-base {
    background-image:
      linear-gradient(90deg, rgba(54, 8, 6, .4), rgba(54, 8, 6, .02) 24% 76%, rgba(54, 8, 6, .4)),
      var(--cms-hero-temple-image, url("/hero-production.png")) !important;
  }
}

/* Restore the original swaying 歲、安 lantern animation on tablet and phone. */
@media (max-width: 1180px) {
  .hero-lanterns {
    display: block !important;
    position: absolute !important;
    z-index: 9 !important;
    inset: 0 !important;
    pointer-events: none !important;
  }

  .hero-lanterns i {
    display: grid !important;
    animation: lanternSway 4.2s ease-in-out infinite !important;
  }

  .hero-lanterns i:last-child {
    animation-delay: -2.1s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-lanterns i {
    animation: none !important;
  }
}

/* Keep the 聖、安 lantern cords attached directly below every header height. */
.admin-entry {
  display: none !important;
}

.hero-lanterns i {
  top: calc(var(--fixed-header) + 28px) !important;
}

/* iPad Safari: give the framed previews a definite full-bleed box. */
@media (min-width: 701px) and (max-width: 1180px) {
  .donation-preview-frame {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 320px !important;
    min-height: 320px !important;
    overflow: hidden !important;
  }

  .donation-preview-frame .donation-preview {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
  }
}

/* Android: keep the 壹貳參 cards inside their paper-colour section. */
@media (max-width: 1180px) {
  .culture-portals {
    box-sizing: border-box !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
  }

  .culture-portals > a {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

/* Android touch target for the video timeline. */
.video-timeline input[type="range"] {
  position: relative !important;
  z-index: 20 !important;
  width: 100% !important;
  height: 44px !important;
  pointer-events: auto !important;
  touch-action: none !important;
}

/* Soften the home image into the wine-red artwork without changing its crop. */
@media (min-width: 1181px) {
  .hero::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 2 !important;
    pointer-events: none !important;
    inset: 108px 0 0 !important;
    background:
      linear-gradient(
        90deg,
        rgba(48, 7, 5, 0.96) 0%,
        rgba(53, 8, 6, 0.88) 18%,
        rgba(58, 9, 7, 0.66) 30%,
        rgba(55, 8, 6, 0.34) 42%,
        rgba(45, 7, 5, 0.12) 53%,
        transparent 64%
      ),
      linear-gradient(
        180deg,
        transparent 57%,
        rgba(42, 6, 4, 0.08) 70%,
        rgba(42, 6, 4, 0.4) 100%
      ) !important;
  }

  .hero-deity-photo {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.12) 7%,
      rgba(0, 0, 0, 0.48) 19%,
      #000 35%,
      #000 92%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.12) 7%,
      rgba(0, 0, 0, 0.48) 19%,
      #000 35%,
      #000 92%,
      transparent 100%
    ) !important;
  }
}

@media (max-width: 1180px) {
  .hero::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 2 !important;
    pointer-events: none !important;
    inset: var(--fixed-header) 0 auto !important;
    height: clamp(414px, 54vw, 520px) !important;
    background:
      linear-gradient(
        180deg,
        transparent 0%,
        transparent 52%,
        rgba(55, 8, 6, 0.08) 62%,
        rgba(55, 8, 6, 0.28) 73%,
        rgba(55, 8, 6, 0.62) 84%,
        rgba(55, 8, 6, 0.88) 94%,
        #370806 100%
      ) !important;
  }
}

/* v67: one predictable almanac grid; no historical grid-area overrides. */
.ritual-console,
.ritual-tabs,
.ritual-panel,
.almanac-panel,
.almanac-panel > * {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.ritual-console {
  width: 100% !important;
  height: auto !important;
  overflow: hidden !important;
}

.ritual-tabs,
.ritual-panel {
  inset: auto !important;
  margin-right: auto !important;
  margin-left: auto !important;
  transform: none !important;
}

.ritual-tabs {
  width: min(720px, calc(100% - 32px)) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.ritual-tabs button {
  min-width: 0 !important;
}

.ritual-panel {
  width: min(1240px, calc(100% - 32px)) !important;
  height: auto !important;
}

.almanac-panel {
  display: grid !important;
  grid-template-areas: none !important;
  align-items: center !important;
}

.almanac-panel > * {
  grid-area: auto !important;
  margin: 0 !important;
  transform: none !important;
}

.almanac-date p,
.almanac-advice p,
.almanac-note {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

@media (min-width: 901px) {
  .almanac-panel {
    grid-template-columns: 110px minmax(220px, 0.9fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(18px, 2.5vw, 38px) !important;
    padding: 42px 34px 36px !important;
  }

  .almanac-seal,
  .almanac-date,
  .almanac-advice {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .almanac-note {
    grid-column: 2 / -1 !important;
    width: 100% !important;
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  .ritual-panel {
    width: calc(100% - 32px) !important;
  }

  .almanac-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    padding: 30px 24px !important;
  }

  .almanac-seal {
    display: none !important;
  }

  .almanac-date,
  .almanac-note {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .almanac-advice {
    grid-column: auto !important;
  }
}

@media (max-width: 700px) {
  .ritual-tabs,
  .ritual-panel {
    width: calc(100% - 20px) !important;
  }

  .almanac-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 15px !important;
    padding: 26px 14px 24px !important;
  }

  .almanac-seal {
    display: none !important;
  }

  .almanac-date,
  .almanac-advice,
  .almanac-note {
    grid-column: 1 !important;
    width: 100% !important;
  }
}

/* Keep the animated 壹貳參 cards fully visible, but inside a wider paper field. */
@media (max-width: 1180px) {
  .culture-portals {
    box-sizing: border-box !important;
    contain: none !important;
    overflow: visible !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 72px !important;
    padding-right: max(24px, env(safe-area-inset-right)) !important;
    padding-bottom: 84px !important;
    padding-left: max(24px, env(safe-area-inset-left)) !important;
  }

  .culture-portals > a {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

/* Android Chrome: the range owns horizontal dragging, not page scrolling. */
.video-timeline {
  position: relative !important;
  z-index: 30 !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.video-timeline input[type="range"] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 48px !important;
  pointer-events: auto !important;
  touch-action: pan-y !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
}

/* Remove the distracting inner gold outlines; keep the outer card borders. */
.location-card::before,
.social-frame::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

/* v69: restore the original centered viewer and keep every control reliable. */
.video-timeline input[type="range"] {
  position: relative !important;
  z-index: 100 !important;
  cursor: pointer !important;
  touch-action: none !important;
}

.video-card.video-source-loading .video-timeline input[type="range"] {
  opacity: 0.72 !important;
}

body.preview-active {
  overflow: hidden !important;
}

.video-card.expanded,
.video-card:last-child.expanded {
  position: fixed !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 250 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(1000px, calc(100vw - 40px)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 40px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 90svh !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 16px !important;
  transform: translate(-50%, -50%) !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  background: #050403 !important;
}

.video-card.expanded .video-poster {
  order: 1 !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}

.video-card.expanded .video-poster video {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  vertical-align: top !important;
  background: #000 !important;
}

.video-card.expanded .video-seek {
  order: 2 !important;
  flex: 0 0 auto !important;
  position: relative !important;
  inset: auto !important;
  z-index: 260 !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  padding: 10px 18px 14px !important;
  overflow: visible !important;
  background: #f7ead2 !important;
}

.video-card.expanded .video-timeline {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.video-card.expanded .video-buttons,
.video-card.expanded .video-actions {
  grid-row: 2 !important;
  width: auto !important;
  min-width: 0 !important;
}

.video-card.expanded .video-buttons {
  grid-column: 1 !important;
  justify-content: flex-start !important;
}

.video-card.expanded .video-actions {
  grid-column: 2 !important;
  justify-content: flex-end !important;
  pointer-events: auto !important;
}

.video-card.expanded .video-buttons,
.video-card.expanded .video-buttons button,
.video-card.expanded .video-actions,
.video-card.expanded .video-actions button {
  position: relative !important;
  z-index: 270 !important;
  pointer-events: auto !important;
}

.video-card.expanded > small,
.video-card.expanded > h3,
.video-card.expanded > p {
  display: none !important;
}

.video-card.expanded .video-close {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  z-index: 280 !important;
}

@media (min-width: 701px) and (max-width: 1180px) {
  .video-card.expanded,
  .video-card:last-child.expanded {
    width: min(920px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100dvh - 48px) !important;
  }

  .video-card.expanded .video-poster {
    max-height: calc(100dvh - 190px) !important;
  }
}

@media (max-width: 700px) {
  .video-card.expanded,
  .video-card:last-child.expanded {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100svh !important;
    border-radius: 0 !important;
  }

  .video-card.expanded .video-seek {
    padding: 7px 9px max(9px, env(safe-area-inset-bottom)) !important;
    gap: 6px !important;
  }

  .video-card.expanded .video-timeline input[type="range"] {
    height: 42px !important;
  }
}

/* v72 — surgical fixes on top of the restored v69 baseline.
   The quick-contact and home controls are intentionally untouched. */

/* Donation cards keep the v69 layout. The frame only makes each preview
   reliably fill its existing image cell after hydration on iPad/Android. */
@media (min-width: 701px) {
  .result-grid > article > .donation-preview-frame {
    position: relative !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 310px !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #170908 !important;
  }

  .result-grid > article > .donation-preview-frame > .donation-preview {
    position: absolute !important;
    inset: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
  }

  .result-grid > article:nth-child(1) > .donation-preview-frame > .donation-preview {
    object-position: center 74% !important;
  }

  .result-grid > article:nth-child(2) > .donation-preview-frame > .donation-preview {
    object-position: center 50% !important;
  }

  .result-grid > article:nth-child(3) > .donation-preview-frame > .donation-preview {
    object-position: center 32% !important;
  }

  .result-grid > article:nth-child(4) > .donation-preview-frame > .donation-preview {
    object-position: center 28% !important;
  }
}

/* Phone previews remain full-width and keep their natural aspect ratio. */
@media (max-width: 700px) {
  .result-grid > article > .donation-preview-frame {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .result-grid > article > .donation-preview-frame > .donation-preview {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
  }
}

/* Only the expanded tablet/desktop ebook is constrained. The normal ebook
   receives no v72 selector and therefore remains exactly as it was in v69. */
@media (min-width: 701px) {
  .ebook-shade {
    z-index: 310 !important;
  }

  .ebook.expanded {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 320 !important;
    box-sizing: border-box !important;
    width: min(1280px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    height: min(980px, calc(100dvh - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    margin: 0 !important;
    padding: 58px 18px 18px !important;
    transform: translate(-50%, -50%) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
  }

  .ebook.expanded .ebook-toolbar {
    position: sticky !important;
    top: -43px !important;
    z-index: 325 !important;
  }

  .ebook.expanded .ebook-spread,
  .ebook.expanded .ebook-spread:not(.single) {
    width: min(1080px, calc(100vw - 60px), calc(141.3dvh - 268.5px)) !important;
    max-width: 1080px !important;
    height: auto !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .ebook.expanded .ebook-spread.single {
    width: min(510px, calc(100vw - 60px), calc(70.65dvh - 134.25px)) !important;
    max-width: 510px !important;
  }

  .ebook.expanded .ebook-page,
  .ebook.expanded .ebook-page img {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .ebook.expanded .ebook-page img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - 190px) !important;
    object-fit: contain !important;
  }

  .ebook.expanded .ebook-close {
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    z-index: 340 !important;
  }
}

/* Android tablets: allow every portal card to grow with wrapped text, while
   keeping the complete 壹貳參 row within the original paper section. */
@media (min-width: 701px) and (max-width: 1180px) {
  .culture-portals {
    box-sizing: border-box !important;
    grid-auto-rows: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .culture-portals > a,
  .culture-portals > a:nth-child(2),
  .culture-portals > a:nth-child(2):hover {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 145px !important;
    max-height: none !important;
    transform: none !important;
  }
}

/* v73 — Mobile Chrome quick controls.
   Both controls use the same visual-viewport lift. The dock is anchored by
   its bottom edge, so expanding it always grows upward and never below the
   screen when Chrome hides or restores its browser bars. */
@media (max-width: 700px) {
  .quick-dock,
  .quick-home-dock {
    position: fixed !important;
    top: auto !important;
    right: 8px !important;
    left: auto !important;
    transform: none !important;
  }

  .quick-home-dock {
    bottom: calc(
      var(--quick-chrome-bottom-shift, 0px) +
      max(9px, env(safe-area-inset-bottom))
    ) !important;
  }

  .quick-dock {
    bottom: calc(
      var(--quick-chrome-bottom-shift, 0px) +
      max(9px, env(safe-area-inset-bottom)) +
      53px
    ) !important;
    height: auto !important;
    max-height: calc(var(--quick-visible-height, 100svh) - 76px) !important;
    overflow: visible !important;
  }

  .quick-dock:not(.collapsed) .quick-contact-group {
    max-height: calc(var(--quick-visible-height, 100svh) - 142px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .quick-route-menu {
    position: absolute !important;
    top: auto !important;
    right: 0 !important;
    bottom: calc(100% + 9px) !important;
    width: min(286px, calc(100vw - 16px)) !important;
    max-height: clamp(
      110px,
      calc(var(--quick-visible-height, 100svh) - 320px),
      260px
    ) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
}

/* v74 — keep the controls at one physical screen position when Chrome's
   browser bars disappear. The 41px dock anchor stays fixed; its contents are
   taken out of normal flow and open upward. */
@media (max-width: 700px) {
  .quick-home-dock {
    top: calc(
      var(--quick-stable-height, 100svh) -
      50px +
      var(--quick-chrome-vertical-lift, 0px)
    ) !important;
    bottom: auto !important;
  }

  .quick-dock {
    top: calc(
      var(--quick-stable-height, 100svh) -
      103px +
      var(--quick-chrome-vertical-lift, 0px)
    ) !important;
    bottom: auto !important;
    width: 126px !important;
    height: 41px !important;
    min-height: 41px !important;
    max-height: 41px !important;
    overflow: visible !important;
  }

  .quick-dock:not(.collapsed) .quick-contact-group {
    position: absolute !important;
    top: auto !important;
    right: 0 !important;
    bottom: calc(100% + 8px) !important;
    width: 140px !important;
    max-height: calc(var(--quick-visible-height, 100svh) - 142px) !important;
  }

  .quick-collapse,
  .quick-dock:not(.collapsed) .quick-collapse {
    position: absolute !important;
    inset: 0 !important;
    width: 126px !important;
    height: 41px !important;
    margin: 0 !important;
  }

  .quick-route-menu {
    top: auto !important;
    right: 0 !important;
    bottom: calc(100% + 184px) !important;
  }
}