/* Path: /wp-content/plugins/jct-meta-tags/assets/css/jct-stylish-box.css */
/* 內容框短代碼 [jct_stylish_box] v4.0.0 */
/*
 * 2026-09-22 改版：全站的方框從「4px 粗框 + 標題浮貼在框線上」改成細框，
 * 摘要盒子（.jct-excerpt-box）再覆寫成只有上下線。
 *
 * 為什麼舊版那麼高——三件事疊加，不是內容多：
 *   1. padding 25px，上下就吃掉 50px
 *   2. 標題用 margin-top:-0.9em 浮貼在上框線，那個負值要靠足夠的上內距
 *      撐住，所以 padding 根本降不下來
 *   3. 行距 1.95 加上 li 間距，三個兩行的項目非常有感
 *
 * 所以這一版把標題放回文件流（第 2 點解掉），padding 與行距才降得下去。
 *
 * 顏色一律走 CSS 變數，PHP 只負責寫變數值：
 *   --jct-box-border-color / --jct-box-title-color  來自 color 屬性
 *   --jct-box-bg-color    來自 bg_color（沒給就用 accent 調出來的淡底）
 *   --jct-box-text-color  來自 text_color
 */

.jct-stylish-box-container {
    /* 1px 全彩的框線本身就夠輕；color-mix 再淡一階，不支援的瀏覽器
       會停在上面那一行，看起來只是框線深一點，不會壞版。 */
    border: 1px solid var(--jct-box-border-color, #856115);
    border: 1px solid color-mix(in srgb, var(--jct-box-border-color, #856115) 38%, transparent);
    border-radius: 6px;

    /* 底色沒指定時，用 accent 調出 4% 的淡底——寫死一個暖白會跟自訂
       顏色的方框打架，從 accent 推導才會跟著走。 */
    background-color: var(--jct-box-bg-color, #ffffff);
    background-color: var(--jct-box-bg-color, color-mix(in srgb, var(--jct-box-border-color, #856115) 4%, #ffffff));

    color: var(--jct-box-text-color, #333333);

    margin: 2em 0;
    padding: 15px 20px 16px;
}

.jct-stylish-box-title {
    /* 回到文件流。舊版是 position:relative + margin-top:-0.9em 讓它壓在
       上框線上，那個做法本身沒問題，但它要求容器有厚上內距——
       整個盒子矮不下來的主因就是這裡。 */
    display: block;
    color: var(--jct-box-title-color, #856115);
    font-weight: 700;
    font-size: .92em;
    letter-spacing: .06em;
    line-height: 1.5;
    margin: 0 0 .45em;
}

.jct-stylish-box-content {
    line-height: 1.62;
}

/* 讓巢狀的短代碼內容有正常的段落間距 */
.jct-stylish-box-content p:first-child {
    margin-top: 0;
}

.jct-stylish-box-content p:last-child {
    margin-bottom: 0;
}

.jct-stylish-box-content ul,
.jct-stylish-box-content ol {
    margin: 0;
    padding-left: 1.35em;
}

.jct-stylish-box-content li {
    margin: 0 0 .22em;
}

.jct-stylish-box-content li:last-child {
    margin-bottom: 0;
}

/* ===== 摘要盒子：只有上下線 ===== */
/*
 * [jct_excerpt_box] 產生的那一個（PHP 傳 class="jct-excerpt-box"）。
 *
 * 它固定出現在每一篇文章的開頭，緊接在正文之前——那個位置的東西
 * 不該有「一個獨立方框」的份量，不然讀者的視線會先被框住而不是進入正文。
 * 上下兩條線給出「這是提要」的訊號就夠了，而且是這幾種裡最矮的。
 */
.jct-stylish-box-container.jct-excerpt-box {
    border: 0;
    border-top: 2px solid var(--jct-box-border-color, #856115);
    border-bottom: 1px solid var(--jct-box-border-color, #856115);
    border-bottom-color: color-mix(in srgb, var(--jct-box-border-color, #856115) 30%, transparent);
    border-radius: 0;
    background-color: transparent;
    margin: 1.6em 0;
    padding: 12px 0 13px;
}

/* ===== 手機版響應式修正 ===== */
@media (max-width: 768px) {

    .jct-stylish-box-container {
        padding: 13px 16px 14px;
    }

    .jct-stylish-box-container.jct-excerpt-box {
        padding: 11px 0 12px;
    }

    /* 縮小框內整體字體大小（約 -2pt） */
    .jct-stylish-box-content {
        font-size: 0.88em;
    }

    /* 修正圖文列表的圖片容器，使其全高顯示 */
    .jct-stylish-box-content a,
    .jct-stylish-box-content figure,
    .jct-stylish-box-content .wp-block-image,
    .jct-stylish-box-content img {
        display: block;
        height: 100%;
    }

    /* 確保含有圖片的父層容器撐開全高 */
    .jct-stylish-box-content .wp-block-column,
    .jct-stylish-box-content .wp-block-columns > * {
        align-self: stretch;
    }

    /* 圖片本身全高填滿、裁切不留白 */
    .jct-stylish-box-content img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        max-width: 100%;
    }

    /* 若圖片在 figure 容器內，確保容器也撐開 */
    .jct-stylish-box-content figure {
        margin: 0;
        overflow: hidden;
        height: 100%;
    }
}