/* =========================================================
   綺夢診所｜相簿單元 gallery.php 專屬樣式
   - 主色 #007167、輔色 #e9d36f，沿用站內既有配色
   - 標題沿用 .xinde-share1-tl h1、分頁沿用全站 .pages（new_index.css）
   - class 統一使用 album- 前綴：gallery- 前綴已被 new_index.css / 舊 gallery.css 佔用，避免撞名
   - hover 以變色為主；封面圖沿用 history 頁的放大效果，排序浮層為浮動面板故帶陰影
   ========================================================= */

/* ---------- 單元外框 ---------- */
.album-main{padding-top: 10px;}
/* pixy-style.css 有全站 a:hover 透明度 0.7，本單元一律鎖回不透明 */
.album-main a:hover{opacity: 1 !important;}

/* ---------- 線條 icon（內嵌 SVG，顏色跟隨文字色） ---------- */
.album-icon{width: 1em;height: 1em;vertical-align: -0.15em;fill: none;stroke: currentColor;stroke-width: 2;stroke-linecap: round;stroke-linejoin: round;}

/* ---------- 分類頁籤 + 工具列（桌機） ---------- */
.album-drawer-toggle{display: none;}
.album-drawer-btn{display: none;}
.album-bar{display: flex;flex-wrap: wrap;align-items: center;margin-bottom: 15px;}
.album-filter{width: 100%;display: flex;flex-wrap: wrap;gap: 0 30px;border-bottom: 1px solid #e6e6e6;}
.album-filter-head{display: none;}
.album-filter a{position: relative;display: inline-block;color: #666666;font-size: 15px;line-height: 24px;padding: 12px 0 6px 0;white-space: nowrap;transition: 0.5s all;}
.album-filter a span{color: #b3b3b3;font-size: 12px;margin-left: 4px;transition: 0.5s all;}
.album-filter a.active{color: #007167;font-weight: bold;}
.album-filter a.active span{color: #007167;}
/* 目前分類：細金線底標，貼齊工具列底線 */
.album-filter a.active::after{content: "";position: absolute;left: 0;right: 0;bottom: -1px;height: 2px;background: #e9d36f;}
.album-filter-overlay{display: none;}
/* 第二列：數量說明 + 排序（結果工具列） */
.album-count{order: 3;flex: 1;color: #888888;font-size: 13px;line-height: 20px;padding-top: 10px;}
.album-count strong{color: #007167;font-weight: bold;padding: 0 2px;}
.album-count em{font-style: normal;}
/* 排序：膠囊（summary）+ 浮層選單（menu），checkbox 切換 */
.album-sort{position: relative;order: 4;margin-top: 13px;}
.album-sort-toggle{display: none;}
.album-sort-summary{position: relative;display: inline-flex;align-items: center;height: 32px;padding: 0 34px 0 14px;border: 1px solid #dddddd;border-radius: 50px;background: #f5f5f5;color: #888888;font-size: 12px;line-height: 30px;cursor: pointer;transition: 0.5s all;-webkit-tap-highlight-color: transparent;}
.album-sort-label{margin-right: 6px;}
.album-sort-summary b{color: #007167;font-size: 13px;font-weight: bold;}
.album-sort-summary .album-icon{position: absolute;right: 10px;top: 50%;width: 16px;height: 16px;margin-top: -8px;color: #888888;transition: 0.3s transform;}
.album-sort-backdrop{display: none;position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 30;}
.album-sort-menu{display: none;position: absolute;right: 0;top: 100%;z-index: 31;min-width: 150px;margin-top: 8px;padding: 6px 0;background: #fff;border: 1px solid #ebebeb;border-radius: 12px;box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);}
.album-sort-menu a{display: flex;align-items: center;justify-content: space-between;color: #444444;font-size: 13px;line-height: 20px;padding: 9px 16px;white-space: nowrap;transition: 0.5s all;}
.album-sort-menu a .album-icon{width: 16px;height: 16px;margin-left: 16px;color: #007167;visibility: hidden;}
.album-sort-menu a.active{color: #007167;font-weight: bold;}
.album-sort-menu a.active .album-icon{visibility: visible;}
/* 展開狀態 */
.album-sort-toggle:checked ~ .album-sort-summary{border-color: #007167;background: #fff;}
.album-sort-toggle:checked ~ .album-sort-summary .album-icon{transform: rotate(180deg);color: #007167;}
.album-sort-toggle:checked ~ .album-sort-backdrop{display: block;}
.album-sort-toggle:checked ~ .album-sort-menu{display: block;animation: albumSortIn 0.2s ease;}
@keyframes albumSortIn{from{opacity: 0;transform: translateY(-6px);}to{opacity: 1;transform: translateY(0);}}

/* ---------- 相簿卡片列表（照片優先） ---------- */
.album-ul{display: flex;flex-wrap: wrap;margin: 0 -10px;}
.album-ul li{width: 50%;padding: 0 10px;margin-bottom: 20px;box-sizing: border-box;}
.album-card{position: relative;border-radius: 15px;overflow: hidden;background: #f2f2f2;}

/* 封面：固定 4:3 比例，圖片置中裁切 */
.album-cover{display: block;position: relative;padding-bottom: 75%;overflow: hidden;}
/* new_index.css 有全站 img{height:auto!important}，高度需以 !important 補回才能填滿 */
.album-cover img{position: absolute;left: 0;top: 0;width: 100%;height: 100% !important;object-fit: cover;transition: all 0.6s;}

/* 資訊層：壓在封面下緣的漸層上；本身不擋點擊，只有子連結可點 */
.album-info{position: absolute;left: 0;right: 0;bottom: 0;padding: 70px 20px 18px 20px;background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0) 100%);pointer-events: none;}
.album-info a{pointer-events: auto;}
.album-tag{display: inline-block;background: #e9d36f;color: #007167;font-size: 12px;font-weight: bold;line-height: 22px;padding: 0 12px;border-radius: 50px;transition: 0.5s all;}
.album-title{margin: 8px 0 4px 0;}
.album-title a{display: block;color: #fff;font-size: 18px;font-weight: bold;line-height: 28px;height: 28px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;transition: 0.5s all;}
/* 張數 / 瀏覽數：全白 + 細微投影，壓在亮色照片上也看得清 */
.album-meta{display: flex;flex-wrap: wrap;gap: 4px 14px;color: #fff;font-size: 13px;line-height: 18px;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);}
.album-meta .album-icon{width: 16px;height: 16px;vertical-align: -3px;margin-right: 5px;stroke-width: 2.25;filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));}

/* ---------- 無資料狀態 ---------- */
.album-empty{background: #f2f2f2;color: #888888;font-size: 15px;text-align: center;line-height: 24px;padding: 40px 15px;border-radius: 5px;margin-bottom: 24px;}
.album-empty .album-icon{display: block;width: 40px;height: 40px;stroke-width: 1.5;color: #cccccc;margin: 0 auto 10px auto;}

/* ---------- hover 只變色（桌機） ---------- */
@media (min-width: 1080px){
	.album-filter a:hover{color: #007167;font-weight:bold;}
	.album-filter a:hover span{color: #007167;}
	.album-filter-close:hover{color: #007167;}
	.album-sort-summary:hover{border-color: #007167;background: #fff;}
	.album-sort-menu a:hover{color: #007167;}
	.album-cover:hover img{transform: scale(1.1);}
	.album-tag:hover{background: #007167;color: #fff;}
	.album-title a:hover{color: #e9d36f;}
}

/* ---------- 1279px 以下：全站 .xinde-container 的 1200px 只在 ≥1280 生效，1082～1279 之間沒有左右邊界，比照全站 ≤1081 的規則補 18px ---------- */
@media (max-width: 1279px){
	.xinde-main{padding-left: 18px;padding-right: 18px;}
}

/* ---------- 999px 以下：全站 .xinde-share1 改為 height:auto 後，h1 字底距離底線只剩 1px，補回與桌機相同的間距 ---------- */
@media (max-width: 999px){
	.xinde-share1{padding-bottom: 8px;}
}

/* ---------- 平板以下：分類改為左側抽屜，工具列收成一行 ---------- */
@media (max-width: 991px){
	.album-bar{flex-wrap: nowrap;gap: 12px;padding-bottom: 12px;border-bottom: 1px solid #e6e6e6;}
	.album-drawer-btn{display: inline-block;color: #007167;font-size: 13px;font-weight: bold;line-height: 30px;padding: 0 14px;border: 1px solid #007167;border-radius: 50px;white-space: nowrap;cursor: pointer;}
	.album-drawer-btn .album-icon{width: 15px;height: 15px;vertical-align: -3px;margin-right: 6px;}
	.album-count{order: 0;padding: 0;}
	.album-sort{order: 0;margin-top: 0;}
	.album-count em{display: none;}
	/* 抽屜本體：預設縮在畫面左側外 */
	.album-filter{display: block;position: fixed;left: 0;top: 0;bottom: 0;z-index: 9000;width: 280px;max-width: 84vw;background: #fff;border-bottom: none;overflow-y: auto;padding-bottom: 30px;transform: translateX(-105%);transition: transform 0.3s ease;}
	.album-filter-head{display: flex;align-items: center;justify-content: space-between;color: #333333;font-size: 15px;font-weight: bold;letter-spacing: 1px;padding: 14px 18px;border-bottom: 1px solid #e6e6e6;}
	.album-filter-close{display: flex;align-items: center;justify-content: center;color: #888888;width: 32px;height: 32px;cursor: pointer;transition: 0.5s all;}
	.album-filter-close .album-icon{width: 20px;height: 20px;stroke-width: 1.8;}
	.album-filter a{display: flex;justify-content: space-between;align-items: center;color: #444444;font-size: 14px;line-height: 22px;padding: 12px 18px;border-bottom: 1px solid #f2f2f2;border-left: 3px solid transparent;}
	.album-filter a span{margin-left: 0;}
	.album-filter a.active{background: #f2f2f2;border-left-color: #e9d36f;}
	.album-filter a.active::after{display: none;}
	/* 黑底遮罩：點擊即關閉 */
	.album-filter-overlay{display: block;position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 8999;background: rgba(0, 0, 0, 0.45);opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0s linear 0.3s;}
	.album-drawer-toggle:checked ~ .album-bar .album-filter{transform: translateX(0);}
	.album-drawer-toggle:checked ~ .album-bar .album-filter-overlay{opacity: 1;visibility: visible;transition: opacity 0.3s ease, visibility 0s;}
}

/* ---------- 手機 ---------- */
@media (max-width: 767px){
	.album-ul{margin: 0;}
	.album-ul li{width: 100%;padding: 0;margin-bottom: 15px;}
	.album-info{padding: 60px 15px 14px 15px;}
	.album-title a{font-size: 17px;line-height: 24px;height: 24px;}
}