/* ============================================
   放大製作 v2 寬版版型（2026-10-27 預覽，全站共用）
   三種寬度：
   - 滿版：色帶、照片帶、節目跑馬燈，背景直接碰到螢幕兩側
   - 寬版：.wrap 放寬到 1360px，卡片、格子、星系用這個
   - 閱讀寬：段落文字維持 36em 左右，不會一行太長
   左右留白跟著螢幕寬度變（20～72px），大螢幕不再兩側空一大塊。
   ============================================ */

:root {
  --wrap-wide: 1360px;
  --gutter: clamp(20px, 4.5vw, 72px);
  --section-y: clamp(72px, 8.5vw, 128px);
}

.wrap {
  max-width: calc(var(--wrap-wide) + var(--gutter) * 2);
  padding-left: var(--gutter); padding-right: var(--gutter);
}
@media (max-width: 560px) { .wrap { padding-left: 20px; padding-right: 20px; } }
.stats-strip .wrap { padding-left: var(--gutter); padding-right: var(--gutter); }

.section { padding: var(--section-y) 0; }

/* 區塊標題：寬螢幕改成左標題、右說明，橫向用掉寬度，縱向少一層 */
.section-head h2 { font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.18; text-wrap: balance; }
@media (min-width: 1100px) {
  .section-head {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 96px); align-items: end; margin-bottom: 56px;
  }
  .section-head .tag { grid-column: 1; justify-self: start; }
  .section-head h2 { grid-column: 1; }
  .section-head p { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-top: 0; font-size: 1.02rem; }
}

/* 開場字級跟著寬螢幕長大 */
.hero-split h1 { font-size: clamp(2.4rem, 5vw, 4.6rem) !important; }
.hero-split .lede { font-size: clamp(1rem, 1.25vw, 1.15rem); }

/* 單篇文章維持閱讀寬，不跟著放寬 */
.single .post-content, .wrap-narrow { max-width: 760px; }
/* 一般頁面（page.php，例如品牌動畫）內文維持閱讀寬，寬版下改成置中，不然會靠左留一大片空 */
.wrap > .post-content { margin-left: auto; margin-right: auto; }
/* 這種頁面上方的麵包屑跟著內文置中對齊 */
.case-crumb-bar:has(+ .section > .wrap > .post-content) .wrap { max-width: calc(42em + var(--gutter) * 2); }