/*
 * Tantrafest video library — design/videos/v1 (README specs + boards 1a–1r).
 * Every selector carries two classes so it outranks the kit's `.elementor-kit-6 button|a|h2`
 * and Hello Elementor's reset (`button:hover { background:#c36 }`).
 */

:root {
	--tfv-bg: #FCFAEB;
	--tfv-surface: #FFFFFF;
	--tfv-rule: #D9D9D9;
	--tfv-ink: #000000;
	--tfv-ink-2: #484848;
	--tfv-red: #AB1A17;
	--tfv-focus: #FF7231;
	--tfv-font: Roboto, Helvetica, Arial, sans-serif;
	--tfv-slab: "Roboto Slab", Georgia, serif;
}

/* Page container: Elementor container `tfv-page`, boxed 1200, padding 0 20 88 (mobile 0 20 40), no gap. */

.tfv-lib [hidden], .tfv-single [hidden], .tfv-grid [hidden] { display: none !important; }

.tfv-lib, .tfv-single, .tfv-card { font-family: var(--tfv-font); color: var(--tfv-ink); }

.tfv-lib .screen-reader-text, .tfv-card .screen-reader-text, .tfv-vh {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* One focus ring for every interactive element in the section. */
.tfv-lib :is(a, button):focus-visible,
.tfv-single :is(a, button):focus-visible,
.tfv-card .tfv-card__link:focus-visible,
.tfv-grid .elementor-button:focus-visible {
	outline: 3px solid var(--tfv-focus);
	outline-offset: 2px;
}

/* ---------- title row ---------- */

.tfv-lib { padding-top: 64px; margin-bottom: 36px; }

.tfv-lib .tfv-head { display: flex; align-items: center; gap: 22px; margin: 0 0 36px; }
.tfv-lib .tfv-head__title {
	margin: 0; font-family: var(--tfv-slab); font-weight: 400; font-size: 46px; line-height: 1.1;
	color: var(--tfv-ink); text-transform: none; letter-spacing: normal;
}
.tfv-lib .tfv-head__mandala { width: 50px; height: auto; opacity: .9; flex: none; }

/* ---------- chips, count, clear ---------- */

.tfv-lib .tfv-filters { display: flex; flex-direction: column; gap: 18px; }
.tfv-lib .tfv-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.tfv-lib .tfv-chip,
.tfv-lib .tfv-chip:focus {
	-webkit-appearance: none; appearance: none; margin: 0;
	padding: 9px 18px; border: 1px solid var(--tfv-rule); border-radius: 999px;
	background: var(--tfv-surface); color: var(--tfv-ink-2);
	font: 500 14px/1.2 var(--tfv-font); text-transform: none; letter-spacing: normal;
	box-shadow: none; cursor: pointer; transition: border-color .15s, color .15s;
}
.tfv-lib .tfv-chip:hover { border-color: var(--tfv-ink); color: var(--tfv-ink); background: var(--tfv-surface); }
.tfv-lib .tfv-chip[aria-pressed="true"],
.tfv-lib .tfv-chip[aria-pressed="true"]:hover,
.tfv-lib .tfv-chip[aria-pressed="true"]:focus { border-color: var(--tfv-red); background: var(--tfv-red); color: #FFFFFF; font-weight: 600; }

.tfv-lib .tfv-status { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tfv-lib .tfv-count { margin: 0; font: 400 13px/1.4 var(--tfv-font); color: var(--tfv-ink-2); }

.tfv-lib .tfv-link,
.tfv-lib .tfv-link:hover,
.tfv-lib .tfv-link:focus {
	margin: 0; padding: 9px 4px; border: 0; border-radius: 0; background: none;
	font: 500 13px/1.2 var(--tfv-font); color: var(--tfv-red); text-transform: none; letter-spacing: normal;
	text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* Outlined pill: "Tühjenda filtrid" in the empty frame, "Kõik videod" on the single page. */
.tfv-lib .tfv-btn, .tfv-single .tfv-btn,
.tfv-lib .tfv-btn:focus, .tfv-single .tfv-btn:focus {
	display: inline-block; margin: 0; padding: 12px 26px;
	border: 1px solid var(--tfv-ink); border-radius: 999px; background: transparent;
	font: 600 14px/1.2 var(--tfv-font); color: var(--tfv-ink); text-transform: none; letter-spacing: normal;
	text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s;
}
.tfv-lib .tfv-btn:hover, .tfv-single .tfv-btn:hover { background: var(--tfv-ink); color: #FFFFFF; }
.tfv-lib .tfv-btn--red, .tfv-lib .tfv-btn--red:focus { border-color: var(--tfv-red); background: var(--tfv-red); color: #FFFFFF; }
.tfv-lib .tfv-btn--red:hover { background: #8E1411; border-color: #8E1411; }

/* ---------- empty state (1f) and player error (1q) ---------- */

.tfv-lib .tfv-empty {
	margin-top: 28px; padding: 64px 40px;
	border: 1px dashed var(--tfv-rule); border-radius: 4px; background: var(--tfv-surface);
	display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.tfv-lib .tfv-empty .tfv-btn { margin-top: 8px; }
.tfv-lib :is(.tfv-empty__mandala, .tfv-error__mandala) { width: 62px; height: auto; opacity: .5; margin-bottom: 4px; }
.tfv-lib :is(.tfv-empty__title, .tfv-error__title) { margin: 0; font: 600 20px/1.3 var(--tfv-font); color: var(--tfv-ink); }
.tfv-lib :is(.tfv-empty__body, .tfv-error__body) { margin: 0; font: 400 15px/1.5 var(--tfv-font); color: var(--tfv-ink-2); max-width: 440px; }

.tfv-lib .tfv-error {
	position: absolute; inset: 0; overflow: auto; box-sizing: border-box; padding: 0 40px;
	border: 1px dashed var(--tfv-rule); background: var(--tfv-surface);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center;
}
.tfv-lib .tfv-error .tfv-btn { margin-top: 6px; }
.tfv-lib .tfv-frame:has(.tfv-error) { background: var(--tfv-bg); }

/* ---------- player region ---------- */

.tfv-lib .tfv-watch, .tfv-single .tfv-watch { display: flex; flex-direction: column; gap: 24px; }
.tfv-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000000; }
.tfv-frame__inner { position: absolute; inset: 0; }
.tfv-frame .tfv-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* 1p: loading skeleton, aria-busy on the region */
.tfv-watch[aria-busy="true"] .tfv-frame::after {
	content: attr(data-loading); position: absolute; inset: 0; z-index: 2;
	display: flex; align-items: center; justify-content: center; background: #EDE9D6;
	font: 400 10px/1 "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	color: #A5A08A; letter-spacing: .1em; text-transform: uppercase;
}
.tfv-lib .tfv-info-skel { display: none; flex-direction: column; gap: 12px; max-width: 860px; }
.tfv-lib .tfv-watch[aria-busy="true"] .tfv-info-skel { display: flex; }
.tfv-lib .tfv-watch[aria-busy="true"] .tfv-info { display: none; }
.tfv-lib .tfv-info-skel span { display: block; height: 12px; background: #F2EFE0; border-radius: 2px; }
.tfv-lib .tfv-info-skel span:nth-child(1) { height: 26px; width: 62%; background: #EDE9D6; }
.tfv-lib .tfv-info-skel span:nth-child(2) { height: 14px; width: 38%; }
.tfv-lib .tfv-info-skel span:nth-child(3) { width: 100%; margin-top: 8px; }
.tfv-lib .tfv-info-skel span:nth-child(4) { width: 96%; }
.tfv-lib .tfv-info-skel span:nth-child(5) { width: 71%; }

.tfv-lib .tfv-info { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.tfv-lib .tfv-info__title { margin: 0; font: 600 30px/1.25 var(--tfv-font); color: var(--tfv-ink); text-transform: none; letter-spacing: normal; }

.tfv-lib .tfv-caption, .tfv-single .tfv-caption { margin: 0; font: 400 14px/1.4 var(--tfv-font); color: var(--tfv-ink-2); }
.tfv-caption__short { display: none; }

.tfv-lib .tfv-desc {
	position: relative; margin-top: 6px;
	font: 400 16px/1.7 var(--tfv-font); color: var(--tfv-ink); overflow-wrap: anywhere;
}
.tfv-lib .tfv-desc p, .tfv-single .tfv-single__desc p { margin: 0 0 1.7em; }
.tfv-lib .tfv-desc p:last-child, .tfv-single .tfv-single__desc p:last-child { margin-bottom: 0; }
.tfv-lib .tfv-desc a, .tfv-single .tfv-single__desc a { color: inherit; font-weight: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tfv-lib .tfv-desc.is-folded { max-height: calc(1.7em * 6); overflow: hidden; }
.tfv-lib .tfv-desc.is-folded::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52px; pointer-events: none;
	background: linear-gradient(to bottom, rgba(252, 250, 235, 0), var(--tfv-bg));
}

.tfv-lib .tfv-fold,
.tfv-lib .tfv-fold:hover,
.tfv-lib .tfv-fold:focus {
	align-self: flex-start; margin: 4px 0 0; padding: 0; border: 0; border-radius: 0; background: none;
	font: 600 15px/1.4 var(--tfv-font); color: var(--tfv-red); text-transform: none; letter-spacing: normal;
	text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tfv-lib .tfv-own { align-self: flex-start; margin-top: 10px; font: 500 14px/1.4 var(--tfv-font); color: var(--tfv-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.tfv-lib .tfv-own:hover { color: var(--tfv-ink); }

.tfv-lib .tfv-rule { display: none; height: 1px; margin: 40px 0; border: 0; background: var(--tfv-rule); }
.tfv-lib .tfv-next { display: none; }

/* ---------- watching state (1g, 1h) ---------- */

.tfv-lib.is-watching { padding-top: 48px; margin-bottom: 24px; }
.tfv-lib.is-watching .tfv-head {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.tfv-lib.is-watching .tfv-rule { display: block; }
.tfv-lib.is-watching:not(.is-filtered) .tfv-status { display: none; }
.tfv-lib.is-watching .tfv-filters { gap: 14px; }

/* ---------- the grid (Loop Grid widget, class tfv-grid) ---------- */

.tfv-grid .e-loop-item > .e-con,
.tfv-grid .e-loop-item .elementor-widget-shortcode { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; padding: 0; height: 100%; }
.tfv-grid .e-loop-item .elementor-widget-container,
.tfv-grid .e-loop-item .elementor-shortcode { height: 100%; }
.tfv-grid.is-loading .elementor-loop-container { opacity: .45; pointer-events: none; transition: opacity .15s; }

body .tfv-grid.elementor-widget-loop-grid .e-loop__load-more { margin-top: 48px; text-align: center; justify-content: center; }
body .tfv-grid.elementor-widget-loop-grid .e-loop__load-more .elementor-button {
	display: inline-flex; align-items: center; justify-content: center; margin: 0;
	padding: 13px 30px; border: 1px solid var(--tfv-ink); border-radius: 999px; background: transparent;
	font: 600 14px/1.2 var(--tfv-font); color: var(--tfv-ink); text-transform: none; letter-spacing: normal;
	box-shadow: none; transition: background-color .15s, color .15s;
}
body .tfv-grid.elementor-widget-loop-grid .e-loop__load-more .elementor-button:hover,
body .tfv-grid.elementor-widget-loop-grid .e-loop__load-more .elementor-button:focus-visible { background: var(--tfv-ink); color: #FFFFFF; }
body .tfv-grid.elementor-widget-loop-grid .e-loop__load-more .elementor-button .elementor-button-text { font: inherit; color: inherit; }

/* ---------- card (VideoCard) ---------- */

.tfv-card { height: 100%; }
.tfv-card .tfv-card__link {
	display: flex; flex-direction: column; gap: 11px; height: 100%; box-sizing: border-box;
	padding: 9px 9px 15px; background: var(--tfv-surface);
	border: 1px solid var(--tfv-rule); border-radius: 4px;
	color: var(--tfv-ink); font-weight: 400; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.tfv-card .tfv-card__link:hover { border-color: var(--tfv-red); color: var(--tfv-ink); }
.tfv-card.is-active .tfv-card__link { border-color: var(--tfv-red); box-shadow: 0 0 0 1px var(--tfv-red); }

.tfv-card .tfv-card__thumb {
	position: relative; aspect-ratio: 16 / 9; border-radius: 2px; overflow: hidden;
	background: repeating-linear-gradient(135deg, #EFEBD5 0 7px, #E4DFC6 7px 14px);
}
.tfv-card .tfv-card__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; border-radius: 0; }
.tfv-card .tfv-card__dur {
	position: absolute; right: 7px; bottom: 7px; padding: 4px 6px; border-radius: 2px;
	background: rgba(0, 0, 0, .82); color: #FFFFFF;
	font: 500 12px/1 var(--tfv-font); font-variant-numeric: tabular-nums;
}
.tfv-card .tfv-card__now {
	position: absolute; left: 7px; top: 7px; padding: 5px 7px; border-radius: 2px;
	background: var(--tfv-red); color: #FFFFFF;
	font: 600 11px/1 var(--tfv-font); letter-spacing: .06em; text-transform: uppercase;
}
.tfv-card .tfv-card__body { display: flex; flex-direction: column; gap: 6px; padding: 0 5px; }
.tfv-card .tfv-card__title {
	margin: 0; font: 600 17px/1.3 var(--tfv-font); color: var(--tfv-ink);
	text-transform: none; letter-spacing: normal; text-wrap: pretty;
}
.tfv-card .tfv-card__meta { margin: 0; font: 400 12.5px/1.2 var(--tfv-font); color: var(--tfv-ink-2); letter-spacing: .01em; }
.tfv-card .tfv-card__blurb {
	margin: 2px 0 0; font: 400 13.5px/1.45 var(--tfv-font); color: var(--tfv-ink-2);
	display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- mobile mini-player (1j) ---------- */

.tfv-lib .tfv-mini {
	position: fixed; left: 0; right: 0; top: var(--tfv-mini-top, 0px); z-index: 1000;
	display: flex; align-items: center; gap: 12px; box-sizing: border-box; padding: 8px 12px;
	background: var(--tfv-surface); border-bottom: 1px solid var(--tfv-rule); box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.tfv-lib .tfv-mini__slot { width: 96px; height: 54px; flex: none; background: #000000; border-radius: 2px; }
.tfv-lib .tfv-mini__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tfv-lib .tfv-mini__title { margin: 0; font: 600 13.5px/1.3 var(--tfv-font); color: var(--tfv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfv-lib .tfv-mini__time { margin: 0; font: 400 12px/1.3 var(--tfv-font); color: var(--tfv-ink-2); font-variant-numeric: tabular-nums; }
.tfv-lib .tfv-mini__close,
.tfv-lib .tfv-mini__close:hover,
.tfv-lib .tfv-mini__close:focus {
	width: 44px; height: 44px; flex: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
	font: 400 20px/1 var(--tfv-font); color: var(--tfv-ink-2); cursor: pointer;
}
.tfv-lib .tfv-watch.is-mini .tfv-frame__inner {
	position: fixed; top: calc(var(--tfv-mini-top, 0px) + 8px); left: 12px; right: auto; bottom: auto;
	width: 96px; height: 54px; z-index: 1001; border-radius: 2px; overflow: hidden;
}

/* ---------- single video page (1l–1o) ---------- */

.tfv-single { padding-top: 40px; }
.tfv-single .tfv-back { display: inline-block; margin: 0 0 28px; font: 500 14px/1.4 var(--tfv-font); color: var(--tfv-ink-2); text-decoration: none; }
.tfv-single .tfv-back:hover { color: var(--tfv-ink); text-decoration: underline; text-underline-offset: 3px; }
.tfv-single .tfv-single__col { max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.tfv-single .tfv-single__title { margin: 0; font: 600 34px/1.22 var(--tfv-font); color: var(--tfv-ink); text-transform: none; letter-spacing: normal; }
.tfv-single .tfv-single__desc { margin-top: 6px; font: 400 17px/1.75 var(--tfv-font); color: var(--tfv-ink); overflow-wrap: anywhere; }
.tfv-single .tfv-single__desc p { margin-bottom: 22px; }
.tfv-single .tfv-related { margin-top: 64px; display: flex; flex-direction: column; gap: 22px; }
.tfv-single .tfv-related__title { margin: 0; font-family: var(--tfv-slab); font-weight: 400; font-size: 26px; line-height: 1.25; color: var(--tfv-ink); text-transform: none; letter-spacing: normal; }
.tfv-single .tfv-related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; }
.tfv-single .tfv-all { margin-top: 32px; padding: 13px 28px; }

/* ---------- tablet ---------- */

@media (max-width: 1024px) {
	.tfv-single .tfv-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- mobile (≤767, Elementor's breakpoint) ---------- */

@media (max-width: 767px) {
	.tfv-lib { padding-top: 28px; margin-bottom: 20px; }
	.tfv-lib .tfv-head { margin-bottom: 20px; gap: 16px; }
	.tfv-lib .tfv-head__title { font-size: 32px; }
	.tfv-lib .tfv-head__mandala { width: 40px; }
	.tfv-lib .tfv-chips { gap: 8px; }
	.tfv-lib .tfv-chip { padding: 10px 16px; min-height: 44px; box-sizing: border-box; }
	.tfv-lib .tfv-filters { gap: 14px; }

	.tfv-lib .tfv-empty { padding: 40px 24px; gap: 12px; margin-top: 18px; }
	.tfv-lib .tfv-empty__mandala { display: none; }
	.tfv-lib .tfv-empty__title { font-size: 17px; }
	.tfv-lib .tfv-empty__body { font-size: 14px; }
	.tfv-lib .tfv-error { padding: 16px 20px; gap: 8px; }
	.tfv-lib .tfv-error__mandala { display: none; }
	.tfv-lib .tfv-error__title { font-size: 17px; }
	.tfv-lib .tfv-error__body { font-size: 14px; }

	/* 1i/1k: full-bleed player, text below with the same fold, then "Vali järgmine" */
	.tfv-lib.is-watching { padding-top: 0; margin-bottom: 20px; }
	.tfv-lib .tfv-watch { gap: 0; }
	.tfv-lib .tfv-frame { margin: 0 -20px; width: auto; }
	.tfv-lib .tfv-info, .tfv-lib .tfv-info-skel { padding: 20px 0 32px; gap: 10px; }
	.tfv-lib .tfv-info__title { font-size: 21px; line-height: 1.3; }
	.tfv-lib .tfv-caption { font-size: 13px; margin-top: 0; }
	.tfv-lib .tfv-desc { margin-top: 4px; font-size: 15.5px; line-height: 1.65; }
	.tfv-lib .tfv-desc p { margin-bottom: 1.65em; }
	.tfv-lib .tfv-desc.is-folded { max-height: calc(1.65em * 6); }
	.tfv-lib .tfv-desc.is-folded::after { height: 44px; }
	.tfv-lib .tfv-fold { min-height: 44px; margin-top: 0; }
	.tfv-lib .tfv-own { display: none; } /* not on 1i/1k; the card links to the page */
	.tfv-lib.is-watching .tfv-rule { margin: 0; }
	.tfv-lib.is-watching .tfv-next { display: block; margin: 24px 0 18px; font: 600 15px/1.3 var(--tfv-font); color: var(--tfv-ink); }
	.tfv-watching .tfv-grid .e-loop-item:has(.tfv-card.is-active) { display: none; }

	.tfv-caption__long { display: none; }
	.tfv-caption__short { display: inline; }

	body .tfv-grid.elementor-widget-loop-grid .e-loop__load-more { margin-top: 20px; }
	body .tfv-grid.elementor-widget-loop-grid .e-loop__load-more .elementor-button { width: 100%; padding: 14px 24px; }

	.tfv-single { padding-top: 0; }
	.tfv-single .tfv-back { display: none; }
	.tfv-single .tfv-single__col { gap: 12px; }
	.tfv-single .tfv-frame { margin: 0 -20px 8px; width: auto; }
	.tfv-single .tfv-single__title { font-size: 24px; line-height: 1.25; }
	.tfv-single .tfv-caption { font-size: 13px; }
	.tfv-single .tfv-single__desc { margin-top: 4px; font-size: 16px; line-height: 1.7; }
	.tfv-single .tfv-single__desc p { margin-bottom: 16px; }
	.tfv-single .tfv-related { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--tfv-rule); gap: 18px; }
	.tfv-single .tfv-related__title { font-size: 20px; }
	.tfv-single .tfv-related__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.tfv-single .tfv-all { display: block; margin-top: 24px; padding: 14px 24px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.tfv-lib *, .tfv-card *, .tfv-grid * { transition: none !important; }
}