/* ==================================================
   Hero：人物圖片柔化
   ================================================== */

.hero-image {
    position: relative;
}

/* Hero 圖片左邊漸變 */
.hero-image::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 28%;
    z-index: 2;
    pointer-events: none;

    background: linear-gradient(
        to right,
        #EAF5FF 0%,
        rgba(234, 245, 255, 0.8) 35%,
        rgba(234, 245, 255, 0) 100%
    );
}

/* Hero 圖片上方及右邊柔化 */
.hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            #EAF5FF 0%,
            rgba(234, 245, 255, 0) 15%
        ),
        linear-gradient(
            to left,
            #EAF5FF 0%,
            rgba(234, 245, 255, 0.65) 2%,
            rgba(234, 245, 255, 0) 7%
        );
}


/* ==================================================
   Hero：內層內容最大寬度
   ================================================== */

.hero-inner {
    width: min(1280px, calc(100% - 40px)) !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ==================================================
   Homepage：手機版三大主題 Icon
   ================================================== */

@media (max-width: 600px) {
    .home-topic-icon img {
        width: 100px !important;
        max-width: 100px !important;
        height: auto !important;
    }
}


/* ==================================================
   Single Post：文章內容左右內距
   ================================================== */

.single-post .entry-header,
.single-post .entry-content {
    padding-left: 40px;
    padding-right: 40px;
}

@media (max-width: 768px) {
    .single-post .entry-header,
    .single-post .entry-content {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* ==================================================
   Single Post：文章頂部空間
   ================================================== */

.single-post .content-area {
    padding-top: 32px;
}


/* ==================================================
   Single Post：正文閱讀排版
   ================================================== */

.single-post .entry-content {
    font-size: 17px;
    line-height: 1.8;
}

.single-post .entry-content p {
    margin-bottom: 1.5em;
}


/* ==================================================
   Single Post：文章底部空間
   ================================================== */

.single-post .entry-footer {
    margin-top: 32px;
    margin-bottom: 32px;
}


/* ==================================================
   Single Post：文章分類 Category 樣式
   ================================================== */

.single-post .entry-taxonomies .category-links a {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;

    background: #EAF3FF;
    color: #1256A0;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;

    text-decoration: none;
}

/* Category 滑鼠移上效果 */
.single-post .entry-taxonomies .category-links a:hover {
    background: #DCEBFC;
    color: #0B477F;
}


/* ==================================================
   Homepage：最新文章資料區按分類自動轉背景色
   ================================================== */

/* 敢理財 */
.category-finance .latest-post-info {
    background: #EAF3FF;
}

/* 敢逆齡 */
.category-wellness .latest-post-info {
    background: #EAF8F5;
}

/* 敢破局 */
.category-reinvention .latest-post-info {
    background: #FFF3E8;
}

/* 最新文章文字區基本外觀 */
.latest-post-info {
    padding: 24px 28px;
    border-radius: 8px;
}


/* ==================================================
   Mobile Homepage：三大主題版面
   ================================================== */

@media (max-width: 600px) {

    /* 強制 Media & Text 保持左右兩欄 */
    .home-topic-row.wp-block-media-text {
        display: grid !important;
        grid-template-columns: 76px minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        grid-template-areas: "media content" !important;
        column-gap: 16px !important;

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

        align-items: center !important;
    }

    /* 圖片區 */
    .home-topic-row .wp-block-media-text__media {
        grid-area: media !important;
        width: 76px !important;
        max-width: 76px !important;
        margin: 0 !important;
        align-self: start !important;
    }

    /* Icon 本身 */
    .home-topic-row .wp-block-media-text__media img {
        display: block !important;
        width: 64px !important;
        max-width: 64px !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    /* 文字區 */
    .home-topic-row .wp-block-media-text__content {
        grid-area: content !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 移除手機版分隔線 */
    .home-topic-column,
    .home-topic-row {
        border-right: 0 !important;
        border-left: 0 !important;
    }
}


/* ==================================================
   Mobile Homepage：Hero 強制減少左右留白
   ================================================== */

@media (max-width: 600px) {

    .hero-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .hero-section .wp-block-group,
    .hero-section .wp-block-columns {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .hero-section .wp-block-columns {
        width: 100% !important;
        max-width: none !important;
    }

    .hero-section .wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .hero-section .hero-inner {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* ==================================================
   About Us：Hero
   ================================================== */

@media (min-width: 769px) {
    .about-hero-title {
        position: relative;
        z-index: 3;
        width: calc(100% + 70px);
        max-width: none;
    }
}


/* ==================================================
   About Us：內容區淡紋理背景
   ================================================== */

.about-content-section {
    background-color: #FFFFFF;
    background-image:
        radial-gradient(
            circle at 1px 1px,
            rgba(18, 86, 160, 0.09) 1px,
            transparent 0
        );
    background-size: 16px 16px;
}


/* ==================================================
   About Us：Active Section
   ================================================== */

.about-active-section {
    position: relative;
    overflow: hidden;
}

.about-active-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.78);
    z-index: 0;
    pointer-events: none;
}

.about-active-section > * {
    position: relative;
    z-index: 1;
}

.about-active-section,
.about-active-section p,
.about-active-section h2 {
    color: #000;
}


/* ==================================================
   About Us：Pillar
   ================================================== */

.about-pillar-icon {
    display: block;
    width: 76px !important;
    max-width: 76px !important;
    margin: 20px auto 12px auto !important;
}

.about-pillar-card {
    text-align: center;
    padding: 24px 24px 26px;
}


/* ==================================================
   About Us：Next Section
   ================================================== */

.about-next-section {
    position: relative;
    overflow: hidden;
}

.about-next-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.80) 0%,
        rgba(255,255,255,0.48) 50%,
        rgba(255,255,255,0.76) 100%
    );

    z-index: 0;
    pointer-events: none;
}

.about-next-section > * {
    position: relative;
    z-index: 1;
}

.about-eyebrow {
    color: #24689a;
    font-weight: 600;
    letter-spacing: 0.04em;
}

@media (max-width: 768px) {
    .about-next-columns {
        display: flex !important;
        flex-direction: column !important;
    }

    .about-next-left {
        order: 1;
    }

    .about-next-right {
        order: 2;
    }
}


/* ==================================================
   Archive：文章圖片修正
   防止 Astra Featured Image 穿出文章卡片
   ================================================== */

.archive article,
.category article {
    overflow: hidden;
}

.archive article .post-thumb,
.archive article .ast-blog-featured-section,
.archive article .post-thumb-img-content,
.category article .post-thumb,
.category article .ast-blog-featured-section,
.category article .post-thumb-img-content {
    margin-left: 0 !important;
    transform: none !important;
    position: relative !important;
    left: auto !important;
}

@media (min-width: 769px) {

    .archive article .post-thumb,
    .archive article .ast-blog-featured-section,
    .archive article .post-thumb-img-content,
    .category article .post-thumb,
    .category article .ast-blog-featured-section,
    .category article .post-thumb-img-content {
        width: 30% !important;
        max-width: 30% !important;
        flex: 0 0 30% !important;
    }

    .archive article img,
    .category article img {
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }
}
/* ==================================================
   Single Post：延伸閱讀 Related Posts 修正
   作用：
   - 限制每張卡片內容不超出欄位
   - 修正 Featured Image 溢出／偏移
   - 圖片保持 16:9 顯示
   - Desktop 保持 3 欄
   - 不影響 Archive / Homepage
   ================================================== */

/* 每一張 Related Post 卡片 */
.single-post .entry-related .entry-list-item,
.single-post .entry-related article {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Featured Image 外層連結 */
.single-post .entry-related .post-thumbnail {
    display: block !important;
    position: relative !important;

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

    margin-left: 0 !important;
    margin-right: 0 !important;

    left: auto !important;
    right: auto !important;
    transform: none !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Kadence 圖片比例容器 */
.single-post .entry-related .post-thumbnail-inner {
    display: block !important;
    position: relative !important;

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

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

    aspect-ratio: 16 / 9 !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Featured Image 本身 */
.single-post .entry-related .post-thumbnail-inner img {
    display: block !important;
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

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

    margin: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    transform: none !important;
    box-sizing: border-box !important;
}
.single-post .entry-related .post-thumbnail {
    height: auto !important;
    padding-bottom: 0 !important;
    aspect-ratio: 16 / 9 !important;
}