/**
 * Masonry Photo Wall Block - Frontend Styles
 * 
 * @package Masonry_Photo_Wall
 * @since 1.0.0
 */

/* 基礎容器 */
.masonry-photo-wall {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* 確保在 fc-block 內正確顯示 */
.fc-block.fc-masonry-grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* 對於 Justified 布局，使用 visible 以確保 margin 可見 */
    overflow: visible;
    /* 預設上下間距（減少默認值） */
    margin-top: var(--fc-spacing-md, 20px);
    margin-bottom: var(--fc-spacing-md, 20px);
}

/* Fullwidth 布局時，父容器需要特殊處理 */
.fc-block.fc-masonry-grid:has(.masonry-photo-wall--fullwidth) {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    overflow-x: visible !important;
}

/* Justified 布局時，確保容器不會隱藏 margin */
.fc-block.fc-masonry-grid.masonry-photo-wall--justified {
    overflow: visible !important;
}

.fc-block.fc-masonry-grid .masonry-photo-wall {
    width: 100%;
    max-width: 100%;
    /* CSS 變數會自動繼承，無需顯式設置 */
}

.masonry-photo-wall__container {
    display: grid;
    grid-auto-rows: min-content;
    gap: var(--masonry-gap, 15px);
    /* 確保從父元素繼承 CSS 變數 */
    grid-template-columns: repeat(var(--masonry-columns-desktop, 3), 1fr);
    width: 100%;
    box-sizing: border-box;
    min-height: 100px; /* 確保容器有最小高度（僅在桌面版） */
    height: auto; /* 使用 auto 確保容器只占用必要的高度 */
    /* align-content 僅在桌面版應用，避免平板和手機版出現空白 */
}

/* 確保容器在所有布局下都可見（僅在桌面版） */
@media (min-width: 1025px) {
.masonry-photo-wall__container:empty::after {
    content: '';
    display: block;
    min-height: 100px;
}
}


/* 響應式欄數 - 確保變數能正確繼承 */
@media (max-width: 1024px) {
    .masonry-photo-wall__container {
        grid-template-columns: repeat(var(--masonry-columns-tablet, 2), 1fr) !important;
    }
}

@media (max-width: 767px) {
    .masonry-photo-wall__container {
        /* 移除強制單欄，使用設定的欄位數 */
        grid-template-columns: repeat(var(--masonry-columns-mobile, 2), 1fr) !important;
    }
}

/* 圖片項目 - 基礎樣式 */
.masonry-photo-wall__item {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: transparent; /* 移除灰色背景 */
    display: flex;
    align-items: stretch;
    min-height: 150px; /* 確保所有項目都有最小高度 */
    width: 100%;
    box-sizing: border-box;
    /* 動畫效果 */
    animation: fadeIn 0.3s ease-in;
}

/* 完整顯示模式：移除最小高度限制 */
.masonry-photo-wall--grid-static-2.masonry-photo-wall--full-height .masonry-photo-wall__item,
.masonry-photo-wall--two-cols.masonry-photo-wall--full-height .masonry-photo-wall__item {
    min-height: 0 !important;
}

/* 明確支持 grid-column 和 grid-row（非 Justified、Pinterest 布局） */
/* 這些樣式會通過內聯 style 屬性應用，無需額外 CSS 規則 */

/* 確保項目在所有布局下都可見 */
.masonry-photo-wall__item img {
    max-width: 100%;
    height: auto;
    display: block;
}

.masonry-photo-wall__item .masonry-photo-wall__lightbox-link {
    display: block;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border: none;
    outline: none;
}

/* Grid 布局中的链接：确保高度正确 */
.masonry-photo-wall--grid .masonry-photo-wall__item .masonry-photo-wall__lightbox-link {
    height: 100% !important; /* 覆蓋外部樣式的 height: auto */
    min-height: 0 !important;
}

.masonry-photo-wall__image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px; /* 確保包裝器有最小高度 */
    box-sizing: border-box;
}

/* 完整顯示模式：移除 image-wrapper 的最小高度和絕對定位限制 */
.masonry-photo-wall--grid-static-2.masonry-photo-wall--full-height .masonry-photo-wall__image-wrapper,
.masonry-photo-wall--two-cols.masonry-photo-wall--full-height .masonry-photo-wall__image-wrapper {
    min-height: 0 !important;
    height: auto !important;
    position: relative !important;
    display: block !important;
    align-items: unset !important;
    justify-content: unset !important;
    overflow: visible !important;
    /* 確保包裝器不會被壓縮 */
    flex-shrink: 0 !important;
}

/* 完整顯示模式：lightbox link 不應該使用絕對定位 */
.masonry-photo-wall--grid-static-2.masonry-photo-wall--full-height .masonry-photo-wall__lightbox-link,
.masonry-photo-wall--two-cols.masonry-photo-wall--full-height .masonry-photo-wall__lightbox-link {
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
}

/* 完整顯示模式：lightbox link 不應該使用絕對定位 */
.masonry-photo-wall--grid-static-2.masonry-photo-wall--full-height .masonry-photo-wall__lightbox-link,
.masonry-photo-wall--two-cols.masonry-photo-wall--full-height .masonry-photo-wall__lightbox-link {
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    display: block !important;
}

.masonry-photo-wall__image {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
    object-position: center;
    flex-shrink: 0;
    border: none;
    outline: none;
    min-height: 150px; /* 確保圖片有最小高度 */
    box-sizing: border-box;
}

/* 確保圖片在所有情況下都可見 */
.masonry-photo-wall__image[src] {
    opacity: 1;
    visibility: visible;
}

/* 圖片尺寸模式 */
.masonry-photo-wall__image--cover {
    object-fit: cover;
}

.masonry-photo-wall__image--contain {
    object-fit: contain;
}

.masonry-photo-wall__image--auto {
    object-fit: auto;
}

/* 長寬比 */
.masonry-photo-wall__item--aspect-1\:1 {
    aspect-ratio: 1 / 1;
}

.masonry-photo-wall__item--aspect-4\:3 {
    aspect-ratio: 4 / 3;
}

.masonry-photo-wall__item--aspect-16\:9 {
    aspect-ratio: 16 / 9;
}

.masonry-photo-wall__item--aspect-3\:2 {
    aspect-ratio: 3 / 2;
}

/* 說明文字 */
.masonry-photo-wall__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: #fff;
    padding: 12px 15px;
    font-size: 14px;
    line-height: 1.4;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.masonry-photo-wall__item:hover .masonry-photo-wall__caption {
    transform: translateY(0);
}

/* Hover 效果 */
.masonry-photo-wall--hover-zoom .masonry-photo-wall__item:hover .masonry-photo-wall__image {
    transform: scale(1.05);
}

.masonry-photo-wall--hover-fade .masonry-photo-wall__item:hover .masonry-photo-wall__image {
    opacity: 0.8;
}

.masonry-photo-wall--hover-lift .masonry-photo-wall__item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.masonry-photo-wall--hover-lift .masonry-photo-wall__item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* 布局樣式 */
/* Masonry 瀑布流 */
.masonry-photo-wall--masonry .masonry-photo-wall__container {
    grid-auto-rows: 10px !important;
    display: grid !important; /* 確保使用 grid */
}

.masonry-photo-wall--masonry .masonry-photo-wall__item {
    grid-row-end: span var(--row-span, 20);
    height: auto; /* 讓高度自動計算 */
    min-height: 150px; /* 確保有最小高度 */
}

/* 確保 colspan 在 Masonry 布局中生效 */
/* 這些樣式會通過內聯 style 屬性應用，無需額外 CSS 規則 */

.masonry-photo-wall--masonry .masonry-photo-wall__image-wrapper {
    height: auto; /* Masonry 布局讓高度自動 */
    min-height: 150px; /* 確保有最小高度 */
    display: block; /* 改為 block 以確保正確顯示 */
}

.masonry-photo-wall--masonry .masonry-photo-wall__image {
    width: 100%;
    height: auto; /* Masonry 布局讓圖片保持原始比例 */
    min-height: 150px;
    display: block;
    object-fit: cover;
}

/* Grid 網格 */
.masonry-photo-wall--grid .masonry-photo-wall__container {
    display: grid !important; /* 確保使用 grid */
    gap: var(--masonry-gap, 15px) !important; /* 使用統一的 gap，參考 homepage-layouts.css */
    align-items: start !important; /* 對齊到頂部 */
    align-content: start !important; /* 對齊到頂部 */
    height: auto !important;
    /* 設置 grid-auto-rows 為 auto，讓每個項目根據 aspect-ratio 自動計算高度 */
    /* 這樣 grid-row: span 才能正確計算（span 4 就是 4 倍高度） */
    grid-auto-rows: auto !important;
}

/**
 * ============================================================================
 * 靜態網格布局 (grid-static-1 到 grid-static-12)
 * ============================================================================
 * 
 * 1-7 欄：完全按照 gallery-layout 的靜態方式實現
 * - 使用純 CSS Grid，不需要 JavaScript 動態計算
 * - 不支援跨欄數 (colspan) 和跨行數 (rowspan)
 * - 參考 gallery-layout 的 layout-1 到 layout-7 實現
 * 
 * 8-12 欄：客製化實現
 * - 使用純 CSS Grid，不需要 JavaScript 動態計算
 * - 不支援跨欄數 (colspan) 和跨行數 (rowspan)
 * - 適用於需要更多欄數的簡單網格布局
 * ============================================================================
 */

/* 1-7 欄：完全靜態 CSS 實現（參考 gallery-layout，不支援 colspan/rowspan） */
.masonry-photo-wall--grid-static-1 .masonry-photo-wall__container,
.masonry-photo-wall--grid-static-2 .masonry-photo-wall__container,
.masonry-photo-wall--grid-static-3 .masonry-photo-wall__container,
.masonry-photo-wall--grid-static-4 .masonry-photo-wall__container,
.masonry-photo-wall--grid-static-5 .masonry-photo-wall__container,
.masonry-photo-wall--grid-static-6 .masonry-photo-wall__container,
.masonry-photo-wall--grid-static-7 .masonry-photo-wall__container {
    display: grid !important;
    gap: var(--masonry-gap, 15px) !important;
    align-items: start !important;
    align-content: start !important;
    height: auto !important;
    grid-auto-rows: auto !important; /* 參考 gallery-layout：使用 auto 讓圖片高度自動計算 */
    grid-auto-flow: row !important;
    /* 參考 gallery-layout：使用固定的 grid-template-columns，不支援 colspan/rowspan */
}

/* 8-12 欄：客製化實現（不支援 colspan/rowspan） */
.masonry-photo-wall--grid-static-8 .masonry-photo-wall__container,
.masonry-photo-wall--grid-static-9 .masonry-photo-wall__container,
.masonry-photo-wall--grid-static-10 .masonry-photo-wall__container,
.masonry-photo-wall--grid-static-11 .masonry-photo-wall__container,
.masonry-photo-wall--grid-static-12 .masonry-photo-wall__container {
    display: grid !important;
    gap: var(--masonry-gap, 15px) !important;
    align-items: start !important;
    align-content: start !important;
    height: auto !important;
    grid-auto-rows: 1fr !important; /* 固定行高，不支援 rowspan */
    grid-auto-flow: row !important;
    /* 注意：8-12 欄不支援跨欄數 (colspan) 和跨行數 (rowspan) */
}

/* 1-7 欄：完全按照 gallery-layout 的布局實現 */
.masonry-photo-wall--grid-static-1 .masonry-photo-wall__container {
    grid-template-columns: 1fr !important; /* 1 欄：單欄 */
}

.masonry-photo-wall--grid-static-2 .masonry-photo-wall__container {
    grid-template-columns: 1fr 1fr !important; /* 2 欄：左右兩欄 */
}

.masonry-photo-wall--grid-static-3 .masonry-photo-wall__container {
    grid-template-columns: 2fr 1fr !important; /* 3 欄：左1大右2小（2fr 1fr） */
    /* grid-template-rows 由 JavaScript 動態設置（參考 gallery-layout） */
    overflow: hidden !important; /* 參考 gallery-layout */
}

.masonry-photo-wall--grid-static-3-right .masonry-photo-wall__container {
    grid-template-columns: 1fr 2fr !important; /* 3 欄：左2小右1大（1fr 2fr） */
    /* grid-template-rows 由 JavaScript 動態設置（參考 gallery-layout） */
    overflow: hidden !important; /* 參考 gallery-layout */
}

.masonry-photo-wall--grid-static-4 .masonry-photo-wall__container {
    grid-template-columns: 2fr 1fr !important; /* 4 欄：左1大右3小（2fr 1fr） */
    /* grid-template-rows 由 JavaScript 動態設置（參考 gallery-layout） */
    overflow: hidden !important; /* 參考 gallery-layout */
}

.masonry-photo-wall--grid-static-4-right .masonry-photo-wall__container {
    grid-template-columns: 1fr 2fr !important; /* 4 欄：左3小右1大（1fr 2fr） */
    /* grid-template-rows 由 JavaScript 動態設置（參考 gallery-layout） */
    overflow: hidden !important; /* 參考 gallery-layout */
}

/* 2欄完整顯示模式（適合教學） */
.masonry-photo-wall--grid-static-2.masonry-photo-wall--full-height .masonry-photo-wall__container,
.masonry-photo-wall--two-cols.masonry-photo-wall--full-height .masonry-photo-wall__container {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: auto !important; /* 讓行高自動適應內容 */
}

.masonry-photo-wall--grid-static-2.masonry-photo-wall--full-height .masonry-photo-wall__item,
.masonry-photo-wall--two-cols.masonry-photo-wall--full-height .masonry-photo-wall__item {
    aspect-ratio: unset !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.masonry-photo-wall--grid-static-2.masonry-photo-wall--full-height .masonry-photo-wall__image-wrapper,
.masonry-photo-wall--two-cols.masonry-photo-wall--full-height .masonry-photo-wall__image-wrapper {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    /* 確保包裝器不會被壓縮 */
    align-self: flex-start !important;
}

.masonry-photo-wall--grid-static-2.masonry-photo-wall--full-height .masonry-photo-wall__image,
.masonry-photo-wall--two-cols.masonry-photo-wall--full-height .masonry-photo-wall__image {
    object-fit: contain !important;
    height: auto !important;
    width: 100% !important;
    position: relative !important;
    max-height: none !important;
    display: block !important;
    /* 確保圖片有正確的高度 - 移除 min-height，讓圖片自然高度顯示 */
}

/* 圖說模式 - 在各自圖片下方顯示 */
.masonry-photo-wall__image-caption-item--inline {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e0e0e0;
    font-size: 13px;
    line-height: 1.5;
    color: #666;
    /* 確保圖說可見 */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
}

.masonry-photo-wall__image-caption-item--inline .masonry-photo-wall__image-caption-text {
    margin-bottom: 4px;
    font-weight: 500;
    display: block !important;
}

.masonry-photo-wall__image-caption-item--inline .masonry-photo-wall__image-caption-source {
    font-size: 11px;
    color: #999;
    font-style: italic;
    display: block !important;
}

/* 統一來源（顯示在最底下，僅當有統一來源時） */
.masonry-photo-wall--has-caption .masonry-photo-wall__image-captions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

/* 統一來源（顯示在最底下） */
.masonry-photo-wall__image-caption-unified-source {
    font-size: 12px;
    color: #999;
    font-style: italic;
    text-align: center; /* 居中顯示 */
    /* 移除 border-top，避免與 .masonry-photo-wall__image-captions 的 border-top 重複 */
    /* border-top 已在 .masonry-photo-wall__image-captions 中處理 */
}

/* 5 欄：上1大下4小（預設） */
.masonry-photo-wall--grid-static-5 .masonry-photo-wall__container {
    grid-template-columns: 1fr 1fr 1fr 1fr !important; /* 4 欄 */
    grid-template-rows: 2fr 1fr !important; /* 2 行 */
}

/* 5 欄：上1大下3小 */
.masonry-photo-wall--grid-static-5-3 .masonry-photo-wall__container {
    grid-template-columns: 1fr 1fr 1fr !important; /* 3 欄 */
    grid-template-rows: 2fr 1fr !important; /* 2 行 */
}

/* 5 欄：上1大下2小 */
.masonry-photo-wall--grid-static-5-2 .masonry-photo-wall__container {
    grid-template-columns: 1fr 1fr !important; /* 2 欄 */
    grid-template-rows: 2fr 1fr !important; /* 2 行 */
}

.masonry-photo-wall--grid-static-6 .masonry-photo-wall__container {
    grid-template-columns: repeat(6, 1fr) !important; /* 6 欄：簡單 6 欄網格 */
}

.masonry-photo-wall--grid-static-7 .masonry-photo-wall__container {
    grid-template-columns: repeat(7, 1fr) !important; /* 7 欄：簡單 7 欄網格 */
}

.masonry-photo-wall--grid-static-8 .masonry-photo-wall__container {
    grid-template-columns: repeat(8, 1fr) !important;
}

.masonry-photo-wall--grid-static-9 .masonry-photo-wall__container {
    grid-template-columns: repeat(9, 1fr) !important;
}

.masonry-photo-wall--grid-static-10 .masonry-photo-wall__container {
    grid-template-columns: repeat(10, 1fr) !important;
}

.masonry-photo-wall--grid-static-11 .masonry-photo-wall__container {
    grid-template-columns: repeat(11, 1fr) !important;
}

.masonry-photo-wall--grid-static-12 .masonry-photo-wall__container {
    grid-template-columns: repeat(12, 1fr) !important;
}

/* 1-7 欄：完全按照 gallery-layout 的項目樣式 */
.masonry-photo-wall--grid-static-1 .masonry-photo-wall__item,
.masonry-photo-wall--grid-static-2 .masonry-photo-wall__item,
.masonry-photo-wall--grid-static-3 .masonry-photo-wall__item,
.masonry-photo-wall--grid-static-4 .masonry-photo-wall__item,
.masonry-photo-wall--grid-static-5 .masonry-photo-wall__item,
.masonry-photo-wall--grid-static-6 .masonry-photo-wall__item,
.masonry-photo-wall--grid-static-7 .masonry-photo-wall__item {
    /* 參考 gallery-layout：.wp-block-image 樣式 */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important; /* 參考 gallery-layout：height: 100% */
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-self: start !important;
    /* 覆蓋基礎樣式 */
    min-height: 0 !important; /* 移除基礎樣式的 min-height: 150px */
    align-items: unset !important; /* 移除 flex 相關屬性 */
    /* 覆蓋外部樣式（如 #si-single-content a） */
    height: 100% !important; /* 確保高度不被外部樣式覆蓋 */
}

/* 覆蓋外部樣式對 lightbox-link 的影響 */
.masonry-photo-wall--grid-static-1 .masonry-photo-wall__lightbox-link,
.masonry-photo-wall--grid-static-2 .masonry-photo-wall__lightbox-link,
.masonry-photo-wall--grid-static-3 .masonry-photo-wall__lightbox-link,
.masonry-photo-wall--grid-static-4 .masonry-photo-wall__lightbox-link,
.masonry-photo-wall--grid-static-5 .masonry-photo-wall__lightbox-link,
.masonry-photo-wall--grid-static-6 .masonry-photo-wall__lightbox-link,
.masonry-photo-wall--grid-static-7 .masonry-photo-wall__lightbox-link {
    height: 100% !important; /* 覆蓋 #si-single-content a { height: auto; } */
    width: 100% !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
}

/* 1、2、6、7 欄：使用 aspect-ratio 確保項目有高度 */
.masonry-photo-wall--grid-static-1 .masonry-photo-wall__item,
.masonry-photo-wall--grid-static-2 .masonry-photo-wall__item,
.masonry-photo-wall--grid-static-6 .masonry-photo-wall__item,
.masonry-photo-wall--grid-static-7 .masonry-photo-wall__item {
    aspect-ratio: 1 / 1 !important; /* 使用正方形比例確保項目有高度 */
}

/* 3、4、5 欄：不使用 aspect-ratio，讓 JavaScript 控制高度 */
.masonry-photo-wall--grid-static-3 .masonry-photo-wall__item,
.masonry-photo-wall--grid-static-4 .masonry-photo-wall__item,
.masonry-photo-wall--grid-static-5 .masonry-photo-wall__item {
    aspect-ratio: unset !important; /* 讓 JavaScript 控制高度 */
}

/* 8-12 欄：客製化項目樣式 */
.masonry-photo-wall--grid-static-8 .masonry-photo-wall__item,
.masonry-photo-wall--grid-static-9 .masonry-photo-wall__item,
.masonry-photo-wall--grid-static-10 .masonry-photo-wall__item,
.masonry-photo-wall--grid-static-11 .masonry-photo-wall__item,
.masonry-photo-wall--grid-static-12 .masonry-photo-wall__item {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
    align-items: unset !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-self: start !important;
}

/* 1-7 欄：參考 gallery-layout，image-wrapper 應該填滿 item */
.masonry-photo-wall--grid-static-1 .masonry-photo-wall__image-wrapper,
.masonry-photo-wall--grid-static-2 .masonry-photo-wall__image-wrapper,
.masonry-photo-wall--grid-static-3 .masonry-photo-wall__image-wrapper,
.masonry-photo-wall--grid-static-4 .masonry-photo-wall__image-wrapper,
.masonry-photo-wall--grid-static-5 .masonry-photo-wall__image-wrapper,
.masonry-photo-wall--grid-static-6 .masonry-photo-wall__image-wrapper,
.masonry-photo-wall--grid-static-7 .masonry-photo-wall__image-wrapper {
    /* 參考 gallery-layout：包裝器應該填滿整個項目 */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    min-height: 0 !important; /* 移除基礎樣式的 min-height: 150px */
    align-items: unset !important; /* 移除 flex 相關屬性 */
    justify-content: unset !important;
    overflow: hidden !important;
    /* 確保包裝器可見 */
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 0 !important; /* 確保在正確的層級 */
}

/* 8-12 欄：保持原有的 image-wrapper 樣式 */
.masonry-photo-wall--grid-static-8 .masonry-photo-wall__image-wrapper,
.masonry-photo-wall--grid-static-9 .masonry-photo-wall__image-wrapper,
.masonry-photo-wall--grid-static-10 .masonry-photo-wall__image-wrapper,
.masonry-photo-wall--grid-static-11 .masonry-photo-wall__image-wrapper,
.masonry-photo-wall--grid-static-12 .masonry-photo-wall__image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    min-height: 0 !important;
}

/* 1-7 欄：完全按照 gallery-layout 的圖片樣式 */
.masonry-photo-wall--grid-static-1 .masonry-photo-wall__image,
.masonry-photo-wall--grid-static-2 .masonry-photo-wall__image,
.masonry-photo-wall--grid-static-3 .masonry-photo-wall__image,
.masonry-photo-wall--grid-static-4 .masonry-photo-wall__image,
.masonry-photo-wall--grid-static-5 .masonry-photo-wall__image,
.masonry-photo-wall--grid-static-6 .masonry-photo-wall__image,
.masonry-photo-wall--grid-static-7 .masonry-photo-wall__image {
    /* 參考 gallery-layout：.wp-block-image img 樣式 */
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* gallery-layout 在 JS 中設置為 cover */
    object-position: center !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    /* 確保圖片可見 */
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
    /* 確保圖片正確顯示 */
    position: relative !important;
    z-index: 1 !important;
    /* 覆蓋外部樣式（如 #si-single-content a img） */
    height: 100% !important; /* 確保高度不被外部樣式覆蓋 */
}

/* 8-12 欄：保持原有的圖片樣式 */
.masonry-photo-wall--grid-static-8 .masonry-photo-wall__image,
.masonry-photo-wall--grid-static-9 .masonry-photo-wall__image,
.masonry-photo-wall--grid-static-10 .masonry-photo-wall__image,
.masonry-photo-wall--grid-static-11 .masonry-photo-wall__image,
.masonry-photo-wall--grid-static-12 .masonry-photo-wall__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    min-height: 0 !important;
    aspect-ratio: unset !important;
}

/* 注意：所有靜態網格布局（1-12 欄）都不支援 data-colspan 和 data-rowspan 屬性 */

/* 注意：所有靜態網格布局（1-12 欄）都不支援 colspan/rowspan，因此不需要特殊的樣式規則 */

/* 靜態網格布局響應式（參考 gallery-layout） */
@media (max-width: 1024px) {
    /* 1-7 欄：參考 gallery-layout 的響應式規則 */
    .masonry-photo-wall--grid-static-3 .masonry-photo-wall__container,
    .masonry-photo-wall--grid-static-3-right .masonry-photo-wall__container,
    .masonry-photo-wall--grid-static-4 .masonry-photo-wall__container,
    .masonry-photo-wall--grid-static-4-right .masonry-photo-wall__container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .masonry-photo-wall--grid-static-5 .masonry-photo-wall__container,
    .masonry-photo-wall--grid-static-6 .masonry-photo-wall__container,
    .masonry-photo-wall--grid-static-7 .masonry-photo-wall__container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    /* 8-12 欄：最多 4 欄 */
    .masonry-photo-wall--grid-static-8 .masonry-photo-wall__container,
    .masonry-photo-wall--grid-static-9 .masonry-photo-wall__container,
    .masonry-photo-wall--grid-static-10 .masonry-photo-wall__container,
    .masonry-photo-wall--grid-static-11 .masonry-photo-wall__container,
    .masonry-photo-wall--grid-static-12 .masonry-photo-wall__container {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    /* 2欄完整顯示模式：平板也是2欄 */
    .masonry-photo-wall--grid-static-2.masonry-photo-wall--full-height .masonry-photo-wall__container,
    .masonry-photo-wall--two-cols.masonry-photo-wall--full-height .masonry-photo-wall__container {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 767px) {
    /* 1-7 欄：參考 gallery-layout 的響應式規則 */
    .masonry-photo-wall--grid-static-3 .masonry-photo-wall__container,
    .masonry-photo-wall--grid-static-3-right .masonry-photo-wall__container,
    .masonry-photo-wall--grid-static-4 .masonry-photo-wall__container,
    .masonry-photo-wall--grid-static-4-right .masonry-photo-wall__container,
    .masonry-photo-wall--grid-static-5 .masonry-photo-wall__container,
    .masonry-photo-wall--grid-static-6 .masonry-photo-wall__container,
    .masonry-photo-wall--grid-static-7 .masonry-photo-wall__container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* 8-12 欄：手機版最多 2 欄 */
    .masonry-photo-wall--grid-static-8 .masonry-photo-wall__container,
    .masonry-photo-wall--grid-static-9 .masonry-photo-wall__container,
    .masonry-photo-wall--grid-static-10 .masonry-photo-wall__container,
    .masonry-photo-wall--grid-static-11 .masonry-photo-wall__container,
    .masonry-photo-wall--grid-static-12 .masonry-photo-wall__container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* 2欄完整顯示模式：手機版也是2欄 */
    .masonry-photo-wall--grid-static-2.masonry-photo-wall--full-height .masonry-photo-wall__container,
    .masonry-photo-wall--two-cols.masonry-photo-wall--full-height .masonry-photo-wall__container {
        grid-template-columns: 1fr 1fr !important;
    }
}


/* 僅在桌面版應用 align-content: start 來修復空白 */
@media (min-width: 1025px) {
    .masonry-photo-wall--grid .masonry-photo-wall__container {
        align-content: start !important; /* 對齊到頂部，避免底部空白 */
    }
}


.masonry-photo-wall--grid .masonry-photo-wall__item {
    aspect-ratio: 1 / 1 !important; /* 使用 aspect-ratio 創建正方形，參考 homepage-layouts.css */
    width: 100% !important;
    height: auto !important; /* 讓 aspect-ratio 控制高度 */
    position: relative !important;
    overflow: hidden !important;
    display: block !important; /* 覆蓋基礎樣式的 flex */
    align-items: unset !important; /* 移除 flex 相關屬性 */
    min-height: 0 !important; /* 覆蓋基礎樣式的 min-height: 150px */
    max-height: none !important;
    box-sizing: border-box !important;
    /* 確保項目沒有多餘的 margin 和 padding */
    margin: 0 !important;
    padding: 0 !important;
    /* 確保項目可見 */
    visibility: visible !important;
    opacity: 1 !important;
}

/* 橫圖處理：橫圖（寬度大於高度）可以通過設置 colspan 來適應 */
/* 例如：橫圖（16:9）可以設置 colspan: 2, rowspan: 1 來顯示 */
/* 或者設置 colspan: 3, rowspan: 1 來顯示更寬的橫圖 */
/* 當設置了 colspan 或 rowspan 時，aspect-ratio 會自動變為 auto，讓 Grid 計算正確的高度 */

/* 確保 colspan 和 rowspan 在 Grid 布局中生效 */
/* 只有當 colspan > 1 或 rowspan > 1 時才使用 aspect-ratio: auto */
.masonry-photo-wall--grid .masonry-photo-wall__item[style*="grid-column"],
.masonry-photo-wall--grid .masonry-photo-wall__item[style*="grid-row"],
.masonry-photo-wall--grid .masonry-photo-wall__item[style*="grid-column: span"],
.masonry-photo-wall--grid .masonry-photo-wall__item[style*="grid-row: span"],
.masonry-photo-wall--grid .masonry-photo-wall__item[data-colspan]:not([data-colspan="1"]),
.masonry-photo-wall--grid .masonry-photo-wall__item[data-rowspan]:not([data-rowspan="1"]) {
    /* 允許自訂 grid-column 和 grid-row（僅當 colspan > 1 或 rowspan > 1） */
    aspect-ratio: auto !important; /* 當有 colspan/rowspan > 1 時，不使用固定長寬比 */
    height: auto !important; /* 恢復自動高度，讓 Grid 自動計算 */
    min-height: 200px !important; /* 確保有最小高度，避免高度為 0 */
}

/* 確保跨欄/跨行項目的圖片包裝器和圖片正確顯示 */
.masonry-photo-wall--grid .masonry-photo-wall__item[style*="grid-column"] .masonry-photo-wall__image-wrapper,
.masonry-photo-wall--grid .masonry-photo-wall__item[style*="grid-row"] .masonry-photo-wall__image-wrapper,
.masonry-photo-wall--grid .masonry-photo-wall__item[data-colspan]:not([data-colspan="1"]) .masonry-photo-wall__image-wrapper,
.masonry-photo-wall--grid .masonry-photo-wall__item[data-rowspan]:not([data-rowspan="1"]) .masonry-photo-wall__image-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important; /* 確保包裝器填滿項目 */
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.masonry-photo-wall--grid .masonry-photo-wall__item[style*="grid-column"] .masonry-photo-wall__image,
.masonry-photo-wall--grid .masonry-photo-wall__item[style*="grid-row"] .masonry-photo-wall__image,
.masonry-photo-wall--grid .masonry-photo-wall__item[data-colspan]:not([data-colspan="1"]) .masonry-photo-wall__image,
.masonry-photo-wall--grid .masonry-photo-wall__item[data-rowspan]:not([data-rowspan="1"]) .masonry-photo-wall__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    min-height: 0 !important;
    display: block !important;
}

.masonry-photo-wall--grid .masonry-photo-wall__image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    min-height: 0 !important; /* 覆蓋基礎樣式的 min-height: 150px */
}

.masonry-photo-wall--grid .masonry-photo-wall__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 確保圖片填滿正方形容器 */
    object-position: center !important;
    display: block !important;
    min-height: 0 !important; /* 覆蓋基礎樣式的 min-height: 150px */
    /* 覆蓋圖片內聯的 aspect-ratio，確保使用容器的正方形 */
    aspect-ratio: unset !important;
}

/* Justified 對齊式 */
.masonry-photo-wall--justified .masonry-photo-wall__container {
    display: block !important; /* 使用 block，由 JavaScript 動態生成行 */
    width: 100%;
    grid-template-columns: none !important; /* 覆蓋 grid 設定 */
    grid-auto-rows: none !important;
    gap: 0 !important; /* Justified 布局不使用 grid gap，改用 row margin-bottom */
    /* 確保容器不會影響行的 margin */
    overflow: visible !important;
    /* 防止 margin collapse */
    padding: 0 !important;
    border: 0 !important;
}

/* 行容器（由 JavaScript 動態生成） */
.masonry-photo-wall--justified .masonry-photo-wall__row {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box;
    /* margin-bottom 完全由 JavaScript 通過內聯樣式控制，此處不設置任何默認值 */
    /* 確保行之間有間距 */
    position: relative;
    /* 確保 margin-bottom 不會被其他規則覆蓋 */
    margin-top: 0 !important;
    /* 防止 margin collapse */
    overflow: visible !important;
    /* 確保 margin-bottom 生效 */
    min-height: 0 !important;
}

/* 注意：最後一行的 margin-bottom 由 JavaScript 設置為 0 */
/* 無需額外 CSS 規則，完全由 JavaScript 控制 */

/* 響應式規則已移除 - 完全依賴 JavaScript 內聯樣式設置 margin-bottom */
/* 這樣可以避免 CSS 規則與內聯樣式衝突 */

/* Justified 項目 */
.masonry-photo-wall--justified .masonry-photo-wall__justified-item {
    flex-shrink: 0;
    display: block;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    margin: 0 !important; /* 確保項目本身沒有 margin，間距由 row 的 margin-bottom 控制 */
    padding: 0 !important;
    /* 確保項目不會超出行的邊界 */
    max-width: 100%;
    max-height: 100%;
    /* 移除 min-height，讓項目完全由行的實際高度控制 */
    min-height: 0 !important;
}

/* Justified 布局不支援 colspan/rowspan（會導致版面溢出） */
/* 相關 CSS 規則已移除 */

.masonry-photo-wall--justified .masonry-photo-wall__justified-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    z-index: 2;
    /* 確保 hover 時不會影響行的 margin */
    margin-bottom: 0 !important;
}

.masonry-photo-wall--justified .masonry-photo-wall__justified-item .masonry-photo-wall__image-wrapper {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    /* 確保圖片包裝器不會超出行的邊界 */
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
    /* 移除 min-height，讓包裝器完全由項目的實際高度控制 */
    min-height: 0 !important;
}

.masonry-photo-wall--justified .masonry-photo-wall__justified-item img {
    width: 100%;
    height: 100%;
    display: block;
    border: none !important;
    object-fit: cover;
    object-position: center;
    /* 確保圖片不會超出容器邊界，影響視覺間距 */
    max-width: 100%;
    max-height: 100%;
    /* vertical-align 對 block 元素無效，已移除 */
    /* 確保圖片不會導致視覺上的間距消失 */
    margin: 0 !important;
    padding: 0 !important;
}

/* 確保 lightbox link 正確覆蓋 */
.masonry-photo-wall--justified .masonry-photo-wall__justified-item .masonry-photo-wall__lightbox-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
}

/* 確保 caption 正確顯示 */
.masonry-photo-wall--justified .masonry-photo-wall__justified-item .masonry-photo-wall__caption {
    z-index: 2;
}

/* Mosaic 拼貼 */
.masonry-photo-wall--mosaic .masonry-photo-wall__container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    grid-auto-rows: 200px !important;
    width: 100%;
    gap: var(--masonry-gap, 15px); /* 確保使用 gap */
}

.masonry-photo-wall--mosaic .masonry-photo-wall__item {
    min-height: 200px; /* 確保有最小高度 */
}

.masonry-photo-wall--mosaic .masonry-photo-wall__item:nth-child(odd) {
    grid-row: span 2;
    min-height: 400px; /* 跨兩行的項目需要兩倍高度 */
}

/* 確保 colspan 和 rowspan 在 Mosaic 布局中生效（優先於 nth-child 規則） */
/* 這些樣式會通過內聯 style 屬性應用，無需額外 CSS 規則 */

.masonry-photo-wall--mosaic .masonry-photo-wall__image-wrapper {
    height: 100%;
    min-height: 200px;
}

.masonry-photo-wall--mosaic .masonry-photo-wall__image {
    width: 100%;
    height: 100%;
    min-height: 200px;
}

/* Pinterest 風格 */
.masonry-photo-wall--pinterest .masonry-photo-wall__container {
    column-count: var(--masonry-columns-desktop, 3) !important;
    column-gap: var(--masonry-gap, 15px);
    width: 100%;
    display: block !important; /* 確保容器可見，覆蓋 grid */
    grid-template-columns: none !important; /* 覆蓋 grid 設定 */
    grid-auto-rows: none !important;
}

.masonry-photo-wall--pinterest .masonry-photo-wall__item {
    break-inside: avoid;
    margin-bottom: var(--masonry-gap, 15px);
    display: inline-block;
    width: 100%;
    page-break-inside: avoid;
    min-height: 150px; /* 確保有最小高度 */
    /* vertical-align 對 inline-block 有效，無需移除 */
}

/* Pinterest 布局不支援 colspan/rowspan（會導致版面溢出） */
/* 相關 CSS 規則已移除 */

.masonry-photo-wall--pinterest .masonry-photo-wall__image-wrapper {
    height: auto;
    min-height: 150px;
    display: block;
    width: 100%;
}

.masonry-photo-wall--pinterest .masonry-photo-wall__image {
    width: 100%;
    height: auto;
    display: block;
    min-height: 150px;
}

@media (max-width: 1024px) {
    .masonry-photo-wall--pinterest .masonry-photo-wall__container {
        column-count: var(--masonry-columns-tablet, 2) !important;
    }
}

@media (max-width: 767px) {
    .masonry-photo-wall--pinterest .masonry-photo-wall__container {
        /* 移除強制單欄，使用設定的欄位數 */
        column-count: var(--masonry-columns-mobile, 2) !important;
    }
}

/* Instagram 方格 */
.masonry-photo-wall--instagram .masonry-photo-wall__container {
    display: grid !important; /* 確保使用 grid */
}

.masonry-photo-wall--instagram .masonry-photo-wall__item {
    aspect-ratio: 1 / 1 !important; /* Instagram 布局使用正方形，強制保持 */
    width: 100% !important;
    height: 0 !important; /* 讓 aspect-ratio 控制高度 */
    padding-bottom: 100% !important; /* 備用方案：確保正方形（當 aspect-ratio 不支援時） */
    position: relative !important;
    overflow: hidden !important;
    display: block !important; /* 覆蓋 flex，確保 aspect-ratio 生效 */
    align-items: unset !important; /* 移除 flex 相關屬性 */
    min-height: 0 !important; /* 移除 min-height，讓 aspect-ratio 控制 */
    box-sizing: border-box !important;
}

/* 確保 colspan 和 rowspan 在 Instagram 布局中生效 */
.masonry-photo-wall--instagram .masonry-photo-wall__item[style*="grid-column"],
.masonry-photo-wall--instagram .masonry-photo-wall__item[style*="grid-row"] {
    /* 允許自訂 grid-column 和 grid-row */
    aspect-ratio: auto !important; /* 當有 colspan/rowspan 時，不使用固定長寬比 */
    padding-bottom: 0 !important; /* 移除備用 padding */
    height: auto !important; /* 恢復自動高度 */
}

.masonry-photo-wall--instagram .masonry-photo-wall__image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.masonry-photo-wall--instagram .masonry-photo-wall__image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 確保圖片填滿正方形容器 */
    object-position: center;
}

/* 載入動畫已移至基礎樣式中，避免重複定義 */

/* 禁用過渡效果，避免重新計算時閃爍 */
.masonry-photo-wall--recalculating {
    animation: none !important;
    transition: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* =============================================================================
   從 gallery-layout 新增的布局樣式
   ============================================================================= */

/* 均分列 (Equal Row) */
.masonry-photo-wall--equal-row .masonry-photo-wall__container {
    display: flex !important;
    gap: var(--masonry-gap, 15px);
    width: 100%;
    align-items: stretch;
}

.masonry-photo-wall--equal-row .masonry-photo-wall__item {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    display: block;
}

.masonry-photo-wall--equal-row .masonry-photo-wall__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #f8f8f8;
}

/* 左右兩欄 並排 */
.masonry-photo-wall--two-cols .masonry-photo-wall__container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--masonry-gap, 15px) !important;
    height: auto !important;
}

.masonry-photo-wall--two-cols .masonry-photo-wall__item {
    height: 100%;
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

.masonry-photo-wall--two-cols .masonry-photo-wall__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fullwidth 滿版橫排 */
.masonry-photo-wall--fullwidth {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.masonry-photo-wall--fullwidth .masonry-photo-wall__container {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: var(--masonry-gap, 15px) !important;
    scroll-snap-type: x mandatory !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.masonry-photo-wall--fullwidth .masonry-photo-wall__item {
    flex: 0 0 80vw !important;
    height: 60vh !important;
    scroll-snap-align: center !important;
    min-width: 0 !important;
    position: relative !important;
}

.masonry-photo-wall--fullwidth .masonry-photo-wall__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Coverflow 3D */
.masonry-photo-wall--coverflow .masonry-photo-wall__container {
    display: flex !important;
    align-items: center;
    overflow-x: auto;
    padding: 2rem 0;
    perspective: 1200px;
}

.masonry-photo-wall--coverflow .masonry-photo-wall__item {
    flex: 0 0 40%;
    height: 400px;
    transition: transform 0.5s ease;
    transform: rotateY(45deg) scale(0.8);
}

.masonry-photo-wall--coverflow .masonry-photo-wall__item:hover {
    transform: rotateY(0) scale(1);
    z-index: 10;
}

/* 拍立得效果 (Polaroid) */
.masonry-photo-wall--polaroid .masonry-photo-wall__container {
    display: flex !important;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 20px;
}

.masonry-photo-wall--polaroid .masonry-photo-wall__item {
    background: white;
    padding: 10px 10px 30px 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: rotate(-2deg);
    transition: transform 0.3s ease;
    width: 200px !important;
    height: auto !important;
    position: relative;
}

.masonry-photo-wall--polaroid .masonry-photo-wall__item:nth-child(even) {
    transform: rotate(2deg);
}

.masonry-photo-wall--polaroid .masonry-photo-wall__item:hover {
    transform: rotate(0deg) scale(1);
    z-index: 10;
}

.masonry-photo-wall--polaroid .masonry-photo-wall__image {
    object-fit: cover;
}

/* 主圖精選 (Featured Big) */
.masonry-photo-wall--featured-big .masonry-photo-wall__container {
    display: grid !important;
    gap: var(--masonry-gap, 15px) !important;
    grid-template-columns: 2fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    height: 400px !important;
    width: 100% !important;
}

.masonry-photo-wall--featured-big .masonry-photo-wall__item {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.masonry-photo-wall--featured-big .masonry-photo-wall__item:first-child {
    grid-row: 1 / 3 !important;
    grid-column: 1 / 2 !important;
}

.masonry-photo-wall--featured-big .masonry-photo-wall__image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.masonry-photo-wall--featured-big .masonry-photo-wall__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 圓形網格 (Circle Grid) */
.masonry-photo-wall--circle-grid .masonry-photo-wall__container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    padding: 20px;
    justify-content: center;
}

.masonry-photo-wall--circle-grid .masonry-photo-wall__item {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.masonry-photo-wall--circle-grid .masonry-photo-wall__item:hover {
    transform: scale(1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.masonry-photo-wall--circle-grid .masonry-photo-wall__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 底片風格 (Film Strip) */
.masonry-photo-wall--film-strip .masonry-photo-wall__container {
    background: #222;
    padding: 20px 10px;
    display: flex !important;
    gap: 5px;
    overflow-x: auto;
    border-top: 10px solid #333;
    border-bottom: 10px solid #333;
    position: relative;
}

.masonry-photo-wall--film-strip .masonry-photo-wall__container::before,
.masonry-photo-wall--film-strip .masonry-photo-wall__container::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    background: repeating-linear-gradient(
        to right,
        #444 0px,
        #444 15px,
        #666 15px,
        #666 25px
    );
}

.masonry-photo-wall--film-strip .masonry-photo-wall__container::before {
    top: 2px;
}

.masonry-photo-wall--film-strip .masonry-photo-wall__container::after {
    bottom: 2px;
}

.masonry-photo-wall--film-strip .masonry-photo-wall__item {
    flex: 0 0 200px;
    height: 150px !important;
    border: 2px solid #555;
}

.masonry-photo-wall--film-strip .masonry-photo-wall__image {
    object-fit: cover;
}

/* 交錯網格 (Offset Columns) */
.masonry-photo-wall--offset-cols .masonry-photo-wall__container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.masonry-photo-wall--offset-cols .masonry-photo-wall__item:nth-child(even) {
    transform: translateY(30px);
    transition: transform 0.3s ease;
}

.masonry-photo-wall--offset-cols .masonry-photo-wall__item:hover {
    transform: translateY(0px) scale(1);
}

/* 主副分欄 (Split Focus) */
.masonry-photo-wall--split-focus .masonry-photo-wall__container {
    display: grid !important;
    grid-template-columns: 3fr 2fr;
    gap: 15px;
    height: 400px;
}

.masonry-photo-wall--split-focus .masonry-photo-wall__item:first-child {
    grid-row: 1 / -1;
}

.masonry-photo-wall--split-focus .masonry-photo-wall__item:not(:first-child) {
    height: calc(50% - 7.5px) !important;
}

.masonry-photo-wall--split-focus .masonry-photo-wall__image {
    object-fit: cover;
}

/* 滑塊輪播 (Slider) - 需要 Flickity */
.masonry-photo-wall--slider .masonry-photo-wall__container {
    height: 50vh;
    max-height: 500px;
    min-height: 300px;
    background: #f0f0f0;
    display: block;
    opacity: 1;
}

.masonry-photo-wall--slider .masonry-photo-wall__container .flickity-viewport,
.masonry-photo-wall--slider .masonry-photo-wall__container .flickity-slider {
    height: 100%;
}

.masonry-photo-wall--slider .masonry-photo-wall__item {
    height: 100%;
    margin-right: 10px;
    box-sizing: border-box;
    width: 100%;
}

.masonry-photo-wall--slider .masonry-photo-wall__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.masonry-photo-wall--slider .masonry-photo-wall__container.flickity-enabled {
    outline: none;
}

.masonry-photo-wall--slider .flickity-page-dots {
    bottom: -40px;
}

.masonry-photo-wall--slider .flickity-prev-next-button {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
}

/* 輪播圖 (Carousel) - 需要 Flickity */
.masonry-photo-wall--carousel .masonry-photo-wall__container {
    height: 400px;
    display: block;
}

.masonry-photo-wall--carousel .masonry-photo-wall__item {
    height: 100%;
    margin-right: 10px;
    box-sizing: border-box;
    width: calc(33.333% - 7px);
}

.masonry-photo-wall--carousel .masonry-photo-wall__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 響應式設計 */
@media (max-width: 768px) {
    .masonry-photo-wall--equal-row .masonry-photo-wall__container {
        flex-direction: column;
    }
    
    .masonry-photo-wall--equal-row .masonry-photo-wall__item {
        width: 100% !important;
        height: auto !important;
    }
    
    .masonry-photo-wall--equal-row .masonry-photo-wall__image {
        height: auto !important;
        max-height: 60vh;
    }
    
    .masonry-photo-wall--featured-big .masonry-photo-wall__container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
    }
    
    .masonry-photo-wall--featured-big .masonry-photo-wall__item:first-child {
        grid-row: auto;
        grid-column: auto;
    }
    
    .masonry-photo-wall--split-focus .masonry-photo-wall__container {
        grid-template-columns: 1fr;
        height: auto;
    }
    
    .masonry-photo-wall--split-focus .masonry-photo-wall__item:first-child {
        grid-row: auto;
    }
    
    .masonry-photo-wall--split-focus .masonry-photo-wall__item:not(:first-child) {
        height: auto !important;
    }
    
    /* 1-12 Columns Grid 響應式：在手機版可以自動調整，或保持固定欄數 */
    /* 如果需要響應式，可以在這裡覆蓋 */
}

.masonry-photo-wall--recalculating * {
    animation: none !important;
    transition: none !important;
}

.masonry-photo-wall--recalculating .masonry-photo-wall__item,
.masonry-photo-wall--recalculating .masonry-photo-wall__row,
.masonry-photo-wall--recalculating .masonry-photo-wall__justified-item,
.masonry-photo-wall--recalculating .masonry-photo-wall__image {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
}

/* 防止底部多餘空間 */
.masonry-photo-wall__item:last-child {
    margin-bottom: 0;
}

/* 確保圖片完全填充容器（僅 Mosaic 布局，Grid 和 Instagram 使用絕對定位） */
.masonry-photo-wall--mosaic .masonry-photo-wall__item {
    display: flex;
    flex-direction: column;
    min-height: 200px; /* 確保有最小高度 */
}

.masonry-photo-wall--mosaic .masonry-photo-wall__image-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 無障礙支援 */
.masonry-photo-wall__item:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* =========================================================================
   與 feature-content 整合：防止超出容器
   ========================================================================= */

/* 確保在一般文章容器內不會超出 */
.entry-content .fc-masonry-grid,
.post-content .fc-masonry-grid,
.article-content .fc-masonry-grid,
.single .content-area .fc-masonry-grid,
.content-area .entry-content .fc-masonry-grid {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
    overflow: hidden;
}

.entry-content .fc-masonry-grid .masonry-photo-wall,
.post-content .fc-masonry-grid .masonry-photo-wall,
.article-content .fc-masonry-grid .masonry-photo-wall {
    max-width: 100% !important;
    width: 100% !important;
}

.entry-content .fc-masonry-grid .masonry-photo-wall__container,
.post-content .fc-masonry-grid .masonry-photo-wall__container,
.article-content .fc-masonry-grid .masonry-photo-wall__container {
    max-width: 100% !important;
    width: 100% !important;
}

/* 響應式：確保在小螢幕上不會超出 */
@media (max-width: 767px) {
    .masonry-photo-wall__item {
        min-width: 0; /* 移除最小寬度限制 */
    }
}