/* =========================================================
   綺夢診所｜相簿內容頁 gallery-content.php 專屬樣式
   - 需搭配 gallery-new.css（icon、分類膠囊、相簿卡片共用）
   - 主圖輪播用全站 Swiper 4，縮圖列為原生水平捲動
   - class 延續 album- 前綴
   ========================================================= */

/* ---------- 相簿資訊列 ---------- */
.album-content-head{display: flex;flex-wrap: wrap;align-items: center;gap: 10px 16px;max-width: 900px;margin: 0 auto 20px auto;}
/* 白底上的張數 / 瀏覽數 / 日期：取消列表頁壓在照片上用的投影 */
.album-content-head .album-meta{color: #888888;text-shadow: none;}
.album-content-head .album-meta .album-icon{color: #b3b3b3;stroke-width: 2;filter: none;}

/* ---------- 照片輪播 ---------- */
.album-slider{position: relative;max-width: 900px;margin: 0 auto 40px auto;}
/* 全站有 .swiper-container 左右 15px 內距的規則，這裡歸零讓主圖與縮圖列同寬 */
.album-slider-main.swiper-container{padding: 0;overflow: hidden;}
/* 主圖：3:2 比例，照片置中裁切填滿（new_index.css 有全站 img{height:auto!important}，高度需以 !important 補回） */
.album-photo{margin: 0;}
.album-photo-img{position: relative;padding-bottom: 66.666%;background: #f2f2f2;border-radius: 15px;overflow: hidden;}
.album-photo-img img{position: absolute;left: 0;top: 0;width: 100%;height: 100% !important;object-fit: cover;}
/* commodity.css 有全站 .swiper-slide img:hover{opacity:.8}，主圖沒有連結，hover 維持不透明 */
.album-photo-img img:hover{opacity: 1;}
/* 每張照片的描述：只有內文、置中 */
.album-photo-caption{padding: 14px 20px 0 20px;min-height: 62px;box-sizing: border-box;text-align: center;}
.album-photo-caption p{color: #888888;font-size: 14px;line-height: 24px;margin: 0;}
/* 導覽層：高度以 padding 撐成與主圖等高（padding 百分比以寬度計算，3:2 即 66.666%），箭頭才會垂直置中於照片 */
.album-slider-nav{position: absolute;left: 0;right: 0;top: 0;z-index: 2;padding-top: 66.666%;pointer-events: none;}
/* 上一張 / 下一張：白色圓鈕放在照片兩側外 */
.album-slider-prev,
.album-slider-next{position: absolute;top: 50%;width: 44px;height: 44px;margin-top: -22px;border: 1px solid #dddddd;border-radius: 50%;background: #fff;color: #666666;cursor: pointer;padding: 0;display: flex;align-items: center;justify-content: center;pointer-events: auto;transition: 0.5s all;}
.album-slider-prev{left: -68px;}
.album-slider-next{right: -68px;}
.album-slider-prev .album-icon,
.album-slider-next .album-icon{width: 22px;height: 22px;}
.album-slider-prev.swiper-button-disabled,
.album-slider-next.swiper-button-disabled{opacity: 0.35;pointer-events: none;}
/* 張數指示：桌機放主圖右上角膠囊 */
.album-slider-count{position: absolute;right: 16px;top: 16px;background: rgba(0, 0, 0, 0.6);color: #fff;font-size: 12px;line-height: 26px;padding: 0 12px;border-radius: 50px;}
.album-slider-count b{color: #e9d36f;font-weight: bold;}
/* 縮圖列：一列九張，超過可水平捲動；.is-overflow 時右側加漸層提示，捲到底（.at-end）即隱藏 */
.album-slider-thumbs-wrap{position: relative;margin-top: 12px;}
.album-slider-thumbs-wrap::after{content: "";position: absolute;right: 0;top: 0;bottom: 6px;width: 60px;background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);opacity: 0;pointer-events: none;transition: 0.3s opacity;}
.album-slider-thumbs-wrap.is-overflow:not(.at-end)::after{opacity: 1;}
.album-slider-thumbs{display: flex;gap: 8px;padding-bottom: 6px;overflow-x: auto;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;scrollbar-width: thin;}
.album-thumb{flex: 0 0 auto;width: 92px;height: 62px;padding: 0;border: 2px solid transparent;border-radius: 6px;background: #f2f2f2;overflow: hidden;cursor: pointer;opacity: 0.55;scroll-snap-align: start;transition: 0.5s all;}
.album-thumb img{width: 100%;height: 100% !important;object-fit: cover;vertical-align: middle;}
.album-thumb.active{border-color: #e9d36f;opacity: 1;}

/* ---------- 區塊標題（相簿介紹 / 相關相簿） ---------- */
.album-section-title{position: relative;display: inline-block;color: #333333;font-size: 20px;font-weight: bold;line-height: 30px;padding-bottom: 8px;margin: 0 0 16px 0;}
.album-section-title::after{content: "";position: absolute;left: 0;bottom: 0;width: 32px;height: 2px;background: #e9d36f;}

/* ---------- 相簿介紹 ---------- */
.album-desc{max-width: 900px;margin: 0 auto 40px auto;}
.album-desc-text{color: #666666;font-size: 15px;line-height: 28px;}
.album-desc-text p{margin: 0 0 12px 0;}
.album-desc-text img{max-width: 100%;height: auto;border-radius: 15px;}

/* ---------- 客戶基本資訊：樣式完全沿用正式站（q930.css #store-info、aqxinz.css .blognr2），這裡只管外距與寬度 ---------- */
.album-store{max-width: 900px;margin: 0 auto;padding: 0;}
/* 取消 .blognr2 的 1% 內距與 #store-info 的百分比外距，讓灰底框切齊 900px */
.album-store #store-info{max-width: 100%;margin: 0 0 40px 0;}

/* ---------- 相關相簿 ---------- */
.album-related{padding-top: 40px;margin-top: 40px;border-top: 1px solid #e6e6e6;}
.album-related-head{display: flex;align-items: flex-end;justify-content: space-between;gap: 16px;margin-bottom: 4px;}
/* 更多連結：底線用背景漸層畫在文字下方（不受全站 text-decoration 規則影響），hover 從左長出 */
.album-more{display: inline-flex;align-items: center;color: #007167;font-size: 14px;font-weight: bold;line-height: 20px;margin-bottom: 20px;white-space: nowrap;transition: 0.5s all;}
.album-more span{background: linear-gradient(currentColor, currentColor) no-repeat left bottom;background-size: 0 1px;padding-bottom: 2px;transition: background-size 0.3s ease;}
.album-more .album-icon{width: 16px;height: 16px;margin-left: 4px;}
/* 三欄小卡：沿用列表卡片，縮小覆蓋層字級 */
.album-ul-3 li{width: 33.333%;display: flex;flex-direction: column;}
.album-ul-3 .album-article{width: 100%;}
.album-ul-3 .album-info{padding: 50px 15px 14px 15px;}
.album-ul-3 .album-tag{font-size: 12px;line-height: 22px;padding: 0 12px;}
.album-ul-3 .album-title{margin: 6px 0 2px 0;}
.album-ul-3 .album-title a{font-size: 16px;line-height: 24px;height: 24px;}
.album-ul-3 .album-meta{font-size: 12px;gap: 2px 10px;}
.album-ul-3 .album-meta .album-icon{width: 14px;height: 14px;}

/* ---------- 熱門文章：白底圓角卡片，與相關相簿同一套語言 ---------- */
.album-articles{padding-top: 30px;margin-top: 10px;}
.album-article{height: 100%;display: flex;flex-direction: column;background: #fff;border: 1px solid #e6e6e6;border-radius: 15px;overflow: hidden;}
/* 封面：16:9 裁切填滿 */
.album-article-cover{display: block;position: relative;padding-bottom: 56.25%;background: #f2f2f2;overflow: hidden;}
.album-article-cover img{position: absolute;left: 0;top: 0;width: 100%;height: 100% !important;object-fit: cover;transition: all 0.6s;}
.album-article-body{flex: 1;display: flex;flex-direction: column;align-items: flex-start;padding: 16px 18px 18px 18px;}
.album-article-title,
.album-article-text{width: 100%;}
.album-article-title{margin: 10px 0 6px 0;}
.album-article-title a{display: block;color: #333333;font-size: 16px;font-weight: bold;line-height: 24px;max-height: 48px;overflow: hidden;transition: 0.5s all;}
.album-article-text{color: #888888;font-size: 14px;line-height: 22px;height: 44px;overflow: hidden;margin: 0 0 14px 0;}
/* 底部：日期 / 瀏覽數靠左，閱讀按鈕靠右，整列貼齊卡片底部 */
.album-article-foot{width: 100%;margin-top: auto;display: flex;align-items: center;justify-content: space-between;gap: 10px;}
.album-article .album-meta{color: #888888;text-shadow: none;}
.album-article .album-meta .album-icon{color: #b3b3b3;stroke-width: 2;filter: none;}
.album-article-btn{display: inline-block;color: #007167;font-size: 13px;line-height: 30px;padding: 0 14px;border: 1px solid #007167;border-radius: 50px;white-space: nowrap;transition: 0.5s all;}

/* ---------- 返回列表 ---------- */
.album-back{text-align: center;padding: 10px 0 40px 0;}
.album-back-btn{display: inline-flex;align-items: center;color: #007167;font-size: 14px;font-weight: bold;line-height: 38px;padding: 0 24px;border: 1px solid #007167;border-radius: 50px;transition: 0.5s all;}
.album-back-btn .album-icon{width: 16px;height: 16px;margin-right: 6px;}

/* ---------- hover 只變色（桌機） ---------- */
@media (min-width: 1080px){
	.album-slider-prev:hover,
	.album-slider-next:hover{background: #007167;border-color: #007167;color: #fff;}
	.album-thumb:hover{opacity: 1;}
	/* 白底上黃色看不清，hover 改為文字底線從左長出 */
	.album-more:hover span{background-size: 100% 1px;}
	.album-article-cover:hover img{transform: scale(1.1);}
	.album-article-title a:hover{color: #007167;}
	.album-article-btn:hover{background: #007167;color: #fff;}
	.album-back-btn:hover{background: #007167;color: #fff;}
}

/* ---------- 1079px 以下：容器放不下外側箭頭，改為照片下方一列（箭頭 + 張數） ---------- */
@media (max-width: 1079px){
	.album-slider-nav{position: static;display: flex;align-items: center;justify-content: center;gap: 14px;padding: 12px 0 0 0;pointer-events: auto;}
	.album-slider-prev,
	.album-slider-next{position: static;margin: 0;width: 40px;height: 40px;}
	.album-slider-count{position: static;background: none;color: #888888;font-size: 13px;line-height: 20px;padding: 0;min-width: 44px;text-align: center;}
	.album-slider-count b{color: #007167;}
}


/* ---------- 手機 ---------- */
@media (max-width: 767px){
	.album-content-head{margin-bottom: 15px;}
	.album-slider{margin-bottom: 30px;}
	.album-photo-img{border-radius: 10px;}
	.album-photo-caption{padding: 12px 10px 0 10px;min-height: 0;}
	.album-photo-caption p{font-size: 13px;line-height: 22px;}
	.album-slider-nav{padding-top: 10px;}
	.album-slider-prev,
	.album-slider-next{width: 36px;height: 36px;}
	.album-slider-prev .album-icon,
	.album-slider-next .album-icon{width: 20px;height: 20px;}
	.album-slider-thumbs-wrap{margin-top: 10px;}
	.album-thumb{width: 72px;height: 48px;border-radius: 5px;}
	.album-section-title{font-size: 18px;line-height: 26px;}
	.album-desc{margin-bottom: 30px;}
	.album-desc-text{font-size: 14px;line-height: 26px;}
	.album-related{padding-top: 30px;margin-top: 30px;}
	.album-ul-3{margin: 0;}
	.album-ul-3 li{width: 100%;padding: 0;margin-bottom: 15px;}
	.album-ul-3 .album-info{padding: 60px 15px 14px 15px;}
	.album-ul-3 .album-title a{font-size: 17px;line-height: 24px;height: 24px;}
	.album-ul-3 .album-meta{font-size: 13px;}
	.album-articles{padding-top: 25px;margin-top: 5px;}
	.album-article-body{padding: 14px 15px 16px 15px;}
	.album-article-title a{font-size: 15px;line-height: 22px;max-height: 44px;}
	.album-article-text{font-size: 13px;line-height: 20px;height: 40px;}
	.album-article-foot{flex-wrap: wrap;}
	.album-article-btn{font-size: 12px;line-height: 28px;padding: 0 12px;}
	.album-back{padding-bottom: 30px;}
}