/* 影片牆 · 縮圖假門
   忠欣藍 #0571D3 / 珊瑚紅 #FF5757
   刻意寫得很輕：沒有框架、沒有字型檔、沒有外部請求。 */

.goesl-vwall {
	--goesl-blue: #0571D3;
	--goesl-coral: #FF5757;
	--goesl-ink: #1f2933;
	--goesl-muted: #6b7280;
	--goesl-card: #eef1f4;

	/* 欄數與卡片寬度上限，由下面的 media query 依 data-columns / data-ratio 指定。
	   1fr = 填滿欄位（橫式）；固定 px = 收窄（直式，否則會變成巨大長條）。 */
	--goesl-cols: 2;
	--goesl-card-max: 1fr;

	/* 版面邊界：完全繼承所在容器，不自己設 max-width 也不加左右 padding。
	   這樣影片牆的標題會跟主題的麵包屑、發佈者、H1 切齊——
	   不管是文章、頁面、手機還是桌機，對齊的基準都是主題的內容容器。
	   真的放在全寬無容器的區塊時，短碼加 contain="1" 才自我約束。 */
	box-sizing: border-box;
	margin: 0 0 3.5rem;
}

/* 只有明確要求時才自我約束（contain="1"） */
.goesl-vwall--contain {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
}

.goesl-vwall *,
.goesl-vwall *::before,
.goesl-vwall *::after { box-sizing: border-box; }

/* ── 標題 ───────────────────────────────────────── */

.goesl-vwall__heading {
	margin: 0 0 1.5rem;
	font-size: clamp(1.3rem, 2.2vw, 1.75rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .01em;
	color: var(--goesl-ink);
}

.goesl-vwall__heading::after {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	margin-top: .65rem;
	background: var(--goesl-coral);
	border-radius: 2px;
}

/* ── 格線 ───────────────────────────────────────── */

.goesl-vwall__grid {
	display: grid;
	/* 欄寬上限寫在欄位上（不是靠卡片置中），這樣整排一律從容器左緣開始排，
	   第一張卡永遠跟標題對齊。 */
	grid-template-columns: repeat(var(--goesl-cols), minmax(0, var(--goesl-card-max)));
	justify-content: start;
	gap: 1.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 欄數階梯：data-columns 是「最多幾欄」，不是固定值。
   手機一律 2 欄（最少 2）→ 中等螢幕 3 欄 → 1200px 以上才給到 4 欄。 */
@media (min-width: 768px) {
	.goesl-vwall__grid { gap: 2rem 1.5rem; }
	.goesl-vwall[data-columns="1"] { --goesl-cols: 1; }
	.goesl-vwall[data-columns="2"] { --goesl-cols: 2; }
	.goesl-vwall[data-columns="3"] { --goesl-cols: 3; }
	.goesl-vwall[data-columns="4"] { --goesl-cols: 3; }

	/* 直式類比例：桌機上收窄欄位，避免整面被三根長條佔滿。
	   手機不套用——手機本來就窄，收窄反而變小格。 */
	.goesl-vwall[data-ratio="9:16"] { --goesl-card-max: 250px; }
	.goesl-vwall[data-ratio="3:4"]  { --goesl-card-max: 300px; }
	.goesl-vwall[data-ratio="4:5"]  { --goesl-card-max: 320px; }
}

@media (min-width: 1200px) {
	.goesl-vwall[data-columns="4"] { --goesl-cols: 4; }
}

.goesl-vwall__item {
	width: 100%;
	margin: 0;
}

/* ── 假門本體 ────────────────────────────────────── */

/* __player 是播放後取代 facade 的容器，版面行為必須跟 facade 一致，
   否則清單版型的標題與摘要會被擠位。 */
.goesl-vwall__facade,
.goesl-vwall__player {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	appearance: none;
	text-align: left;
	border-radius: 14px;
}

.goesl-vwall__facade:focus-visible {
	outline: 3px solid var(--goesl-blue);
	outline-offset: 3px;
}

.goesl-vwall__thumb {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 14px;
	background: var(--goesl-card);
	/* 由短碼的 ratio 參數決定；預設直式 9:16。
	   先佔好位可以避免載入時的版面位移（CLS）。 */
	aspect-ratio: var(--goesl-ratio, 9 / 16);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 14px rgba(16, 24, 40, .08);
	transition: box-shadow .3s ease, transform .3s ease;
}

.goesl-vwall__facade:hover .goesl-vwall__thumb {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(16, 24, 40, .08), 0 12px 28px rgba(16, 24, 40, .16);
}

.goesl-vwall__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}

.goesl-vwall__img--empty {
	background: linear-gradient(140deg, var(--goesl-blue), #084b90);
}

.goesl-vwall__facade:hover .goesl-vwall__img { transform: scale(1.05); }

/* 封面上淡淡的下緣壓暗，讓片長角標在亮照片上也讀得到 */
.goesl-vwall__thumb::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 34%;
	background: linear-gradient(to top, rgba(0, 0, 0, .42), transparent);
	pointer-events: none;
}

.goesl-vwall__thumb:has(iframe)::after { display: none; }

/* ── 播放鍵 ─────────────────────────────────────── */

.goesl-vwall__play {
	position: absolute;
	inset: 0;
	margin: auto;
	z-index: 1;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
	transition: background .2s ease, transform .25s ease;
}

.goesl-vwall__play::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 0 10px 16px;
	border-color: transparent transparent transparent var(--goesl-blue);
	transform: translateX(3px);
}

.goesl-vwall__facade:hover .goesl-vwall__play {
	background: #fff;
	transform: scale(1.1);
}

.goesl-vwall__facade:hover .goesl-vwall__play::after {
	border-left-color: var(--goesl-coral);
}

/* ── 角標 ───────────────────────────────────────── */

.goesl-vwall__time {
	position: absolute;
	left: 8px;
	bottom: 8px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px;
	border-radius: 5px;
	background: rgba(0, 0, 0, .74);
	color: #fff;
	font-size: 12px;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

/* 角標左邊的播放小三角（跟 Google 影片搜尋結果同樣式） */
.goesl-vwall__time::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 4px 6px;
	border-color: transparent transparent transparent #fff;
}

/* 草稿角標：只有登入的編輯者會看到這張卡 */
.goesl-vwall__draft {
	position: absolute;
	left: 8px;
	top: 8px;
	z-index: 1;
	padding: 3px 8px;
	border-radius: 5px;
	background: var(--goesl-coral);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .02em;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

/* ── 文字 ───────────────────────────────────────── */

.goesl-vwall__title {
	margin: .85rem 0 .35rem;
	font-size: .975rem;
	font-weight: 600;
	line-height: 1.5;
}

.goesl-vwall__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--goesl-ink);
	text-decoration: none;
	transition: color .2s ease;
}

.goesl-vwall__title a:hover {
	color: var(--goesl-blue);
}

.goesl-vwall__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: .85rem;
	line-height: 1.75;
	color: var(--goesl-muted);
}

/* ── 更多按鈕 ────────────────────────────────────── */

.goesl-vwall__more {
	margin: 2.25rem 0 0;
	text-align: left;
}

.goesl-vwall__more a {
	display: inline-block;
	padding: .72rem 2rem;
	border: 2px solid var(--goesl-blue);
	border-radius: 999px;
	color: var(--goesl-blue);
	font-weight: 700;
	font-size: .95rem;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.goesl-vwall__more a:hover {
	background: var(--goesl-blue);
	color: #fff;
}

/* ── 清單版型（layout="list"）─────────────────────── */
/* 一行一支，左邊影片、右邊文字。橫式長片用這個比格子好讀，
   標題和摘要有地方可以寫。 */

.goesl-vwall[data-layout="list"] .goesl-vwall__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}

.goesl-vwall[data-layout="list"] .goesl-vwall__item {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	column-gap: 1.25rem;
	row-gap: .35rem;
	align-items: start;
}

.goesl-vwall[data-layout="list"] .goesl-vwall__facade,
.goesl-vwall[data-layout="list"] .goesl-vwall__player {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.goesl-vwall[data-layout="list"] .goesl-vwall__title {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-size: 1.1rem;
}

.goesl-vwall[data-layout="list"] .goesl-vwall__excerpt {
	grid-column: 2;
	grid-row: 2;
	/* 桌機：縮圖 300px 寬 16:9＝169 高，扣掉 2 行標題(53)與間距(6)剩約 110px，
	   摘要行高 23.8px → 4 行剛好貼齊影片底緣。 */
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

/* 清單版型的縮圖比較小，播放鍵跟著縮 */
.goesl-vwall[data-layout="list"] .goesl-vwall__play {
	width: 48px;
	height: 48px;
}

.goesl-vwall[data-layout="list"] .goesl-vwall__play::after {
	border-width: 9px 0 9px 14px;
}

/* 手機：維持左右排（跟 YouTube 搜尋結果一樣），只是縮圖變小 */
@media (max-width: 600px) {
	.goesl-vwall[data-layout="list"] .goesl-vwall__item {
		grid-template-columns: minmax(0, 148px) minmax(0, 1fr);
		column-gap: .85rem;
	}

	.goesl-vwall[data-layout="list"] .goesl-vwall__title { font-size: .95rem; }

	.goesl-vwall[data-layout="list"] .goesl-vwall__excerpt {
		/* 手機：最多 2 行，第 2 行末才出現「…」 */
		-webkit-line-clamp: 2;
		line-clamp: 2;
		font-size: .8rem;
	}

	.goesl-vwall[data-layout="list"] .goesl-vwall__play {
		width: 38px;
		height: 38px;
	}

	.goesl-vwall[data-layout="list"] .goesl-vwall__play::after {
		border-width: 7px 0 7px 11px;
		transform: translateX(2px);
	}

	.goesl-vwall[data-layout="list"] .goesl-vwall__time {
		font-size: 11px;
		padding: 2px 6px;
	}
}

/* ── 播放器就地取代封面 ──────────────────────────── */

.goesl-vwall__thumb iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.goesl-vwall__img,
	.goesl-vwall__play,
	.goesl-vwall__thumb { transition: none; }
	.goesl-vwall__facade:hover .goesl-vwall__img,
	.goesl-vwall__facade:hover .goesl-vwall__thumb { transform: none; }
}