/* =========================================================================
   Chan-Ao Portfolio Zoom
   作品 popup 雙視窗佈局 + 畫作 Pan & Zoom
   目標：左側畫作展演區 ~65%，右側資訊欄 ~35% 固定不動。
   ========================================================================= */

/* ---- 雙視窗版面（桌機 ≥ 768px）---- */
@media (min-width: 768px) {

	/* 左側畫作展演區：約 65vw */
	.sc_portfolio_preview {
		width: 65vw !important;
	}

	/* 右側資訊欄：約 35vw（維持 trx 的 left:100% 定位 → 佔 65→100vw）*/
	.sc_portfolio_preview .sc_portfolio_preview_description {
		width: 35vw !important;
	}

	/* 畫作容器：放大上限提高到 ~65vw；裁切在展演區內，縮放/平移不溢出到右側 */
	.sc_portfolio_preview .sc_portfolio_preview_media_container {
		max-width: calc(65vw - 40px) !important;
		overflow: hidden;
	}
}

/* ---- 基準「完整縮放填滿」(fit-to-contain) ---- */
.sc_portfolio_preview .sc_portfolio_preview_media_container {
	/* 行動裝置仍裁切在展演區內 */
	overflow: hidden;
}

.sc_portfolio_preview .sc_portfolio_preview_media_container img {
	max-width: 100%;
	max-height: calc(100vh - 40px);
	width: auto;
	height: auto;
	object-fit: contain;
	cursor: grab;
	touch-action: none;          /* 讓自訂 touch 平移/縮放接管 */
	user-select: none;
	-webkit-user-drag: none;
	opacity: 0;                  /* 預設透明；解碼完成後由 JS 加 .chanao-loaded 淡入 */
	transition: opacity .45s ease;
}

/* 圖片載入後淡入（transition 只作用在 opacity，不影響縮放 transform）*/
.sc_portfolio_preview .sc_portfolio_preview_media_container img.chanao-loaded {
	opacity: 1;
}

/* JS 切換的游標狀態；will-change 只在縮放/拖曳時開啟，
   避免剛換上的新圖被永久圖層卡住不重繪（換圖第一次空白的成因）*/
.sc_portfolio_preview .sc_portfolio_preview_media_container img.is-zoomed {
	cursor: grab;
	will-change: transform;
}
.sc_portfolio_preview .sc_portfolio_preview_media_container img.is-panning {
	cursor: grabbing;
	will-change: transform;
}

/* ---- 移除「Learn more」按鈕 ---- */
.sc_portfolio_preview .sc_portfolio_preview_description .post_readmore {
	display: none !important;
}

/* ---- 移除彈窗內的描述區塊 .post_description_content ---- */
.sc_portfolio_preview .sc_portfolio_preview_description .post_description_content {
	display: none !important;
}

/* ---- 上一幅 / 下一幅 導覽按鈕 ---- */
.sc_portfolio_preview .chanao-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1000;                 /* 高於 media container (z-index:120) */
	width: 52px;
	height: 52px;
	padding: 0;
	margin: 0;
	display: none;                 /* 預設隱藏；僅彈窗開啟時顯示 */
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity .2s ease, background .2s ease;
	-webkit-appearance: none;
	appearance: none;
}
/* 僅在彈窗開啟（_show）時顯示導覽按鈕；關閉後自動隱藏 */
.sc_portfolio_preview.sc_portfolio_preview_show .chanao-nav {
	display: flex;
}

.sc_portfolio_preview .chanao-nav:hover {
	opacity: 1;
	background: rgba(0, 0, 0, 0.6);
}
.sc_portfolio_preview .chanao-nav:focus { outline: none; }
.sc_portfolio_preview .chanao-nav svg { display: block; }

/* 左鍵置於畫作區左緣，右鍵置於畫作區右緣（≈65vw 與資訊欄交界內側）*/
.sc_portfolio_preview .chanao-nav-prev { left: 16px; }
.sc_portfolio_preview .chanao-nav-next { right: 16px; }

/* 手機（直向堆疊）：按鈕對齊上方圖片區，避免落到下方資訊區中央 */
@media (max-width: 767px) {
	.sc_portfolio_preview .chanao-nav {
		top: 32vh;
		width: 44px;
		height: 44px;
	}
}