/* =========================================
   IQOS 常見問題文章列表
   僅作用於 #main.site-main.grid.grid-2
========================================= */

#main.site-main.grid.grid-2{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:24px !important;

    width:100% !important;
    max-width:1180px !important;

    margin:0 auto !important;
    padding:40px 20px 60px !important;

    box-sizing:border-box !important;
}


/* =========================================
   頁面標題
========================================= */

#main.site-main.grid.grid-2 > .page-header{
    grid-column:1 / -1 !important;

    width:100% !important;

    margin:0 0 18px !important;
    padding:0 !important;

    text-align:center !important;
}

#main.site-main.grid.grid-2 > .page-header .page-title{
    margin:0 !important;
    padding:0 !important;

    color:#1f1f1f !important;

    font-size:34px !important;
    font-weight:800 !important;
    line-height:1.4 !important;
}

#main.site-main.grid.grid-2 > .page-header .page-title::after{
    content:"";

    display:block;

    width:52px;
    height:4px;

    margin:12px auto 0;

    background:#198754;

    border-radius:999px;
}


/* =========================================
   單篇文章卡片
========================================= */

#main.site-main.grid.grid-2 > article.post{
    display:flex !important;
    flex-direction:column !important;

    width:100% !important;
    min-width:0 !important;
    height:100% !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    background:#fff !important;

    border:1px solid #e7e9e8 !important;
    border-radius:18px !important;

    box-shadow:
        0 6px 22px rgba(0,0,0,.055) !important;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease !important;
}


#main.site-main.grid.grid-2 > article.post:hover{
    transform:translateY(-4px) !important;

    border-color:#d7e4dc !important;

    box-shadow:
        0 14px 32px rgba(0,0,0,.10) !important;
}


/* =========================================
   縮圖
========================================= */

#main.site-main.grid.grid-2 > article.post > .post-thumbnail{
    display:block !important;

    width:100% !important;
    aspect-ratio:16 / 10 !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    background:#f6f7f6 !important;

    text-decoration:none !important;
}


#main.site-main.grid.grid-2 > article.post > .post-thumbnail img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:cover !important;

    transition:transform .4s ease !important;
}


#main.site-main.grid.grid-2 > article.post:hover > .post-thumbnail img{
    transform:scale(1.045) !important;
}


/* =========================================
   文字區
========================================= */

#main.site-main.grid.grid-2 > article.post > .blog-loop-content-wrapper{
    display:flex !important;
    flex:1 !important;
    flex-direction:column !important;

    width:100% !important;

    padding:20px 22px 22px !important;

    box-sizing:border-box !important;
}


/* =========================================
   文章標題
========================================= */

#main.site-main.grid.grid-2 > article.post .entry-header{
    margin:0 !important;
    padding:0 !important;
}


#main.site-main.grid.grid-2 > article.post .entry-title{
    margin:0 0 10px !important;
    padding:0 !important;

    font-size:20px !important;
    font-weight:700 !important;
    line-height:1.55 !important;
}


#main.site-main.grid.grid-2 > article.post .entry-title a{
    display:-webkit-box !important;

    overflow:hidden !important;

    color:#222 !important;

    text-decoration:none !important;

    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;

    transition:color .2s ease !important;
}


#main.site-main.grid.grid-2 > article.post .entry-title a:hover{
    color:#198754 !important;
}


/* =========================================
   日期
========================================= */

#main.site-main.grid.grid-2 > article.post .posted-on{
    display:block !important;

    margin:0 0 12px !important;
    padding:0 !important;

    color:#888 !important;

    font-size:12px !important;
    line-height:1.5 !important;
}


#main.site-main.grid.grid-2 > article.post .posted-on time{
    color:#888 !important;
}


#main.site-main.grid.grid-2 > article.post .posted-on .updated{
    margin-left:6px !important;
}


/* =========================================
   摘要
========================================= */

#main.site-main.grid.grid-2 > article.post .entry-content{
    margin:0 !important;
    padding:0 !important;

    background:none !important;

    border:0 !important;
    box-shadow:none !important;
}


#main.site-main.grid.grid-2 > article.post .entry-content p{
    display:-webkit-box !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    color:#666 !important;

    font-size:14px !important;
    line-height:1.8 !important;

    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:3 !important;
}


/* =========================================
   平板
========================================= */

@media(max-width:992px){

    #main.site-main.grid.grid-2{
        gap:18px !important;

        padding:32px 18px 50px !important;
    }

    #main.site-main.grid.grid-2 > .page-header .page-title{
        font-size:30px !important;
    }

    #main.site-main.grid.grid-2 > article.post .entry-title{
        font-size:18px !important;
    }

}


/* =========================================
   手機
========================================= */

@media(max-width:768px){

    #main.site-main.grid.grid-2{
        grid-template-columns:1fr !important;

        gap:16px !important;

        padding:24px 14px 40px !important;
    }

    #main.site-main.grid.grid-2 > .page-header{
        margin-bottom:8px !important;
    }

    #main.site-main.grid.grid-2 > .page-header .page-title{
        font-size:25px !important;
    }

    #main.site-main.grid.grid-2 > .page-header .page-title::after{
        width:42px;
        height:3px;

        margin-top:9px;
    }

    #main.site-main.grid.grid-2 > article.post{
        border-radius:14px !important;
    }

    #main.site-main.grid.grid-2 > article.post > .blog-loop-content-wrapper{
        padding:16px 17px 18px !important;
    }

    #main.site-main.grid.grid-2 > article.post .entry-title{
        font-size:17px !important;
        line-height:1.5 !important;
    }

    #main.site-main.grid.grid-2 > article.post .posted-on{
        margin-bottom:9px !important;
    }

    #main.site-main.grid.grid-2 > article.post .entry-content p{
        font-size:14px !important;
        line-height:1.75 !important;
    }

}


/* =========================================
   小手機
========================================= */

@media(max-width:390px){

    #main.site-main.grid.grid-2{
        padding-left:10px !important;
        padding-right:10px !important;
    }

    #main.site-main.grid.grid-2 > .page-header .page-title{
        font-size:22px !important;
    }

    #main.site-main.grid.grid-2 > article.post > .blog-loop-content-wrapper{
        padding:14px !important;
    }

    #main.site-main.grid.grid-2 > article.post .entry-title{
        font-size:16px !important;
    }

}

/* =========================================================
   文章詳情頁
   圖片置中 + 限制尺寸 + 卡片式正文
========================================================= */

#main.site-main > .post{
    width:100% !important;
    max-width:1000px !important;

    margin:35px auto 60px !important;
    padding:32px !important;

    box-sizing:border-box !important;

    background:#f7f8f7 !important;

    border:1px solid #e6e9e7 !important;
    border-radius:22px !important;

    box-shadow:
        0 8px 30px rgba(0,0,0,.055) !important;
}


/* =========================================================
   頂部主圖
   重點：置中、不要滿版
========================================================= */

#main.site-main > .post > img{
    display:block !important;

    width:auto !important;
    max-width:560px !important;
    height:auto !important;

    margin:0 auto 30px !important;
    padding:0 !important;

    border-radius:16px !important;

    object-fit:contain !important;

    box-shadow:
        0 6px 22px rgba(0,0,0,.08) !important;
}


/* =========================================================
   標題區卡片
========================================================= */

#main.site-main > .post > .entry-header{
    width:100% !important;
    max-width:850px !important;

    margin:0 auto 22px !important;
    padding:26px 30px !important;

    background:#fff !important;

    border:1px solid #e7e9e8 !important;
    border-radius:15px !important;

    box-shadow:
        0 4px 16px rgba(0,0,0,.035) !important;
}


/* H1 */

#main.site-main > .post > .entry-header .entry-title{
    margin:0 0 14px !important;
    padding:0 !important;

    color:#202420 !important;

    font-size:34px !important;
    font-weight:800 !important;
    line-height:1.45 !important;
}


/* H1 裝飾線 */

#main.site-main > .post > .entry-header .entry-title::after{
    content:"";

    display:block;

    width:52px;
    height:4px;

    margin-top:14px;

    background:#198754;

    border-radius:999px;
}


/* 日期 */

#main.site-main > .post > .entry-header .posted-on{
    display:inline-flex !important;
    align-items:center !important;

    margin:0 !important;
    padding:6px 11px !important;

    background:#eef7f1 !important;

    border-radius:999px !important;

    color:#198754 !important;

    font-size:12px !important;
    font-weight:600 !important;
}


#main.site-main > .post > .entry-header .posted-on time{
    color:#198754 !important;
}


#main.site-main > .post > .entry-header .posted-on .updated{
    margin-left:6px !important;
}


/* =========================================================
   正文主卡片
========================================================= */

#main.site-main > .post > .entry-content{
    width:100% !important;
    max-width:850px !important;

    margin:0 auto 22px !important;
    padding:34px 38px !important;

    box-sizing:border-box !important;

    background:#fff !important;

    border:1px solid #e7e9e8 !important;
    border-radius:16px !important;

    box-shadow:
        0 4px 18px rgba(0,0,0,.035) !important;

    color:#4d534f !important;

    font-size:16px !important;
    line-height:1.9 !important;
}


/* =========================================================
   一般段落
========================================================= */

#main.site-main > .post > .entry-content p{
    margin:0 0 18px !important;
    padding:0 !important;

    color:#505652 !important;

    font-size:16px !important;
    line-height:1.9 !important;
}


/* =========================================================
   H2
========================================================= */

#main.site-main > .post > .entry-content h2{
    margin:38px 0 20px !important;

    padding:15px 18px !important;

    background:#f2f7f4 !important;

    border:1px solid #e0e8e3 !important;
    border-left:5px solid #198754 !important;

    border-radius:11px !important;

    color:#202522 !important;

    font-size:24px !important;
    font-weight:800 !important;
    line-height:1.5 !important;
}


/* 第一個 H2 不要空太多 */

#main.site-main > .post > .entry-content h2:first-of-type{
    margin-top:28px !important;
}


/* =========================================================
   H3
========================================================= */

#main.site-main > .post > .entry-content h3{
    margin:27px 0 12px !important;
    padding:0 0 9px 15px !important;

    position:relative;

    color:#232723 !important;

    font-size:19px !important;
    font-weight:700 !important;
    line-height:1.55 !important;

    border-bottom:1px solid #e7eae8 !important;
}


#main.site-main > .post > .entry-content h3::before{
    content:"";

    position:absolute;

    left:0;
    top:5px;

    width:4px;
    height:21px;

    background:#198754;

    border-radius:3px;
}


/* =========================================================
   正文圖片
   置中 + 最大 520px
========================================================= */

#main.site-main > .post > .entry-content figure{
    margin:28px auto !important;

    text-align:center !important;
}


#main.site-main > .post > .entry-content figure img,
#main.site-main > .post > .entry-content img:not(.emoji){
    display:block !important;

    width:auto !important;
    max-width:520px !important;
    height:auto !important;

    margin:0 auto !important;

    border-radius:14px !important;

    object-fit:contain !important;

    box-shadow:
        0 6px 20px rgba(0,0,0,.065) !important;
}


/* =========================================================
   Emoji
========================================================= */

#main.site-main > .post > .entry-content img.emoji{
    display:inline-block !important;

    width:18px !important;
    height:18px !important;

    margin:0 3px !important;

    border-radius:0 !important;

    box-shadow:none !important;

    vertical-align:-3px !important;
}


/* =========================================================
   UL
========================================================= */

#main.site-main > .post > .entry-content ul,
#main.site-main > .post > .entry-content ol{
    margin:18px 0 28px !important;

    padding:
        17px
        18px
        17px
        38px !important;

    background:#f8faf9 !important;

    border:1px solid #e5ebe7 !important;
    border-radius:11px !important;
}


#main.site-main > .post > .entry-content li{
    margin-bottom:8px !important;

    color:#515753 !important;

    font-size:15px !important;
    line-height:1.8 !important;
}


#main.site-main > .post > .entry-content li:last-child{
    margin-bottom:0 !important;
}


/* =========================================================
   Strong
========================================================= */

#main.site-main > .post > .entry-content strong{
    color:#16724a !important;

    font-weight:700 !important;
}


/* =========================================================
   FAQ
   後面的 H3 + P 做成 QA 卡片感
========================================================= */

#main.site-main > .post > .entry-content h2:nth-last-of-type(2) ~ h3{
    margin-top:16px !important;

    padding:
        16px
        17px
        16px
        50px !important;

    background:#f7faf8 !important;

    border:1px solid #e0e7e3 !important;

    border-radius:11px 11px 0 0 !important;
}


#main.site-main > .post > .entry-content h2:nth-last-of-type(2) ~ h3::before{
    content:"Q";

    left:15px;
    top:14px;

    width:25px;
    height:25px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#198754;

    border-radius:50%;

    color:#fff;

    font-size:11px;
    font-weight:800;
}


/* FAQ 答案 */

#main.site-main > .post > .entry-content h2:nth-last-of-type(2) ~ h3 + p{
    margin-top:-12px !important;
    margin-bottom:18px !important;

    padding:16px 18px !important;

    background:#fff !important;

    border:1px solid #e0e7e3 !important;
    border-top:0 !important;

    border-radius:0 0 11px 11px !important;
}


/* =========================================================
   作者資訊
========================================================= */

#main.site-main > .post > .entry-meta{
    width:100% !important;
    max-width:850px !important;

    margin:0 auto !important;
    padding:18px 22px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    flex-wrap:wrap !important;

    gap:18px !important;

    background:#fff !important;

    border:1px solid #e7e9e8 !important;
    border-radius:14px !important;

    box-shadow:
        0 4px 15px rgba(0,0,0,.03) !important;
}


/* 作者 */

#main.site-main > .post > .entry-meta .vcard.author{
    display:flex !important;

    align-items:center !important;

    gap:11px !important;
}


#main.site-main > .post > .entry-meta img.avatar{
    display:block !important;

    width:46px !important;
    height:46px !important;

    margin:0 !important;

    border-radius:50% !important;

    object-fit:cover !important;
}


#main.site-main > .post > .entry-meta .author-details a{
    color:#222 !important;

    font-size:14px !important;
    font-weight:700 !important;

    text-decoration:none !important;
}


/* 分類 */

#main.site-main > .post > .entry-meta .cat-links{
    display:flex !important;

    align-items:center !important;
    flex-wrap:wrap !important;

    gap:7px !important;
}


#main.site-main > .post > .entry-meta .cat-links .label{
    color:#888 !important;

    font-size:12px !important;
}


#main.site-main > .post > .entry-meta .cat-links a{
    display:inline-flex !important;

    padding:5px 11px !important;

    background:#eaf5ee !important;

    border-radius:999px !important;

    color:#198754 !important;

    font-size:12px !important;
    font-weight:600 !important;

    text-decoration:none !important;
}


/* =========================================================
   側欄空白時隱藏
========================================================= */

#secondary.widget-area:empty{
    display:none !important;
}


/* =========================================================
   平板
========================================================= */

@media(max-width:992px){

    #main.site-main > .post{
        max-width:94% !important;

        padding:25px !important;
    }


    #main.site-main > .post > img{
        max-width:500px !important;
    }


    #main.site-main > .post > .entry-header .entry-title{
        font-size:30px !important;
    }

}


/* =========================================================
   手機
========================================================= */

@media(max-width:768px){

    #main.site-main > .post{
        width:calc(100% - 20px) !important;

        margin:20px auto 35px !important;

        padding:12px !important;

        border-radius:15px !important;
    }


    /* 主圖 */

    #main.site-main > .post > img{
        width:auto !important;

        max-width:88% !important;

        margin:5px auto 18px !important;

        border-radius:11px !important;
    }


    /* Header */

    #main.site-main > .post > .entry-header{
        margin-bottom:14px !important;

        padding:20px 16px !important;

        border-radius:11px !important;
    }


    #main.site-main > .post > .entry-header .entry-title{
        font-size:23px !important;
        line-height:1.5 !important;
    }


    /* 正文 */

    #main.site-main > .post > .entry-content{
        padding:22px 16px !important;

        border-radius:11px !important;
    }


    #main.site-main > .post > .entry-content p{
        font-size:15px !important;
        line-height:1.85 !important;
    }


    /* H2 */

    #main.site-main > .post > .entry-content h2{
        margin:28px 0 16px !important;

        padding:12px 14px !important;

        font-size:20px !important;
    }


    /* H3 */

    #main.site-main > .post > .entry-content h3{
        font-size:17px !important;
    }


    /* 正文圖片 */

    #main.site-main > .post > .entry-content figure img,
    #main.site-main > .post > .entry-content img:not(.emoji){
        width:auto !important;

        max-width:90% !important;

        margin:0 auto !important;
    }


    /* List */

    #main.site-main > .post > .entry-content ul,
    #main.site-main > .post > .entry-content ol{
        padding:
            14px
            13px
            14px
            30px !important;
    }


    #main.site-main > .post > .entry-content li{
        font-size:14px !important;
    }


    /* 作者 */

    #main.site-main > .post > .entry-meta{
        padding:15px !important;

        flex-direction:column !important;
        align-items:flex-start !important;
    }

}


/* =========================================================
   小手機
========================================================= */

@media(max-width:390px){

    #main.site-main > .post{
        width:calc(100% - 12px) !important;

        padding:8px !important;
    }


    #main.site-main > .post > img{
        max-width:92% !important;
    }


    #main.site-main > .post > .entry-header .entry-title{
        font-size:21px !important;
    }


    #main.site-main > .post > .entry-content{
        padding:18px 13px !important;
    }

}