/* ==========================================================================
   首頁功能段 — 07 服務法會 / 08 消息 / 09 知識庫 / 10 交通 / 11 結尾轉換
   對應：03-page-specs.md 第一部分
   ========================================================================== */

/* ══ 07 服務方案與法會專區 ═════════════════ */

.services { background: var(--color-surface); }

/* 信任層：永續經營的證明（01-strategy §4） */
.services__trustline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary-soft);
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
  color: var(--color-primary);
}

.services__trustline svg { width: 20px; height: 20px; flex-shrink: 0; }

.services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 1024px) {
  .services__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
}

.svc {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo);
}

.svc:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* 線性圖示，stroke-width 1.5，禁止實心填色 */
.svc__icon {
  width: 34px;
  height: 34px;
  color: var(--color-primary);
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.svc:hover .svc__icon { transform: translateY(-3px); }

.svc__title {
  font-size: var(--text-lg);
}

.svc__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-tight);
}

.svc__cta {
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.svc__cta svg { width: 16px; height: 16px; }
.svc:hover .svc__cta { color: var(--color-accent-strong); }

/* ══ 08 最新消息與法會秩序 ═════════════════ */

.news { background: var(--color-surface-raised); }

.news__layout {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 900px) {
  /* 左消息 60% / 右法會 40% */
  .news__layout { grid-template-columns: 60fr 40fr; gap: var(--space-8); }
}

.news__col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-strong);
}

.news__col-title {
  font-size: var(--text-xl);
}

.news__item {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.news__item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.news__item-meta .num { letter-spacing: 0.04em; }

.news__item-cat {
  padding: 2px 8px;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-xs);
}

.news__item-title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 500;
  transition: color var(--duration-fast) var(--ease-out-expo);
}

.news__item:hover .news__item-title { color: var(--color-accent-strong); }

.news__item-excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-tight);
}

/* 法會時程卡：日期大字置左 */
.ceremony {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo);
}

.ceremony + .ceremony { margin-top: var(--space-4); }

.ceremony:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.ceremony__date {
  flex-shrink: 0;
  width: 68px;
  text-align: center;
  padding-right: var(--space-4);
  border-right: 1px solid var(--color-border);
  font-family: var(--font-numeric);
}

.ceremony__month {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.ceremony__day {
  display: block;
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-primary);
}

.ceremony__year {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.ceremony__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.ceremony__name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 500;
}

.ceremony__place {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* 行動版：法會時程優先於消息列表 */
@media (max-width: 899px) {
  .news__ceremonies { order: -1; }
}

/* ══ 09 精選內容與知識庫 ═══════════════════ */

.knowledge { background: var(--color-surface); }

.knowledge__posts {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-9);
}

@media (min-width: 700px) {
  .knowledge__posts { grid-template-columns: repeat(3, 1fr); }
}

.post__media { aspect-ratio: 16 / 10; }

.post__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.post__topic {
  color: var(--color-accent-strong);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.knowledge__faq {
  max-width: var(--width-prose);
  margin-inline: auto;
}

.knowledge__faq-head {
  text-align: center;
  margin-bottom: var(--space-6);
}

.knowledge__faq-actions {
  margin-top: var(--space-6);
  text-align: center;
}

/* ══ 10 交通與聯絡資訊 ═════════════════════ */

.access { background: var(--color-ridge-soft); }

.access__layout {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 900px) {
  .access__layout { grid-template-columns: 1.25fr 1fr; gap: var(--space-8); align-items: center; }
}

.routemap {
  width: 100%;
  height: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

.routemap path,
.routemap line {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  transition: stroke-dashoffset var(--duration-reveal) var(--ease-out-expo);
}

.routemap.is-drawn path,
.routemap.is-drawn line { stroke-dashoffset: 0; }

/* 接駁支線維持虛線語意，不參與描繪 */
.routemap .routemap__dashed {
  stroke-dasharray: 6 7;
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .routemap path,
  .routemap line { stroke-dashoffset: 0; }
}

.access__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.access__row {
  display: grid;
  gap: var(--space-1);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border-strong);
}

.access__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caption);
  color: var(--color-text-muted);
}

.access__value {
  font-size: var(--text-base);
}

/* 電話放大 + 一鍵撥打（RFP 明確要求） */
.access__tel {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  transition:
    background-color var(--duration-fast) var(--ease-out-expo),
    transform var(--duration-fast) var(--ease-out-expo);
}

.access__tel:hover {
  background: var(--color-primary-soft);
  transform: translateY(-1px);
}

.access__tel svg {
  width: 26px;
  height: 26px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.access__tel-num {
  display: block;
  font-family: var(--font-numeric);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

@media (min-width: 1024px) {
  .access__tel-num { font-size: var(--text-2xl); }
}

.access__tel-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.access__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ══ 11 結尾轉換區（全站唯一深色區塊）═════ */

.final {
  position: relative;
  background: var(--color-primary-deep);
  color: var(--color-text-inverse);
  overflow: hidden;
}

.final__layout {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 900px) {
  .final__layout { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

.final__visual {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

@media (min-width: 900px) {
  .final__visual { aspect-ratio: 4 / 5; }
}

.final__copy .eyebrow { color: var(--color-accent); }
.final__copy .eyebrow::before { background: var(--color-accent); }

.final__title {
  font-size: var(--text-3xl);
  font-weight: 500;
}

.final__lede {
  max-width: 26em;
  margin-top: var(--space-4);
  color: rgba(248, 245, 240, 0.78);
}

.final__form {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

@media (min-width: 560px) {
  .final__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .final__fields .field--full { grid-column: 1 / -1; }
}

.final .field__label { color: rgba(248, 245, 240, 0.86); }

/* 使用 background-color 而非 background 簡寫，
   避免重設 .select 的 background-repeat / position 造成圖示平鋪 */
.final .input,
.final .select {
  background-color: rgba(248, 245, 240, 0.08);
  border-color: rgba(248, 245, 240, 0.28);
  color: var(--color-text-inverse);
}

.final .input::placeholder { color: rgba(248, 245, 240, 0.45); }

.final .input:hover,
.final .select:hover { border-color: rgba(248, 245, 240, 0.6); }

.final .input:focus,
.final .select:focus {
  outline-color: var(--color-accent);
  border-color: var(--color-accent);
}

.final .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23f8f5f0' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.final .select option { color: var(--color-text); }

.final .consent { color: rgba(248, 245, 240, 0.78); }

.final .form-success {
  background: rgba(248, 245, 240, 0.08);
  border-color: rgba(248, 245, 240, 0.28);
}

.final .form-success__icon { color: var(--color-accent); }

.final__note {
  font-size: var(--text-xs);
  color: rgba(248, 245, 240, 0.55);
}

.final__fallback {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-numeric);
  font-weight: 600;
  color: var(--color-accent);
}