/* =====================================================================
   Video library — /videos/, category/tag listings, single video.
   Built on main.css tokens (colors, spacing, radius, motion); logical
   properties only, so RTL (fa) and LTR (en) share every rule.
   ===================================================================== */

.tpv-icon{ width:18px; height:18px; flex:none; }
.tpv-dot{ color:var(--text-faint); margin-inline:6px; }

/* ---------- Listing header ------------------------------------------- */
.tpv-hero-head{
	background:
		radial-gradient(55% 120% at 85% 0%, rgba(22,90,84,.45), transparent 70%),
		var(--bg-secondary);
	border-block-end:1px solid var(--border-soft);
}
.tpv-hero-head__inner{
	display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-800);
	padding-block:var(--space-1100) var(--space-800);
}
.tpv-hero-head__text{ max-width:620px; }
.tpv-hero-head__title{ margin-block-start:var(--space-300); font-size:clamp(1.8rem, 3vw, 2.6rem); }
.tpv-hero-head__lead{ margin-block-start:var(--space-300); color:var(--text-muted); }
.tpv-back{
	display:inline-flex; align-items:center; gap:6px;
	font-size:.85rem; font-weight:700; color:var(--accent);
}
.tpv-back:hover{ color:var(--text-primary); }
html[dir="rtl"] .tpv-back .tpv-icon{ transform:scaleX(-1); }

.tpv-search{
	position:relative; flex:0 1 420px; display:flex;
	background:var(--bg-primary); border:1px solid var(--border-soft); border-radius:var(--radius-full);
	transition:border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.tpv-search:focus-within{ border-color:var(--border-strong); box-shadow:0 0 0 4px rgba(145,218,115,.1); }
.tpv-search input{
	flex:1; min-width:0; background:transparent; border:0; outline:0;
	padding-block:12px; padding-inline:var(--space-500) var(--space-200);
	font-size:.95rem; color:var(--text-primary);
}
.tpv-search input::placeholder{ color:var(--text-faint); }
.tpv-search input::-webkit-search-cancel-button{ filter:invert(1) opacity(.5); }
.tpv-search button{
	display:flex; align-items:center; justify-content:center;
	width:44px; margin:4px; border-radius:var(--radius-full);
	background:var(--accent); color:var(--c-navy);
	transition:background-color var(--motion-fast) var(--ease-out);
}
.tpv-search button:hover{ background:var(--accent-strong); }

/* Category chips: one horizontally scrollable row, never wraps into a wall */
.tpv-chipbar{
	display:flex; gap:var(--space-200); overflow-x:auto; scrollbar-width:none;
	padding-block:var(--space-400);
	mask-image:linear-gradient(to left, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.tpv-chipbar::-webkit-scrollbar{ display:none; }

.tpv-chip{
	display:inline-flex; align-items:center; flex:none;
	padding:7px 16px; border-radius:var(--radius-full);
	font-size:.85rem; font-weight:500; line-height:1.4; white-space:nowrap;
	color:var(--text-muted); background:rgba(246,250,248,.06); border:1px solid var(--border-soft);
	transition:background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.tpv-chip:hover{ color:var(--text-primary); border-color:var(--border-strong); }
.tpv-chip.is-active{ background:var(--accent); border-color:var(--accent); color:var(--c-navy); font-weight:700; }
.tpv-chip--category{
	padding:3px 10px; font-size:.75rem; font-weight:700;
	color:var(--accent); background:rgba(145,218,115,.1); border-color:transparent;
}
.tpv-chip--category:hover{ background:rgba(145,218,115,.18); color:var(--accent); border-color:transparent; }

.tpv-tag{
	display:inline-flex; align-items:center; gap:4px;
	padding:4px 12px; border-radius:var(--radius-full);
	font-size:.8rem; color:var(--text-muted); border:1px solid var(--border-soft);
	transition:border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.tpv-tag:hover{ color:var(--accent); border-color:var(--border-strong); }
.tpv-tag.is-active{ color:var(--accent); border-color:var(--accent-strong); background:rgba(145,218,115,.08); }
.tpv-tag .tpv-icon{ width:14px; height:14px; }
.tpv-tag, .tpv-card__tags a{ display:inline-flex; align-items:center; } /* "#" stays at the reading start in RTL and LTR */
.tpv-hash{ opacity:.7; }

/* ---------- Listing body --------------------------------------------- */
.tpv-listing{ padding-block:var(--space-900) var(--space-section); }

.tpv-tagbar{
	display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-200);
	margin-block-end:var(--space-800);
}
.tpv-tagbar__label{ font-size:.82rem; color:var(--text-faint); margin-inline-end:var(--space-100); }

.tpv-section-head{
	display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--space-300) var(--space-500);
	margin-block-end:var(--space-600);
}
.tpv-section-head__title{ font-size:1.3rem; }
.tpv-section-head__count{ color:var(--text-faint); font-size:.88rem; }
.tpv-section-head .tp-link-arrow{ margin-inline-start:auto; }
.tpv-clear{
	display:inline-flex; align-items:center; gap:4px; margin-inline-start:auto;
	font-size:.85rem; font-weight:700; color:var(--accent);
}
.tpv-clear .tpv-icon{ width:16px; height:16px; }

.tpv-grid{
	display:grid; gap:var(--space-900) var(--space-600);
	grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
}

/* ---------- Thumbnail ------------------------------------------------- */
@keyframes tpv-shimmer{ to{ background-position:-200% 0; } }
.tpv-thumb{
	position:relative; display:block; aspect-ratio:16 / 9; overflow:hidden;
	border-radius:var(--radius-300);
	background:linear-gradient(100deg, var(--bg-card) 30%, rgba(22,90,84,.9) 50%, var(--bg-card) 70%);
	background-size:200% 100%; animation:tpv-shimmer 1.6s linear infinite;
}
.tpv-thumb img, .tpv-thumb .tp-placeholder{
	position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
	transition:transform var(--motion-slow) var(--ease-out);
}
.tpv-thumb::after{ /* hairline inner border so light thumbnails keep an edge */
	content:""; position:absolute; inset:0; border-radius:inherit;
	box-shadow:inset 0 0 0 1px rgba(246,250,248,.08); pointer-events:none;
}
.tpv-thumb__duration{
	position:absolute; inset-block-end:8px; inset-inline-end:8px; z-index:1;
	padding:2px 7px; border-radius:6px;
	background:rgba(2,28,37,.86); color:var(--text-primary);
	font-size:.75rem; font-weight:700; line-height:1.5; letter-spacing:.02em;
}
.tpv-thumb__play{
	position:absolute; inset:0; z-index:1; margin:auto;
	width:56px; height:56px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background:rgba(145,218,115,.92); color:var(--c-navy);
	box-shadow:0 8px 24px rgba(2,12,16,.45);
	opacity:0; transform:scale(.85);
	transition:opacity var(--motion-regular) var(--ease-out), transform var(--motion-regular) var(--ease-out);
}
.tpv-thumb__play .tpv-icon{ width:24px; height:24px; margin-left:3px; } /* physical: play always points right */

/* ---------- Card ------------------------------------------------------- */
.tpv-card{ display:flex; flex-direction:column; gap:var(--space-300); min-width:0; }
.tpv-card__media{ display:block; border-radius:var(--radius-300); }
.tpv-card:hover .tpv-thumb img,
.tpv-card:hover .tpv-thumb .tp-placeholder{ transform:scale(1.04); }
.tpv-card:hover .tpv-thumb__play,
.tpv-card__media:focus-visible .tpv-thumb__play{ opacity:1; transform:scale(1); }
.tpv-card__body{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }
.tpv-card__title{
	font-size:1rem; line-height:1.55; font-weight:700;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tpv-card__title a{ transition:color var(--motion-fast) var(--ease-out); }
.tpv-card__title a:hover{ color:var(--accent); }
.tpv-card__excerpt{
	color:var(--text-muted); font-size:.86rem; line-height:1.7;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tpv-card__meta{
	display:flex; flex-wrap:wrap; align-items:center; gap:2px;
	color:var(--text-faint); font-size:.8rem;
}
.tpv-card__meta .tpv-chip--category{ margin-inline-end:var(--space-200); }
.tpv-card__tags{ display:flex; flex-wrap:wrap; gap:4px 10px; }
.tpv-card__tags a{ font-size:.78rem; color:var(--text-faint); }
.tpv-card__tags a:hover{ color:var(--accent); }

/* Compact: thumbnail beside text (featured side list, related videos) */
.tpv-card--compact{
	display:grid; grid-template-columns:168px minmax(0,1fr); align-items:start; gap:var(--space-300);
}
.tpv-card--compact .tpv-thumb{ border-radius:var(--radius-200); }
.tpv-card--compact .tpv-thumb__play{ width:40px; height:40px; }
.tpv-card--compact .tpv-thumb__play .tpv-icon{ width:18px; height:18px; }
.tpv-card--compact .tpv-card__title{ font-size:.92rem; line-height:1.5; }
.tpv-card--compact .tpv-card__meta{ font-size:.75rem; }

/* ---------- Featured --------------------------------------------------- */
.tpv-featured{
	display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:var(--space-800);
	margin-block-end:var(--space-1100);
	padding-block-end:var(--space-1000); border-block-end:1px solid var(--border-soft);
}
.tpv-featured__lead{ position:relative; border-radius:var(--radius-400); overflow:hidden; box-shadow:var(--elevation-2); }
.tpv-featured__media .tpv-thumb{ border-radius:0; }
.tpv-featured__lead:hover .tpv-thumb img{ transform:scale(1.03); }
.tpv-featured__body{
	position:absolute; inset-inline:0; inset-block-end:0; z-index:2;
	display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-300);
	padding:var(--space-1000) var(--space-800) var(--space-800);
	background:linear-gradient(to top, rgba(2,28,37,.96) 10%, rgba(2,28,37,.7) 55%, transparent);
}
.tpv-featured__title{ font-size:clamp(1.25rem, 2vw, 1.7rem); line-height:1.4; max-width:30ch; }
.tpv-featured__title a:hover{ color:var(--accent); }
.tpv-featured__excerpt{
	color:var(--text-muted); max-width:60ch;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tpv-featured__body .tp-btn .tpv-icon{ width:16px; height:16px; }
.tpv-badge{
	display:inline-flex; align-items:center; gap:6px;
	padding:4px 12px; border-radius:var(--radius-full);
	background:var(--accent); color:var(--c-navy); font-size:.75rem; font-weight:700;
}
.tpv-featured__more{ display:flex; flex-direction:column; gap:var(--space-500); }

/* One featured video: media and text side by side instead of an empty column */
.tpv-featured--solo{ grid-template-columns:1fr; }
.tpv-featured--solo .tpv-featured__lead{
	display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); align-items:center;
	background:var(--bg-card); border:1px solid var(--border-soft);
}
.tpv-featured--solo .tpv-featured__body{ position:static; background:none; padding:var(--space-900) var(--space-800); }
.tpv-featured--solo .tpv-featured__excerpt{ -webkit-line-clamp:4; }

/* ---------- Load more / empty ----------------------------------------- */
.tpv-more{ display:flex; justify-content:center; margin-block-start:var(--space-1100); }
.tpv-spinner{
	display:none; width:16px; height:16px; border-radius:50%;
	border:2px solid currentColor; border-inline-end-color:transparent;
	animation:tpv-spin .7s linear infinite;
}
.tpv-more__btn.is-loading{ pointer-events:none; opacity:.8; }
.tpv-more__btn.is-loading .tpv-spinner{ display:inline-block; }
@keyframes tpv-spin{ to{ transform:rotate(360deg); } }
.tpv-grid > .tpv-card.is-new{ animation:tpv-in var(--motion-slow) var(--ease-out) both; }
@keyframes tpv-in{ from{ opacity:0; transform:translateY(8px); } }

.tpv-empty{
	display:flex; flex-direction:column; align-items:center; gap:var(--space-300);
	text-align:center; padding:var(--space-1200) var(--space-600);
	border:1px dashed var(--border-soft); border-radius:var(--radius-400);
}
.tpv-empty__icon{
	width:64px; height:64px; border-radius:50%; margin-block-end:var(--space-200);
	display:flex; align-items:center; justify-content:center;
	background:rgba(145,218,115,.1); color:var(--accent);
}
.tpv-empty__icon .tpv-icon{ width:28px; height:28px; }
.tpv-empty h3{ font-size:1.15rem; }
.tpv-empty p{ color:var(--text-muted); max-width:44ch; margin-block-end:var(--space-300); }

/* ---------- Single video ----------------------------------------------- */
.tpv-watch{
	display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:var(--space-900);
	padding-block:var(--space-800) var(--space-1100);
}
.tpv-crumbs{
	display:flex; flex-wrap:wrap; gap:8px; margin-block-end:var(--space-400);
	font-size:.85rem; color:var(--text-faint);
}
.tpv-crumbs a{ color:var(--text-muted); }
.tpv-crumbs a:hover{ color:var(--accent); }

.tpv-player{
	position:relative; aspect-ratio:16 / 9; overflow:hidden;
	background:#000; border-radius:var(--radius-400);
	box-shadow:var(--elevation-3);
}
.tpv-player video, .tpv-player > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.tpv-player > img{ object-fit:cover; opacity:.35; }
.tpv-player__error{
	position:absolute; inset:0; z-index:1;
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-300);
	padding:var(--space-600); text-align:center; color:var(--text-muted);
	background:rgba(2,28,37,.7);
}
.tpv-player__error .tpv-icon{ width:40px; height:40px; color:var(--accent); }
.tpv-player__error[hidden]{ display:none; }

.tpv-watch__title{ margin-block-start:var(--space-600); font-size:clamp(1.3rem, 2.2vw, 1.75rem); line-height:1.45; }

.tpv-watch__bar{
	display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
	gap:var(--space-400); margin-block-start:var(--space-400);
}
.tpv-stats{ display:flex; flex-wrap:wrap; gap:var(--space-200) var(--space-600); color:var(--text-muted); font-size:.88rem; }
.tpv-stats > span{ display:inline-flex; align-items:center; gap:6px; }
.tpv-stats .tpv-icon{ width:16px; height:16px; color:var(--text-faint); }

.tpv-share{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-200); }
.tpv-share__btn{
	display:inline-flex; align-items:center; justify-content:center; gap:6px;
	min-width:40px; height:40px; padding-inline:12px; border-radius:var(--radius-full);
	background:rgba(246,250,248,.06); border:1px solid var(--border-soft);
	color:var(--text-muted); font-size:.85rem; font-weight:700;
	transition:color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}
.tpv-share__icon{ padding-inline:0; }
.tpv-share__btn:hover{ color:var(--accent); border-color:var(--border-strong); background:rgba(145,218,115,.08); }
.tpv-share__btn.is-done{ color:var(--c-navy); background:var(--accent); border-color:var(--accent); }
.tpv-share__btn[hidden]{ display:none; }

.tpv-desc{
	margin-block-start:var(--space-600); padding:var(--space-600);
	background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-300);
}
.tpv-desc__terms{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-200); margin-block-end:var(--space-400); }
.tpv-desc .tpv-desc__content{ padding:0; max-width:none; }
.tpv-desc .tpv-desc__content > :last-child{ margin-block-end:0; }

.tpv-watch__side{ display:flex; flex-direction:column; gap:var(--space-500); padding-block-start:38px; }
.tpv-side-title{ font-size:1.05rem; }
.tpv-side-list{ display:flex; flex-direction:column; gap:var(--space-500); }
.tpv-side-empty{ color:var(--text-faint); font-size:.9rem; }

.tpv-more-cat{ padding-block:var(--space-900) var(--space-section); border-block-start:1px solid var(--border-soft); }

/* ---------- Responsive -------------------------------------------------- */
@media (max-width:1100px){
	.tpv-watch{ grid-template-columns:1fr; }
	.tpv-watch__side{ padding-block-start:0; }
	.tpv-side-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); }
}
@media (max-width:980px){
	.tpv-featured{ grid-template-columns:1fr; }
	.tpv-featured--solo .tpv-featured__lead{ grid-template-columns:1fr; }
	.tpv-featured__more{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); }
	.tpv-hero-head__inner{ flex-direction:column; align-items:stretch; }
	.tpv-search{ flex-basis:auto; }
}
@media (max-width:640px){
	.tpv-hero-head__inner{ padding-block:var(--space-900) var(--space-600); }
	.tpv-grid{ grid-template-columns:1fr; gap:var(--space-800); }
	.tpv-featured__lead{ border-radius:var(--radius-300); background:var(--bg-card); }
	.tpv-featured__body{ position:static; padding:var(--space-500); background:none; }
	.tpv-featured__excerpt{ display:none; }
	.tpv-card--compact{ grid-template-columns:140px minmax(0,1fr); }
	.tpv-side-list{ grid-template-columns:1fr; }
	.tpv-player{ border-radius:var(--radius-200); margin-inline:calc(var(--space-500) * -1); }
	.tpv-watch{ padding-block-start:var(--space-500); }
	.tpv-share__native:not([hidden]) ~ .tpv-share__icon{ display:none; }
	.tpv-desc{ padding:var(--space-500); }
}