/* JCT Stylish Content Box Styles */

.jct-stylish-box-container {
    /* 使用從 PHP 傳來的 CSS 變數，並提供預設值以防萬一 */
    border: 4px solid var(--jct-box-border-color, #856115);
    background-color: var(--jct-box-bg-color, #ffffff);
    color: var(--jct-box-text-color, #333333);
    
    /* 其他固定樣式 */
    margin: 2.5em 0;
    padding: 25px;
    position: relative;
}

.jct-stylish-box-title {
    /* 使用從 PHP 傳來的 CSS 變數 */
    color: var(--jct-box-title-color, #856115);
    background-color: var(--jct-box-bg-color, #ffffff); /* 背景與容器一致，以避免在非白色背景下穿幫 */

    /* 其他固定樣式 */
    font-weight: bold;
    font-size: 1.1em;
    padding: 0 0.8em;
    line-height: 1.7; /* 維持行高 */

    /* * 【標題重疊與對齊問題修復】
     * 1. 移除 position: absolute，讓標題回到文檔流，解決文字重疊
     * 2. 改用 position: relative
     * 3. margin-top: -0.9em 負責將標題拉上去蓋住邊框
     * 4. margin-left: -15px (負值) 負責將標題往左拉，抵銷容器的 padding，讓文字與下方內容切齊
     * 5. margin-bottom: 0.5em 確保標題與內容有間距
     */
    position: relative;
    display: inline-block;
    
    /* ***【修正對齊】*** 容器 padding 是 25px，標題 padding 是 0.8em (約13px)。
       為了讓標題文字對齊內容起始處，我們需要把標題往左拉。
       設定 -15px 可以抵銷大部分容器內距，讓標題文字視覺上與下方項目符號切齊。 
    */
    margin-left: -15px;      
    
    margin-top: -0.9em;     /* 拉起標題 */
    margin-bottom: 0.5em;   /* 增加下間距 */
}

.jct-stylish-box-content {
    /* 移除固定的 margin-top，改由標題的 margin-bottom 來控制間距 */
}

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

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

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

    /* 縮小框內整體字體大小（約 -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%;
    }
}