/* PhotoGallery 版型專屬樣式（第 7 版型）
 * Hero / RichContent 由既有 _PageHeader / editorial-base.css 負責。
 * 此檔負責：相簿牆（pg-grid / pg-album-card）+ 單相簿縮圖牆（pg-photo-grid）+ 篩選器 + PhotoSwipe 主題化。
 * 對齊：skill-photo-gallery / skill-frontend-templates / skill-infinite-scroll
 */

:root {
    --pg-ink:       var(--ink-deep, #1A1530);
    --pg-paper:     var(--paper,    #F8F4ED);
    --pg-gold:      var(--gold,     #C8A45C);
    --pg-meta-fg:   color-mix(in srgb, var(--pg-ink) 62%, transparent);
    --pg-border:    color-mix(in srgb, var(--pg-ink) 16%, transparent);
    --pg-border-hi: color-mix(in srgb, var(--pg-gold) 72%, transparent);
    --pg-cols:      4;
}

/* ── RichContent header ───────────────────────────────────────── */
.pg-content {
    padding: 1.5rem 1rem 0;
    max-width: 920px;
}
.pg-content :first-child { margin-top: 0; }
.pg-content :last-child  { margin-bottom: 0; }

/* ── Filter bar ───────────────────────────────────────────────── */
.pg-filter { padding: 1.5rem 0 0.5rem; }
/* 年度 chips + 月份 + 搜尋 同一排：年度靠左、月份/搜尋靠右，空間不夠才換行 */
.pg-filter > .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}
.pg-filter-form {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    align-items: center;
    flex: 1 1 auto;
}
.pg-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 0 1 auto;
    align-items: center;
}
.pg-chip {
    /* 外框用 box-shadow 環，不用 border：站台全域 body.editorial a { border-bottom:1px transparent }
       會把 <a> chip 的下緣邊線蓋成透明（看似被裁）；box-shadow 不受該規則影響、四邊一致 */
    border: 0;
    box-shadow: 0 0 0 1px var(--pg-border);
    background: transparent;
    color: var(--pg-ink);
    border-radius: 999px;
    padding: 0.35rem 1rem;
    font-size: 0.92rem;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.pg-chip:hover { box-shadow: 0 0 0 1px var(--pg-border-hi); color: var(--pg-gold); }
.pg-chip.is-active {
    background: var(--pg-ink);
    color: var(--pg-paper);
    box-shadow: 0 0 0 1px var(--pg-ink);
}
.pg-month-select {
    border: 1px solid var(--pg-border);
    border-radius: 999px;
    background: #fff;
    color: var(--pg-ink);
    padding: 0.4rem 0.9rem;
    font-size: 0.92rem;
    cursor: pointer;
}
.pg-search-group {
    display: flex;
    align-items: stretch;
    flex: 0 1 300px;
    min-width: 0;   /* 允許在窄螢幕收縮，避免撐破容器造成整頁水平溢出 */
    border: 1px solid var(--pg-border);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}
.pg-search-group:focus-within { border-color: var(--pg-border-hi); }
.pg-search {
    flex: 1;
    min-width: 0;   /* input 預設 min-width 會擋住收縮，歸零讓搜尋框能變窄 */
    border: 0;
    padding: 0.5rem 0.9rem;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
}
.pg-search-btn {
    border: 0;
    background: transparent;
    color: var(--pg-ink);
    padding: 0 0.9rem;
    cursor: pointer;
    font-size: 1.15rem;
}
.pg-search-btn:hover { color: var(--pg-gold); }

/* ── 相簿牆 ───────────────────────────────────────────────────── */
.pg-list-section { padding-top: 1rem; padding-bottom: 2.5rem; }
.pg-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--pg-cols), minmax(0, 1fr));
    gap: 1.25rem;
}
.pg-album-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--pg-border);
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.pg-album-card:hover {
    border-color: var(--pg-border-hi);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(26, 21, 48, 0.10);
}
.pg-album-cover {
    position: relative;
    aspect-ratio: 4 / 3;
    background: color-mix(in srgb, var(--pg-ink) 6%, #fff);
    overflow: hidden;
}
.pg-album-cover img {
    width: 100%;
    /* !important 蓋過站台全域 body.editorial img { height:auto }（specificity 較高），
       否則 object-fit:cover 不生效、圖片填不滿固定比例容器 */
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: filter 0.25s ease;
}
.pg-album-cover-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--pg-ink) 30%, transparent);
    font-size: 2.4rem;
}

/* ── 封面拼貼（前 4 張，5 種版型隨機；每格 object-fit:cover 置中填滿，方向不一致也看不出來）── */
.pg-collage {
    position: absolute;
    inset: 0;
    display: grid;
    gap: 2px;
    background: var(--pg-border);
}
.pg-collage-tile {
    position: relative;
    overflow: hidden;
    background: color-mix(in srgb, var(--pg-ink) 6%, #fff);
}
/* tile img 填滿由上方 `.pg-album-cover img`（descendant）負責：width/height:100% + object-fit:cover + center */
.pg-collage-tile:nth-child(1) { grid-area: a; }  /* 封面照 = 大格 */
.pg-collage-tile:nth-child(2) { grid-area: b; }
.pg-collage-tile:nth-child(3) { grid-area: c; }
.pg-collage-tile:nth-child(4) { grid-area: d; }

/* v1 大左 + 3 小右直排 */
.pg-collage-v1 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "a b" "a c" "a d";
}
/* v2 大上 + 3 小下橫排 */
.pg-collage-v2 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 2fr 1fr;
    grid-template-areas: "a a a" "b c d";
}
/* v3 2×2 等分 */
.pg-collage-v3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "a b" "c d";
}
/* v4 3 小左直排 + 大右 */
.pg-collage-v4 {
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "b a" "c a" "d a";
}
/* v5 3 小上橫排 + 大下 */
.pg-collage-v5 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 2fr;
    grid-template-areas: "b c d" "a a a";
}
.pg-album-count {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(26, 21, 48, 0.78);
    color: #fff;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.78rem;
}
.pg-album-body {
    padding: 0.75rem 0.85rem 0.9rem;
}
.pg-album-link { color: inherit; text-decoration: none; }
/* stretched-link：::after 撐滿整張卡片，提供「點任一處＝進相片列表」；播放鈕在 overlay(z2) 之上不受影響 */
.pg-album-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.pg-album-title {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.45;
    margin: 0 0 0.35rem;
    color: var(--pg-ink);
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* 固定佔 2 行高（1 行標題也保留 2 行），靜止時每張卡片等高、底部對齊 */
    min-height: calc(1.45em * 2);
}
/* hover 覆蓋層：蓋滿整張卡片（封面＋白條融為一體）；標題由上而下、攝影師釘底
   背景漸層：上半半透明（壓在圖片上、文字可讀）→ 下半不透明（蓋掉靜止白條的文字，避免文字疊文字） */
.pg-album-hover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.85rem 0.9rem;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--pg-paper) 80%, transparent) 0%,
        color-mix(in srgb, var(--pg-paper) 80%, transparent) 58%,
        var(--pg-paper) 74%,
        var(--pg-paper) 100%);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    z-index: 2;  /* 蓋在 stretched-link ::after(z1) 之上：播放鈕可點，其餘區 pointer-events:none 穿透回連結 */
    transition: opacity 0.2s ease;
}
/* 桌機 hover 或 手機第一次點擊（.is-revealed）都顯示覆蓋層 */
.pg-album-card:hover .pg-album-hover,
.pg-album-card.is-revealed .pg-album-hover { opacity: 1; }
.pg-album-hover-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--pg-ink);
    word-break: break-word;
    overflow: hidden;  /* 由上而下完整顯示；極長標題超出封面才裁 */
}
/* 底部一排：攝影師靠左（佔滿剩餘寬、過長折最多 2 行）＋ 播放鈕釘右、貼齊最後一行底部 */
.pg-album-hover-foot {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}
.pg-album-hover-photographer {
    flex: 1 1 auto;
    min-width: 0;        /* 讓內部 span 能 ellipsis、不擠壓播放鈕 */
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.6rem;   /* 加大一倍（重點欄位） */
    font-weight: 600;
    line-height: 1.2;
    color: var(--pg-ink);
}
.pg-album-hover-photographer .mdi { font-size: 1.45rem; color: var(--pg-gold); flex: 0 0 auto; }
.pg-album-hover-photographer span {
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;       /* 過長折最多 2 行，再多才 … */
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
/* 播放鈕：右下角小圓鈕；只有覆蓋層顯示時可點（避免靜止時隱形鈕吃掉手機第一次點擊） */
.pg-album-hover-actions {
    flex: 0 0 auto;
    margin-left: auto;   /* 無攝影師時仍把鈕推到最右 */
}
.pg-album-play {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--pg-gold);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(26, 21, 48, 0.28);
    pointer-events: none;
    transition: background 0.15s ease, transform 0.15s ease;
}
.pg-album-card:hover .pg-album-play,
.pg-album-card.is-revealed .pg-album-play { pointer-events: auto; }
.pg-album-play:hover { background: var(--pg-ink); transform: scale(1.06); }
.pg-album-play.is-loading { opacity: 0.6; pointer-events: none; }
.pg-album-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--pg-meta-fg);
}
.pg-album-branch {
    border: 1px solid var(--pg-border);
    border-radius: 999px;
    padding: 0.02rem 0.45rem;
    font-size: 0.72rem;
}
.pg-empty {
    text-align: center;
    color: var(--pg-meta-fg);
    padding: 3rem 1rem;
}

/* 桌機分頁器樣式已移至 editorial-base.css 的 .st-pager（共用 _Pager.cshtml，見 skill-pagination）。 */

/* ── 單相簿詳情 ───────────────────────────────────────────────── */
.pg-album-head {
    padding: 1.5rem 0 0.5rem;
    border-bottom: 1px solid var(--pg-border);
    margin-bottom: 1.25rem;
}
.pg-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    text-decoration: none;
    color: var(--pg-meta-fg);
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
}
.pg-back-link:hover { color: var(--pg-gold); }
.pg-album-detail-title {
    font-size: 1.6rem;
    color: var(--pg-ink);
    margin: 0 0 0.4rem;
}
.pg-album-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    color: var(--pg-meta-fg);
    font-size: 0.9rem;
}
.pg-album-desc {
    margin-top: 0.75rem;
    color: color-mix(in srgb, var(--pg-ink) 80%, transparent);
    line-height: 1.7;
}

.pg-photo-grid {
    display: grid;
    grid-template-columns: repeat(var(--pg-cols), minmax(0, 1fr));
    gap: 0.6rem;
    padding-bottom: 2.5rem;
}
.pg-photo-item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 0.4rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--pg-ink) 6%, #fff);
}
.pg-photo-item img {
    width: 100%;
    /* 同上：蓋過全域 height:auto，讓單相簿縮圖牆也確實填滿正方容器 */
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.25s ease;
}
.pg-photo-item:hover img { transform: scale(1.04); }

/* ── RWD ──────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .pg-grid       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pg-photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    /* 手機左右間距減半：容器左右 padding 0.75rem → 0.375rem（僅 scope 相簿頁區塊，不動全站 .container），
       卡片 gap 同步對齊，維持「兩側邊距 = 卡片間距 = 篩選列邊緣」一致 */
    .pg-content.container,
    .pg-filter > .container,
    .pg-list-section.container {
        padding-left: 0.375rem;
        padding-right: 0.375rem;
    }
    .pg-grid       { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem; }
    .pg-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem; }
    /* 篩選列在窄機允許換行、搜尋框獨佔一行，避免 nowrap 撐破 */
    .pg-filter-form  { flex-wrap: wrap; }
    .pg-search-group { flex: 1 1 100%; }
}
@media (max-width: 479.98px) {
    .pg-grid       { grid-template-columns: minmax(0, 1fr); }
    .pg-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── PhotoSwipe 主題化（深墨 backdrop / 金 hover）──────────────── */
.pswp { --pswp-bg: #14101f; }
.pswp__bg { background: #14101f; }
.pswp__icn { fill: var(--pg-paper, #F8F4ED); }
.pswp__button:hover .pswp__icn { fill: var(--pg-gold, #C8A45C); }

/* autoplay 投影片（mainClass=pswp--slideshow）：隱藏左右翻頁箭頭 + 上方放大鈕（關閉鈕保留；仍可滑動/鍵盤） */
.pswp--slideshow .pswp__button--arrow,
.pswp--slideshow .pswp__button--zoom { display: none; }

/* 燈箱左上角瀏覽人次 badge（眼睛 + 數字，小字低調；skill-view-count）。投影片模式不顯示。 */
.pswp__view-count {
    position: absolute;
    top: 0;
    left: 8px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0 0.5rem;
    color: color-mix(in srgb, var(--pg-paper, #F8F4ED) 80%, transparent);
    font-size: 0.82rem;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.pswp--slideshow .pswp__view-count { display: none; }

/* PhotoSwipe 圖片由 PS 自行用 inline width/height + transform 精確定位，
   必須擋掉站台全域 `body.editorial img { max-width:100%; height:auto }`——
   否則 max-width 會把大圖壓成 0 寬導致燈箱一片黑。 */
.pswp__img,
.pswp img {
    max-width: none !important;
    max-height: none !important;
}

/* ── 返回頂部 FAB（捲過頂部 sentinel 才淡入；JS 用 IntersectionObserver 切 is-visible）── */
.pg-back-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--pg-ink);
    color: var(--pg-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(26, 21, 48, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, background 0.15s ease;
    z-index: 1030;
}
.pg-back-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.pg-back-top:hover { background: var(--pg-gold); color: #fff; }
@media (min-width: 768px) {
    .pg-back-top { right: 1.5rem; bottom: 1.5rem; width: 48px; height: 48px; }
}