/* ============================================
   萬大發電廠環境教育學習網 - 關於萬大發電廠頁面
   kun 2025-01-17
   updated 2025-02-13 - 修正排版完全對齊設計稿
   ============================================ */

/* ============================================
   4張輪播圖設定覆蓋
   ============================================ */
.banner-carousel .carousel-slide {
    animation: fadeSlide4 16s infinite;
}

.banner-carousel .carousel-slide:nth-child(1) {
    animation-delay: 0s;
}

.banner-carousel .carousel-slide:nth-child(2) {
    animation-delay: 4s;
}

.banner-carousel .carousel-slide:nth-child(3) {
    animation-delay: 8s;
}

.banner-carousel .carousel-slide:nth-child(4) {
    animation-delay: 12s;
}

@keyframes fadeSlide4 {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    25% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* ============================================
   CONTENT SECTION - 通用區塊
   ============================================ */
.content-section {
    padding: var(--spacing-6xl) var(--container-padding-md);
}

.content-section.bg-light {
    background-color: var(--color-white);
}

.content-block {
    max-width: var(--container-content);
    margin: 0 auto var(--spacing-4xl);
}

.content-block:last-child {
    margin-bottom: 0;
}

/* 子標題 */
.content-subtitle {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-2xl);
}

.content-subtitle.pink {
    color: var(--color-accent-pink);
}

.content-subtitle.teal {
    color: var(--color-primary);
}

/* ============================================
   LAYOUT ROW - 通用圖文並排容器
   ============================================ */
.layout-row {
    display: flex;
    gap: var(--spacing-3xl);
    align-items: flex-start;
}

/* 圖左文右 */
.layout-row.img-left {
    flex-direction: row;
}

/* 文左圖右 */
.layout-row.text-left {
    flex-direction: row;
}

/* 單張圖 */
.layout-img {
    flex: 0 0 45%;
}

.layout-img img {
    width: 100%;
    border-radius: var(--radius-lg);
    object-fit: cover;
    box-shadow: var(--shadow-sm);
}

/* 堆疊圖片（上下排列） */
.layout-img-stack {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.layout-img-stack img {
    width: 100%;
    border-radius: var(--radius-md);
    object-fit: cover;
    box-shadow: var(--shadow-sm);
}

/* 半寬圖（戰後至今用） */
.layout-img-half {
    flex: 0 0 50%;
}

.layout-img-half img {
    width: 100%;
    border-radius: var(--radius-md);
    object-fit: cover;
    box-shadow: var(--shadow-sm);
}

/* 文字區 */
.layout-text {
    flex: 1;
}

.layout-text p {
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: var(--line-height-loose);
    margin-bottom: var(--spacing-lg);
    text-align: justify;
}

.layout-text.full {
    max-width: 100%;
}

/* ============================================
   IMAGES GRID - 關於我們下方2張圖並排
   ============================================ */
.images-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
    margin-top: var(--spacing-3xl);
}

.images-grid-2 img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* ============================================
   HISTORY BLOCK - 歷史區塊
   ============================================ */
.history-block {
    max-width: var(--container-content);
    margin: 0 auto var(--spacing-5xl);
}

/* 歷史區塊內的標題（行內，非獨立一行） */
.history-title-inline {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-xl);
}

.history-title-inline.red {
    color: var(--color-accent-pink, #e85d75);
}

/* ============================================
   IMG WITH CAPTION - 帶說明文字的圖片
   ============================================ */
.img-with-caption img {
    width: 100%;
    border-radius: var(--radius-md);
    object-fit: cover;
    box-shadow: var(--shadow-sm);
}

/* 獨立在下方左側的圖+caption（戰後至今第2張） */
.standalone-left {
    max-width: 50%;
    margin-top: var(--spacing-3xl);
}

.gallery-caption {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--spacing-sm);
}

/* ============================================
   PHOTO GALLERY - 萬松水力發電計畫圖片集
   ============================================ */
.photo-gallery {
    max-width: var(--container-content);
    margin: var(--spacing-4xl) auto 0;
}

/* 2欄等寬 */
.gallery-row.two-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

/* 3欄等寬 */
.gallery-row.three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {

    .layout-row,
    .layout-row.img-left,
    .layout-row.text-left {
        flex-direction: column;
    }

    .layout-img,
    .layout-img-stack,
    .layout-img-half {
        flex: none;
        width: 100%;
    }

    .layout-img-stack {
        flex-direction: row;
    }

    .layout-img-stack img {
        flex: 1;
    }

    .images-grid-2 {
        grid-template-columns: 1fr;
    }

    .standalone-left {
        max-width: 100%;
    }

    .gallery-row.three-col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .content-section {
        padding: var(--spacing-4xl) var(--container-padding-sm);
    }

    .content-subtitle {
        font-size: var(--font-size-lg);
    }

    .layout-img-stack {
        flex-direction: column;
    }

    .gallery-row.two-col {
        grid-template-columns: 1fr;
    }

    .gallery-row.three-col {
        grid-template-columns: 1fr;
    }
}