/* Write your custom css code here */


.image-gallery img {
    display: block;
    width: 100%;
    height: 100%; /* 關鍵：讓圖片填滿 .image-container */
    /* 關鍵：無論圖片原始尺寸如何，它都會被裁剪並覆蓋整個容器 */
    object-fit: cover; 
    position: absolute; /* 讓圖片可以疊在 .image-container 的 padding 創造的空間內 */
    top: 0;
    left: 0;
}

/* 圖片下方的註解樣式 */
.caption {
    text-align: NONE;
    margin-top: 8px;
    font-size: 1.1em;
    color: #555;
    padding-bottom: 20px; /* 增加每行底部的間距 */
}


/* -------------------------------------- */
/* 2. 佈局與 RWD (使用 Flexbox) */
/* -------------------------------------- */

.image-gallery {
    padding: 20px;
    max-width: 1200px; /* 設定畫廊最大寬度，讓內容居中 */
    margin: 0 auto;
}

/* 每一行容器設置 Flexbox */
.image-row {
    display: flex;
    flex-wrap: wrap; /* 允許項目換行 (RWD 關鍵) */
    /* 關鍵：設定項目之間的水平和垂直間距 */
    gap: 15px; 
    margin-bottom: 15px; /* 行與行之間的距離 */
}

/* 預設：電腦版 (一行三個) */
.image-item {
    /* (100% / 3) - 2 * (15px / 3) 
       這裡使用 calc() 精確計算，確保三項並排，且兩側留有間距 */
    flex: 1 1 calc(33.333% - 10px); 
    min-width: 250px; /* 最小寬度，防止過度縮小 */
    box-sizing: border-box; /* 確保 padding/border 不會增加寬度 */
}

/* -------------------------------------- */
/* 3. 圖片等比一致 (固定高寬比) */
/* -------------------------------------- */

/* 關鍵：利用 padding-top 實現固定高寬比的容器 */
.image-container {
    width: 100%;
    position: relative;
    /* 範例：設定 1:1 的正方形比例 */
    padding-top: 100%; 
    overflow: hidden; /* 隱藏超出容器的部分 (如果 object-fit 失效或有問題) */
    background-color: #eee; /* 載入時的背景色 */
}

/* 如果您想要 4:3 的比例，可以設置：padding-top: 75%; (3 / 4 * 100%) */
/* 如果您想要 16:9 的比例，可以設置：padding-top: 56.25%; (9 / 16 * 100%) */


/* -------------------------------------- */
/* 4. Media Query RWD (手機和平板適應) */
/* -------------------------------------- */

/* 平板 (例如: 768px 以下) */
@media (max-width: 768px) {
    /* 變成一行兩個 */
    .image-item {
        /* (100% / 2) - (15px / 2) */
        flex: 1 1 calc(50% - 7.5px); 
        min-width: 0; /* 讓它可以更靈活地縮小 */
    }
}

/* 手機 (例如: 480px 以下) */
@media (max-width: 480px) {
    /* 變成一行一個 */
    .image-item {
        flex: 1 1 100%;
    }
    
    /* 調整手機上的間距 */
    .image-row {
        gap: 10px;
    }
}