/* =========================================
   Baxermux Album - Core Styles (No-Bootstrap)
   ========================================= */

:root {
    --bg-color: #f8f9fa;
    --text-color: #2d3436;
    --muted-color: #636e72;
    --primary-color: #4a69bd;
    --primary-hover: #3c5aa8;
    --white: #ffffff;
    --border-color: #e9ecef;
    --shadow: 0 4px 10px rgba(0,0,0,0.05);
    --hover-shadow: 0 8px 20px rgba(0,0,0,0.1);
    --radius: 12px;
    --transition: 0.2s ease;
    --container-width: 96%;
}

/* --- Reset & Base --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    background-color: var(--bg-color);
    font-family: "Microsoft JhengHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text-color);
    line-height: 1.5;
}
a { text-decoration: none; color: inherit; transition: var(--transition); }
img { display: block; max-width: 100%; }
ul { list-style: none; }

/* --- Layout --- */
.main-content {
    width: var(--container-width);
    margin: 0 auto;
    max-width: 1920px;
    padding-bottom: 40px;
}

/* --- Components: Header --- */
.header-bar {
    background: var(--white);
    padding: 20px 0;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.header-inner {
    width: var(--container-width);
    margin: 0 auto;
    max-width: 1920px;
}
.site-title { font-size: 1.25rem; font-weight: 700; display: inline-block; margin-right: 10px; }
.site-desc { font-size: 0.85rem; color: var(--muted-color); }
.divider { border: 0; border-top: 1px solid rgba(0,0,0,0.1); margin: 15px 0 0 0; }

/* --- Components: Breadcrumb --- */
.breadcrumb { display: flex; font-size: 0.9rem; color: var(--muted-color); margin-bottom: 0; }
.breadcrumb-item + .breadcrumb-item::before { content: "/"; padding: 0 8px; color: #ccc; }
.breadcrumb-item a { color: var(--primary-color); }
.breadcrumb-item.active { color: var(--text-color); pointer-events: none; }

/* --- Components: Grid System (Replaces Bootstrap Grid) --- */
.album-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Mobile: 2 cols */
    gap: 20px;
}
@media (min-width: 768px) { .album-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .album-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .album-grid { grid-template-columns: repeat(6, 1fr); } }

/* --- Components: Card --- */
.card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition);
    display: block;
    cursor: pointer;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--hover-shadow);
}
.card-img-wrap {
    position: relative;
    overflow: hidden;
    background: #dfe6e9;
}
/* Aspect Ratio Utility */
.ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-3-2 { aspect-ratio: 3 / 2; }

.card-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 改為比例縮放，不裁切 */
    background-color: #f8f9fa; /* 淺灰背景 */
    transition: transform 0.4s ease;
}
.card:hover .card-img { transform: scale(1.05); }

.card-badge {
    position: absolute;
    top: 10px; right: 10px;
    background: rgba(0,0,0,0.6);
    color: var(--white);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    backdrop-filter: blur(4px);
}
.card-body { padding: 15px; }
.card-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-desc {
    color: var(--muted-color);
    font-size: 0.8rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Components: Buttons --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.2s;
    background: none;
}
.btn-primary { background: var(--primary-color); color: var(--white); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-outline { border-color: #ccc; color: var(--text-color); }
.btn-outline:hover { background: #f0f0f0; }
.w-100 { width: 100%; }
.mb-2 { margin-bottom: 0.5rem; }

/* --- Components: Pagination --- */
#pagination-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 20px;
}
.pagination { display: flex; justify-content: center; gap: 5px; }
.page-link {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 6px;
    background: var(--white);
    border: 1px solid var(--border-color);
    color: var(--primary-color);
    font-size: 0.9rem;
}
.page-link:hover { background: #f0f0f0; }
.page-link.active { background: var(--primary-color); color: var(--white); border-color: var(--primary-color); }
.page-link.disabled { opacity: 0.5; pointer-events: none; }

/* --- Utilities --- */
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.text-center { text-align: center; }
.text-muted { color: var(--muted-color); }
.fw-bold { font-weight: 700; }
.small { font-size: 0.85rem; }
.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }
.hidden { display: none !important; }

/* Badge */
.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #212529;
}

/* --- Footer --- */
.footer { padding: 40px 0; color: #b2bec3; font-size: 0.85rem; text-align: center; }

/* --- Modal Styles (Custom) --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); z-index: 2000000; /* 高於所有主題 Canvas */
    display: none; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease;
}
.modal-overlay.show { display: flex !important; opacity: 1; }

/* Share Modal Box */
.modal-box {
    background: #ffffff !important; /* 強制不透明白色 */
    width: 90%; 
    max-width: 400px;
    border-radius: 12px; 
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    transform: translateY(20px); 
    transition: transform 0.3s ease;
    color: #222;
    z-index: 2000002;
    position: relative;
}
.modal-overlay.show .modal-box { transform: translateY(0); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.close-btn { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #999; }
.share-item { margin-bottom: 15px; }
.input-group { display: flex; gap: 5px; }
.input-group input { 
    flex: 1; 
    padding: 8px; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    background: #f9f9f9; 
    font-size: 0.85rem; 
    color: #333;
}

/* Fullscreen Photo Modal */
.modal-fullscreen { 
    background: rgba(0,0,0,0.98); 
    padding: 0;
    z-index: 2000001;
}
.modal-fullscreen img { 
    max-width: 100vw !important; 
    max-height: 100vh !important; 
    width: auto !important;
    height: auto !important;
    object-fit: contain; 
    cursor: zoom-out; 
    display: block;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 絕對置中 */
}

/* Photo Viewer Detail Page */
.photo-viewer-container { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05); margin-bottom: 30px; }
.photo-stage { background: #1a1a1a; display: flex; justify-content: center; align-items: center; min-height: 50vh; position: relative; }
.photo-stage img { max-width: 100%; max-height: 80vh; object-fit: contain; }
.nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 60px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; background: rgba(255,255,255,0.1); border-radius: 4px; transition: 0.2s; }
.nav-btn:hover { background: rgba(255,255,255,0.2); }

/* Meta & EXIF Info Layout */
.photo-meta-grid {
    display: grid;
    grid-template-columns: 350px 1fr; /* 左側固定寬度，右側地圖盡量大 */
    gap: 25px;
}

@media (max-width: 1199px) {
    .photo-meta-grid {
        grid-template-columns: 1fr; /* 窄螢幕改為上下堆疊 */
    }
}

/* Meta & EXIF Info Layout (強力覆蓋樣板行內樣式) */
.photo-meta-panel > div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: 350px 1fr !important; /* 左側固定，右側地圖伸展 */
    gap: 25px !important;
}

@media (max-width: 1199px) {
    .photo-meta-panel > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important; /* 窄螢幕自動堆疊 */
    }
}

/* Meta & EXIF Info Cards */
.info-card, .exif-card {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px;
    background-color: #fcfcfc;
    height: 100%;
}

/* 強制所有按鈕內容置中 */
.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.info-card .btn {
    justify-content: center; /* 確保按鈕內容置中 */
}

/* Album Header */
.album-header-box { background: #fff; padding: 20px; border-radius: 12px; border: 1px solid #e9ecef; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }

/* =========================================
   Baxermux Album - Lightweight Icons (SVG)
   ========================================= */

.bi {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    fill: currentColor;
}

/* 這裡是我們用到的圖示定義 (Data URI) */
.bi-images { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M4.502 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z'/%3E%3Cpath d='M14.002 13a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2V5A2 2 0 0 1 2.002 3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2zM14.002 3a1 1 0 0 0-1-1h-10a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3z'/%3E%3C/svg%3E"); }
.bi-image { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/%3E%3Cpath d='M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z'/%3E%3C/svg%3E"); }
.bi-house-door { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z'/%3E%3C/svg%3E"); }
.bi-grid-3x3-gap { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4 2v2H2V2h2zm1 0v2h2V2H5zm1 0v2h2V2H5zm1 0v2h2V2h-2zm-5 3v2h2V5H2zm1 0v2h2V5H5zm1 0v2h2V5H5zm1 0v2h2V5h-2zm-5 3v2h2V8H2zm1 0v2h2V8H5zm1 0v2h2V8H5zm1 0v2h2V8h-2zm-5 3v2h2v-2H2zm1 0v2h2v-2H5zm1 0v2h2v-2H5zm1 0v2h2v-2h-2z'/%3E%3C/svg%3E"); }
.bi-chevron-left { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E"); }
.bi-chevron-right { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); }
.bi-download { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z'/%3E%3C/svg%3E"); }
.bi-share { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z'/%3E%3C/svg%3E"); }
.bi-x-lg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z'/%3E%3C/svg%3E"); }