/* ============================================================
   澳門天師殿 · 新版首頁樣式（v2 視覺改造）
   主色保留既有宣紙/石青/磚紅/金瓦/墨；新素材點綴新色板。
   ============================================================ */

/* === 設計變量補充 === */
:root {
  --home-paper: #FAF8F3;        /* Spec 新色：近白，用於卡片/卷軸 */
  --home-qing:  #5A6B78;        /* Spec 新色：深青灰 */
  --home-zhu:   #C0392B;        /* Spec 新色：朱砂 */
  --home-gold:  #C9A227;        /* Spec 新色：淡赭金 */
  --hero-min-h: 92vh;
}

/* === HERO 全屏 === */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--hero-min-h);
  padding: var(--s-16) var(--pad-x) var(--s-12);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(250,248,243,0) 0%, rgba(244,239,227,0.35) 100%),
    url('../img/home/bg-hero.jpg') center top / cover no-repeat;
  background-color: var(--c-paper);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0) 0%, rgba(244,239,227,.65) 75%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--w-max);
  display: grid;
  grid-template-columns: 1fr minmax(300px, 720px) 1fr;
  gap: var(--s-5);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-inner {
    grid-template-columns: 120px minmax(300px, 720px) 120px;
    gap: var(--s-8);
  }
}

/* 兩側掛牌 */
.hero-side {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}
.hero-side a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 360px;
  background: center / contain no-repeat;
  text-decoration: none;
  transition: transform .25s var(--e-out);
}
.hero-side a:hover,
.hero-side a:focus-visible {
  transform: translateY(-4px);
  outline: none;
}
.hero-side a .side-label {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: .24em;
  font-family: var(--f-title);
  font-size: 1.15rem;
  color: #fff;
  text-shadow: 0 2px 6px rgba(43,43,40,.45);
  pointer-events: none;
}
.hero-side.enter a { background-image: url('../img/home/btn-enter-temple.png'); }
.hero-side.consult a { background-image: url('../img/home/btn-consult.png'); }

/* 中央視覺區 */
.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-plaque {
  width: min(92vw, 760px);
  height: auto;
  filter: drop-shadow(0 22px 42px rgba(43,43,40,.28));
}

.hero-eyebrow {
  margin-top: var(--s-6);
  font-family: var(--f-body);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  color: var(--c-qing-deep);
  opacity: .85;
}

.hero-sub {
  margin-top: var(--s-3);
  font-family: var(--f-title);
  font-size: clamp(1.1rem, 3.2vw, 1.55rem);
  letter-spacing: .55em;
  text-indent: .55em;
  color: var(--c-zhuan);
}

/* 卷軸引文 */
.hero-scroll {
  position: relative;
  width: min(72vw, 300px);
  margin-top: var(--s-8);
  aspect-ratio: 600 / 600;
  background: url('../img/home/banner-lineage.png') center / contain no-repeat;
}
.hero-scroll blockquote {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24% 26% 30% 26%;
  margin: 0;
  text-align: center;
}
.hero-scroll q {
  font-family: var(--f-title);
  font-size: clamp(0.9rem, 2.2vw, 1.08rem);
  line-height: 1.75;
  letter-spacing: .03em;
  color: var(--c-mo);
  quotes: "「" "」";
  max-height: 78%;
  overflow: hidden;
}
.hero-scroll .src {
  margin-top: var(--s-3);
  font-family: var(--f-body);
  font-size: 0.8rem;
  color: var(--c-mo-faint);
}

/* 聲音入口列 */
.hero-soundbar {
  margin-top: var(--s-8);
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  justify-content: center;
}
.hs-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--c-line-gold);
  border-radius: 999px;
  background: rgba(250,248,243,.82);
  font-family: var(--f-body);
  font-size: var(--fs-small);
  color: var(--c-mo-soft);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.hs-btn img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.hs-btn:hover,
.hs-btn:focus-visible {
  background: #fff;
  border-color: var(--c-wa);
  outline: none;
}

/* 向下提示 */
.scroll-hint {
  position: absolute;
  bottom: var(--s-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-body);
  font-size: var(--fs-tiny);
  letter-spacing: .25em;
  color: var(--c-mo-faint);
}
.scroll-hint i {
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, var(--c-wa), transparent);
  animation: scrollHint 1.6s ease-in-out infinite;
}
@keyframes scrollHint {
  0%, 100% { opacity: .35; transform: scaleY(.6); }
  50%      { opacity: 1;   transform: scaleY(1); }
}

/* === 雲紋分隔 === */
.divider-cloud {
  width: 100%;
  height: 90px;
  background: url('../img/home/divider-cloud.png') center / contain no-repeat;
  margin-block: var(--s-8);
  opacity: .85;
}

/* === 規制圖段 === */
.plan-section {
  padding: var(--s-12) var(--pad-x);
  background: linear-gradient(180deg, var(--c-paper), var(--home-paper));
}
.plan-section .section-head {
  text-align: center;
  margin-bottom: var(--s-8);
}
.plan-section h2 {
  font-family: var(--f-title);
  font-size: var(--fs-h1);
  color: var(--c-mo);
  margin-block: var(--s-3);
}
.plan-section .sub {
  color: var(--c-mo-soft);
}
.plan-host {
  max-width: 760px;
  margin: 0 auto;
}

/* === 快捷入口 === */
.quick-section {
  padding: var(--s-12) var(--pad-x);
  background: var(--c-paper-2);
}
.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .quick-grid { grid-template-columns: 1fr; }
}

.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-4);
  text-align: center;
  text-decoration: none;
  color: var(--c-mo);
  background: var(--home-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  transition: transform .2s var(--e-out), box-shadow .2s var(--e-out);
}
.quick-item:hover,
.quick-item:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  outline: none;
}
.quick-item img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.qi-name {
  font-family: var(--f-title);
  font-size: var(--fs-h4);
}
.qi-desc {
  font-family: var(--f-body);
  font-size: var(--fs-small);
  color: var(--c-mo-faint);
}

/* === 頁尾背景 === */
.site-footer {
  position: relative;
  padding: var(--s-16) var(--pad-x) var(--s-8);
  background: var(--c-mo);
  color: var(--c-paper-2);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/home/bg-footer.jpg') center / cover no-repeat;
  opacity: .18;
  pointer-events: none;
}

/* === 響應式：桌面顯示兩側掛牌 === */
@media (min-width: 1024px) {
  .hero-side { display: flex; }
}

/* === 減少動效偏好 === */
@media (prefers-reduced-motion: reduce) {
  .scroll-hint i { animation: none; }
  .hero-side a,
  .quick-item,
  .hs-btn { transition: none; }
}