/* ==========================================================================
   基礎設定與共用容器
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0; padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #fdfdfd;
    color: #2c2c2c;
    line-height: 1.8;
    font-size: 18px;
}

/* 900px 寬度通用設定 */
.site-logo, .search-area, .post-list, .single-content, .site-footer, .photo-wall, .video-wall, .comments-area {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   首頁 Logo 與搜尋區塊
   ========================================================================== */
.site-logo { text-align: center; padding-top: 40px; }
.site-logo img { max-width: 100%; height: auto; }

.search-area {
    margin: 20px auto 40px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.search-form { flex: 1; min-width: 300px; }
.search-form input { 
    width: 100%; padding: 12px 18px; font-size: 16px; 
    border: 1px solid #ddd; border-radius: 6px; 
}
.category-dropdown { flex: 1; min-width: 300px; }
.category-dropdown select { 
    width: 100%; padding: 12px 18px; font-size: 16px; 
    border: 1px solid #ddd; border-radius: 6px; 
}

/* ==========================================================================
   照片牆 & 影片牆 (網格排版)
   ========================================================================== */
.photo-wall, .video-wall {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 手機版預設兩欄 */
    gap: 20px;
    padding-top: 20px;
    padding-bottom: 40px;
}

/* 單一卡片設定 */
.photo-item, .video-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 確保包住圖片的超連結標籤，不會干擾圖片形狀 */
.photo-item a, .video-item a {
    display: block;
    width: 100%;
}

/* 完美的 IG 正方形圖片設定與燈箱特效 */
.photo-wall img.lightbox,
.video-wall img.lightbox {
    width: 100% !important;
    height: auto !important;        /* 🌟 關鍵：覆蓋掉 WordPress 預設的圖片高度 */
    aspect-ratio: 1 / 1 !important; /* 強制 1:1 正方形 */
    object-fit: cover !important;   /* 填滿正方形，裁切不變形 */
    display: block;
    background-color: #f5f5f5;
    border-radius: 8px;             /* 現代化微圓角 */
    transition: transform 0.4s ease, filter 0.4s ease;
    cursor: zoom-in;
}

/* 滑鼠移入：微放大 + 變暗 */
.photo-wall img.lightbox:hover,
.video-wall img.lightbox:hover {
    transform: scale(1.03); 
    filter: brightness(0.85); 
}

/* 影片容器 (嵌入 iframe/video 用) */
.video-wall .video-container {
    width: 100%;
    aspect-ratio: 16 / 9; /* 影片預設比例 16:9 */
    position: relative;
    overflow: hidden;
    background-color: #000;
    border-radius: 8px;
}
.video-wall .video-container iframe,
.video-wall .video-container video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

/* 網格內的標題與摘要 */
.post-title {
    font-size: 1.1em;
    margin: 5px 0 0 0;
    line-height: 1.4;
}
.post-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
}
.post-title a:hover { color: #888; }

.post-excerpt {
    font-size: 0.9em;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制摘要只顯示兩行，保持版面整齊 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
}

/* ==========================================================================
   單篇文章設定 (特色大圖)
   ========================================================================== */
.single-featured-image {
    width: 100%;
    max-height: 600px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* ==========================================================================
   留言區塊 (乾淨極簡風)
   ========================================================================== */
.comments-area { margin-top: 60px; padding-top: 40px; border-top: 1px solid #eee; }
.comment-form { display: flex; flex-direction: column; gap: 15px; }
.comment-form input, .comment-form textarea {
    width: 100%; padding: 12px;
    border: 1px solid #ccc; border-radius: 6px;
    font-family: inherit; font-size: 16px;
}
.comment-form textarea { resize: vertical; min-height: 120px; }
.comment-notes { font-size: 0.85em; color: #888; margin-bottom: 15px; }
.form-submit input[type="submit"] {
    background: #2c2c2c; color: #fff; border: none;
    padding: 12px 25px; border-radius: 6px;
    cursor: pointer; transition: background 0.3s;
}
.form-submit input[type="submit"]:hover { background: #555; }

/* ==========================================================================
   頁尾按鈕
   ========================================================================== */
.site-footer {
    margin: 80px auto 40px; padding: 25px 20px 0;
    border-top: 1px solid #eee; text-align: center;
    font-size: 0.92em; color: #555;
}
.footer-buttons {
    display: flex; justify-content: center; gap: 15px;
    margin-bottom: 30px; flex-wrap: wrap;
}
.footer-buttons a { display: block; flex: 1 1 0; max-width: 140px; min-width: 70px; }
.footer-buttons img {
    width: 100%; height: auto; aspect-ratio: 1 / 1;
    object-fit: contain; background: transparent !important;
    border: none; box-shadow: none; border-radius: 0;
    transition: transform 0.3s ease;
}
.footer-buttons img:hover { transform: scale(1.08); }

/* ==========================================================================
   響應式設計
   ========================================================================== */
@media (min-width: 768px) {
    /* 電腦版顯示三欄 */
    .photo-wall, .video-wall { grid-template-columns: repeat(3, 1fr); gap: 25px; }
}
@media (max-width: 768px) {
    .search-area { flex-direction: column; }
    .site-logo { margin: 20px auto; padding-top: 20px; }
}
@media (max-width: 480px) {
    body { font-size: 17px; }
    .footer-buttons { gap: 8px; flex-wrap: nowrap; padding: 0 5px; }
    .footer-buttons a { min-width: 0; }
}

/* 確保單一文章內的 YouTube 影片自動填滿黑框 */
.single-content .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}