:root {
    --muted: #8e8c8c;
    --line: #dad7d5;
}

/* 導覽 sticky 時，#bird-gallery 錨點捲動留白 */
#bird-gallery {
    scroll-margin-top: 96px;
}

* {
    box-sizing: border-box;
}

.gallery-shell {
    max-width: 1080px;
    margin: 0 auto 48px;
    padding: 34px 24px 0;
}

/* 萬象等多段版面：區塊之間留白，區塊內仍沿用各 template 網格 */
.gallery-mount--composed {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
}

.gallery-layout-segment {
    width: 100%;
    margin: 0;
}

.gallery-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 28px;
}

.gallery-heading h1 {
    margin: 0;
    font-size: 1.95rem;
    font-weight: 500;
}

.gallery-heading .line {
    width: 110px;
    border-top: 1px solid var(--line);
}

.gallery-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}

.gallery-tab {
    border: 1px solid #ddd7d5;
    background: #fff;
    color: #4b4746;
    border-radius: 999px;
    padding: 6px 16px;
    cursor: pointer;
    font-family: inherit;
}

.gallery-tab.active {
    background: #f3efee;
    border-color: #9d8f8b;
}

.gallery-panel {
    display: none;
}

.gallery-panel.active {
    display: block;
}

.species-title-wrap {
    margin: 4px auto 22px;
    text-align: center;
}

.filter-species-row {
    margin-top: 4px;
    margin-bottom: 18px;
}

.species-title-label {
    margin: 0 0 8px;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: #6a6664;
    font-weight: 500;
}

.species-title-note {
    font-weight: 400;
    font-size: 0.74rem;
    color: #9e9a98;
    letter-spacing: 0.04em;
}

.species-title-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/* 第一層（類群）— 標題與鈕略大 */
.filter-tier-1 .species-title-label {
    font-size: 0.88rem;
}

.filter-tier-1 .species-title-note {
    font-size: 0.76rem;
}

.filter-tier-1 .species-title-list {
    gap: 9px;
}

.filter-tier-1 .species-chip {
    padding: 6px 14px;
    font-size: 0.85rem;
}

/* 第二層（鳥種）— 每降一層略縮 */
.filter-tier-2 .species-title-label {
    font-size: 0.8rem;
}

.filter-tier-2 .species-title-note {
    font-size: 0.7rem;
}

.filter-tier-2 .species-title-list {
    gap: 7px;
}

.filter-tier-2 .species-chip {
    padding: 4px 11px;
    font-size: 0.76rem;
}

.species-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid #ddd7d5;
    border-radius: 999px;
    font-size: 0.82rem;
    color: #4b4746;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
}

.species-chip.active {
    border-color: #9d8f8b;
    background: #f5f2f1;
    color: #2f2b2a;
}

.mosaic-grid {
    --gap: 14px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
        "a a a b b b"
        "d d d c c c"
        "e e e c c c"
        "g g g g f f";
    gap: var(--gap);
}

/* 僅馬賽克「第二區」三格：左上下兩橫、右直幅跨兩列（對齊萬象草稿） */
.mosaic-grid.mosaic-grid--row2-only {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
        "d d d c c c"
        "e e e c c c";
}

.slot {
    overflow: hidden;
    background: #fff;
    border-radius: var(--gallery-card-radius, 8px);
}

.slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.slot-1 { grid-area: a; }
.slot-2 { grid-area: b; }
.slot-3 { grid-area: c; }
.slot-4 { grid-area: d; }
.slot-5 { grid-area: e; }
.slot-6 { grid-area: f; }
.slot-7 { grid-area: g; }

/* 第一、三排：固定寬度下由 3:2 自動算高度 */
.slot-1,
.slot-2,
.slot-6,
.slot-7 {
    aspect-ratio: 3 / 2;
}

/* 馬賽克第二區左右小橫（d/e）：3:2；列高交由 syncSecondRowSizing 與直幅欄對齊 */
.slot-4,
.slot-5 {
    aspect-ratio: 3 / 2;
}

/* 第二區直幅（c）＋小橫列高由 JS 同步 */
.slot-3,
.slot-4,
.slot-5 {
    height: auto;
}

/* 第四列：與馬賽克同 6 欄軌；三格「直｜橫｜直」同一列，比例約 4∶9∶4 → 欄數 1＋4＋1，中大橫接滿含 f 下方、不留右側破洞 */
.fourth-row {
    --gap: 14px;
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--gap);
    align-items: stretch;
}

.fourth-left,
.fourth-right,
.fourth-mid {
    min-width: 0;
}

.fourth-row.fourth-row--slots-3 {
    grid-template-rows: auto;
}

.fourth-row.fourth-row--slots-3 .fourth-left {
    grid-column: 1 / 2;
    grid-row: 1;
    align-self: stretch;
    min-height: 0;
}

/* 橫幅定列高（3∶2）；兩側直 stretch 等高，框內圖維持 slot 規則 */
.fourth-row.fourth-row--slots-3 .fourth-mid {
    grid-column: 2 / 6;
    grid-row: 1;
    aspect-ratio: 3 / 2;
    align-self: start;
    height: auto;
}

.fourth-row.fourth-row--slots-3 .fourth-right {
    grid-column: 6 / -1;
    grid-row: 1;
    align-self: stretch;
    min-height: 0;
}

/* 兩格（僅餘側＋中大）：同上思路，大中橫全寬、側在下 */
.fourth-row.fourth-row--slots-2 .fourth-mid {
    grid-column: 1 / -1;
    grid-row: 1;
    aspect-ratio: 3 / 2;
}

.fourth-row.fourth-row--slots-2 .fourth-left {
    grid-column: 1 / 2;
    grid-row: 2;
    aspect-ratio: 3 / 4;
}

.fourth-row.fourth-row--slots-1 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: min(840px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.fourth-row.fourth-row--slots-1 .fourth-mid {
    grid-column: 2 / span 4;
    aspect-ratio: 3 / 2;
}

/* 1／2／4／5〜9：簡版與備用版面 */
.layout-one {
    width: 100%;
}

.layout-one .slot {
    aspect-ratio: 3 / 2;
}

/* 並排兩張：列高取兩欄較「需要」的那一邊後 stretch 對齊（不再鎖死 3:2，才不會視覺上永遠像舊版） */
.layout-two {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
    width: 100%;
}

.layout-two .slot {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.layout-two .slot img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center top;
}

/* 橫／直對應格：直圖不占橫向裁切盒子 */
.slot.slot-photo-portrait {
    background: #f4f3f2;
}

.slot.slot-photo-portrait img {
    object-fit: contain;
    object-position: center top;
}

.layout-mix {
    width: 100%;
}

/* 橫欄外框：與直欄同行的槽 stretch 等高；頂對齊（勿垂直置中，否則橫圖會「下沉」像在截圖裡較矮一截） */
.layout-gallery-cover-frame {
    box-sizing: border-box;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.layout-gallery-cover-frame img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center top;
}

/* 一直一橫：列高鎖定；左直固定寬、右橫彈性；圖絕對貼框 cover（壓過 .slot-photo-portrait 的 contain） */
.layout-mix--1h1v {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    box-sizing: border-box;
    gap: 14px;
    width: 100%;
    margin-bottom: 20px;
    min-height: 0;
    height: clamp(280px, 38vw, 500px);
}

.layout-mix--1h1v .layout-mix-portrait {
    flex: 0 0 clamp(118px, 26vw, 220px);
    width: clamp(118px, 26vw, 220px);
    max-width: 220px;
    min-width: 100px;
    align-self: stretch;
    min-height: 0;
}

.layout-mix--1h1v .layout-mix-landscape {
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
}

.layout-mix--1h1v .slot {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    position: relative;
    border-radius: var(--gallery-card-radius, 8px);
    background: transparent;
}

.layout-mix--1h1v .slot.slot-photo-portrait {
    background: transparent;
}

.layout-mix--1h1v .slot > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover !important;
    object-position: center top;
    max-width: none !important;
    max-height: none !important;
}

/* 兩橫一直：左上下兩橫、右直幅等高（僅 3 張且 2L+1P 時；圖絕對貼框 cover） */
.layout-mix--2h1v {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(118px, 34%);
    grid-template-rows: auto auto;
    gap: 14px;
    align-items: stretch;
    min-height: 0;
}

.layout-mix--2h1v .layout-mix-portrait-col {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: stretch;
    position: relative;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    background: transparent;
}

.layout-mix--2h1v .layout-mix-h1,
.layout-mix--2h1v .layout-mix-h2 {
    position: relative;
    overflow: hidden;
    min-height: 0;
    aspect-ratio: 3 / 2;
    width: 100%;
}

.layout-mix--2h1v .layout-mix-h1 {
    grid-column: 1;
    grid-row: 1;
}

.layout-mix--2h1v .layout-mix-h2 {
    grid-column: 1;
    grid-row: 2;
}

.layout-mix--2h1v .layout-mix-portrait-col img,
.layout-mix--2h1v .layout-mix-landscape img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover !important;
    object-position: center top;
    max-width: none !important;
    max-height: none !important;
}

/* 文化影像 8 張：2v + (2v+1h) + (1v+2v)；全格 cover（壓過直式預設 contain） */
.layout-culture-eight .culture-slot {
    position: relative;
    overflow: hidden;
    border-radius: var(--gallery-card-radius, 8px);
    background: #f4f3f2;
}

.layout-culture-eight .culture-slot > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover !important;
    object-position: center top;
    max-width: none !important;
    max-height: none !important;
}

.layout-culture--2v {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
    width: 100%;
}

.layout-culture--2v .culture-2v-a,
.layout-culture--2v .culture-2v-b {
    flex: 1 1 0;
    min-width: 0;
    min-height: clamp(260px, 42vw, 520px);
    max-height: min(620px, 88vw);
}

/* 並排二直｜一橫：兩窄直 + 右側主橫，列高依橫圖比例 */
.layout-culture--2v1h {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 0.92fr) minmax(0, 2fr);
    grid-template-rows: auto;
    gap: 14px;
    align-items: stretch;
    width: 100%;
}

.layout-culture--2v1h .culture-2v1h-p {
    grid-row: 1;
    min-height: 0;
    align-self: stretch;
    height: 100%;
}

.layout-culture--2v1h .culture-2v1h-p1 {
    grid-column: 1;
}

.layout-culture--2v1h .culture-2v1h-p2 {
    grid-column: 2;
}

.layout-culture--2v1h .culture-2v1h-h {
    grid-column: 3;
    grid-row: 1;
    min-height: 0;
    width: 100%;
    aspect-ratio: 3 / 2;
}

/* 左一整直 + 右上下兩直 */
.layout-culture--1v2v {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
    width: 100%;
    min-height: 0;
}

.layout-culture--1v2v .culture-1v2v-left {
    grid-column: 1;
    grid-row: 1 / -1;
    min-height: 0;
}

.layout-culture--1v2v .culture-1v2v-rt-top {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    aspect-ratio: 2 / 3;
    align-self: stretch;
}

.layout-culture--1v2v .culture-1v2v-rt-bot {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    aspect-ratio: 2 / 3;
    align-self: stretch;
}

/* 四張／2×2：每格獨立欄避免疊圖；列內對齊 */
.layout-four-stacked-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.layout-four-row-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 0;
    align-items: stretch;
}

.layout-four-cell {
    min-width: 0;
    max-width: 100%;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 0;
}

.layout-four-cell .slot {
    width: 100%;
    box-sizing: border-box;
}

.layout-four-cell .slot:not(.slot-photo-portrait) {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: transparent;
    display: flex;
    flex-direction: column;
}

.layout-four-cell .slot:not(.slot-photo-portrait) .layout-gallery-cover-frame {
    flex: 1 1 auto;
    min-height: 0;
}

.layout-four-cell .slot.slot-photo-portrait {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    place-items: start center;
    place-content: start center;
    justify-items: center;
    align-content: start;
    background: transparent;
}

.layout-four-cell .slot.slot-photo-portrait img {
    max-height: 100%;
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center top;
}

.layout-four-banner {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.layout-four-banner-hero {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.layout-four-banner-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

.layout-four-banner-row .slot {
    aspect-ratio: 3 / 2;
}

.layout-flex-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 14px;
}

.layout-flex-grid .slot {
    aspect-ratio: 3 / 2;
}

.empty-msg {
    text-align: center;
    color: var(--muted);
    margin: 16px 0;
}

.gallery-layout-note {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

.gallery-layout-note strong {
    color: #5c5857;
}

.gallery-layout-tip {
    display: block;
    margin-top: 12px;
    font-size: 0.82rem;
    color: #9e9a98;
    letter-spacing: 0.03em;
    line-height: 1.55;
}

.gallery-mount--fallback {
    min-height: 80px;
    padding-bottom: 8px;
}

.category-block {
    margin-top: 26px;
}

.category-title {
    margin: 0 0 14px;
    font-size: 1.25rem;
    font-weight: 500;
    text-align: center;
}

@media (max-width: 900px) {
    .gallery-shell {
        padding: 24px 18px 0;
    }

    .mosaic-grid {
        --gap: 12px;
    }

    .fourth-row {
        --gap: 12px;
    }
}

@media (max-width: 560px) {
    .gallery-shell {
        padding: 20px 12px 0;
    }

    .gallery-heading {
        gap: 14px;
        margin-bottom: 20px;
    }

    .gallery-tabs {
        margin-bottom: 14px;
    }

    .species-title-wrap {
        margin-bottom: 16px;
    }

    .species-chip {
        font-size: 0.76rem;
        padding: 4px 10px;
    }

    .gallery-heading .line {
        width: 64px;
    }

    .mosaic-grid {
        --gap: 10px;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "a b"
            "d d"
            "e e"
            "c c"
            "g f";
    }

    .mosaic-grid.mosaic-grid--row2-only {
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "d d"
            "e e"
            "c c";
    }

    .layout-four-banner-row {
        grid-template-columns: 1fr;
    }

    .layout-four-row-pair {
        grid-template-columns: 1fr;
        column-gap: 14px;
    }

    .layout-two {
        flex-direction: column;
    }

    .layout-two .slot {
        flex: 0 1 auto;
        width: 100%;
    }

    /* 手機：直欄／橫欄改直向堆疊，各自比例 */
    .layout-mix--1h1v {
        flex-direction: column !important;
        height: auto !important;
        gap: 14px;
    }

    .layout-mix--1h1v .layout-mix-portrait {
        flex: 0 1 auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .layout-mix--1h1v .layout-mix-landscape {
        flex: 0 1 auto !important;
    }

    .layout-mix--1h1v .slot {
        width: 100% !important;
        aspect-ratio: 3 / 2;
        height: auto !important;
    }

    .layout-mix--1h1v .slot.slot-photo-portrait {
        aspect-ratio: 2 / 3;
        max-height: 450px;
    }

    .layout-mix--2h1v {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .layout-mix--2h1v .layout-mix-h1 {
        grid-column: 1;
        grid-row: 1;
    }

    .layout-mix--2h1v .layout-mix-h2 {
        grid-column: 1;
        grid-row: 2;
    }

    .layout-mix--2h1v .layout-mix-portrait-col {
        grid-column: 1;
        grid-row: 3;
        min-height: 220px;
        aspect-ratio: 2 / 3;
        max-height: 480px;
    }

    /* 文化影像固定版：窄螢幕改直向堆疊 */

    .layout-culture--2v {
        flex-direction: column;
    }

    .layout-culture--2v .culture-2v-a,
    .layout-culture--2v .culture-2v-b {
        min-height: auto;
        aspect-ratio: 2 / 3;
        max-height: 480px;
    }

    .layout-culture--2v1h {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .layout-culture--2v1h .culture-2v1h-p1 {
        grid-column: 1;
        grid-row: 1;
    }

    .layout-culture--2v1h .culture-2v1h-p2 {
        grid-column: 1;
        grid-row: 2;
    }

    .layout-culture--2v1h .culture-2v1h-h {
        grid-column: 1;
        grid-row: 3;
        aspect-ratio: 3 / 2;
        align-self: stretch;
        width: 100%;
    }

    .layout-culture--1v2v {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .layout-culture--1v2v .culture-1v2v-left {
        grid-column: 1;
        grid-row: 1;
        aspect-ratio: 2 / 3;
        max-height: 520px;
    }

    .layout-culture--1v2v .culture-1v2v-rt-top {
        grid-column: 1;
        grid-row: 2;
        max-height: 480px;
    }

    .layout-culture--1v2v .culture-1v2v-rt-bot {
        grid-column: 1;
        grid-row: 3;
        max-height: 480px;
    }

    .fourth-row {
        --gap: 10px;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }

    /* 沿用桌面邏輯：手機縮成二欄，下橫在第二列維持對齊；上列兩直左右與馬賽克第四列對調視覺一致 */
    .fourth-row.fourth-row--slots-3 .fourth-left {
        grid-column: 2;
        grid-row: 1;
    }

    .fourth-row.fourth-row--slots-3 .fourth-right {
        grid-column: 1;
        grid-row: 1;
        justify-self: stretch;
        width: auto;
        max-width: none;
    }

    .fourth-row.fourth-row--slots-3 .fourth-mid {
        grid-column: 1 / -1;
        grid-row: 2;
        aspect-ratio: 3 / 2;
    }

    .fourth-row.fourth-row--slots-2 .fourth-mid {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .fourth-row.fourth-row--slots-2 .fourth-left {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .fourth-row.fourth-row--slots-1 {
        grid-template-columns: 1fr;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .fourth-row.fourth-row--slots-1 .fourth-mid {
        grid-column: 1 / -1;
    }
}