/**
 * Video — Frontend stylesheet.
 * - Figure poster overlay (play button, duration, source badge)
 * - Plyr custom skin (xanh lá theme - "Nhật Ký Xanh")
 * - Aspect ratio support (vertical 9:16 max-width clamp)
 *
 * Phụ thuộc: blog.css (CSS vars --green, --green-soft, --ink, --paper) +
 * photo-journal.css (.pj-figure, .pj-figure__caption styles).
 */

/* ============================================================
   FIGURE — VIDEO VARIANT
   Figure trong suốt; khung dark + aspect ratio nằm ở .blt-video__media
   bên trong → caption nằm ngoài frame, đẹp clean như typography blog.
   ============================================================ */
.pj-figure--video {
	margin: 0;
	background: transparent;
}

/* MEDIA WRAPPER — đây mới là khung video thật (dark bg, aspect ratio) */
.blt-video__media {
	position: relative;
	width: 100%;
	aspect-ratio: var(--blt-video-ratio, 16 / 9);
	background: #000;
	border-radius: 12px;
	overflow: hidden;
}

/* Button + player container fill 100% bên trong .media.
   KHÔNG set display:block ở đây vì sẽ override [hidden] attribute trên player
   → player div empty đè lên button → click không tới poster. Để display
   default cho từng element (button: inline-block, div: block, iframe: inline).
   Position: absolute + width/height vẫn đảm bảo layout đúng. */
.blt-video__media > .pj-figure__trigger,
.blt-video__media > .blt-video__player,
.blt-video__media > .blt-video__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Force [hidden] thắng spec — đảm bảo player ẩn trước khi user click play. */
.blt-video__player[hidden] {
	display: none !important;
}

/* EMBED VARIANT — YouTube/Vimeo iframe native UI
   Không cần play overlay, duration badge, source badge — YT/Vimeo tự render
   poster + nút play đỏ + share/watch-later + "Xem trên YouTube" badge. */
.blt-video__media--embed {
	background: #000;
}
.blt-video__iframe {
	background: #000;
}

/* Vertical 9:16 — clamp max-width chính khung media (không phải con) */
.pj-figure--video-vertical .blt-video__media {
	max-width: min(100%, 480px);
	margin-left: auto;
	margin-right: auto;
}
.pj-figure--video-vertical {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ============================================================
   POSTER (trước khi click play)
   ============================================================ */
.blt-video__poster {
	position: relative;
	display: block;
	width: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	background: #1d2327;
	cursor: pointer;
	overflow: hidden;
	border-radius: inherit;
}
.blt-video__poster:focus-visible {
	outline: 3px solid var(--green, #2d7a3a);
	outline-offset: 3px;
}

.blt-video__poster-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease, opacity 0.3s;
}
.blt-video__poster:hover .blt-video__poster-img {
	transform: scale(1.03);
	opacity: 0.85;
}

.blt-video__poster-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #2c3338, #1d2327);
}

/* Play icon — circle pulsing on hover */
.blt-video__play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 66px;
	height: 66px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	color: var(--green, #2d7a3a);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
	transition: transform 0.25s ease, background 0.2s, box-shadow 0.25s;
	pointer-events: none;
}
.blt-video__poster:hover .blt-video__play {
	transform: translate(-50%, -50%) scale(1.1);
	background: #fff;
	box-shadow: 0 8px 32px rgba(45, 122, 58, 0.4);
}
.blt-video__play svg {
	margin-left: 4px; /* optical center cho play triangle */
	display: block;
}

/* Duration badge — bottom-right */
.blt-video__duration {
	position: absolute;
	bottom: 12px;
	right: 12px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	border-radius: 4px;
	letter-spacing: 0.3px;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
	backdrop-filter: blur(4px);
}

/* Source badge — top-left */
.blt-video__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 600;
	border-radius: 3px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	pointer-events: none;
	color: #fff;
}
.blt-video__badge--yt    { background: #c4302b; }
.blt-video__badge--vimeo { background: #1ab7ea; }

/* Resume hint (Step 4 sẽ inject khi có watch progress) */
.blt-video__resume {
	position: absolute;
	bottom: 12px;
	left: 12px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	background: rgba(45, 122, 58, 0.92);
	color: #fff;
	border-radius: 20px;
	letter-spacing: 0.3px;
	pointer-events: none;
	backdrop-filter: blur(4px);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.blt-video__resume::before {
	content: '↻';
	font-size: 14px;
}

/* ============================================================
   PLAYER CONTAINER (sau khi click)
   ============================================================ */
.blt-video__player {
	position: relative;
	background: #000;
	border-radius: inherit;
	overflow: hidden;
}
.blt-video__player video,
.blt-video__player iframe,
.blt-video__player .plyr {
	width: 100%;
	height: 100%;
	display: block;
}
/* object-fit: contain — letterbox nếu ratio video khác container, tránh
   stretch méo + blur do scale lệch tỉ lệ. */
.blt-video__player video {
	object-fit: contain;
	background: #000;
}
/* Plyr wrapper — force fill container, tắt aspect-ratio internal của Plyr
   (vì .blt-video__media đã set aspect-ratio đúng rồi → tránh double ratio). */
.blt-video__player .plyr,
.blt-video__player .plyr--video,
.blt-video__player .plyr__video-wrapper {
	width: 100% !important;
	height: 100% !important;
	padding-bottom: 0 !important;
	aspect-ratio: auto !important;
}
.blt-video__player .plyr video {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
}

/* Khi player active (sau click): ẩn poster overlay */
.pj-figure--video.is-playing .blt-video__poster {
	display: none;
}

/* ============================================================
   LETTER CARD — tail video grids (horizontal + vertical separately)
   Mix YT 16:9 và local 9:16 trong cùng 1 grid sẽ lệch chiều cao →
   tách 2 grid riêng, mỗi grid uniform aspect → cân đối.
   ============================================================ */
.pj-letter__videos-h,
.pj-letter__videos-v {
	margin-top: 20px;
}
.pj-letter__videos-h + .pj-letter__videos-v,
.pj-letter__videos-h + .pj-letter__videos-h,
.pj-pd-grid + .pj-letter__videos-h,
.pj-pd-grid + .pj-letter__videos-v {
	margin-top: 24px;
}

/* Horizontal videos (16:9 / unknown) — smart layout per chunk count.
   PHP chia tail thành chunks và gắn class n1/n2/n3/n4 theo size. */
.pj-letter__videos-h {
	display: grid;
	gap: 22px;
}
.pj-letter__videos-h > .pj-figure--video {
	margin: 0;
}

/* n=1 — single video full-width centered (max 720px) */
.pj-letter__videos-h--n1 {
	grid-template-columns: 1fr;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* n=2 — 2 col uniform */
.pj-letter__videos-h--n2 {
	grid-template-columns: 1fr 1fr;
	align-items: start;
}

/* n=3 — hero (60%, span 2 rows) + 2 nhỏ stacked phải */
.pj-letter__videos-h--n3 {
	grid-template-columns: 1.6fr 1fr;
	align-items: stretch;
}
.pj-letter__videos-h--n3 > :nth-child(1) {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
}
.pj-letter__videos-h--n3 > :nth-child(1) .blt-video__media {
	aspect-ratio: auto;
	flex: 1;
	min-height: 0;
}
.pj-letter__videos-h--n3 > :nth-child(2) { grid-column: 2; grid-row: 1; }
.pj-letter__videos-h--n3 > :nth-child(3) { grid-column: 2; grid-row: 2; }

/* n=4 — hero (span 3 rows) + 3 nhỏ stacked phải */
.pj-letter__videos-h--n4 {
	grid-template-columns: 1.6fr 1fr;
	align-items: stretch;
}
.pj-letter__videos-h--n4 > :nth-child(1) {
	grid-column: 1;
	grid-row: 1 / span 3;
	display: flex;
	flex-direction: column;
}
.pj-letter__videos-h--n4 > :nth-child(1) .blt-video__media {
	aspect-ratio: auto;
	flex: 1;
	min-height: 0;
}
.pj-letter__videos-h--n4 > :nth-child(2) { grid-column: 2; grid-row: 1; }
.pj-letter__videos-h--n4 > :nth-child(3) { grid-column: 2; grid-row: 2; }
.pj-letter__videos-h--n4 > :nth-child(4) { grid-column: 2; grid-row: 3; }

/* Vertical videos (9:16) — reels-style row, max 260px / cell */
.pj-letter__videos-v {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 22px;
	justify-items: center;
	align-items: start;
}
.pj-letter__videos-v > .pj-figure--video {
	margin: 0;
	max-width: 260px;
	width: 100%;
}
.pj-letter__videos-v .pj-figure--video-vertical .blt-video__media {
	max-width: 100%;
}

@media (max-width: 640px) {
	/* Mobile: tất cả horizontal layouts collapse 1 cột stacked */
	.pj-letter__videos-h--n2,
	.pj-letter__videos-h--n3,
	.pj-letter__videos-h--n4 {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	/* Reset hero stretch — về aspect-ratio default cho mobile */
	.pj-letter__videos-h--n3 > :nth-child(1),
	.pj-letter__videos-h--n4 > :nth-child(1) {
		grid-column: auto;
		grid-row: auto;
		display: block;
	}
	.pj-letter__videos-h--n3 > :nth-child(1) .blt-video__media,
	.pj-letter__videos-h--n4 > :nth-child(1) .blt-video__media {
		aspect-ratio: var(--blt-video-ratio, 16 / 9);
		flex: none;
	}
	.pj-letter__videos-h--n3 > :nth-child(n),
	.pj-letter__videos-h--n4 > :nth-child(n) {
		grid-column: auto;
		grid-row: auto;
	}

	.pj-letter__videos-v {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
	.pj-letter__videos-v > .pj-figure--video {
		max-width: 100%;
	}
}

/* ============================================================
   CENTER TOGGLE — nút pause/play giữa video, hiện khi hover (YouTube-style)
   Chỉ áp dụng cho local video (Plyr-based). YT/Vimeo iframe tự handle.
   ============================================================ */
.blt-video__center-toggle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.92);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	border: 0;
	cursor: pointer;
	z-index: 10;
	opacity: 0;
	pointer-events: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.18s ease, background 0.15s ease, transform 0.18s ease;
	backdrop-filter: blur(2px);
}

/* Hiện khi hover vào media wrapper (chỉ khi đang playing — class is-blt-playing
   set bởi JS). Pause state: dùng Plyr's overlay native, không cần overlay này. */
.blt-video__media.is-blt-playing:hover .blt-video__center-toggle,
.blt-video__center-toggle:focus-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, -50%) scale(1);
}
.blt-video__center-toggle:hover {
	background: rgba(0, 0, 0, 0.78);
	transform: translate(-50%, -50%) scale(1.06);
}
.blt-video__center-toggle:focus-visible {
	outline: 2px solid var(--green, #2d7a3a);
	outline-offset: 2px;
}

/* Mobile: tap to toggle controls — show on tap (Plyr's controls auto-show on
   touch). Center toggle ẩn trên touch để tránh đè controls. */
@media (hover: none) {
	.blt-video__center-toggle {
		display: none;
	}
}

/* ============================================================
   CAPTION — text clean nằm DƯỚI khung video, không overlay/dark bg
   ============================================================ */
.pj-figure--video .pj-figure__caption,
.pj-figure__caption--below-video {
	display: block;
	margin: 12px auto 0;
	max-width: 720px;
	padding: 0 4px;
	background: transparent;
	backdrop-filter: none;
	position: static;
	text-align: center;
}
.pj-figure--video .pj-figure__caption-inner {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ink-soft, #5a6c64);
	font-style: italic;
	display: inline;
	letter-spacing: 0.1px;
}

/* ============================================================
   PLYR CUSTOM SKIN — xanh lá theme
   ============================================================ */
.plyr {
	--plyr-color-main:        var(--green, #2d7a3a);
	--plyr-video-control-color:               #fff;
	--plyr-video-control-color-hover:         #fff;
	--plyr-video-control-background-hover:    var(--green, #2d7a3a);
	--plyr-range-fill-background:             var(--green, #2d7a3a);
	--plyr-video-progress-buffered-background: rgba(255, 255, 255, 0.25);
	--plyr-tooltip-background:                rgba(0, 0, 0, 0.85);
	--plyr-font-family:                       'Nunito', -apple-system, sans-serif;
	border-radius: inherit;
}
.plyr--full-ui input[type="range"] {
	color: var(--green, #2d7a3a);
}

/* ============================================================
   ACTIONS BAR — share button (dưới video, trên caption)
   ============================================================ */
.blt-video__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 6px;
	padding: 0 4px;
}
.blt-video__share {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid rgba(45, 122, 58, 0.3);
	color: var(--green, #2d7a3a);
	padding: 4px 12px;
	border-radius: 16px;
	font-size: 12px;
	font-weight: 500;
	font-family: 'Nunito', -apple-system, sans-serif;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
	line-height: 1.2;
}
.blt-video__share:hover {
	background: var(--green-soft, rgba(45, 122, 58, 0.08));
	border-color: var(--green, #2d7a3a);
}
.blt-video__share.is-copied {
	background: var(--green, #2d7a3a);
	color: #fff;
	border-color: var(--green, #2d7a3a);
}
.blt-video__share svg {
	flex-shrink: 0;
}

/* ============================================================
   MOBILE — vertical clamp tighter, larger play btn
   ============================================================ */
@media (max-width: 768px) {
	.pj-figure--video {
		border-radius: 8px;
	}
	.pj-figure--video-vertical .pj-figure__trigger,
	.pj-figure--video-vertical .blt-video__player {
		max-width: 100%;
	}
	.blt-video__play {
		width: 72px;
		height: 72px;
	}
	.blt-video__play svg {
		width: 44px;
		height: 44px;
	}
	.blt-video__duration {
		font-size: 11px;
		padding: 3px 8px;
		bottom: 8px;
		right: 8px;
	}
	.blt-video__badge {
		font-size: 10px;
		padding: 3px 8px;
		top: 8px;
		left: 8px;
	}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.blt-video__poster-img,
	.blt-video__play {
		transition: none !important;
	}
	.blt-video__poster:hover .blt-video__poster-img {
		transform: none;
	}
	.blt-video__poster:hover .blt-video__play {
		transform: translate(-50%, -50%);
	}
}