/* ============================================================
   template-reference.css — 網站版型參考頁專屬樣式
   簡實制所 Lessary Studio

   說明：
   這個頁面大量沿用既有設計語言，這個檔案只放「其他頁面沒有、
   這頁才需要」的排版樣式：
   - Hero          → 沿用 portfolio.css 的 .port-hero / .ph-label / .ph-title / .ph-sub
   - 分類 Tab       → 沿用 illustration.css 的 .port-filter / .port-filter-btn
   - 手機可滑動 Tab  → 沿用 portfolio.css 對 .port-filter 的 @media 設定
   - 版型卡片        → 沿用 illustration.css 的 .port-card 系列 class
   - 找不到案例提示   → 沿用 portfolio.css 的 .port-empty
   - 區塊標題        → 沿用 shared.css 的 .sec-label / .sec-title
   - 按鈕            → 沿用 shared.css 的 .btn-primary / .btn-ghost / .dh-btns-center
   - CTA 區塊        → 沿用 shared.css 的 .cta-band
   - Footer          → 沿用 shared.css 的 footer 相關 class
   ============================================================ */

/* ── 分類介紹（Tab 下方，依選中的分類切換標題與說明） ── */
.template-category-intro {
  max-width: 720px; margin: 0 auto 40px; text-align: center;
}
.template-category-intro h2 {
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 900;
  color: var(--primary); margin-bottom: 12px;
}
.template-category-intro p {
  font-size: 14.5px; color: var(--text-muted); line-height: 1.9;
}

/* ── 版型共用提示（小型提示區塊） ── */
.template-note {
  max-width: 720px; margin: 0 auto 56px;
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--bg); border-radius: 16px; padding: 24px 28px;
}
.template-note .icon-line { flex-shrink: 0; margin-top: 2px; }
.template-note p { font-size: 13.5px; color: var(--text-muted); line-height: 1.85; }
.template-note p + p { margin-top: 10px; }

/* ── 版型卡片 grid：桌機 3 欄／平板 2 欄／手機 1 欄 ── */
.template-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px; max-width: 1080px; margin: 0 auto;
}

/* ── 套版前，需要準備什麼？ ── */
.template-requirements { background: var(--bg); padding: 80px; text-align: center; } 
.sec-sub {max-width:100%;}
.template-requirements-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  max-width: 960px; margin: 40px auto 0;
}
.req-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border-radius: 16px; padding: 20px 18px;
  transition: transform .3s, box-shadow .3s;
}
.req-item:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(42,50,75,0.1); }

.req-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--illust-fill-soft);
  display: flex; align-items: center; justify-content: center;
}
.req-icon .icon-line svg { stroke: var(--accent-dark); }

.req-text { font-size: 13.5px; font-weight: 700; color: var(--primary); line-height: 1.5; }

.template-requirements-note { margin-top: 32px; }
/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .template-grid { grid-template-columns: repeat(2, 1fr); }
  .template-requirements-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .template-grid { grid-template-columns: 1fr; }
  .template-requirements-grid { grid-template-columns: 1fr; }
  .template-note { flex-direction: column; padding: 20px; }
  .template-requirements { padding: 56px 24px; }
}