@charset "UTF-8";

/* 特殊募款頁若要自訂樣式，母版型建議同時用 .civicrm-contribute-sp（JS 加、有空窗期）與 body:has(script[data-contribution-page-type="special"]) 兩個 selector */

/*SECTION - 基礎排版 */
body {
  font-family: var(--cet-font-sans);
  font-size: var(--cet-fs-body);
  font-weight: var(--cet-fw-regular);
  color: var(--cet-gray-900);
  background-color: var(--cet-white);
}

/*ANCHOR - 標題字族：base theme 對 headings 另設 PingFang 優先 stack，body 的繼承被蓋走（mac 上大標會變 PingFang）*/
h1, h2, h3, h4, h5, h6 {
  font-family: var(--cet-font-sans);
  overflow-x: clip;
}

/*ANCHOR - Fixed */

.clearfix::after{
  content: unset;
}

/*ANCHOR - 頁面最小高度：#page flex column 讓主內容區長高、頁尾貼底；⛔ 不可用 grid（sticky header 會被關進自己的 grid area）*/
#page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

#main-wrapper { flex: 1 0 auto; }

/*ANCHOR - Container */

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  padding-inline: 24px;   /* 三斷點統一左右留白 24（設計稿皆同；Bootstrap 預設 12）*/
  @media (min-width: 1200px) { max-width: 1008px; }  /* 960 內容 + 24×2 padding */
  @media (min-width: 1400px) { max-width: 1008px; }  /* 蓋掉 Bootstrap 1400 斷點的 1320 */
}

/*ANCHOR - 巢狀 container 去重（LB 非 full-width section 的 region 自帶 .container，疊在 #main.container 上會雙倍內距）*/
.layout:not(.full-width) > .container {
  padding-inline: 0;
}

/*!SECTION */

/*SECTION - 頁首 Header / Top header */

#header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--cet-bg);
  border-bottom: 1px solid #D6D3D1;
}

.header-inner {
  padding-block: unset;
}

/*ANCHOR - Navbar 導覽列  */
#navbar-main.navbar {
  min-height: 64px;
  padding: 0;
  align-items: center;
  font-family: var(--cet-font-sans);

  /*ANCHOR - Logo */
  & .site-logo.navbar-brand {
    padding: 0;
    margin-inline-end: clamp(16px, 4vw, 40px);
    min-height: 64px;                  /* 撐住第一列恆 64 高，手機收合時不跳 */
    display: flex;
    align-items: center;

    & .site-logo-img {
      display: block;

      /* logo 三處皆 105×31、不分斷點；⚠ 寫死 width/height，width:auto 時圖載入瞬間會把同列選單推走（header 跳動）*/
      width: 105px;
      height: 31px;
    }
  }

  /*ANCHOR - .mobile 獨立 CTA block（<992 顯示）靠右挨漢堡，右留 12 */
  & > .mobile { margin-left: auto; margin-right: 12px; }

  /*ANCHOR - 漢堡按鈕（< 992）*/
  & .navbar-toggler {
    border: 0;
    padding: 4px 8px;
    min-height: 64px;        /* 同 logo 撐第一列恆 64 高 → 收合不跳 */
    color: var(--cet-gray-900);
    order: 0;                /* 蓋掉 base theme 的 order:5：漢堡留在頂列（否則開抽屜時被擠到最下）*/

    &:focus { box-shadow: none; }

    /* 收合態：客製深黑漢堡 icon（取代 base theme 半透明 icon）*/
    & .navbar-toggler-icon {
      width: 28px;
      height: 28px;
      background-image: url(images/icon-menu.svg);
      background-size: 28px 28px;
    }

    /* 抽屜開啟（無 .collapsed）→ 換 ✕ 提示可關閉 */
    &:not(.collapsed) .navbar-toggler-icon {
      background-image: url(images/icon-close.svg);
    }
  }

  /*ANCHOR - 手機漢堡抽屜白底：fixed 從 bar 底浮出、不撐高 #header（撐高會讓 sticky header 佔掉四成視高）*/
  & .navbar-collapse {
    background: #fff;
    padding-bottom: 16px;      /* 下緣留白（CTA 下方也白）*/
    position: fixed;           /* 貼 viewport 頂，避開 .navbar / .header-inner 干擾 containing block（sticky #header 同貼頂→兩者連動視覺一致）*/
    top: 64px;                 /* header bar 下方 */
    left: 0;
    right: 0;
    z-index: 1030;
    max-height: calc(100vh - 64px);   /* header 恆 64；避免 8 項＋子選單超出視高被截斷 */
    overflow-y: auto;

    @media (min-width: 992px) {
      background: transparent;   /* 展開水平選單：透明（header bar 綠透出）*/
      position: static;
      top: auto;
      left: auto;
      right: auto;
      z-index: auto;
      padding-bottom: 0;
      max-height: none;
      overflow-y: visible;
    }
  }

  /*ANCHOR - 主選單（手機抽屜 base → md 水平）*/
  & .navbar-nav {
    align-items: stretch;
    @media (min-width: 992px) {
      align-items: center;
      gap: clamp(4px, 0.8vw, 12px);
    }

    & .nav-item > .nav-link {
      color: #000;
      font-size: var(--cet-fs-body);
      font-weight: var(--cet-fw-regular);
      padding: 8px 24px;
      white-space: nowrap;
      cursor: pointer;
      @media (min-width: 992px) { padding: 8px 14px; }
    }

    & > .nav-item.menu-item--active-trail,
    & > .nav-item:has(> .nav-link.is-active),
    & > .nav-item:has(> .nav-link.active) {
      background: var(--cet-gray-200);

      & > .nav-link { font-weight: var(--cet-fw-medium); }

      @media (min-width: 992px) { background: transparent; }
    }

    @media (min-width: 992px) {
      & .nav-item > .nav-link:not(.cta):not(.search) {
        border-bottom: 2px solid transparent;

        &:hover,
        &:focus { border-bottom-color: var(--cet-primary-dark); }
      }
      & .menu-item--active-trail > .nav-link:not(.cta):not(.search),
      & .nav-item > .nav-link.is-active:not(.cta):not(.search),
      & .nav-item > .nav-link.active:not(.cta):not(.search) {
        background: transparent;
        color: var(--cet-primary-dark);
        border-bottom-color: var(--cet-primary-dark);
      }
    }

    /* base theme JS 把 span.dropdown-toggle 拆成文字＋獨立箭頭（淨佔 4px）；改造前先補等量佔位免整排選單彈一下，改造後 class 消失本規則自動失效 */
    & .nav-item.dropdown > .nav-link.dropdown-toggle {
      @media (min-width: 992px) { margin-right: 4px; }
    }

    /* 下拉箭頭＝base theme 的 .nb-dropdown-toggle，全斷點、全層級單一顆；巢狀層也要選到，否則掉回 base theme 的 24px chevron */
    & :is(.nav-item, .dropdown-item).dropdown > .nb-dropdown-toggle {
      width: 12px;
      height: 12px;
      margin-left: -18px;
      background-image: url(images/icon-down.svg);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      transition: transform .2s ease;
    }

    /* 992+ 只放行最上層：巢狀層改用 dropdown-menu 段的 ::after 右向箭頭，放行會變兩顆 */
    & .nav-item.dropdown > .nb-dropdown-toggle {
      @media (min-width: 992px) {
        display: block;              /* 反制 base theme lg+ 的 display:none（否則水平選單無箭頭）*/
        margin-left: -8px;           /* 箭頭貼近文字 */
      }
    }

    /* 展開後箭頭朝上 */
    & :is(.nav-item, .dropdown-item).dropdown.show > .nb-dropdown-toggle,
    & :is(.nav-item, .dropdown-item).dropdown > .nb-dropdown-toggle[aria-expanded="true"] {
      transform: rotate(180deg);
    }

    & > .nav-item.dropdown {
      display: flex;               /* 不依賴 base theme（其 flex 只綁 <992）：992+ 沒它箭頭會掉行 */
      align-items: center;
      justify-content: flex-start;
      @media (min-width: 992px) { justify-content: center; }
    }

    /* .cta 通用樣式在 Web Elements 段；此處只做 <992 隱藏（header 另掛 .mobile block 取代）與蓋掉 .nav-link 的 padding */
    & > .nav-item > .nav-link.cta {
      display: none;
      padding: 0 16px;
      margin-inline-start: clamp(8px, 1.5vw, 24px);   /* CTA 與前一個選單項的間距（估計值；手機此項隱藏）*/
      @media (min-width: 992px) { display: inline-flex; }
    }

    /*ANCHOR - Search 搜尋：<992 是「搜尋」文字＋放大鏡，≥992 只留 40×40 放大鏡；icon 用 ::after 隨文字寬跑；<button> 不繼承 font-family 故明寫 inherit */
    & > .nav-item > .nav-link.search {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: inherit;
      appearance: none;
      min-height: 40px;
      border: 0;
      background: transparent;
      opacity: 1;
      transition: opacity .2s ease;

      &::after {
        content: "";
        flex: none;
        width: 20px;
        height: 20px;
        background: url(images/icon-search.svg) no-repeat center / contain;
      }

      @media (min-width: 992px) {
        justify-content: center;
        gap: 0;
        font-size: 0;
        color: transparent;
        min-height: 0;
        width: 40px;
        height: 40px;
        padding: 0;
      }

      &:hover,
      &:focus { opacity: .65; }

      /* overlay 開啟時放大鏡淡出（只留遮罩右上一個 ✕；關閉用 ✕ / ESC / 點空白）*/
      &.is-open { opacity: 0; pointer-events: none; }
    }

    /* 水平選單：搜尋移到最右（CTA 之後）。order 套在 <li> nav-item（flex item）上；手機維持原 DOM 順序 */
    & > .nav-item:has(> .nav-link.search) {
      @media (min-width: 992px) { order: 1; }
    }
  }

  /*ANCHOR - 下拉選單面板 dropdown-menu */
  & .dropdown-menu {
    border: 0;
    box-shadow: none;                    /* base＝手機抽屜內：無浮動面板感 */
    padding: 0;                          /* 手機：無縮排 → dropdown-item 背景滿邊；子選單文字縮排改靠 a padding */

    & a,
    & span {                             /* 子選單項：連結 a／nolink span 都套（色一致）；hover/focus 不改文字色 */
      display: block;
      padding: 9px 24px 9px var(--cet-submenu-indent, 48px);   /* 手機：左縮排（比上層文字深一層），每深一層 +24px（見下方巢狀規則）；背景滿邊交給 dropdown-item */
      color: #000;
      white-space: nowrap;

      &:hover,
      &:focus { color: #000; }
    }

    /* hover／當前項底色（Drupal 當前項是 a.is-active、不是 li.active）：整列滿邊背景、只差背景色 */
    & .dropdown-item {
      padding: 0;                        /* 清 Bootstrap 的 .25rem 1rem：縮排一律交給 a/span，否則巢狀層每深一層被推窄 32px */

      /* Bootstrap .dropdown-item.active 預設藍底、active trail 每層都會中；放在 hover 規則前才不會蓋掉當前項 */
      &.active,
      &:active { background: transparent; }

      &:hover,
      &:has(> .is-active) { background: var(--cet-gray-200); }

      /* base theme 把 .nb-nav-item.dropdown 設成置中 flex，巢狀項目會整列置中、看不出層級 */
      &.dropdown { justify-content: flex-start; }
    }

    @media (min-width: 992px) {           /* 水平選單：浮動面板 */
      top: 100%;                          /* li 是 flex，absolute 的 static position 會被 align/justify 打飛 → top/left 必須明講 */
      left: 0;                            /* 左緣對齊觸發鈕的 nav-link 底線左緣 */
      translate: none;
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
      padding: 8px 0;

      & a,
      & span { padding: 9px 14px; }      /* 浮動面板：水平 14＝nav-link padding，項目文字與觸發鈕文字左對齊 */
    }

    /*ANCHOR - 第三層以上子選單：向右展開（父面板是 absolute＝巢狀面板的定位基準；手機抽屜維持內縮堆疊，故只在 992+）*/
    & .dropdown-item.dropdown {
      @media (min-width: 992px) { position: relative; }

      /*ANCHOR - 巢狀項目的「還有下一層」提示：hover 模式下 base theme 把 .nb-dropdown-toggle 藏掉，改用同一顆 icon-down.svg 轉右向 */
      & > a,
      & > span {
        @media (min-width: 992px) {
          position: relative;
          padding-right: 34px;             /* 讓出箭頭空間，避免蓋到文字 */

          &::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 14px;
            width: 12px;
            height: 12px;
            margin-top: -6px;
            rotate: -90deg;
            background: url(images/icon-down.svg) no-repeat center;
          }
        }
      }
    }

    & .dropdown-menu {
      --cet-submenu-indent: 72px;        /* 手機抽屜：第三層再深一階（桌面的 padding: 9px 18px 會蓋掉，不受影響）*/

      @media (min-width: 992px) {
        top: 0;
        left: 100%;
        margin-top: -8px;                /* 抵銷本層 padding-top，子面板首項與父項齊平 */
      }

      & .dropdown-menu { --cet-submenu-indent: 96px; }   /* 第四層 */
    }
  }
}

/*!SECTION */

/*SECTION - 搜尋 Overlay（custom.js 產生的全螢幕搜尋層）*/

/*ANCHOR - 原位置隱藏（.block-search／熱門關鍵字都被 JS 搬進 overlay）*/
.block-search,
#block-cet-hot-keywords { display: none; }   /* 兩者都被 JS 搬進 overlay，原位置不顯示 */

.cet-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 6vw, 64px);
  background: rgba(255, 255, 255, .9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s;

  &.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /*ANCHOR - 關閉鈕（✕，右上）*/
  & .cet-search-overlay__close {
    position: absolute;
    top: clamp(16px, 3vw, 28px);
    right: clamp(16px, 3vw, 36px);
    width: 40px;
    height: 40px;

    /* <992：與 header 漢堡鈕重疊對位，top＝(64−40)/2；⚠ right 從 padding box 起算、overlay 自身有 padding，20 為對位實測值 */
    @media (max-width: 991.98px) {
      top: 12px;
      right: 20px;
    }
    border: 0;
    font-size: 0;
    cursor: pointer;
    background: transparent url(images/icon-close.svg) no-repeat center center;
    opacity: .8;

    &:hover,
    &:focus { opacity: 1; }
  }

  & .cet-search-overlay__inner {
    width: min(760px, 100%);
    text-align: center;
  }

  /*ANCHOR - search form 搜尋表單 */
  & .block-search {
    display: block;

    & form { display: block; }

    & .form-item,
    & .js-form-item { margin: 0; }

    & input[type="search"],
    & input[type="text"],
    & .form-search {
      width: 100%;
      padding: 8px 0;
      border: 0;
      border-bottom: 2px solid var(--cet-gray-300);
      border-radius: 0;
      background: transparent;
      text-align: center;
      font-size: clamp(36px, 8vw, 64px);   /* 「搜尋」大字 placeholder */
      font-weight: var(--cet-fw-medium);
      color: var(--cet-gray-900);
      box-shadow: none;                     /* 清 Bootstrap .form-control 的邊框光暈 */

      &::placeholder { color: var(--cet-gray-900); opacity: 1; }   /* placeholder 深色不淡（當大標用）*/

      &:focus {
        outline: 0;
        box-shadow: none;                   /* 清 Bootstrap .form-control:focus 的藍光暈 */
        border-bottom-color: var(--cet-primary);
      }
    }

    /* 送出鈕隱藏（靠 Enter 送出，仿上下游）*/
    & .form-submit,
    & button[type="submit"],
    & input[type="submit"] { display: none; }
  }

  /*ANCHOR - 關鍵字標籤 chips */
  & .cet-search-overlay__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    margin: clamp(16px, 3vw, 24px) 0 0;
    padding: 0;
    list-style: none;

    & a {
      display: inline-block;
      padding: 4px 14px;
      border-radius: 999px;
      color: var(--cet-gray-700);
      font-size: 14px;

      &:hover,
      &:focus {
        color: var(--cet-primary);
        background: var(--cet-bg);
        text-decoration: none;
      }
    }
  }

  /*ANCHOR - ESC 提示（右下）*/
  & .cet-search-overlay__hint {
    position: absolute;
    right: clamp(16px, 3vw, 36px);
    bottom: clamp(16px, 3vw, 28px);
    margin: 0;
    color: var(--cet-gray-700);
    font-size: 13px;

    /* 手機／平板無實體 ESC 鍵，提示無意義 */
    @media (max-width: 991.98px) { display: none; }
  }
}

/* overlay 開啟時鎖背景捲動 */
body.cet-search-open { overflow: hidden; }

/*!SECTION */

/*SECTION - 頁尾 Footer */

.site-footer {
  padding-block: unset;
  border-top: 1px solid var(--cet-primary-dark);   /* 頁尾上緣線＝Brand/Dark Primary（與頁首的灰線不同）*/
  background: var(--cet-bg);
  color: var(--cet-gray-900);
  font-size: var(--cet-fs-body);

  /*ANCHOR - 手機/平板：頁尾全部置中；桌機 ≥992 靠左（logo／訂閱框／社群各自的置中規則寫在各自 ANCHOR）*/
  text-align: center;
  @media (min-width: 992px) { text-align: start; }

  /*ANCHOR - 清父層水平 padding（.row gutter / .navbar-brand / .block），讓三塊貼齊 grid cell 左緣 */
  & .region,
  & .navbar-brand,
  & .block { padding-inline: 0; }

  /*ANCHOR - 清 block wrapper 縱向留白，頁尾縱向間距一律交給 grid gap */
  & .block,
  & .block-content { margin-block: 0; padding-block: 0; }

  /* base theme 給 __bottom 的 30px 上留白：設計稿深灰帶緊貼淺綠區 */
  & .site-footer__bottom { margin-top: 0; }

  /* 深灰帶縱向留白全交給 .sub-footer-offices：barrio 只給 .region margin-top 20、沒有下留白，疊上會上下不對稱 */
  & .site-footer__bottom .region { margin-block: 0; }

  & .newsletter {
    margin-inline: auto;                                           /* 訂閱框整體置中（max-width 484）*/
    @media (min-width: 992px) { margin-inline: 0; }
  }

  & .menu--footer ul { list-style: none; padding-left: 0; }        /* 清各層 ul 的 bullet（含子選單 flex-column）*/

  /* 頁尾連結改墨色（蓋 base theme 藍）；hover 主綠 */
  & a {
    color: var(--cet-gray-900);
    text-decoration: none;

    &:hover,
    &:focus {
      color: var(--cet-primary);
    }
  }

  /* 隱藏選單區塊標題（「頁尾選單」「社群選單」），設計稿無；保留給螢幕報讀 */
  & .block-menu > h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /*ANCHOR - 主頁尾 site-footer__top（Footer Info + 選單）*/
  & .site-footer__top {
    display: grid;
    grid-template-columns: 1fr;                       /* 手機：單欄直疊 */
    gap: clamp(24px, 4vw, 40px);
    padding-block: clamp(32px, 4vw, 40px);   /* 設計稿桌機 40 */

    /* 消 .row 負邊距＋強制 region 撐滿 grid cell（flex 的 .row 當 grid item 不會 stretch，width:100% 才有效，否則選單 3 欄逐字斷行）*/
    & > .region {
      margin: 0;
      width: 100%;
      min-width: 0;
    }

    @media (min-width: 992px) {
      /* 桌機：左 Footer Info 360–484 彈性 | 右 選單 1fr；末列 1fr 吸收選單高度讓左欄緊湊靠上；⚠ 社群就放末列、不設空 spacer 列（空列照吃 row-gap）*/
      grid-template-columns: minmax(360px, 484px) 1fr;
      grid-template-rows: auto auto 1fr;
      column-gap: clamp(48px, 8vw, 117px);
      row-gap: 24px;                       /* row-gap 24（設計稿 logo→訂閱 34、訂閱→社群 24）*/
      align-items: start;

      & > .region-footer-first  { grid-area: 1 / 1; }       /* logo */
      & > .region-footer-second { grid-area: 2 / 1; }       /* 訂閱框 */
      & > .region-footer-third  { grid-area: 3 / 1; }       /* 社群 */
      & > .region-footer-fourth { grid-area: 1 / 2 / 4 / 3; }  /* 選單，跨 3 列在右欄 */
    }
  }

  /*ANCHOR - logo（region-footer-first）：頁首的尺寸規則巢狀在 #navbar-main 底下、頁尾吃不到，這裡補上；height 31、width 由原圖比例得 105 */
  & .region-footer-first {
    & img,
    & .site-logo-img {
      display: block;
      width: auto;
      margin-inline: auto;                                         /* 手機置中 */
      @media (min-width: 992px) { margin-inline: 0; }
    }

    & .site-logo-img { height: 31px; }
  }

  /*ANCHOR - 社群 icon（.menu--social）：32×32 灰 SVG 走 background-image（不用 mask＝Firefox 相容）；Barrio 選單是 ul.nav > a.nav-link，icon 依連結上的 .social-* class 套 */
  & .menu--social ul.nav {
    display: flex;
    justify-content: center;                                       /* 手機置中 */
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    @media (min-width: 992px) { justify-content: flex-start; }

    & a {
      display: block;
      width: 32px;
      height: 32px;
      padding: 0;                       /* 清 Barrio .nav-link padding，否則 icon 被內縮 */
      font-size: 0;
      color: transparent;
      opacity: 1;
      transition: opacity .2s ease;

      &:hover { opacity: .65; }

      &.social-facebook  { background: transparent url(images/icon-facebook.svg) no-repeat center center; }
      &.social-instagram { background: transparent url(images/icon-instagram.svg) no-repeat center center; }
      &.social-youtube   { background: transparent url(images/icon-youtube.svg) no-repeat center center; }
    }
  }

  /*ANCHOR - 頁尾選單 3 欄 */
  & .menu--footer {
    & .nav-link {
      padding: 0;
      line-height: 1.5;                    /* 設計稿選單行距 24px（base theme 1.7＝27.2）*/
      color: var(--cet-gray-900);
    }

    & > ul.nav {
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
      margin: 0;
      padding: 0;
      list-style: none;
      white-space: nowrap;

      @media (min-width: 768px) {
        grid-template-columns: repeat(3, auto);
        justify-content: center;
      }

      @media (min-width: 992px) {
        justify-content: flex-end;
      }

      & > li {
        & > .nav-link {
          display: block;
          font-size: var(--cet-fs-body);
          font-weight: 700;
          color: var(--cet-gray-900);
        }

        & > ul > li > .nav-link {
          display: block;
          font-size: var(--cet-fs-body);
          color: var(--cet-gray-900);

          &:hover,
          &:focus { color: var(--cet-primary); }
        }
      }
    }
  }

  /*ANCHOR - Sub Footer 辦公室帶：白字要蓋兩層——base 的 .site-footer .content a 半透明白、editor.css 的 .text-formatted 內連結色（用 :not(.cta) 拉高特異度）*/
  & .region-footer-fifth {
    margin-top: 0;                                   /* base theme 20px 上留白，設計稿無 */
    width: calc(100vw - var(--sbw, 0px));
    margin-inline: calc(50% - (100vw - var(--sbw, 0px)) / 2);
    background: var(--cet-gray-800);
    color: var(--cet-white);

    & .content { color: var(--cet-white); }
    & .content a:not(.cta) { color: var(--cet-white); }
  }
}

.sub-footer-offices {
  display: grid;
  grid-template-columns: 1fr;                         /* 手機～平板：直疊（.fig Tablet 840 仍直疊）*/
  gap: 24px 40px;                                     /* 直疊間距 24／欄間距 40（.fig）*/
  max-width: 1200px;                                  /* 16px 字下三欄 nowrap 需 ~1146px，960 會折行 */
  margin-inline: auto;
  padding: 24px 15px;                                 /* 上下留白 24（設計稿 20 各加 4）*/
  font-size: var(--cet-fs-body);                      /* 地址與淺綠區文字同 16px（客戶指定，非 .fig 的 12）*/
  line-height: 1.4;

  /* 992–1199：三欄並排但允許折行——16px 字下三欄單行需 ~1176px，此段容器僅 962–1145px，強行 nowrap 會把第三欄切掉 */
  @media (min-width: 992px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    justify-content: start;
  }

  /* ≥1200：欄寬隨內容、地址＋電話一行到底（三欄內容寬合計約 1160 ≤ 可用 1185）*/
  @media (min-width: 1200px) {
    grid-template-columns: repeat(3, auto);
    white-space: nowrap;
  }

  & .office__name {
    font-weight: 700;                                 /* 粗體（設計）；字級/行距繼承 12/20 連續兩行 */
  }

  & .office__sep {
    margin-inline: 4px;
  }

  & a.office__tel:hover {
    text-decoration: underline;
  }
}

/*!SECTION */

/*SECTION - Layout Builder */

.layout{
  &:not(#slide, #body, #meta){
    padding-block: clamp(24px, 4vw, 40px);
  }

  &#intro{
    padding-block: 0 64px;
  }

  & > .container { max-width: 1008px; }    /* 內容 960 + gutter 24×2 */
}

/*ANCHOR - bg-green（LB section 淺綠帶）*/
.bg-green {
  background: var(--cet-bg);
}

/* bg-green 帶內的 CTA 變體：CTA 面板底色跟 .bg-green 同色會糊在一起，帶內改白底 */
.bg-green .block-content-cta_block {
  background: var(--cet-white);
}

/*!SECTION */

/*SECTION - Front 首頁*/

/*ANCHOR - 首頁大圖輪播 slide */

.view-home-slide {
  & .view-content {
    display: block;
    margin: 0;

    & .slick-dots {
      position: static;
      margin-top: .5rem;
    }
  }

  & .home-slide__group {
    position: relative;                /* slick 初始化前 title 疊圖的 fallback 基準 */
    width: 100%;

    & .home-slide__images {
      line-height: 0;

      & img {
        display: block;
        width: 100%;
        height: auto;
        max-height: calc(100vh - 64px); /* header(64)+輪播 ≤ 一屏，矮視窗不超出 */
        object-fit: cover;
      }
    }

    /* slogan 壓圖置中；內層圖輪播時文字固定（設計：字在圖上、手機字級較小）*/
    & .home-slide__title {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-inline: clamp(16px, 8vw, 120px);
      color: #fff;
      font-size: clamp(18px, 5vw, 60px);
      font-weight: var(--cet-fw-medium);
      line-height: 1.7;
      text-align: center;
      pointer-events: none;

      /* ⚠ Views 的 element_class 會同時輸出到 .views-field 與內層 .field-content，內層不取消會把 inset／padding 各套一次 */
      & .home-slide__title {
        position: static;
        padding-inline: 0;
      }

      /* 文字來自 body 欄位、包在 <p>：清 reboot 的 margin-bottom，否則 flex 置中偏上 */
      & p { margin: 0; }
    }

    /* 整張 slide 可點（連結不顯示文字）*/
    & .home-slide__link a {
      position: absolute;
      inset: 0;
      font-size: 0;
      color: transparent;
    }
  }
}

.path-frontpage {
  /*ANCHOR - layout fixed：首頁主內容區不吃 base theme 的上下內距 */
  & .main {
    padding-block: unset;
    & .node__content { margin-top: unset; }
  }

  /*ANCHOR - 我們在乎的議題＋影響力帶（#issue）*/
  & #issue{

    /* 置中小標款（無線）：蓋掉 base 的短線＋左對齊＋灰綠字 */
    & .block-title {
      width: auto;
      padding-top: 0;
      border-top: 0;
      font-size: var(--cet-fs-body);
      font-weight: 700;                /* Figma：B1 Body Text 16/24 Bold */
      line-height: 1.5;                /* 24px */
      text-align: center;
      color: var(--cet-primary-dark);  /* Figma Fill＝Brand/Dark Primary */
    }

    & .name-issue {
      & li {
        position: relative;

        /* 綠標籤壓在圖上，跟著整卡變淡會透出底圖；⚠ 要選欄位層 views-field-name（opacity 不可逆，子層補不回來）*/
        &:hover > .views-field-name { opacity: 1; }
      }

      /* 議題名＝圖右下綠標籤（白字＋圓圈箭頭）*/
      & .entity-title {
        position: absolute;
        inset: auto 0 0 auto;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 8px 12px;
        border-top-left-radius: 4px;   /* 左上圓；右下由 li 4px clip */
        background: var(--cet-primary);
        color: #fff;
        font-size: var(--cet-fs-body);
        font-weight: var(--cet-fw-regular);
        line-height: 1.5;

        &::after {
          content: "";
          width: 24px;
          height: 24px;
          background: url(images/icon-outline.svg) no-repeat center;
        }
      }

      /* 「查看」＝整卡透明熱區 */
      & .entity-link {
        margin: 0;

        & a {
          position: absolute;
          inset: 0;
          font-size: 0;
          color: transparent;
        }
      }
    }

    /* 影響力 */
    & .block-content-free_code {
      margin-top: clamp(40px, 6vw, 64px);
      padding: 24px clamp(16px, 4vw, 40px);
      background: var(--cet-white);
    }
  }

  /*ANCHOR - 首頁區塊縱向間距（設計稿 spacing）*/
  & .block-views-blockhome-latest-story-block-1 {
    margin-top: 64px;      /* 影響力帶 → 最新文章 64（設計稿）*/
  }

  & .block-views-blockhome-latest-activity-block-1 {
    margin-top: 128px;     /* 最新文章 → 近期活動 128（設計稿）*/
  }

  & .block-content-cta_block {
    margin-top: 128px;     /* 近期活動 → CTA 區塊 128（設計稿）*/
    margin-bottom: 64px;   /* CTA 區塊 → footer 64（設計稿）*/
  }
}

/*!SECTION */

/*SECTION - Web Elements（CTA 按鈕 / 麵包屑）*/

/*ANCHOR - CTA pill (.cta) 綠底白字圓角＋右上箭頭，全站通用；用 a.cta 才壓得過 Barrio 加的 .nav-link */
a.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px 2px;             /* 下 2px：中文字在行盒中視覺偏下，補償後才真的置中（估計值）*/
  color: #fff !important;
  background: var(--cet-primary);
  border-radius: 4px;
  white-space: nowrap;
  text-decoration: none;

  &::after {
    content: "";
    width: 20px;
    height: 20px;
    margin-inline-start: 4px;
    background: url(images/icon-arrow-up-right-wite.svg) no-repeat center;
  }

  /* 藏 extlink 追加的外部連結圖示（按鈕已有箭頭）；⛔ 不可用 extlink 後台的 CSS 排除（會連 target=_blank／rel 一起失去）；選 data 屬性不選 .ext（後台可改名、<a> 也會被加）*/
  & svg[data-extlink-placement] {
    display: none;
  }

  &:hover,
  &:focus {
    color: #fff;
    background-color: var(--cet-primary-dark);
    text-decoration: none;
  }
}

/*ANCHOR - Breadcrumb 麵包屑 */
.block-system-breadcrumb-block {
  margin-bottom: 24px;
}

ol.breadcrumb {
  display: flex;
  flex-wrap: nowrap;             /* 整列不掉行，過長標題交給最後一項自己內部折行 */
  align-items: flex-start;       /* 上方對齊，不隨最後一項折行後變高而置中 */
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;                 /* .fig 無明確字級標註，估計值 */
  & .breadcrumb-item {
    display: flex;
    align-items: flex-start;       /* 標題過長換行時 "›" 對齊首行，不隨多行內容垂直置中 */
    gap: 8px;
    flex-shrink: 0;                /* 預設不壓縮，維持原始寬度，只有最後一項會被壓縮折行 */

    &:has(a:empty) { display: none; }  /* 濾掉 Drupal 核心產生的空白節點（如 /node）*/

    &:last-child {
      flex-shrink: 1;               /* 只有最後一項（目前頁標題）可壓縮並自己內部折行 */
      min-width: 0;                 /* 巢狀 flex 預設 min-width:auto 會撐開不讓文字換行，歸零讓過長標題正常折行 */
    }

    & + .breadcrumb-item::before {
      content: '>';
      flex-shrink: 0;
    }
    & a {
      color: var(--cet-gray-700);
      text-decoration: none;
    }
    &:first-child a{
      font-size: 0;
      color: transparent;
      &::before{
        content: '';
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-top: 5px;    /* font-size:0 讓連結行高歸零、頂端貼齊；文字有行距留白，微調對齊文字視覺起點 */
        background: url(images/icon-home.svg) no-repeat center / contain;
      }
    }
  }

}

/*!SECTION */

/*SECTION - 表單 Form（電子報訂閱）*/

/*ANCHOR - 電子報訂閱表單（.newsletter）：白底輸入框＋主綠訂閱鈕並排、圓角 4（設計稿 484×36）；表單本體在 block_content 的 body 欄位 */
.newsletter {
  display: flex;
  gap: 8px;                                       /* input/button 分離 */
  width: 100%;
  max-width: 484px;

  & .newsletter__email {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #D0D0D0;
    border-radius: 4px;                           /* 四角都圓 */
    font-size: var(--cet-fs-body);
    color: var(--cet-gray-900);
    background: var(--cet-white);

    &::placeholder { color: #9CA3AF; }

    &:focus {
      outline: none;
      border-color: var(--cet-primary);
    }
  }

  & .newsletter__submit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    height: 40px;
    padding: 0 22px;
    border: 0;
    border-radius: 4px;                           /* 四角都圓 */
    background: var(--cet-primary);
    color: var(--cet-white);
    font-size: var(--cet-fs-body);
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease;

    &:hover,
    &:focus { background: var(--cet-primary-dark); }

    /* 右上箭頭 ↗ */
    &::after {
      content: "";
      width: 16px;
      height: 16px;
      background: url(images/icon-arrow-up-right-wite.svg) no-repeat center center;
      background-size: contain;
    }
  }
}

/*!SECTION */

/*SECTION - 區塊 Block（block__title / 分享按鈕 / CTA 區塊）*/

/*ANCHOR - block__title 標題：左對齊、上方短粗線（線寬=文字寬）*/
.block-title {
  width: fit-content;
  margin-block: 0 24px;
  padding-top: 4px;
  border-top: 2px solid;                 /* 線色=字色（currentColor）；設計稿 2px */
  font-size: var(--cet-fs-h3);
  font-weight: 700;                      /* 段落標一律 700 */
  line-height: 1.4;
  color: var(--cet-primary-dark);
}

/*ANCHOR - NETivism Share block（story/press_release 內頁分享按鈕）：覆蓋模組預設的 40×40 品牌色圓為 26×26 outline */
.block-netivism-share {
  margin-bottom: 24px;
  & .netivism-share-container {
    justify-content: flex-start;
    align-items: center;
    gap: 12px;

    &::before {
      content: "分享";
      color: var(--cet-gray-900);
      font-size: var(--cet-fs-h4);
    }

    & .netivism-share-list {
      gap: 6px;
      margin-bottom: unset;

      & .netivism-share-btn {
        width: 36px;
        height: 36px;
        border: 0;
        background: transparent no-repeat center / contain;
        transition: opacity .2s ease;

        &:hover { opacity: .7; }

        & .netivism-share-icon { display: none; }     /* 藏 fontawesome，改用 background-image svg */

        &.nsl-facebook  { background-image: url(images/soc-fb.svg); }
        &.nsl-x-twitter { background-image: url(images/soc-x.svg); }
        &.nsl-line      { background-image: url(images/soc-line.svg); }
      }
    }
  }
}

/*ANCHOR - 自訂區塊（CTA 區塊 cta_block / free_code）*/

/* CTA 區塊（通用，多頁重用）：淺綠面板＋深綠框；手機直排置中 → md 左圖/中文/右鈕 */
.block-content-cta_block {
  border: 1px solid var(--cet-primary-dark);
  border-radius: 8px;
  background: var(--cet-bg);
  padding: clamp(24px, 4vw, 36px) clamp(24px, 5vw, 44px);

  & .block-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;

    @media (min-width: 768px) {
      display: grid;
      grid-template-areas: "img title btns" "img body btns";
      grid-template-columns: auto 1fr auto;
      align-items: center;
      column-gap: clamp(24px, 5vw, 56px);
      row-gap: 8px;
      text-align: start;
    }
  }

  & .field--name-field-cta-image {
    /* 插畫在「卡片內邊 ↔ 文字左緣」之間置中：補一個等同 column-gap 的左內距，左右間距才相等 */
    @media (min-width: 768px) {
      grid-area: img;
      padding-inline-start: clamp(24px, 5vw, 56px);
    }

    & img {
      display: block;
      width: clamp(100px, 12vw, 120px);
      height: auto;
    }
  }

  & .field--name-field-cta-title {
    font-size: var(--cet-fs-h3);
    font-weight: var(--cet-fw-medium);
    color: var(--cet-primary-dark);
    @media (min-width: 768px) { grid-area: title; align-self: end; }
  }

  & .field--name-field-cta-body {
    color: var(--cet-gray-800);
    @media (min-width: 768px) { grid-area: body; align-self: start; }

    & p { margin: 0; }
  }

  /*ANCHOR - CTA 連結按鈕（第 1 顆實心、其餘 outline；箭頭 icon 隨底色換色）*/
  & .field--name-field-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;                      /* 手機：鈕撐滿 */
    @media (min-width: 768px) { grid-area: btns; width: auto; }

    & .field__item a {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      height: 32px;

      /* 文字往右 6、往上 1（估計值）：左內距 16→22；padding-bottom 2 上移內容，箭頭再 top:1 抵銷回原位 */
      padding: 0 16px 2px 22px;
      border: 1px solid var(--cet-primary-dark);
      border-radius: 4px;
      background: var(--cet-white);
      color: var(--cet-primary-dark);
      font-size: var(--cet-fs-body);
      text-decoration: none;

      &::after {
        content: "";
        position: relative;
        top: 1px;                     /* 抵銷 padding-bottom 造成的上移，箭頭維持原位 */
        width: 20px;
        height: 20px;
        background: url(images/icon--arrow-up-right.svg) no-repeat center;
      }

      &:hover,
      &:focus {
        border-color: var(--cet-primary);
        background: var(--cet-primary);
        color: #fff;

        &::after { background-image: url(images/icon-arrow-up-right-wite.svg); }
      }
    }

    /* 第 1 顆＝實心主鈕 */
    & .field__item:first-child a {
      border-color: var(--cet-primary);
      background: var(--cet-primary);
      color: #fff;

      &::after { background-image: url(images/icon-arrow-up-right-wite.svg); }

      &:hover,
      &:focus {
        border-color: var(--cet-primary-dark);
        background: var(--cet-primary-dark);
      }
    }
  }
}

/*!SECTION */

/*SECTION - Views（pager / exposed filter）*/

/*ANCHOR - Pager 分頁 */

/* view pager（ul.pagination > li.page-item > .page-link）：上下頁貼兩端、數字置中、當前頁頂 2px 綠線；⚠ mobile 只有「上一頁／當前頁／下一頁」，tablet/desktop 是完整數字群＋兩端箭頭 */
.pager,
.pagination {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(4px, 1.5vw, 12px);
  margin-top: 48px;
  padding: 0;
  list-style: none;

  /* 全斷點置中：上/下頁絕對定位貼兩端，中間永遠是頁碼群（手機只留當前頁）*/
  justify-content: center;

  /* 隱藏 Drupal 多出的首頁 «/末頁 »（設計稿無；zh-hant title 為固定字串）*/
  & .page-item:has(.page-link[title*="第一頁"]),
  & .page-item:has(.page-link[title*="最後一頁"]) {
    display: none;
  }

  /* 數字頁碼與省略號：手機只留「當前頁」那一顆——390 寬放不下 10 個項目，絕對定位的「下一頁」會壓到「9」與「…」上面 */
  & .page-item {
    display: none;
    @media (min-width: 768px) { display: list-item; }
  }
  & .page-item.active { display: list-item; }

  /* 清 Bootstrap 的邊框/圓角/底色/focus 陰影（.page-item .page-link 才壓得過 BS）；頂部留 2px 透明線與當前頁等高 */
  & .page-item .page-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border: 0;
    border-top: 2px solid transparent;
    border-radius: 0;
    color: var(--cet-gray-600);
    font-size: var(--cet-fs-h4);
    line-height: 1.5;
    text-decoration: none;
    background: transparent;
    box-shadow: none;

    &:hover,
    &:focus {
      color: var(--cet-primary);
      background: transparent;
    }
  }

  /* 當前頁：頂綠線＋深字；background 明寫才壓過 Bootstrap 藍底 */
  & .page-item.active .page-link {
    border-top-color: var(--cet-primary);
    color: var(--cet-gray-900);
    background: transparent;
  }

  /* 上/下頁絕對定位貼兩端 → 頁碼永遠置中，不受 prev/next 有無影響 */
  & .page-item:has([rel="prev"]),
  & .page-item:has([rel="next"]) {
    display: list-item;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  & .page-item:has([rel="prev"]) { left: 0; }
  & .page-item:has([rel="next"]) { right: 0; }

  /* 「上一頁／下一頁」文字只在手機出現，≥768 只留箭頭（::before/::after 用 px 定尺寸）；⚠ 選取器要帶 .page-item 才贏過上面的字級 */
  & .page-item .page-link[rel="prev"],
  & .page-item .page-link[rel="next"] {
    @media (min-width: 768px) {
      gap: 0;
      font-size: 0;
    }
  }

  /* 上/下頁箭頭：重用 icon-arrow-right.svg（原色 #C0C0C0）；上一頁翻轉成左向 */
  & [rel="prev"]::before,
  & [rel="next"]::after {
    content: "";
    width: 20px;
    height: 20px;
    background: url(images/icon-arrow-right.svg) no-repeat center;
  }

  & [rel="prev"]::before { transform: scaleX(-1); }
}

/*ANCHOR - Exposed filter 篩選列（BEF Links 頁籤，通用、跨 view 重用）*/

/* better_exposed_filters Links widget（ul > li > a.bef-link）：純文字頁籤、選取項底部 2px 綠線 */

/* .bef-exposed-form 預設 display:flex（row）、子項 .form-item 不會自動撐滿 → 底線變成只有內容寬 */
.bef-exposed-form {
  & > .form-item { flex: 1; }
}

.bef-links {
  position: relative;   /* 左右捲動箭頭的定位基準 */

  /* 塞不下時整列橫向滑動、不換行；⚠ 必須寫雙值 auto hidden（.bef-link 的 -1px margin 讓內容高 1px，單寫 overflow-x 會變成可上下滑）*/
  & ul {
    display: flex;
    flex-wrap: nowrap;
    overflow: auto hidden;
    scrollbar-width: none;
    gap: clamp(16px, 4vw, 40px);
    padding: 0 0 1px;  /* 吸收 .bef-link 的 margin-bottom:-1px，否則 overflow hidden 會裁掉選取項綠線的最後 1px */
    margin: 0;
    list-style: none;
    border-bottom: 1px solid var(--cet-gray-300);

    & > li { flex: none; }
  }

  & .bef-link {
    display: inline-block;
    padding-block: 12px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--cet-gray-600);
    text-decoration: none;

    &:hover,
    &:focus { color: var(--cet-gray-900); }
  }

  & .bef-link--selected {
    border-bottom-color: var(--cet-primary);
    color: var(--cet-gray-900);
  }

  /*ANCHOR - 左右捲動箭頭：塞不下時由 custom.js 插入兩顆 button，捲到頭/尾各自 hidden；圖重用 icon-arrow-right.svg，往前的翻轉 */
  & .bef-scroll-btn {
    position: absolute;
    top: 0;
    bottom: 1px;                 /* 讓開 ul 的 1px 底線，箭頭底不壓線 */
    width: 32px;
    padding: 0;
    border: 0;
    background: var(--cet-white);
    cursor: pointer;

    &::before {
      content: "";
      display: block;
      width: 20px;
      height: 20px;
      margin-inline: auto;
      background: url(images/icon-arrow-right.svg) no-repeat center;
    }
  }

  & .bef-scroll-btn--prev {
    left: 0;
    &::before { transform: scaleX(-1); }
  }

  & .bef-scroll-btn--next { right: 0; }
}

/*!SECTION */

/*SECTION - Entity Reusable Components */

/*ANCHOR - Responsive utility：.mobile 只在 <992 顯示、.desktop 反之（block_class 加在 block wrapper）*/
.mobile {
  @media (min-width: 992px) { display: none; }
}
.desktop {
  display: none;
  @media (min-width: 992px) { display: revert; }
}

/*ANCHOR - full-width（--sbw＝scrollbar 寬，由 custom.js 設定；扣除後內容置中不偏移）*/
.full-width {
  width: calc(100vw - var(--sbw, 0px));
  margin-inline: calc((100% - 100vw + var(--sbw, 0px)) / 2);
}

/*ANCHOR - 文字截斷 line-clamp（.trim-N）*/
[class*="trim-"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trim-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.trim-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.trim-4 { -webkit-line-clamp: 4; line-clamp: 4; }

/*ANCHOR - 卡片格線 */
.grid--2-columns ul.d-grid,
.grid--3-columns ul.d-grid {
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: 1fr;
  margin-block: 0;               /* Bootstrap reboot 給 ul 的 margin-bottom:1rem，.list-unstyled 不會清；留著會疊在 section 間距上 */
  & > li{
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--cet-white);
        border-radius: 4px;            /* 全站卡片圓角統一 4px（設計稿）*/

        /* 整張卡可點：標題連結長出覆蓋全卡的偽元素（Views 無法把整卡包進 <a>）；tag／下載連結浮上層，分類標籤刻意不提升 */
        position: relative;

        /* ⚠ 用 ::before 不用 ::after：議題頁「我們的行動」卡的箭頭掛在 .entity-title a::after，會撞車 */
        & .entity-title > a::before {
          content: "";
          position: absolute;
          inset: 0;
          z-index: 1;
        }

        & :is(.entity-tags, .entity-download) a {
          position: relative;
          z-index: 2;
        }

        /* hover：不位移、整卡變淡；例外＝.entity-badge 與 .views-field-field-keyword 維持原色 */
        & > .views-field,
        & .entity-img img { transition: opacity .2s ease; }

        &:hover {
          & > .views-field:not(.views-field-field-newimage, .views-field-field-keyword) { opacity: .55; }   /* .55 為估計值 */

          /* story 系列只淡 <img>；⚠ 別對 .entity-img 整層套（badge 是子層會跟著淡）、別欄位與內部同時套（疊乘過淡）*/
          & > .views-field-field-newimage .entity-img img { opacity: .55; }
        }

        /* 標題 hover 只變淡、不變綠 */
        & .entity-title a:is(:hover, :focus) { color: inherit; }

        /* tag 頂端跨卡同高：≥768 標題保留 2 行、摘要 3 行，tag 起點恆定；⚠ .list-subgrid 的列表不吃這組（見下方 ANCHOR）*/
        @media (min-width: 768px) {
          & .entity-title { min-height: 2lh; }
          & .entity-body.trim-3 { min-height: 3lh; }
        }
    }
}

.grid--2-columns ul.d-grid {
  @media (min-width: 768px) { grid-template-columns: repeat(2, 1fr); }
}

.grid--3-columns ul.d-grid {
  @media (min-width: 768px) { grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 992px) { grid-template-columns: repeat(3, 1fr); }
}

/*ANCHOR - 卡片跨卡對齊 subgrid（opt-in：view wrapper 加 list-subgrid，欄位要登記進下面的列號映射）；⚠ 欄位少的卡套了反而破版；⛔ 不靠自動排列、不用 :has() 判列號（Firefox AJAX 後不重算）*/
.list-subgrid ul.d-grid > li {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;                /* ＝映射表最大列號；欄位較少的卡片，尾端空列高度 0 */
  row-gap: 0;                      /* subgrid 預設把外層 gap 當成卡內列距 → 歸零，卡內間距仍由各 .entity-* 的 margin 控制 */

  /* subgrid 接手精確對齊 → 撤掉通用卡片那組「保留固定行數」的近似對齊 */
  & .entity-title,
  & .entity-body.trim-3 { min-height: 0; }

  /* 1｜圖（分類 chip 已由 Views rewrite 併進此欄位）；⛔ 別把 chip 拉成獨立 grid item（撐開圖片列）、別用 views_fieldsets 包（純圖片會被當空內容整組不輸出）*/
  & > .views-field-field-newimage { grid-row: 1; }

  /* 2｜標題 */
  & > .views-field-title { grid-row: 2; }

  /* 3｜摘要／活動 meta 行；⚠ 內文欄位各 view 名稱不同（body／field_comp_body），漏登記會被塞進列 1 */
  & > .views-field-body,
  & > .views-field-field-comp-body,
  & > .views-field-fieldset,
  & > .views-field-field-activity-place { grid-row: 3; }

  /* 4｜關鍵字標籤／日期 */
  & > .views-field-field-keyword,
  & > .views-field-field-date-activity { grid-row: 4; }

  /* 5｜時間（活動卡）*/
  & > .views-field-field-date-activity-1 { grid-row: 5; }
}

/* 文章類卡只用到列 4：span 5 會把空軌＋row-gap 算進卡高（name-story／name-story-list／name-related-reading）*/
:is(.name-story, .name-story-list, .name-related-reading) ul.d-grid > li {
  grid-row: span 4;
}

/*ANCHOR - 卡片欄位（.entity-*，通用、跨 view 重用）*/
.entity-img {
  border-radius: 4px;              /* 圖 4 角圓；上邊與 li 的 4px clip 重合、下邊獨立 */
  overflow: hidden;

  & img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.entity-badge {
  width: fit-content;              /* badge wrapper 非 flex item，align-self 無效 → 用 fit-content 收寬 */
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 0 4px 0 4px;      /* 右上＋左下對角圓（設計稿 4px）；左邊靠 li 邊 clip */
  font-size: 13px;                 /* .fig blog-post chip 量測值（非 Style token）*/
  line-height: 18px;
  color: #fff;
  background: var(--cet-gray-800);

  & a {
    color: inherit;
    text-decoration: none;
  }

  /* 內容為 rendered term（issue_badge view mode）→ field wrapper 不佔行 */
  & .field,
  & .field__item { display: inline; }

  &:empty { display: none; }
}

/* 有圖卡：分類 chip 疊圖左下（貼齊圖底左緣；26 = chip 高）*/
[class*="grid--"] li:has(.entity-img img) .entity-badge {
  position: relative;
  margin-top: -26px;
}

/* 多議題 badge（Views 端 element_class 加 --multi、內層 issue_badge 渲染 parent 議題）：容器透明、chip 移到每個 .field__item；已知限制：同議題會重複 */
.entity-badge--multi {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  background: none;
  border-radius: 0;

  & .field { display: contents; }

  & .field__item {
    padding: 4px 10px;
    border-radius: 0 4px 0 4px;
    background: var(--cet-gray-800);
  }
}

/* 選了特定分類的分頁不顯示分類標籤；.is-filtered 由 custom.js 標記；⛔ 別改回 :has(.bef-link--selected)（Firefox AJAX 後不重算）*/
.name-story-list.is-filtered .entity-badge { display: none; }

.entity-title {
  margin: 16px 0 0;
  font-size: 18px;                 /* .fig blog-post title 量測值（非 Style token）*/
  font-weight: var(--cet-fw-medium);
  line-height: 1.4;
  color: var(--cet-gray-900);

  & a {
    color: inherit;
    text-decoration: none;

    &:hover,
    &:focus { color: var(--cet-primary); }
  }
}

.entity-body {
  margin: 12px 0 0;
  font-size: var(--cet-fs-h4);
  line-height: 1.7;
  color: var(--cet-gray-700);

  & p { margin: 0; }

  /* 摘要整段可點進文章（Views 的 make_link 在 .entity-body 內包一層 <a>）。外觀維持內文：不吃連結色、不加底線，hover 由卡片整體的變淡效果負責 */
  & a {
    color: inherit;
    text-decoration: none;
  }
}

.entity-link {
  margin: 0;

  & a {
    font-size: var(--cet-fs-desc);
    color: var(--cet-primary);
    text-decoration: none;

    &:hover,
    &:focus { text-decoration: underline; }
  }
}

.entity-location {
  margin: 12px 0 0;
  font-size: var(--cet-fs-desc);
  color: var(--cet-gray-700);

  &:empty { display: none; }
}

/* 關鍵字標籤 pill 組（白底細框膠囊）*/
.entity-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;

  & a {
    padding: 4px 8px;
    border: 1px solid var(--cet-primary-dark);
    border-radius: 999px;
    font-size: 12px;               /* .fig tag 母版 60×20（非 Style token）*/
    line-height: 20px;
    color: var(--cet-primary-dark);
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease;

    /* hover 轉實心 */
    &:hover,
    &:focus {
      color: #fff;
      background-color: var(--cet-primary-dark);
    }
  }

  &:empty { display: none; }
}

/* 活動卡 meta 行 v1（首頁 home_latest_activity：view rewrite 併入 span.entity-place）*/
.entity-place {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;                 /* 標題→meta 行 8（.fig）*/
  font-size: var(--cet-fs-h4);     /* 同 .views-field-fieldset：設計稿 event-post meta 14px */
  color: var(--cet-gray-700);

  & .entity-tags { margin: 0; }
  & .entity-format { display: inline; }
}

/* 活動卡 meta 行 v2（activity_list：Views fieldset 包分類＋地點＋形式，內部 .d-flex.gap-3 排位）*/
.views-field-fieldset {
  margin-top: 12px;                /* 標題→meta 行 */
  font-size: var(--cet-fs-h4);     /* 地區＋形式：設計稿 14px */
  color: var(--cet-gray-700);

  & > .field-content { display: block; }

  /* badge 不連分類頁 → 膠囊樣式套在 .entity-tags 自身（通用款綁 & a 且帶 hover 實心，此處無連結）*/
  & .entity-tags {
    margin: 0;                     /* 撲掉外部 .entity-tags margin-top，避免推歪 flex baseline */
    padding: 4px 8px;
    border: 1px solid var(--cet-primary-dark);
    border-radius: 999px;
    font-size: 12px;
    line-height: 20px;
    color: var(--cet-primary-dark);
  }

  /* 形式／地點連內頁：維持灰字、hover 底線提示 */
  & :is(.entity-place-raw, .entity-format-raw) a {
    color: inherit;
    text-decoration: none;

    &:hover { text-decoration: underline; }
  }

  /* 空的 place / format 完整隱藏（避免 flex gap 佔位）*/
  & .views-field:has(.entity-place-raw:empty),
  & .views-field:has(.entity-format-raw:empty) { display: none; }
}

.entity-datetime {
  margin-top: 12px;                /* meta 行底→date（.fig y53→y65）*/
  font-size: var(--cet-fs-desc);
  color: var(--cet-gray-700);
}

.entity-date {
  margin-top: 12px;                /* meta 行底→date（.fig y53→y65）*/
  font-size: var(--cet-fs-h4);
  font-weight: var(--cet-fw-medium);
  line-height: 1.6;
  color: var(--cet-gray-700);
  white-space: nowrap;

  /* 列表卡日期連內頁（內頁 meta 無連結、不受影響）*/
  & a {
    color: inherit;
    text-decoration: none;

    &:hover { text-decoration: underline; }
  }
}

.entity-time {
  font-size: var(--cet-fs-h4);
  font-weight: var(--cet-fw-medium);
  line-height: 1.6;
  color: var(--cet-gray-700);
  white-space: nowrap;

  /* 列表卡時間同日期連內頁 */
  & a {
    color: inherit;
    text-decoration: none;

    &:hover { text-decoration: underline; }
  }
}

.entity-download {
  display: flex;
  align-items: center;

  & a {
    display: inline-flex;
    width: 16px;
    height: 16px;
    font-size: 0;
    color: transparent;
    background: url(images/icon-download.svg) no-repeat center;
  }
}

/*!SECTION */

/*SECTION - List Page 單元頁  */

/*ANCHOR - 列表頁上下留白（設計稿 header 下緣→內容、內容→頁尾都是 64；base theme 給 24）*/
body:is(.page-view-story-list, .page-view-activity-list, .page-view-press-release-list) {
  & #main.container {
    padding-block: 64px;
  }
}

/*ANCHOR - Events 活動一覽 primary tabs（Drupal local tasks，Bootstrap 5 .nav-tabs override）*/
nav.tabs {
  margin-block: 24px 32px;

  & .nav.nav-tabs {
    border-bottom: 1px solid var(--cet-gray-300);
    gap: 32px;

    & .nav-item .nav-link {
      padding: 8px 4px;
      border: none;
      color: var(--cet-gray-500);
      background: transparent;

      &:hover { color: var(--cet-primary-dark); }

      &.active {
        color: var(--cet-primary-dark);
        border-bottom: 2px solid var(--cet-primary-dark);
        margin-bottom: -1px;         /* 蓋過 .nav-tabs 底線接縫 */
      }
    }
  }
}

/*ANCHOR - News 新聞稿 */

/* 條列式：li 由 View row_class 的 d-flex 排「標題左／日期右」，這裡補分隔線與字級（估計值）*/
.name-news {
  & .view-content .list-unstyled > li {
    padding-block: 8px;
    border-bottom: 1px solid var(--cet-gray-500);

    /* 標題與日期於上下線段間置中；row_class 的 .align-items-start 帶 !important，改由子層 align-self 勝出 */
    & > .views-field { align-self: center; }
  }

  & .entity-title {
    margin: 0;
    font-size: var(--cet-fs-body);
    font-weight: var(--cet-fw-regular);
    line-height: 1.6;
  }

  & .entity-date { margin-top: 0; }   /* 撲掉卡片版的 12px，否則日期被推離中線 */
}

/*ANCHOR - 財報與徵信 */

.name-report {
  & .list-unstyled > li {
    border-bottom: 1px solid var(--cet-gray-300);
    padding-block: .5em;

    &:last-child { border-bottom: 0; }
  }

  & .entity-title {
    margin: 0;
    font-size: var(--cet-fs-body);
    font-weight: var(--cet-fw-regular);
  }
}

/*!SECTION */

/*SECTION - Node 內頁 */

/*ANCHOR - node layout */

.path-node:not(.node--type-landing) {
  #main.container {
    max-width: 744px; /* 720+24 padding-inline */
  }
}

.block-page-title-block h1 {
  margin-bottom: 40px;
  font-size: var(--cet-fs-h2);
  font-weight: var(--cet-fw-light);   /* 大標題＝Noto Sans TC Light 28pt（列表頁／議題頁／行動頁同標）*/

  /* 文章標題 電腦 30／手機 28（story／activity／press_release／page 四內頁；列表頁大標維持 28）*/
  body:is(.node--type-story, .node--type-activity, .node--type-press-release, .node--type-page) & {
    font-size: clamp(28px, 0.463vw + 24.44px, 30px);
  }
}

/*ANCHOR - 關鍵字標籤結果頁標題（page-vocabulary-keyword：term canonical 頁補「議題觀點庫」大標，term 名稱降級為 # 標籤樣式）*/
body.page-vocabulary-keyword #block-page-title {
  &::before {
    content: '議題觀點庫';
    display: block;
    margin-bottom: 40px; /* .fig 量測：議題觀點庫→#標籤 間距 */
    font-size: var(--cet-fs-h2);
    font-weight: var(--cet-fw-light);   /* 同 .block-page-title-block h1：大標題 Light 28pt */
    color: var(--cet-gray-900);
  }

  & h1 {
    display: flex;               /* field--name-name 是 block div，::before 需靠 flex 才不會被擠到自己一行 */
    align-items: baseline;
    gap: 4px;
    margin-bottom: 40px; /* .fig 量測：標題區→卡片區 間距 */
    font-size: var(--cet-fs-h3);       /* 20pt（客戶指定）*/
    font-weight: var(--cet-fw-medium);
    color: var(--cet-gray-700);

    &::before { content: '#'; }
  }
}

/*ANCHOR - 代表圖 field_newimage（內頁上方純圖、無圖說、直角；node 通用）*/
.path-node .field--name-field-newimage {
  margin-bottom: 40px;

  /* barrio field.css 給 .node .field--type-image float:left，外層沒清浮動會塌陷成 0；複合 class 提高特異度不靠載入順序 */
  &.field--type-image { float: none; }

  & img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/*ANCHOR - 內頁 meta 上方間距 16：h1 的 40 ＋ base theme .node__content 的 10 一起處理；無副標時同樣適用；只作用在有 meta view 的內頁 */
body:has(.name-meta) {
  & .block-page-title-block h1 { margin-bottom: 16px; }
  & .node__content { margin-top: 0; }
}

/*ANCHOR - 內頁 meta */
.name-meta {
  margin-bottom: 24px;
  color: var(--cet-gray-900);

  & .views-field-field-action-category { margin-top: 16px; } /* 副標題 → 議題分類列 16（.fig）*/
  & .views-field-field-keyword { margin-top: 24px; } /* 日期 → 關鍵字標籤，.fig 量測 24px（與 .entity-tags 自身 12px margin collapse 取大值）*/

  & .entity-lable,
  & .node-meta-date {
    font-size: var(--cet-fs-h4);
    line-height: 1.8;
  }

  & .entity-term {
    margin: 0;
    gap: 0;
    font-size: var(--cet-fs-h4);       /* wrapper line-box 對齊 .entity-lable，讓 flex align-items:center 不錯位 */
    line-height: 1.8;

    /* 多值經 cet_issue_from_action formatter 去重後直接吐 .field__item（沒有 .field 層），頓號改由直接子層判斷；.field 規則留給 issue_badge view mode */
    & .field,
    & .field__item { display: inline; }

    & a { color: inherit; }

    & .field__item::after { content: '、'; }
    & > .field__item:last-child::after,
    & .field:last-child .field__item:last-child::after { content: none; }
  }
}

/*ANCHOR - 活動內頁 activity：meta 由 activity_meta view 出（block_1 日期/時間/形式/地點、block_2 報名或側記）；三斷點縱向間距相同不設斷點 */
body.node--type-activity {
  /* 標題→日期緊貼，覆蓋內頁通用的 40px */
  & .block-page-title-block h1 { margin-bottom: 12px; }

  & .name-activity-meta {
    font-size: var(--cet-fs-h4);
    line-height: 1.6;

    /* 撲掉卡片版 .entity-date 的 12px（內頁行距一律交給 line-height）*/
    & .entity-date,
    & .entity-time {
      margin-top: 0;
      color: var(--cet-gray-900);
    }

    & .entity-meta-item { color: var(--cet-gray-700); } /* 設計稿 #5D5D5D */
  }

  /*ANCHOR - 地址：Google Map 外連，補右上箭頭（深色版 icon--arrow-up-right.svg）*/
  & .views-field-field-venue a {
    color: inherit;
    text-decoration: none;

    &::after {
      content: "";
      display: inline-block;
      width: 16px;
      height: 16px;
      vertical-align: -3px;
      background: url(images/icon--arrow-up-right.svg) no-repeat center / contain;
    }
  }

  /*ANCHOR - 條件按鈕（meta 下方與內文下方各一顆，共用 a.cta）*/
  & .name-activity-action { margin-top: 20px; }

  /*ANCHOR - 區塊間距：內頁無代表圖（已自 LB 移除），原「按鈕→主圖 81」改由 body 區塊承接（按鈕→內文首元素；無按鈕時＝meta→內文）*/
  & .block-field-blocknodeactivitybody { margin-top: 81px; }
  & #action { margin-top: 85px; }
}

/*ANCHOR - 附加檔案下載列表 */
.field--name-field-files {
  margin-top: 40px;

  &::before {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    margin-bottom: 16px;
    background: var(--cet-primary-dark);
  }

  & .field__label {
    margin-bottom: 16px;
    font-size: var(--cet-fs-h3);
    font-weight: var(--cet-fw-medium);
    color: var(--cet-primary-dark);
  }

  & table.table {
    width: 100%;
    margin: 0;
    border: 0;
  }

  & thead { display: none; }

  & tbody tr {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    border: 0;
    background: none;

    &:last-child { margin-bottom: 0; }

    &::after {
      content: '';
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      background: url(images/icon-download.svg) no-repeat center;
      margin-left: 1rem;
    }
  }

  & tbody td {
    padding: 0;
    border: 0;
    box-shadow: none;

    &:first-child { flex: 1; }
    &:nth-child(2) { display: none; }
  }

  & .file {
    padding: 0;
    background: none;

    & a {
      font-size: var(--cet-fs-body);
      color: var(--cet-primary-dark);
      text-decoration: none;
    }
  }
}

/*!SECTION */

/*SECTION - 分類模板頁（議題介紹 / 行動介紹：taxonomy term 驅動的 LB 版面）*/

/*ANCHOR - 議題介紹頁 section 縱向間距（.fig 三斷點相同）：全站 .layout 的 clamp 只有桌機湊得到設計值，本頁改定值；#main.container 的 padding 歸零 */
body.page-vocabulary-issue-category {
  & #main.container { padding-block: 64px 0; }   /* 上 64＝代表圖→麵包屑；下 0＝綠帶直接貼頁尾 */
  & #intro          { padding-block: 0 64px; }   /* 上 0：標題→內文的 40 由標題自身下距給 */
  & #actions        { padding-block: 64px; }
}

/*ANCHOR - 議題介紹頁 內文（description，首段視為副標）*/
#intro .field--name-description {
  & p:first-child {
    width: fit-content;                /* 上線與文字同寬（同 .block-title 邏輯）*/
    margin-bottom: 40px;
    padding-top: 4px;
    border-top: 2px solid;             /* 段落標線 2px、線色=字色 */
    font-size: var(--cet-fs-h3);
    font-weight: 700;                  /* 段落標 700 */
    color: var(--cet-primary-dark);
  }

  & p {
    color: var(--cet-gray-900);
    line-height: var(--cet-lh-body);
  }
}

/*ANCHOR - 議題介紹頁「我們的行動」/「至今的影響力」/CTA 共用 #actions section 內的區塊間距：.fig 三斷點皆 80 */
#actions .layout__region--content > * + * {
  margin-top: 80px;
}

/*ANCHOR - 議題介紹頁「我們的行動」/「至今的影響力」標題→內容間距（.fig 量測 24px，蓋掉 .block-title 母規則跑掉的間距）*/
.name-issue-actions .view-header,
.name-issue-influence .view-header {
  margin-bottom: 24px;
}

/*ANCHOR - 議題介紹頁 滿版代表圖（issue_hero views block @ highlighted region，只在 /category/* 顯示）*/
#block-cet-issue-hero {
  width: calc(100vw - var(--sbw, 0px));
  margin-inline: calc((100% - 100vw + var(--sbw, 0px)) / 2);

  /* Bootstrap5 .row 預設 margin-inline: -12px，在 full-width 無內距父層下會往左溢出 12px、產生水平捲軸 */
  & .view-content.row {
    --bs-gutter-x: 0;
    margin-inline: 0;
  }

  & img {
    display: block;
    width: 100%;
    height: auto;

    /* art direction 下 <img> 只有 fallback 的 2.5:1 尺寸屬性，手機載 1.63:1 會 CLS → 各斷點明寫比例；⚠ 值要跟 responsive style issue_banner_rwd 的 source 對齊 */
    aspect-ratio: 390 / 240;
    @media (min-width: 768px) { aspect-ratio: 1200 / 480; }
  }
}

/*ANCHOR - 議題介紹頁 我們的行動 卡片（View issue_actions；圖右下深色 label bar + 箭頭）*/
.name-issue-actions {
  & li {
    position: relative;
    border-radius: 8px;            /* 設計稿 8px（議題介紹頁卡片；非首頁那類 4px 帶標籤卡）*/
    overflow: hidden;
  }

  /* 綠標籤壓在圖上，跟著通用卡 hover 整欄變淡會透出底圖；特異度須壓過 .grid--3-columns 母規則 */
  & .grid--3-columns ul.d-grid.list-unstyled > li:hover > .views-field-name { opacity: 1; }

  /* 16:9 由 image style issue_action_card_* 焦點裁切；CSS 不設 aspect-ratio／object-fit 免兩層裁切 */

  & .entity-title {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 62.5%;
    height: 40px;
    margin: 0;
    border-top-left-radius: 8px;     /* 左上圓；右下由 li 8px clip */
    background: var(--cet-primary-dark);
    color: #fff;                     /* 容器層設白：通用卡 hover 的 a{color:inherit} 才不會繼承到外層墨色 */
    font-size: var(--cet-fs-body);
    font-weight: var(--cet-fw-regular);

    & a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      height: 100%;
      padding-inline: 12px;
      overflow: hidden;
      color: #fff;
      white-space: nowrap;
      text-overflow: ellipsis;

      &::after {
        content: '';
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        background: url(images/icon-outline.svg) no-repeat center;
      }
    }
  }
}

/*ANCHOR - 議題介紹頁 至今的影響力（View issue_influence；標題走 view header）*/
/* #actions section：「我們的行動」/「至今的影響力」/CTA 同在一個 full-width+bg-green section，共用連續色帶 */
/* 沿用 .grid--3-columns / .entity-title / .entity-body 既有原子化系統（卡片白底圓角已內建），只補 padding 與這裡專屬的標題色 */
.name-issue-influence {
  & .grid--3-columns ul.d-grid > li {
    padding: 24px;
    border-radius: 8px;              /* 設計稿 8px（議題介紹頁卡片）；通用 .grid--* 卡片是 4px，此處覆寫 */

    /* 這區的卡片不是連結，整卡變淡沒有對應的可點目標 → 關掉通用卡的 hover 變淡。特異度與通用規則同為 (0,5,2)、靠寫在後面勝出（通用在「卡片格線」ANCHOR）*/
    &:hover > .views-field { opacity: 1; }
  }

  & .entity-title {
    margin-top: 0;
    color: var(--cet-primary-dark);
  }

  & .entity-body {
    margin-top: 8px;
    font-size: var(--cet-fs-body);
    color: var(--cet-gray-900);

    & p { margin: 0; }
  }
}

/*ANCHOR - 行動介紹頁（body.page-vocabulary-action-category）*/
body.page-vocabulary-action-category {
  /* 隱藏系統預設麵包屑/標題（客戶已把麵包屑+標題拉進 LB 自己排版，避免重複）*/
  & #block-breadcrumbs,
  & #block-page-title {
    display: none;
  }

  /*ANCHOR - 行動介紹頁 section 縱向間距（.fig 三斷點相同）：全站 .layout 的 clamp 只有桌機湊得到，本頁改定值；⚠ .layout:not(#slide…) 是 (1,1,0)，要用 id 才蓋得過 */
  /* base theme 給 #main.container 上下各 24px，疊在 64 上會讓 header→hero 與 CTA→頁尾多出 24（.fig 皆 64）*/
  & #main.container    { padding-block: 0; }

  & #action-items      { padding-block: 64px; }        /* 綠帶內留白 */
  & #curations         { padding-block: 64px 40px; }
  & #related_reading,
  & #related_activities { padding-block: 40px; }
  & #cta               { padding-block: 40px 64px; }

  /* view 無結果時 block 已由 views 的 block_hide_empty 不渲染，但 LB section 自身仍會輸出、吃掉自己的上下 padding → 整段收掉 */
  & .layout:not(:has(.block)) { display: none; }

  /* 策展區被收掉時，它承擔的「綠帶後 64」交給下一個 section；#curations 那串特異度才壓得過上面的 id 規則 */
  & #curations:not(:has(.block)) + .layout { padding-top: 64px; }

  /*ANCHOR - 行動介紹頁 hero 雙欄（.fig：左文 400 / gap 40 / 右圖 640×360＝37:59，非 50-50；右欄代表圖 16:9 sticky）*/
  & #hero {
    /* .fig 只有 desktop 是左文右圖，tablet/mobile 上下堆疊；⛔ 別用 flex-direction: column（右欄會被 .container 的 width:100% 蓋掉、出血失效）*/
    padding-block: 64px;                 /* 上下 64（其他 section 的間距見上方對照表）*/
    gap: 40px;

    /* <992 兩欄各佔滿寬（base theme 自 768 給 flex-basis 50%，不蓋掉平板會變雙欄）*/
    & > .layout__region {
      flex-basis: 100%;
    }

    & > .layout__region--first {
      @media (min-width: 992px) { flex: 0 1 37%; }
    }

    & > .layout__region--second {
      /* ≥992 圖片向右出血：margin % 基準是 #hero 寬故掛 region；margin-left 歸零（.container 的 auto margin 會吃掉負 margin）、flex-grow 吃回釋出的空間 */
      @media (min-width: 992px) {
        flex: 1 1 0;                     /* basis 0＝按剩餘空間分配（auto 會被圖片內容寬撐到換行）；grow 1 讓 region 真的吃回負 margin 釋出的行內空間 */
        min-width: 0;
        margin-left: 0;
        margin-right: calc((100% - 100vw) / 2);
      }

      /* sticky 掛 region 直接子層：region 被 flex stretch 撐到左欄高（有滑動空間），block 以下到 img 全是內容高、掛 img 會零空間不動 */
      & > .block {
        @media (min-width: 992px) {
          position: sticky;
          top: 128px;    /* ＝照片自然起始位置，一開捲即定住零位移 */
        }
      }
    }

    & .layout__region--second img {
      display: block;
      width: 100%;
      border-radius: 8px;                /* <992（上文下圖、不出血）：四角皆圓 */
      /* 16:9 由 image style `action_hero_*` 焦點裁切 */

      @media (min-width: 992px) {
        max-width: 800px;                /* 客戶指定圖片最寬 800 */
        border-radius: 8px 0 0 8px;      /* 貼齊視窗右緣 → 右角直角 */
      }

      /* 撞到 800 上限不再貼邊 → 右角也要圓；臨界值＝564.8+(V−960)/2＝800 → V≈1430；⚠ 改 .container 寬或 hero 分欄比例要重算 */
      @media (min-width: 1431px) {
        border-radius: 8px;
      }
    }
  }
}

/*ANCHOR - 行動介紹頁 標題（term name field；系統 page-title 已隱藏，LB 內的 name field 補大標樣式）*/
#hero .field--name-name {
  margin-block: 24px 0;                /* 麵包屑→標題 24（.fig）*/
  font-size: var(--cet-fs-h2);         /* 28px（.fig title 5 字寬 140）*/
  font-weight: var(--cet-fw-medium);   /* Style 頁 H2=Regular，但設計稿視覺偏粗，用 500（推定）*/
  line-height: 1.4;
  color: var(--cet-gray-900);
}

/*ANCHOR - 行動介紹頁 議題分類標籤（.fig Tag 元件＝白底綠框膠囊，同卡片 .entity-tags 款；點擊前往議題介紹頁）*/
#hero .field--name-field-issue-category {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 24px 40px;             /* 標題→標籤 24、標籤→內文 40（.fig）*/

  & a {
    padding: 4px 12px;
    border: 1px solid var(--cet-primary-dark);
    border-radius: 999px;
    background: #fff;
    font-size: 12px;                   /* .fig tag 母版 5 字寬 60 */
    line-height: 20px;
    color: var(--cet-primary-dark);
    text-decoration: none;

    &:hover { background: var(--cet-bg); }
  }
}

/*ANCHOR - 行動介紹頁 內文（description）*/
#hero .field--name-description {
  color: var(--cet-gray-900);
  line-height: var(--cet-lh-body);

  & p + p { margin-top: 16px; }
}

/*ANCHOR - 行動介紹頁 關鍵個案（設計稿：白底直角框卡 padding 16、標題 16px primary-dark＋book icon 24、內文 gray-800）*/
#hero .field--name-field-key-case {
  margin-top: 40px;                    /* 內文→關鍵個案 40（.fig）*/
  padding: 16px;
  border: 1px solid var(--cet-gray-600);   /* 設計稿：直角、1px #838383 外框、卡內無底色 */

  & h3 {
    display: flex;
    align-items: center;
    gap: 10px;                         /* .fig icon 24 → 文字 x=34 */
    width: auto;                       /* 蓋掉 editor.css .text-formatted 內文小標的 fit-content＋黑上線 */
    margin: 0 0 10px;
    padding-top: 0;
    border-top: 0;
    font-size: var(--cet-fs-body);     /* 16px（.fig 4 字寬 64）*/
    font-weight: var(--cet-fw-medium);
    color: var(--cet-primary-dark);    /* .fig #55716C */

    &::before {
      content: '';
      flex: 0 0 24px;
      height: 24px;
      background: url(images/icon-book.svg) no-repeat center;
    }
  }

  & p {
    margin: 0;
    font-size: var(--cet-fs-body);
    line-height: var(--cet-lh-body);
    color: var(--cet-gray-800);        /* .fig #454545 */
  }

  & p + p { margin-top: 12px; }
}

/*ANCHOR - 行動介紹頁 地球公民的行動（View action_item_list）：#FAFAFA 卡、圖佔 1/3 滿高貼邊、左右交替 */
/* ⚠ grid 屬性設在 li 的直接子層 .views-field-*（.entity-* 是孫層、設了無效）；圖在格內絕對定位，不參與列高 */
.name-action-items {
  & .view-header { margin-bottom: 24px; }

  & .list--media > ul.list-unstyled {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  & li {
    background: var(--cet-white);
    border-radius: 8px;
    overflow: hidden;

    @media (min-width: 768px) {
      display: grid;
      grid-template-columns: 1fr 2fr;   /* 圖 320 : 文 640（.fig）*/
      grid-template-rows: auto 1fr;
      min-height: 200px;
    }
  }

  & .views-field-field-comp-image {
    @media (min-width: 768px) {
      grid-area: 1 / 1 / 3 / 2;
      position: relative;
    }
  }

  /* 圖貼卡片邊：圓角由 li 的 8px + overflow:hidden 負責，圖自己不帶 .entity-img 的 4px */
  & .entity-img {
    border-radius: 0;
    @media (min-width: 768px) { position: absolute; inset: 0; }

    & img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      aspect-ratio: 4 / 3;              /* 設計稿手機版 342×256；桌機被 absolute 拉滿、不生效 */
    }
  }

  & .views-field-title {
    padding: 24px 24px 0;
    @media (min-width: 768px) { grid-area: 1 / 2 / 2 / 3; }

    & .entity-title {
      margin: 0;
      font-size: var(--cet-fs-h3);      /* 20px（.fig 標題框高 24 ÷ 行高 1.2）*/
    }
  }

  & .views-field-field-comp-body {
    padding: 8px 24px 24px;
    @media (min-width: 768px) { grid-area: 2 / 2 / 3 / 3; }

    & .entity-body {
      font-size: var(--cet-fs-body);
      line-height: 1.5;                 /* .fig 內文 5 行 120px */
      color: var(--cet-gray-900);
    }
  }

  /* 偶數卡圖文互換（欄寬定義跟著換邊）*/
  & li:nth-child(even) {
    @media (min-width: 768px) {
      grid-template-columns: 2fr 1fr;

      & .views-field-field-comp-image { grid-area: 1 / 2 / 3 / 3; }
      & .views-field-title { grid-area: 1 / 1 / 2 / 2; }
      & .views-field-field-comp-body { grid-area: 2 / 1 / 3 / 2; }
    }
  }
}

/*ANCHOR - 行動介紹頁 策展圖文區（View curation_list；.fig：一列一卡 左圖 460×259 右文、卡間 80、按鈕 outline）*/
.name-curations {
  & .grid--2-columns ul.d-grid {
    grid-template-columns: 1fr;         /* .fig 一列一卡（覆蓋 View 帶的 2 欄格線）*/
    gap: 80px;                          /* .fig 三斷點皆 80 */
  }

  /* 左圖右文（.fig 圖 460/960＝48%、gap 40、文字垂直置中）；上下 1fr 空列吸收圖片高度差，auto 文字列不被跨列圖撐高 */
  /* selector 疊全鏈：通用卡系統 .grid--2-columns ul.d-grid > li（flex/白底/圓角/hover 浮起）specificity 較高，須蓋掉 */
  & .grid--2-columns ul.d-grid > li {
    background: none;
    border-radius: 0;
    overflow: visible;

    /* 整卡不變淡：卡片本身不可點，只有「閱讀更多」按鈕是連結，該按鈕自己的 hover 變色（見下方 .entity-link）不受影響 */
    &:hover {
      transform: none;
      & > .views-field { opacity: 1; }
    }

    @media (min-width: 768px) {
      display: grid;
      grid-template-columns: 48% 1fr;
      grid-template-rows: 1fr auto auto auto 1fr;
      column-gap: 40px;
    }
  }

  & .views-field-field-comp-image {
    @media (min-width: 768px) { grid-area: 1 / 1 / 6 / 2; }

    & img {
      display: block;
      width: 100%;
      border-radius: 8px;               /* 設計稿 8px（策展圖文區左圖，屬「圖片」類）*/
      /* 16:9 由 image style `curation_card_*` 焦點裁切 */
    }
  }

  & .views-field-title { @media (min-width: 768px) { grid-area: 2 / 2 / 3 / 3; } }
  & .views-field-field-comp-summary { @media (min-width: 768px) { grid-area: 3 / 2 / 4 / 3; } }
  & .views-field-field-comp-link { @media (min-width: 768px) { grid-area: 4 / 2 / 5 / 3; } }

  & .entity-title {
    margin: 0;
    font-size: var(--cet-fs-h3);
  }

  & .entity-body {
    margin-top: 8px;
    color: var(--cet-gray-900);
  }

  & .entity-link {
    margin-top: 16px;

    /* 與全站一致：用 CTA 區塊 outline 鈕同款（4px 角、32 高、0 16 內距、箭頭 20、hover 轉實心綠）*/
    & a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      height: 32px;
      padding: 0 16px;
      border: 1px solid var(--cet-primary-dark);
      border-radius: 4px;
      background: var(--cet-white);
      color: var(--cet-primary-dark);
      font-size: var(--cet-fs-body);
      text-decoration: none;

      &::after {
        content: '';
        width: 20px;
        height: 20px;
        background: url(images/icon--arrow-up-right.svg) no-repeat center;
      }

      &:hover,
      &:focus {
        border-color: var(--cet-primary);
        background: var(--cet-primary);
        color: #fff;

        &::after { background-image: url(images/icon-arrow-up-right-wite.svg); }
      }
    }
  }
}

/*ANCHOR - 行動介紹頁 延伸閱讀／相關活動（沿用既有 grid--3-columns 卡片系統）*/
.name-related-reading .view-header,
.name-related-activities .view-header {
  margin-bottom: 24px;
}

/* 活動卡 meta（.entity-place / .entity-datetime）樣式在 Entity Reusable Components 通用區，首頁近期活動卡共用 */

/*!SECTION */

/*SECTION - netiCRM（共通 / 連署頁 / 活動報名）*/

/*ANCHOR - CRM 共通：容器寬度 / 列印鈕（CRM 頁是 .path-civicrm，吃不到 .path-node 的收窄）*/
body.path-civicrm {
  & #main.container {
    max-width: 744px; /* 720+24 padding-inline，與文章內頁一致 */
  }

  /* 全站無列印功能；整個 #printer-friendly 藏掉才不留 absolute 佔位（只寫 .print-icon 輸給 civicrm.css 含 ID 的規則）*/
  & #printer-friendly {
    display: none;
  }
}

/*ANCHOR - CRM 共通：按鈕（對齊全站 a.cta）：沿用原生主次兩級換成 cet 色；⚠ #register-me 必須明列 ID（civicrm.css 用 ID 上色）；登入者與匿名的 register 頁結構不同都要顧 */
body.path-civicrm .crm-container {

  /* 外形統一 */
  & .button,
  & input.form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 36px;
    padding: 0 16px;
    font-size: var(--cet-fs-body);
    border-radius: 4px;
    text-decoration: none;
  }

  /* 次要動作：原生深灰 .button（如「替其他人註冊」）與取消鈕 */
  & .button,
  & input.form-submit[name*="_cancel"] {
    color: var(--cet-primary);
    background: #fff;
    border: 1px solid var(--cet-primary);

    &:hover,
    &:focus {
      color: #fff;
      background: var(--cet-primary-dark);
      border-color: var(--cet-primary-dark);
      text-decoration: none;
    }
  }

  /* 主要動作（#register-me／報名鈕／送出鈕）：特異度自然高於上方 .button，不需 :not() */
  & #register-me,
  & a.button.crm-register-button,
  & input.form-submit {
    color: #fff;
    background: var(--cet-primary);
    border: none;

    &:hover,
    &:focus {
      color: #fff;
      background: var(--cet-primary-dark);
      text-decoration: none;
    }
  }

  /* 報名鈕額外帶右上箭頭（送出鈕不加，「下一步 >>」自帶方向語意）*/
  & a.button.crm-register-button::after {
    content: "";
    width: 20px;
    height: 20px;
    background: url(images/icon-arrow-up-right-wite.svg) no-repeat center;
  }

  /*ANCHOR - CRM 共通：提示訊息區塊（原生藍底白字，icon 色隨 color 繼承）*/
  & div.messages,
  & div.status {
    color: var(--cet-gray-900);
    background: var(--cet-bg);

    /* 原生連結為白字，底色改淺後必須一併改深（維持底線以保留可辨識度）*/
    & a {
      color: var(--cet-gray-900);
    }
  }

  /*ANCHOR - CRM 共通：表單欄位（對齊 .newsletter 輸入框）：原生是無框底線款；手機版原生已收單欄不需斷點；admin 端走 neticrmp_next 吃不到本檔 */
  & input.form-text,
  & select,
  & textarea {
    height: 40px;
    padding: 0 14px;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    font-size: var(--cet-fs-body);
    color: var(--cet-gray-900);
    background: var(--cet-white);

    &::placeholder { color: #9CA3AF; }

    &:focus {
      outline: none;
      border-color: var(--cet-primary);
    }
  }

  & textarea {
    height: auto;
    min-height: 96px;
    padding-block: 8px;
  }

  /* 行距與欄距：原生 section 間 16、行高 1.5 → 對齊全站 1.7、間距放寬 */
  & .crm-section {
    margin-bottom: 20px;

    & .content { line-height: 1.7; }
  }

  /* 必填星號：material 紅 → base theme（Bootstrap）danger 紅，與 Drupal 端表單一致（估計值，全站無必填色 spec）*/
  & .crm-marker { color: #DC3545; }

  /* radio / checkbox 改品牌色（原生 material 靛藍）；選項字色對齊主文 */
  & input.form-radio,
  & input.form-checkbox { accent-color: var(--cet-primary); }

  & .elem-label { color: var(--cet-gray-900); }

  /* 錯誤狀態：欄位紅框＋錯誤訊息紅底（Bootstrap danger 色組，字底對比維持 AA）*/
  & input.crm-error,
  & select.crm-error,
  & textarea.crm-error { border-color: #DC3545; }

  & .messages.error,
  & .messages.crm-error {
    color: #58151C;
    background: #F8D7DA;

    & a { color: #58151C; }
  }

  /* accordion（活動資訊頁等）：原生 header 28px 與頁面 H1 同級 → 降為全站 H3 級；body 14 → 16 */
  & .crm-accordion-header {
    font-size: var(--cet-fs-h3);
    font-weight: var(--cet-fw-medium);
    color: var(--cet-gray-900);
  }

  & .crm-accordion-body { font-size: var(--cet-fs-body); }

  /* 確認頁／完成頁的區塊標題帶（.header-dark，通用於各 CRM 流程頁）：原生灰底(#999)白字 → 淺綠帶＋深字 */
  & .header-dark {
    background: var(--cet-bg);
    color: var(--cet-gray-900);
    font-weight: var(--cet-fw-medium);
    border-radius: 4px;
  }

  /*ANCHOR - 活動報名 Event：價格選項（priceset）列距放寬、總計金額加重 */
  & .price-set-row { margin-bottom: 8px; }

  & .section-pricesetTotal .content.view-value {
    font-weight: var(--cet-fw-medium);
    color: var(--cet-primary-dark);
  }
}

/*ANCHOR - 連署頁（.cet-event-petition）：與特殊募款頁共用版型，⛔ 不可用 .civicrm-contribute-sp 限定；配色由模組依後台「連署設定」在 body 設 --active-color／--marked-color，此處以 (0,4,x) 壓過共通規則取回後台色 */
body.path-civicrm.cet-event-petition {

  /* 主要動作鈕；排除 cancel（共通規則的白底綠框次要樣式仍適用）*/
  & .crm-container #register-me,
  & .crm-container a.button.crm-register-button,
  & .crm-container input.form-submit:not([name*="_cancel"]) {
    background: var(--active-color);

    &:hover,
    &:focus {
      background: color-mix(in srgb, var(--active-color) 85%, #000);
    }
  }

  /* 次要動作鈕（登入者才有的「替其他人註冊」、cancel）：共通規則的綠框也一併換成後台色 */
  & .crm-container .button,
  & .crm-container input.form-submit[name*="_cancel"] {
    color: var(--active-color);
    border-color: var(--active-color);

    &:hover,
    &:focus {
      color: #fff;
      background: var(--active-color);
      border-color: var(--active-color);
    }
  }

  /* 進度條 */
  & .crm-container .progress-bar {
    background: var(--marked-color);
  }

  /* 進度條字 14px 且 line-height＝條高（字再大也不裁）、與目標人數拉開 8px */
  & .crm-container .progress-pointer {
    top: 0;
    font-size: 14px;
    line-height: 30px;   /* ＝條高 */
  }

  & .crm-container .progress-amount {
    margin-top: 8px;
  }

  /* 目標人數的數字被別處規則染成主綠，與同一行文字不同色 */
  & .crm-container .progress-amount-goal,
  & .crm-container .progress-amount-goal span {
    color: var(--active-color);
  }

  /* 表單改堆疊式（對照舊站）：label 全寬置頂靠左、欄位滿版；預設是 label 左欄 28% 靠右，中文標籤（電子郵件地址）會折行 */
  & .crm-container .crm-section {
    & .label {
      float: none;
      width: 100%;
      text-align: left;
    }

    & .content {
      margin-left: 0;
      width: 100%;
    }

    /* 姓／名並排半寬（inline-block 間的空白節點補足餘寬）*/
    &.last_name-section,
    &.first_name-section {
      display: inline-block;
      width: 49%;
      vertical-align: top;   /* 預設 baseline 會在這一列下方多留一截字母降部空間，姓名列到下一欄位的距離會變大 */
    }
  }

  /* 白卡加寬 390→440：25px 內距後欄位寬 390＝舊站欄位寬。模組預設 390；僅桌機（contribution_page.css 桌機斷點 1024）*/
  & #crm-container {
    @media (min-width: 1024px) { width: 440px; }
  }

  /* ⛔ 別在這裡補「左欄置中」規則：#main-inner／.frontend 由母版型 crmContribSp() 產生，但它的條件 window.ContribPage 全站沒賦值、從未執行；置中由 contribution_page.css 負責 */

  /* 左欄：contribution_page.css 在 ≥1024px 給 #intro_text 半透明黑底 (1,0,0)，舊站無 */
  & #intro_text {
    background: none;
    @media (min-width: 1024px) { width: 480px; }   /* 480 對齊舊站（訴求文字換行位置）*/
  }

  /* 左欄不重複顯示活動標題（d9.js 把 Drupal page-title block 搬進 #intro_text）*/
  & #intro_text #block-page-title {
    display: none;
  }

  /* CiviCRM 原生流程標題「報名活動 (步驟1/2)」，舊站未顯示 */
  & .wizard-title {
    display: none;
  }

  /* 舊站複製來的內容自帶 <style> 把 #footer_text 往下推（為避開已隱藏的標題），歸零 */
  & #intro_text #footer_text {
    margin-top: 0;
  }

  /* 白卡由 #crm-container 負責；母版型另給 .main-inner／.content-inner 白底會露白邊；⚠ 要帶 .special-page-finish（JS 加的）才壓得過母版型的 :has() 變體 */
  &.special-page-finish {
    & .main-inner,
    & .content-inner {
      background: transparent;
      box-shadow: none; /* 同組規則還給了 Material 三層陰影，會在背景圖上描出一個更大的方框 */
    }
  }

  /* 連署頁不顯示網站頁尾：頁面以下方滿版連署詳情收尾 */
  & .site-footer {
    display: none;
  }
}

/*!SECTION */