/* ════════════════════════════════════════════════════════════
   宜蘭鄉鎮民宿網 頁尾元件(components/footer.html 專用)
   結構:容器 → 品牌區 → 三欄群組 → 鄉鎮連結 → 公司資訊 → 版權列 → RWD
   桌機寬度:背景滿版,內容以 padding-inline 公式鎖定 1180px 置中,
   與頁面主內容欄(max-width:1180px)對齊。
   ════════════════════════════════════════════════════════════ */

/* ── 容器:滿版底圖+置中內容 ── */
.footer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.7fr);
  gap: clamp(28px, 4vw, 56px);
  margin-top: 48px;
  padding-block: 54px 0;
  padding-inline: max(24px, calc((100% - 1180px) / 2));
  background:
    linear-gradient(180deg, rgba(251,246,234,.94) 0%, rgba(240,231,213,.88) 48%, rgba(231,223,203,.78) 100%),
    url("../images/footer-landscape.png") center bottom / cover no-repeat,
    var(--paper-deep);
}
.footer > * {
  position: relative;
  z-index: 1;
}

/* ── 品牌區 ── */
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.footer-logo img {
  width: 76px;
  height: 76px;
  object-fit: contain;
}
.footer-logo span {
  color: var(--olive-dark);
  font: 700 32px "Noto Serif TC", serif;
  letter-spacing: .05em;
  white-space: nowrap;
}
.footer-kicker {
  margin-bottom: 4px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.footer-brand p[itemprop="description"] {
  max-width: 420px;
  margin-bottom: 18px;
}
.footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid #b9aa81;
  border-radius: 999px;
  color: var(--olive-dark);
  background: rgba(255,253,248,.56);
  font-weight: 700;
}
.footer-actions a:hover { background: rgba(255,253,248,.9); }

/* ── 文字通則 ── */
.footer h2,
.footer h3,
.footer p { margin: 0; }
.footer h2 {
  margin-bottom: 12px;
  color: var(--olive-dark);
  font: 700 28px "Noto Serif TC", serif;
}
.footer h3 {
  margin-bottom: 14px;
  color: var(--olive-dark);
  font: 700 18px "Noto Serif TC", serif;
}
.footer p,
.footer a,
.footer span,
.footer strong {
  color: #625c4d;
  line-height: 1.9;
}
.footer i {
  width: 18px;
  padding-top: 6px;
  color: var(--olive);
}

/* ── 三欄群組(入口導覽/12 鄉鎮/公司資訊) ── */
.footer-columns {
  display: grid;
  grid-template-columns: .68fr 1.28fr 1fr;
  gap: clamp(22px, 3vw, 40px);
}
.footer-group {
  display: grid;
  align-content: start;
  gap: 7px;
  font-style: normal;
}
.footer-group a:hover { color: var(--olive-dark); text-decoration: underline; }

/* ── 12 鄉鎮子網域(北/中/南三分區) ── */
.footer-town-links {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 18px;
}
.footer-town-links h3 { grid-column: 1 / -1; }
.footer-town-links div {
  display: grid;
  align-content: start;
  gap: 5px;
}
.footer-town-links strong {
  color: var(--gold);
  font-weight: 700;
}

/* ── 公司資訊(僅直接子層做列排版,巢狀 span 維持行內) ── */
.footer-contact > a,
.footer-contact > span {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}
.footer-contact > span > span { display: inline; }
.footer-contact a,
.footer-contact span { word-break: break-word; }

/* ── 版權列(跨滿兩欄) ── */
.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 6px;
  padding-block: 26px 30px;
  border-top: 1px solid rgba(137, 122, 88, .25);
  font-size: 13px;
}

/* ── RWD ── */
@media (max-width: 980px) {
  .footer,
  .footer-columns { grid-template-columns: 1fr; }
  .footer-town-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .footer { padding-inline: 18px; }
  .footer-logo img {
    width: 62px;
    height: 62px;
  }
  .footer-logo span { font-size: 28px; }
  .footer,
  .footer-columns,
  .footer-town-links { grid-template-columns: 1fr; }
  .footer-bottom { display: grid; }
}