/* css/style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #ffffff;
    color: #000000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

a:hover {
    opacity: 0.5;
}

/* Header styling */
.site-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: flex-start;
    padding: 2rem 4rem; /* 略微縮減內距 */
    max-width: 1400px;
    margin: 0 auto 2rem auto; /* 縮減底部間距，讓輪播圖靠近 Logo */
}

.header-left {
    text-align: right; /* 第一欄向右靠齊，緊貼中間斜線 */
}

.copyright {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 100; /* 極細筆畫 */
    font-size: 2.5rem; /* 與左側標題對齊的大小 */
    color: #000;
    letter-spacing: 0.05em;
    line-height: 1;
}

.header-center {
    display: flex;
    justify-content: center;
    padding: 0 2rem;
}

.divider {
    display: block;
    width: 1px;
    height: 120px; /* 大約佔據 header 高度 */
    background-color: #000;
    transform: rotate(25deg); /* 文字斜線通常大約 25-30度，若要 45度則設為 45deg */
    transform-origin: center;
    color: transparent; /* 隱藏原本的 / 字符 */
    user-select: none;
}

.header-right {
    text-align: left; /* 第三欄向左靠齊，緊貼中間斜線 */
    padding-top: 3.5rem; /* 大幅增加 padding-top 以形成錯位 */
}

.site-title {
    font-family: 'La Belle Aurore', cursive;
    font-weight: normal;
    font-size: 3.5rem; /* 手寫體通常較小，略微加大至 3.5rem */
    line-height: 1;
    margin-bottom: 0.25rem;
    letter-spacing: 0.1em;
    text-transform: none; /* 手寫體若設大寫可能較不流暢，改為 None */
}

.site-nav {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: #333;
}

/* Hero Slider styling */
.hero-slider {
    width: 100%;
    height: 100vh; /* 調整為滿版全螢幕高度 */
    margin-bottom: 10rem; /* 增加與下方主題的間距 */
    --swiper-navigation-color: #fff;
    --swiper-pagination-color: #fff;
}

.hero-slider .swiper-pagination-bullet {
    width: 30px;
    height: 1.5px;
    border-radius: 0;
    opacity: 0.4;
    background: #fff;
    transition: all 0.3s ease;
}

.hero-slider .swiper-pagination-bullet-active {
    opacity: 1;
    width: 60px;
}

.hero-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 滿版必須使用以確保填滿全螢幕區塊 */
    display: block;
}

/* Gallery main section - Default (Single Column for Album Pages) */
.gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6rem;
    padding-bottom: 4rem;
    width: 100%;
}

/* Index Gallery Style - Grid Layout (Two Columns) */
.index-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 4rem 4rem 4rem;
    width: 100%;
}

.entry {
    width: 80%;
    max-width: 1000px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Vertical photo styling */
.vertical-entry {
    width: 33.3%; /* 使照片高度與橫式一致 */
    max-width: 450px;
    align-self: flex-start; /* 桌機齊左 */
    margin-left: 10%; /* 與 80% 置中照片的左緣對齊 */
}

.vertical-entry .image-wrapper {
    width: fit-content;
    max-width: 100%;
    height: min(62.5vw, 625px);
}

.vertical-entry .image-wrapper img {
    width: auto;
    height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
}

.index-gallery .entry {
    width: 100%;
    max-width: none;
    align-items: flex-start;
}

.more-photos .vertical-entry {
    width: 80%;
    max-width: 1000px;
    align-self: center;
    margin-left: 0;
    align-items: flex-start;
}

.vertical-photo-pair {
    width: 80%;
    max-width: 1000px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    align-items: start;
}

.vertical-photo-pair .vertical-entry {
    width: 100%;
    max-width: none;
}

.vertical-photo-pair .vertical-entry .image-wrapper {
    width: 100%;
    max-width: none;
    height: auto;
    margin-right: 0;
}

.vertical-photo-pair .vertical-entry .image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Image container */
.image-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16/10;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.index-gallery .image-wrapper img {
    aspect-ratio: 3/2;
}

.index-gallery .entry:hover .image-wrapper img {
    transform: scale(1.03);
}

/* 移除首頁連結懸停時的透明度效應 */
.index-gallery a:hover {
    opacity: 1;
}

/* Overlapping Title */
.entry-title {
    position: static;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: normal;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.month-year {
    font-size: 1.2rem;
    color: #666;
}

.location {
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000;
    display: flex;
    align-items: center;
    margin-top: 0.2rem;
}

/* 極簡箭頭動態部分 */
.index-gallery .location::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 12px; /* 箭頭高度微調 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cpath d='M0 11h40M30 2l10 9' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 40px 12px;
    background-repeat: no-repeat;
    background-position: right center; /* 讓箭頭尖端先行 */
    margin-left: 0;
    opacity: 0;
    position: relative;
    transition: width 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), 
                margin-left 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), 
                opacity 0.3s ease;
}

/* 懸停時，箭頭向右延伸長出 */
.index-gallery a:hover .location::after {
    width: 40px;
    margin-left: 15px;
    opacity: 1;
}

/* Entry Metadata */
.entry-meta {
    width: 100%;
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.entry-details {
    text-align: right; /* 齊右排列 */
    font-family: -apple-system, sans-serif;
    font-size: 0.65rem;
    color: #000;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.03em;
}

.entry-details p {
    margin-bottom: 0px;
}

.posted-date, .camera-info {
    text-transform: lowercase;
}

.subtitle {
    margin-top: 0.15rem;
    margin-bottom: 0.15rem;
}

.permalink-container {
    margin-top: 1rem !important;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 0.85rem;
    letter-spacing: 0;
}

.permalink {
    font-style: italic;
}

/* Footer styling */
.site-footer {
    width: 100%;
    padding: 8rem 0 4rem 0;
    text-align: center;
}

.copyright-footer {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 0.75rem;
    color: #000;
    letter-spacing: 0.02em;
}

/* Album Page Specifics */
.more-photos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem; /* 更多照片之間的間距較小 */
    width: 100%;
    margin-top: 4rem; /* 與封面的間距 */
}

.simple-photo {
    margin-bottom: 0;
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .site-header {
        padding: 2rem 1.5rem; /* 縮減側邊內距以符合手機寬度 */
        margin-bottom: 2rem;
    }
    
    .site-title {
        font-size: 2.2rem; /* 在手機版稍微縮小標題字體，避免換行 */
    }

    .copyright {
        font-size: 1.6rem; /* 在手機版稍微縮小副標字體 */
    }

    .divider {
        height: 80px; /* 縮短斜線長度 */
    }

    .index-gallery {
        grid-template-columns: 1fr;
        gap: 4rem;
        padding: 0 2rem 4rem 2rem;
    }

    .index-gallery .entry {
        padding: 0;
    }
    
    .month-year {
        font-size: 1.5rem;
    }
    
    .location {
        font-size: 1.8rem;
    }

    .entry-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-top: 1rem;
    }

    .vertical-entry {
        width: 80%; /* 手機版與橫式一致寬度 */
        max-width: none;
        align-self: center; /* 手機版置中 */
        margin-left: 0;
    }

    .vertical-entry .image-wrapper {
        width: 100%;
        max-width: none;
        height: auto;
    }

    .vertical-entry .image-wrapper img {
        width: 100%;
        height: auto;
    }

    .vertical-photo-pair {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .entry-details {
        text-align: left;
    }

    .hero-slider {
        height: 75vh;
        margin-bottom: 6rem; /* 手機版間距同步拉大 */
    }
}