/* com_myvideos - วิดีโอ */

.my-vid {
	--vid-cols: 3;
	--vid-ratio: 16 / 9;
	--vid-w: 100%;
	--vid-h: auto;
}

/* ------------------------------------------------------------ the player -- */
/*
 * The frame keeps its shape before the video has loaded, so the page does not
 * jump when it arrives. A width or height set in the options wins; with
 * neither, the frame fills what it is given at the chosen ratio.
 */
.my-vid__player {
	width: var(--vid-w); max-width: 100%; margin-inline: auto;
	background: #000; border-radius: var(--my-radius, 14px); overflow: hidden;
	aspect-ratio: var(--vid-ratio);
	height: var(--vid-h);
}

.my-vid__video { display: block; width: 100%; height: 100%; background: #000; }

/* Nothing to play: say why, in the space the player would have taken. */
.my-vid__sorry {
	position: relative; height: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 12px; padding: 24px; text-align: center; color: #dbe4ef;
}
.my-vid__sorry i { font-size: 2.4rem; opacity: .7; }
.my-vid__sorry p { margin: 0; font-size: .95rem; }

.my-vid__sorry-thumb {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; opacity: .25;
}
.my-vid__sorry > * { position: relative; }

/* --------------------------------------------------------------- heading -- */
.my-vid__head { margin-top: 16px; }
.my-vid__head-title { margin: 0 0 16px; font-size: 1.5rem; }

.my-vid__title { margin: 0 0 8px; font-size: 1.35rem; line-height: 1.45; color: var(--my-dark, #13203a); }

.my-vid__meta {
	display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
	font-size: .84rem; color: var(--my-muted, #6b7280);
}
.my-vid__meta i { color: var(--my-primary, #1b5fa8); }
.my-vid__cat { text-decoration: none; }
.my-vid__meta .my-like { margin-inline-start: auto; }

/*
 * The thumb on the "ถูกใจ" button belongs to the button, not to the meta line:
 * it follows the button's own colour, so it turns white once the button fills
 * in - the same as the button in the news section.
 */
.my-vid__meta .my-like i,
.my-vid__card-meta .my-like i { color: inherit; }

/* --------------------------------------------------------------- actions -- */
.my-vid__actions {
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
	margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--my-line, #e5e7eb);
}

.my-vid__btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 18px; border-radius: 999px; text-decoration: none;
	background: linear-gradient(135deg, var(--my-primary, #1b5fa8), var(--my-light, #2e80d6));
	color: #fff; font-size: .88rem; font-weight: 600;
	box-shadow: 0 4px 14px rgba(16, 40, 80, .2);
	transition: transform .16s ease, box-shadow .16s ease;
}
.my-vid__btn:hover, .my-vid__btn:focus-visible {
	color: #fff; text-decoration: none;
	transform: translateY(-1px); box-shadow: 0 8px 20px rgba(16, 40, 80, .28);
}

.my-vid__back {
	margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px;
	font-size: .85rem; text-decoration: none;
}

.my-vid__desc { margin-top: 18px; line-height: 1.75; }

/* ----------------------------------------------------------------- cards -- */
.my-vid__grid {
	display: grid; gap: 18px; margin-top: 18px;
	grid-template-columns: repeat(var(--vid-cols), minmax(0, 1fr));
}

.my-vid__card {
	display: flex; flex-direction: column; overflow: hidden;
	background: #fff; border: 1px solid var(--my-line, #e5e7eb);
	border-radius: var(--my-radius, 14px);
	box-shadow: var(--my-shadow, 0 2px 14px rgba(16, 40, 80, .08));
	transition: transform .2s ease, box-shadow .2s ease;
}
.my-vid__card:hover { transform: translateY(-4px); box-shadow: var(--my-shadow-lg, 0 10px 34px rgba(16, 40, 80, .14)); }

.my-vid__thumb {
	position: relative; display: block; aspect-ratio: 16 / 10;
	background: #0d1420; overflow: hidden; text-decoration: none;
}
.my-vid__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.my-vid__thumb:hover img { transform: scale(1.05); }

.my-vid__noimg {
	display: flex; align-items: center; justify-content: center; height: 100%;
	color: rgba(255, 255, 255, .45); font-size: 2rem;
}

/* The play badge is what tells somebody at a glance that this is a video. */
.my-vid__play {
	position: absolute; inset: 0; margin: auto;
	width: 54px; height: 54px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.1rem;
	backdrop-filter: blur(2px);
	transition: background .18s ease, transform .18s ease;
}
.my-vid__thumb:hover .my-vid__play { background: var(--my-primary, #1b5fa8); transform: scale(1.08); }

.my-vid__new {
	position: absolute; inset-inline-start: 10px; top: 10px;
	background: #ef4444; color: #fff; font-size: .72rem; font-weight: 600;
	border-radius: 999px; padding: 3px 10px;
}

.my-vid__chip {
	position: absolute; inset-inline-end: 10px; top: 10px;
	background: color-mix(in srgb, var(--my-dark, #10427a) 90%, transparent); color: #fff; font-size: .7rem;
	border-radius: 999px; padding: 3px 9px;
}

.my-vid__card-body { padding: 12px 14px 14px; flex: 1 1 auto; display: flex; flex-direction: column; }
.my-vid__card-title { margin: 0; font-size: .98rem; line-height: 1.5; }
.my-vid__card-title a { color: #13203a; text-decoration: none; }
.my-vid__card-title a:hover { color: var(--my-primary, #1b5fa8); }

.my-vid__card-meta {
	display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
	margin-top: auto; padding-top: 10px;
	font-size: .78rem; color: var(--my-muted, #6b7280);
}
.my-vid__card-meta i { color: var(--my-primary, #1b5fa8); }

/* ------------------------------------------------------- list furniture -- */
.my-vid__search { display: flex; gap: 8px; margin-bottom: 14px; }
.my-vid__search input {
	flex: 1 1 auto; min-width: 0; box-sizing: border-box;
	border: 1px solid var(--my-line, #e5e7eb); border-radius: 999px;
	padding: 9px 18px; font: inherit;
}
.my-vid__search button {
	flex: 0 0 auto; border: 0; cursor: pointer; border-radius: 999px;
	width: 42px; background: var(--my-primary, #1b5fa8); color: #fff;
}

.my-vid__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.my-vid__chipcat {
	display: inline-flex; padding: 5px 14px; border-radius: 999px;
	border: 1px solid var(--my-line, #e5e7eb); background: #fff;
	font-size: .82rem; text-decoration: none; color: var(--my-muted, #6b7280);
}
.my-vid__chipcat:hover { border-color: var(--my-primary, #1b5fa8); text-decoration: none; }
.my-vid__chipcat.is-on {
	background: var(--my-primary, #1b5fa8); border-color: var(--my-primary, #1b5fa8); color: #fff;
}

.my-vid__empty { padding: 28px; text-align: center; color: var(--my-muted, #6b7280); }
.my-vid__pages { margin-top: 20px; display: flex; justify-content: center; }

.my-vid__more { margin-top: 28px; }
.my-vid__more-head { font-size: 1.1rem; margin: 0; }

/* ---------------------------------------------------------- the module -- */
/*
 * mod_my_videos reuses the cards above and only adds what a module needs:
 * the three layouts, the button under the list, and the colours the module
 * options hand over as custom properties.
 */
.my-vid--module .my-vid__new { background: var(--vid-badge, #ef4444); }
.my-vid--module .my-vid__card-meta .my-like { margin-inline-start: auto; }
.my-vid--module .my-vid__card-intro {
	margin: 6px 0 0; font-size: .84rem; line-height: 1.65;
	color: var(--my-muted, #6b7280);
}
.my-vid--module .my-share { margin-top: 10px; }

/* รายการ: ภาพย่ออยู่ข้างหัวข้อ เรียงลงมาเป็นบรรทัด */
.my-vid--module.style-list .my-vid__grid { grid-template-columns: 1fr; gap: 12px; }
.my-vid--module.style-list .my-vid__card { flex-direction: row; }
.my-vid--module.style-list .my-vid__thumb { flex: 0 0 150px; align-self: stretch; aspect-ratio: 16 / 10; }
.my-vid--module.style-list .my-vid__play { width: 38px; height: 38px; font-size: .85rem; }
.my-vid--module.style-list .my-vid__card-body { padding: 10px 14px; }

/* วิดีโอเด่น: ตัวแรกเต็มความกว้าง แล้วที่เหลือเป็นการ์ดตามปกติ */
.my-vid--module.style-feature .my-vid__card.is-lead { margin-bottom: 18px; }
.my-vid--module.style-feature .is-lead .my-vid__thumb { aspect-ratio: 16 / 9; }
.my-vid--module.style-feature .is-lead .my-vid__card-title { font-size: 1.15rem; }
.my-vid--module.style-feature .is-lead .my-vid__play { width: 68px; height: 68px; font-size: 1.4rem; }

/* ปุ่ม "ดูวิดีโอทั้งหมด" ท้ายโมดูล */
.my-vid__all { margin-top: 20px; text-align: center; }

.my-vid__all-btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 11px 30px; border-radius: 999px; text-decoration: none;
	font-size: .92rem; font-weight: 600;
	color: var(--vid-btn-tx, #fff);
	background: linear-gradient(135deg,
		var(--vid-btn-1, var(--my-primary, #1b5fa8)),
		var(--vid-btn-2, var(--my-light, #2e80d6)));
	box-shadow: 0 4px 16px rgba(16, 40, 80, .2);
	transition: transform .16s ease, box-shadow .16s ease;
}
.my-vid__all-btn:hover, .my-vid__all-btn:focus-visible {
	color: var(--vid-btn-tx, #fff); text-decoration: none;
	transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16, 40, 80, .28);
}
.my-vid__all-btn i { transition: transform .16s ease; }
.my-vid__all-btn:hover i { transform: translateX(3px); }

/*
 * The column count arrives as an inline style, which would otherwise beat
 * every media query below - hence the !important on the narrow widths.
 */
@media (max-width: 900px) {
	.my-vid { --vid-cols: 2 !important; }
}

@media (max-width: 560px) {
	.my-vid { --vid-cols: 1 !important; }
	.my-vid__back { margin-inline-start: 0; }
	.my-vid--module.style-list .my-vid__thumb { flex-basis: 110px; }
}

@media (prefers-reduced-motion: reduce) {
	.my-vid__card, .my-vid__thumb img, .my-vid__play, .my-vid__btn,
	.my-vid__all-btn, .my-vid__all-btn i { transition: none; }
}