/**
 * Feature Content - Base Styles
 * 
 * 基礎區塊樣式
 * 
 * @package Feature_Content
 * @since 2.1.0
 */

/* Prevent horizontal scrollbar from vw units */
body.feature-content-page {
    overflow-x: hidden;
}

/* Block reset */
.fc-block {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.fc-block *,
.fc-block *::before,
.fc-block *::after {
    box-sizing: border-box;
}

.fc-block img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Width utilities */
.fc-width-fullwidth {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.fc-width-wide {
    width: 100% !important;
    max-width: var(--fc-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.fc-width-normal {
    width: 100% !important;
    max-width: var(--fc-content-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.fc-width-narrow {
    width: 100% !important;
    max-width: var(--fc-narrow-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Container utilities */
.fc-container {
    width: 100%;
    max-width: var(--fc-max-width);
    margin: 0 auto;
    padding: 0 var(--fc-spacing-md);
}

.fc-container--narrow {
    max-width: var(--fc-content-width);
}

/* Section ID anchor offset for sticky header */
[id] {
    scroll-margin-top: 80px;
}

/* =========================================================================
   Auto-adjustment for blocks used in regular posts
   當 feature-content 區塊用於一般文章時，自動調整寬度以避免超出容器
   ========================================================================= */

/* 針對一般文章的容器（非 feature-content 頁面） */
.entry-content .fc-block,
.post-content .fc-block,
.article-content .fc-block,
.single .content-area .fc-block,
.content-area .entry-content .fc-block {
    /* 確保區塊不會超出父容器 */
    max-width: 100%;
    box-sizing: border-box;
}

/* 當區塊在一般文章容器內時，自動調整寬度 */
.entry-content .fc-width-wide,
.post-content .fc-width-wide,
.article-content .fc-width-wide,
.single .content-area .fc-width-wide,
.content-area .entry-content .fc-width-wide {
    max-width: 100% !important;
    width: 100% !important;
}

/* 確保 normal 寬度在一般文章中也適當調整 */
.entry-content .fc-width-normal,
.post-content .fc-width-normal,
.article-content .fc-width-normal,
.single .content-area .fc-width-normal,
.content-area .entry-content .fc-width-normal {
    max-width: min(100%, var(--fc-content-width, 800px)) !important;
    width: 100% !important;
}

/* 確保 custom 寬度不會超出容器 */
.entry-content .fc-width-custom,
.post-content .fc-width-custom,
.article-content .fc-width-custom,
.single .content-area .fc-width-custom,
.content-area .entry-content .fc-width-custom {
    max-width: min(100%, var(--block-custom-width, 1000px)) !important;
    width: 100% !important;
}

/* Fullwidth 區塊在一般文章中需要特殊處理 */
.entry-content .fc-width-fullwidth:not(.fc-title-hero),
.post-content .fc-width-fullwidth:not(.fc-title-hero),
.article-content .fc-width-fullwidth:not(.fc-title-hero),
.single .content-area .fc-width-fullwidth:not(.fc-title-hero),
.content-area .entry-content .fc-width-fullwidth:not(.fc-title-hero) {
    /* 在一般文章中，fullwidth 改為 100% 而非 100vw，避免橫向滾動 */
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: auto !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 響應式調整：在小螢幕上進一步確保不超出 */
@media (max-width: 1200px) {
    .entry-content .fc-width-wide,
    .post-content .fc-width-wide,
    .article-content .fc-width-wide,
    .single .content-area .fc-width-wide,
    .content-area .entry-content .fc-width-wide {
        max-width: 100% !important;
    }
}

/* 防止橫向滾動 */
body:not(.feature-content-page) .entry-content .fc-block,
body:not(.feature-content-page) .post-content .fc-block,
body:not(.feature-content-page) .article-content .fc-block {
    overflow-x: hidden;
}