/* main.site.css — 全聯會主網站前台元件（main-* 前綴，依 main.tokens.css）
 * 視覺語言沿用 city-default-v1（.btn / .card / .nav-link / .section-title / .soft-hero…）
 * 載入序：main.tokens → main.base → 本檔 → 頁面樣式
 */

/* ---------- 版心 ---------- */
.main-page { width: min(var(--page-max), calc(100% - var(--page-gutter) * 2)); margin-inline: auto; }
.main-section { padding: var(--s-10) 0; }
.main-section--tight { padding: var(--s-6) 0; }
.main-section-title { font-family: var(--font-serif); font-size: var(--t-2xl); font-weight: 700; margin-bottom: var(--s-2); }
.main-section-sub { color: var(--ink-muted); margin-bottom: var(--s-6); }

/* ---------- 按鈕（對齊 city-default-v1 .btn） ---------- */
.main-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border-radius: var(--r); background: var(--rust); padding: .55rem 1.6rem;
  color: #fff; font-weight: 700; border: 1px solid transparent; white-space: nowrap;
}
.main-btn:hover { background: var(--rust-hover); text-decoration: none; }
.main-btn--ghost { background: transparent; color: var(--rust); border-color: var(--rust); }
.main-btn--ghost:hover { background: var(--rust); color: #fff; }
.main-btn--sm { padding: .4rem 1rem; font-size: var(--t-sm); }

/* ---------- Header ---------- */
.main-header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: var(--header-h); background: rgba(251,248,241,.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
}
.main-header__inner { width: min(var(--page-max), calc(100% - var(--page-gutter) * 2)); margin-inline: auto; display: flex; align-items: center; gap: var(--s-4); }
.main-header__brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.main-header__brand img { height: 30px; }
.main-header__brand span { font-size: var(--t-sm); color: var(--ink); }
.main-header__nav { margin-left: auto; display: flex; gap: var(--s-5); }
.main-nav-link { color: var(--ink); border-bottom: 2px solid transparent; padding: 4px 0; }
.main-nav-link:hover { color: var(--rust); text-decoration: none; }
.main-nav-link[aria-current="page"] { color: var(--rust); border-color: var(--rust); }
.main-header__toggle { display: none; margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; align-items: center; justify-content: center; }

/* 手機抽屜 */
@media (max-width: 860px) {
  .main-header__nav {
    position: fixed; inset: var(--header-h) 0 auto 0; z-index: var(--z-drawer);
    flex-direction: column; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line);
    transform: translateY(-120%); transition: transform var(--ease) .25s;
  }
  .main-header__nav[data-open] { transform: none; }
  .main-nav-link { padding: 1rem var(--page-gutter); border-bottom: 1px solid var(--line); }
  .main-header__toggle { display: inline-flex; }
}

/* ---------- Hero（對齊 .soft-hero 漸層） ---------- */
.main-hero {
  background: linear-gradient(100deg, #f5eee2, #fffaf2 58%, #d3b996);
  border-bottom: 1px solid var(--line);
}
.main-hero__inner { width: min(var(--page-max), calc(100% - var(--page-gutter) * 2)); margin-inline: auto; padding: var(--s-12) 0; text-align: center; }
.main-hero h1 { font-family: var(--font-serif); font-size: var(--t-3xl); }
.main-hero p { color: var(--ink-muted); font-size: var(--t-lg); margin: var(--s-4) auto var(--s-6); max-width: 42rem; }
.main-hero__cta { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* ---------- 卡片（對齊 .card） ---------- */
.main-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.main-card {
  overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff; box-shadow: var(--shadow-card);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  display: flex; flex-direction: column;
}
.main-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); text-decoration: none; }
.main-card__img { height: 180px; width: 100%; object-fit: cover; background: var(--paper-2); }
.main-card__body { padding: var(--s-4); flex: 1 1 auto; }
.main-card__title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main-card__desc { color: var(--ink-muted); font-size: var(--t-sm); margin-top: .35rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.main-card__tag { display: inline-block; font-size: var(--t-xs); color: var(--rust); background: var(--rust-ring); padding: .1rem .5rem; border-radius: var(--r-full); }

/* 縣市入口卡（較大、含縣市名 + 導流） */
.main-city-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.main-city-card {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; padding: var(--s-5);
  box-shadow: var(--shadow-card); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.main-city-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); text-decoration: none; }
.main-city-card__name { font-family: var(--font-serif); font-size: var(--t-xl); font-weight: 700; color: var(--ink); }
.main-city-card__url { font-size: var(--t-xs); color: var(--ink-faint); margin-top: .25rem; overflow-wrap: anywhere; }
.main-city-card__soon { font-size: var(--t-xs); color: var(--warn); background: var(--warn-bg); padding: .1rem .5rem; border-radius: var(--r-full); }

/* ---------- 推薦輪播（純 CSS scroll-snap） ---------- */
.main-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 260px); gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-2); }
.main-carousel > * { scroll-snap-align: start; }
.main-carousel::-webkit-scrollbar { height: 8px; }
.main-carousel::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.main-carousel-head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-3); }
.main-carousel-head a { font-size: var(--t-sm); margin-left: auto; }

/* ---------- 文章 ---------- */
.main-article { max-width: 46rem; margin-inline: auto; }
.main-article__meta { color: var(--ink-muted); font-size: var(--t-sm); margin: var(--s-2) 0 var(--s-5); }
.main-article__body { line-height: 1.8; }
.main-article__body p { margin: var(--s-4) 0; }
.main-article__body img { border-radius: var(--r-lg); margin: var(--s-5) 0; }

.main-news-list { display: flex; flex-direction: column; gap: var(--s-2); }
.main-news-row { display: flex; gap: var(--s-4); align-items: baseline; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.main-news-row__date { color: var(--ink-faint); font-size: var(--t-sm); flex: 0 0 6rem; }
.main-news-row__title { font-weight: 600; }
.main-news-row__cat { font-size: var(--t-xs); color: var(--rust); background: var(--rust-ring); padding: .1rem .5rem; border-radius: var(--r-full); flex: 0 0 auto; }

/* ---------- 理監事團隊 ---------- */
.main-team-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.main-team-card { text-align: center; }
.main-team-card__photo { width: 120px; height: 120px; border-radius: var(--r-full); object-fit: cover; margin: 0 auto var(--s-2); background: var(--paper-2); border: 1px solid var(--line); }
.main-team-card__name { font-weight: 700; }
.main-team-card__title { font-size: var(--t-sm); color: var(--ink-muted); }

/* ---------- Footer ---------- */
.main-footer { background: #2b2620; color: #d8cfc2; margin-top: var(--s-12); }
.main-footer__inner { width: min(var(--page-max), calc(100% - var(--page-gutter) * 2)); margin-inline: auto; padding: var(--s-8) 0 var(--s-6); display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.main-footer h4 { color: #fff; font-size: var(--t-sm); margin-bottom: var(--s-2); }
.main-footer a { color: #d8cfc2; font-size: var(--t-sm); display: block; padding: .2rem 0; }
.main-footer a:hover { color: #fff; }
.main-footer__bottom { border-top: 1px solid #453d33; text-align: center; font-size: var(--t-xs); color: #9a9082; padding: var(--s-3) 0 var(--s-5); }

@media (max-width: 640px) {
  .main-news-row { flex-wrap: wrap; }
  .main-news-row__date { flex-basis: 100%; }
}