@charset "UTF-8";

/* 為 CKEditor 載入 Web Fonts：editor.css 在 info.yml 的 ckeditor5-stylesheets 裡，
   編輯器 iframe（不參與 CSS 聚合）靠這支 @import 取得字型。
   前台字型走 libraries.yml 的 google-fonts（external <link>）；前台這份 @import 與其同 URL、
   瀏覽器去重，聚合時落到檔中段被忽略也無妨。 */
@import url('https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova:wght@400;600&family=Noto+Sans+TC:wght@400;500;700&family=Noto+Serif+TC:wght@400;500;600;700;800&display=swap');

/*SECTION - Body */
.text-formatted,
.ck.ck-content {

  /*ANCHOR - 標題 h2-h6 */
  & h2, h3, h4, h5, h6 {
    font-family: var(--ob-font-serif);
    font-weight: 700;
    line-height: var(--ob-lh-snug);
    color: var(--ob-ink);
    margin-bottom: 0.65em;   /* 下距要明顯小於上距（舊站 0.64em／上 1.9em；#48119） */
  }
  & h2 { font-size: var(--ob-fs-title);   margin-top: 2em;   }
  & h3 { font-size: var(--ob-fs-card-lg); margin-top: 1.6em; }
  & h4 { font-size: var(--ob-fs-card);    margin-top: 1.4em; }
  & h5 { font-size: var(--ob-fs-card-sm); margin-top: 1.3em; }
  & h6 { font-size: var(--ob-fs-label);   margin-top: 1.2em; }

  /*ANCHOR - 內文 p / ul li / ol li */
  & :is(p, ul > li, ol > li) {
    font-family: var(--ob-font-sans);
    font-size: var(--ob-fs-body);
    line-height: 1.7;
    color: var(--ob-ink);
  }
  & p { margin: 0 0 1em; }

  /*ANCHOR - 連結 a */
  & a {
    color: var(--ob-primary);
    text-decoration: none;
    &:hover,
    &:focus { color: var(--ob-primary-light); text-decoration: underline; }
  }

  /*ANCHOR - 條列 ul */
  & ul {
    list-style-type: none;
    padding-left: 1.4em;
    margin: 0 0 1em;
    & > li {
      position: relative;
      margin: 0 0 0.4em;
      &::before {
        content: "";
        position: absolute;
        left: -1.1em;
        top: 0.7em;
        width: 0.5em;
        height: 0.5em;
        border-radius: 50%;
        background: var(--ob-primary);
      }
    }
  }

  /*ANCHOR - 有序 ol */
  & ol {
    padding-left: 1.6em;
    margin: 0 0 1em;
    & > li {
      margin: 0 0 0.4em;
      &::marker { color: var(--ob-primary); font-weight: 700; }
    }
  }

  /*ANCHOR - 圖片 img */
  & img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1em auto;
    border-radius: 4px;
  }

  /*ANCHOR - 文繞圖
    舊站 CKEditor 4 的 inline float，與文字間距照舊站 1.25em（#46355）；img 的 margin auto 在 float 時算成 0 */
  & :is([style*="float:left"], [style*="float: left"]) { margin-inline-end: 1.25em; }
  & :is([style*="float:right"], [style*="float: right"]) { margin-inline-start: 1.25em; }

  /*ANCHOR - 文繞圖 <440 取消浮動、單獨一行置中（#48119；舊站同規則、斷點 480） */
  @media (max-width: 439.98px) {
    & :is([style*="float:left"], [style*="float: left"], [style*="float:right"], [style*="float: right"]) {
      display: block;
      float: none !important;
      margin-inline: auto !important;
      margin-bottom: 0.5em;
    }
  }

  /*ANCHOR - 影片 iframe（舊站 media embed 帶 width=800 height=450，手機寬縮高不縮；#47943） */
  & :is(.media_embed iframe, iframe[src*="youtube.com/embed"], iframe[src*="youtu.be"]) {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
  }

  /*ANCHOR - 分隔線 hr */
  & hr {
    border: 0;
    border-top: 1px solid var(--ob-border);
    margin: 2em 0;
  }

  /*ANCHOR - 引言 blockquote
    fig 964:3602（深色版 1004:5424 同）：上下線 1.5 gray-blue、內距 32/80、上下距內文 60；“” 32 框距角 16；
    字＝Noto Serif TC 600 18／36、ls 3%（PNG 墨跡寬 665＋以前言 800 校準墨跡密度）；手機無稿 → 引號改上下帶、文字滿寬 */
  & blockquote {
    position: relative;
    margin: clamp(40px, 2.08vw + 24px, 60px) 0;
    padding: 56px 0;
    border-block: 1.5px solid var(--ob-gray-blue);
    border-inline: 0;
    background: none;   /* base .node blockquote 白底＋陰影 */
    box-shadow: none;
    font-style: normal;
    @media (min-width: 768px) { padding: 32px 80px; }

    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 32px;
      height: 32px;
      background: url(images/icon-quote-open.svg) no-repeat center;
    }
    &::before { inset: 16px auto auto 16px; }
    &::after {
      inset: auto 16px 16px auto;
      background-image: url(images/icon-quote-close.svg);
    }

    & :is(p, li) {
      font-family: var(--ob-font-serif);
      font-size: 18px;
      font-weight: 600;
      line-height: 2;
      letter-spacing: var(--ob-ls-base);
    }
    & > :last-child { margin-bottom: 0; }
  }

  /*ANCHOR - 加粗 strong */
  & strong { font-weight: 700; }

  /*ANCHOR - 排版表格 table.layout-table（舊站 border="0" 的圖文排版表格；CKEditor 5 layout table 慣例：無框線、無內距） */
  & table.layout-table {
    border: 0;
    margin-block: 1em;

    & :is(td, th) {
      border: 0;
      padding: 0;
      background: transparent;
    }
  }

/*!SECTION */

/* SECTION Custom componants */

  /*ANCHOR - refs #46372 文末結束符號 */
  & .end-of-text-marker {
    display: inline-block;
    block-size: 1em;
    aspect-ratio: 3 / 2;
    margin-inline-start: 0.25em;
    vertical-align: -0.125em;
    background: url("images/logomark.svg") center / contain no-repeat;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 100%;
    color: transparent;
    user-select: none;
    print-color-adjust: exact;
  }

  /*ANCHOR - .feature-card 封面故事卡（手機直排、桌機左圖右文） */
  & .feature-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 1.5em 0;
    @media (min-width: 768px) { grid-template-columns: 358px 1fr; }
    & > img { margin: 0; border-radius: 4px; align-self: start; }
    & .feature-card__body {
      & > :first-child { margin-top: 0; }
      & > :last-child { margin-bottom: 0; }
    }
    & .read-more {
      display: inline-block;
      font-family: var(--ob-font-serif);
      font-size: var(--ob-fs-small);
      color: var(--ob-primary);
      margin-top: 0.5em;
    }
  }

  /*ANCHOR - .article-list 文章清單（青綠點 + 標題連結） */
  & .article-list {
    & > li {
      &::before { top: 0.7em; }
      & > a {
        font-family: var(--ob-font-serif);
        font-size: var(--ob-fs-body);
        color: var(--ob-ink);
        &:hover,
        &:focus { color: var(--ob-primary); text-decoration: none; }
      }
    }
  }

  /*ANCHOR - .event-card 活動卡（淡灰底、圓角） */
  & .event-card {
    padding: 16px 20px;
    margin: 0 0 0.8em;
    border-radius: var(--ob-radius);
    background: var(--ob-bg);
    & > h5 {
      margin: 0 0 0.4em;
      font-size: var(--ob-fs-card-sm);
    }
    & .event-meta {
      font-family: var(--ob-font-sans);
      font-size: var(--ob-fs-meta);
      color: var(--ob-gray);
      margin: 0 0 0.5em;
    }
    & .read-more {
      display: inline-block;
      font-size: var(--ob-fs-small);
      color: var(--ob-primary);
    }
  }

  /*ANCHOR - .book-card 書卡（手機直排、桌機左封面右資訊） */
  & .book-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 1.5em 0;
    @media (min-width: 768px) { grid-template-columns: 200px 1fr; }
    & > img { margin: 0; border-radius: 4px; align-self: start; }
    & .book-card__body {
      & > :first-child { margin-top: 0; }
      & > :last-child { margin-bottom: 0; }
    }
    & .book-meta {
      display: grid;
      grid-template-columns: max-content 1fr;
      column-gap: 0.8em;
      row-gap: 0.3em;
      margin: 0.6em 0 1em;
      font-family: var(--ob-font-sans);
      font-size: var(--ob-fs-meta);
      color: var(--ob-gray);
      & dt { font-weight: 400; }
      & dd { margin: 0; }
    }
    & .read-more {
      display: inline-block;
      font-size: var(--ob-fs-small);
      color: var(--ob-primary);
    }
  }

  /*ANCHOR - .tag-list 標籤膠囊列（青綠圓角） */
  & .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 1.5em 0;
    & > li {
      margin: 0;
      &::before { display: none; }
      & > a {
        display: inline-block;
        padding: 4px 14px;
        border-radius: 999px;
        background: var(--ob-primary);
        color: var(--ob-white);
        font-family: var(--ob-font-sans);
        font-size: var(--ob-fs-xs);
        text-decoration: none;
        &:hover,
        &:focus { background: var(--ob-primary-light); text-decoration: none; }
      }
    }
  }
/* SECTION 內文置入版型（entity_embed） */

  /*ANCHOR - 置入區塊共通 */
  & .embedded-entity {
    margin-block: clamp(32px, 3.70vw + 3.56px, 48px);

    & article { margin: 0; }
  }

  /*ANCHOR - 圖說（:is(p, div).caption＝編輯器「樣式→圖說」p.caption／舊站區塊樣式 div.caption，影片下方用；#45651。
     限定 p／div：core filter_caption 的圖片圖說 figure 也叫 .caption，不能套到它 */
  & .slide__caption { padding: 0; }   /* slick theme 給 20px 0，會撐開設計稿的 8px 圖說間距 */

  & :is(.slide__title, .blazy__caption--title, figcaption, :is(p, div).caption) {   /* figcaption：#46355 */
    font-family: var(--ob-font-sans);
    font-size: var(--ob-fs-xs);
    font-weight: 400;
    line-height: 1.4;
  }
  & :is(.slide__title, .blazy__caption--title, :is(p, div).caption) {
    margin: 8px 0 0;
    color: var(--ob-gray-text);

    & a { color: var(--ob-primary); }
  }
  & :is(p, div).caption {
    display: block;       /* core filter.caption.css 給 .caption display:table（為它的 figure 設計）→ 區塊縮成內容寬 */
    margin-bottom: 1em;   /* 獨立區塊：下接段落留一行（p 自己沒有上距） */

    & > * {               /* core .caption > * { display:block } 會把圖說裡的 span／em 拆成多行 */
      display: revert;
      max-width: none;
    }
  }

  /*ANCHOR - 輪播控制列（箭頭 40 ＋ 進度線 338；type1／type3 共用） */
  & :is(.slick--field-carousel-type1, .slick--field-carousel-type3) {
    --track-h: 1.5px;
    --bar-h: 3px;
    position: relative;

    /* 32 間距 + 40 控制列；張數 ≤ slidesToShow 時 slick 不出箭頭 → 不留 */
    &:has(.slick-arrow:not(.slick-hidden)) .slick__slider.slick-initialized { padding-bottom: 72px; }

    & .slick-dots {
      position: absolute;
      bottom: calc(20px - var(--bar-h) / 2);
      left: 50%;
      display: flex;
      align-items: center;
      width: min(338px, 100% - 144px);
      margin: 0;
      padding: 0;
      list-style: none;
      translate: -50% 0;

      &:has(> li:only-child) { display: none; }   /* 只有一頁＝整條亮，不如不出 */

      & li {
        position: relative;
        flex: 1;
        height: var(--track-h);
        margin: 0;
        background: var(--ob-gray-mid);

        &::before { content: none; }   /* 抵銷內文 ul 圓點 */
        &.slick-active {
          height: var(--bar-h);
          border-radius: calc(var(--bar-h) / 2);
          background: var(--ob-primary-light);
        }

        & button {
          position: absolute;
          inset: -8px 0;
          display: block;
          width: 100%;
          padding: 0;
          border: 0;
          background: transparent;
          font-size: 0;
          color: transparent;
          cursor: pointer;
          &::before { content: none; }
        }
      }
    }

    & .slick__arrow {
      position: absolute;
      bottom: 0;
      left: 50%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: min(482px, 100%);
      height: 40px;
      translate: -50% 0;
      pointer-events: none;

      & br { display: none; }   /* slick 的 arrow markup 夾一個 br，會佔掉 space-between 右端 */

      & button {
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        background: transparent no-repeat center;
        font-size: 0;
        color: transparent;
        cursor: pointer;
        pointer-events: auto;
        &.slick-prev { background-image: url(images/icon-chevron-left.svg); }
        &.slick-next { background-image: url(images/icon-chevron-right.svg); }
      }
    }
    & .slick__slider:not(.slick-initialized) + .slick__arrow { display: none; }

    /*ANCHOR - 未初始化 fallback（CKEditor 預覽不跑 slick JS）：維持前台的橫排版面，
       讓主編預想得到前台排版；widget 吃掉滑鼠事件、捲軸捲不動 → overflow hidden，超出的裁掉當示意 */
    & .slick__slider:not(.slick-initialized) {
      display: flex;
      overflow: hidden;
      padding-bottom: 0;

      & .slick__slide { flex: 0 0 auto; }
    }
  }
  & .slick--field-carousel-type1 .slick__slider:not(.slick-initialized) .slick__slide { width: 100%; }

  /*ANCHOR - 多圖瀏覽 type1（單張大圖，fig 1489:6897 968 寬） */
  & .slick--field-carousel-type1 .slick__slide img { width: 100%; margin: 0; }

  /*ANCHOR - 兩圖並排 type2（fig 1324:6026 單張 590 gap 40，總寬 1220） */
  & .blazy--field-carousel-type2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 5.56vw - 26.67px, 40px);
    float: none;        /* base 給 .field__items float:left ＋ margin-right:18 → 父層高度塌陷 */
    margin: 0;

    & .field__item { min-width: 0; }

    /* 兩張等高＝固定比例裁切，同舊站 image style 492×339（#46373）；
       blazy 用 .media 的 height:0＋padding-bottom 撐原圖比例（fluid 寫在 inline style，只能 !important 歸零）→ 改由 img 自帶比例 */
    & .media {
      height: auto;
      padding-bottom: 0 !important;
    }
    & img {
      position: static;
      width: 100%;
      aspect-ratio: 492 / 339;
      object-fit: cover;
      margin: 0;
    }
  }

  /*ANCHOR - 多圖輪播 type3（多卡橫排，fig 970:3828 卡高 344 gap 24）
    等高、寬隨圖比例＝optionset ob_embed_gallery 開 variableWidth（#46373，同舊站）；img 帶 width/height 屬性，載入前寬度即正確 */
  & .slick--field-carousel-type3 {
    & .slick__slide { padding-inline: 12px; }
    & .slide__caption { display: none; }   /* 舊站只放 img title、不輸出圖說（#48119） */
    & .slick__slide img {
      width: auto;
      height: clamp(220px, 28.70vw - 0.44px, 344px);
      margin: 0;
    }
  }

  /*ANCHOR - 左圖右文（書籍介紹，fig 970:3759 圖 338＋gap 42，文字繞排） */
  & .embedded-entity:has(.node--type-book-intro) {
    padding-block: clamp(32px, 4.17vw, 50px);
    border-block: 1.5px solid var(--ob-border);
  }
  & .node--type-book-intro .node__content {
    &::after { content: ''; display: block; clear: both; }

    & .field--name-field-book-image {
      margin: 0 0 20px;

      & img { width: 100%; margin: 0; }

      @media (min-width: 576px) {
        float: left;
        width: clamp(200px, 31.94vw - 45.33px, 338px);
        margin: 0 clamp(24px, 4.17vw - 8px, 42px) 20px 0;
      }
    }

    & .text-formatted > :first-child { margin-top: 0; }
    & .text-formatted > :last-child { margin-bottom: 0; }
  }

  /*ANCHOR - CTA 橫幅（fig 1401:4985 內距 32、icon 150、底 #00B9C8） */
  & .node--type-cta-banner {
    padding: clamp(20px, 2.78vw - 1.33px, 32px);
    border-radius: var(--ob-radius);
    background: var(--ob-primary-light);
    color: var(--ob-white);

    & .node__content {
      display: grid;
      gap: clamp(16px, 3.70vw - 12.44px, 32px);

      @media (min-width: 768px) {
        grid-template-columns: clamp(96px, 12.50vw, 150px) 1fr;
        grid-template-rows: repeat(3, min-content);   /* 顯式列，icon 的 grid-row: 1/-1 才跨得到底 */
        align-items: center;
        column-gap: clamp(20px, 2.78vw - 1.33px, 32px);
        row-gap: 0;

        & > :not(.field--name-field-cta-icon) { grid-column: 2; }   /* 標題／說明／按鈕同欄堆疊 */
      }
    }

    & .field--name-field-cta-icon {
      float: none;
      margin: 0;

      @media (min-width: 768px) { grid-row: 1 / -1; align-self: center; }
      & img { width: 100%; margin: 0; border-radius: 0; }
    }

    & .field--name-field-cta-title {
      font-family: var(--ob-font-serif);
      font-size: var(--ob-fs-card-lg);
      font-weight: 700;
      line-height: var(--ob-lh-snug);
    }

    & .field--name-field-cta-text {
      margin-top: 12px;
      font-family: var(--ob-font-sans);
      font-size: var(--ob-fs-body);
      line-height: 1.4;
      white-space: pre-line;
    }

    & .field--name-field-cta-link {
      margin-top: 16px;

      & a {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-family: var(--ob-font-sans);
        font-size: clamp(14px, 0.23vw + 12.2px, 15px);
        font-weight: 500;
        color: var(--ob-white);

        &::after {
          content: '';
          width: 24px;
          height: 24px;
          background: url(images/icon-chevron-right.svg) no-repeat center / 24px;
          filter: invert(1);
        }
        &:hover,
        &:focus { color: var(--ob-accent-yellow); text-decoration: none; }
      }
    }
  }
/*!SECTION */

}
/*!SECTION */

/*SECTION - 置入區塊外擴（僅前台：編輯區寬度 ≠ 視窗寬度，CKEditor 內維持容器寬；
  ≥1200 三欄版時上限改為 100cqw＝#article-main 容器寬（custom.css 設 container-type），
  否則 1200~1500 視窗會超出版面、且撐大內文欄 min-content 把整欄擠到下一行（#46373 退件）） */
.text-formatted {

  /*ANCHOR - 多圖瀏覽 type1 */
  & .embedded-entity:has(.slick--field-carousel-type1) {
    position: relative;
    left: 50%;
    width: min(968px, 100vw - 48px);
    translate: -50% 0;
    @media (min-width: 1200px) { width: min(968px, 100cqw, 100vw - 48px); }
  }

  /*ANCHOR - 兩圖並排 type2 / 多圖輪播 type3 */
  & .embedded-entity:has(.blazy--field-carousel-type2),
  & .embedded-entity:has(.slick--field-carousel-type3) {
    position: relative;
    left: 50%;
    width: min(1220px, 100vw - 48px);
    translate: -50% 0;
    @media (min-width: 1200px) { width: min(1220px, 100cqw, 100vw - 48px); }
  }
}
/*!SECTION */

/*SECTION - 僅編輯器：圖片尺寸 */
/* CKEditor 把 img 的 width／height 屬性轉成行內樣式（行內圖片在 img、有圖說的圖片在 figure），
   寬度縮小時高度固定 → 圖片變形、圖說壓到下一段（#48119）；行內樣式只能用 !important 蓋 */
.ck.ck-content :is(.image, .image-inline) {
  height: auto !important;

  & img { height: auto !important; }
}
/*!SECTION */