/* Tomer Asaf - Homepage video section. Scoped entirely under .ta-video. Mobile-first, RTL. */

.ta-video {
	/* Local tokens: the site's global palette (--ta-mega-ink #292566 / --ta-mega-accent #0075ff)
	   is close to but not the same as the approved design, so this section carries its own. */
	--ta-video-bg: #f9fafb;
	--ta-video-accent: #057af5;
	--ta-video-ink: #131f4d;
	--ta-video-body: #33384d;
	--ta-video-muted: #616678;
	--ta-video-divider: #e0e3eb;
	--ta-video-cta-shadow: 0 8px 20px rgba(5, 79, 184, 0.18);
	--ta-video-font: Alef, sans-serif;

	--ta-video-pad: 20px;
	--ta-video-gap: 24px;
	--ta-video-max-width: 1312px;
	--ta-video-stage-radius: 12px;
	--ta-video-play-size: 58px;
	/* Staggered three-line heading (approved composition 2026-10-05): the last line can
	   carry its own size, and the second line is indented from the inline start. */
	--ta-video-title-size: 32px;
	--ta-video-title-line: 41px;
	--ta-video-title-last-size: 30px;
	--ta-video-title-last-line: 38px;
	--ta-video-title-indent: 32px;
	--ta-video-body-size: 16px;
	--ta-video-body-line: 27px;
	--ta-video-body-width: 100%;
	--ta-video-content-gap: 20px;
	--ta-video-cta-width: 100%;
	--ta-video-cta-height: 52px;
	/* Proof card: narrower than its column and pushed toward the video (inline end). */
	--ta-video-proof-width: calc(100% - 24px);
	--ta-video-proof-pad: 20px;
	--ta-video-proof-icon: 36px;
	/* Vertical offset of the poster logo (up) and play badge (down) from the stage centre. */
	--ta-video-poster-shift: 24px;
	--ta-video-poster-logo-width: 44%;

	box-sizing: border-box;
	width: 100%;
	padding: var(--ta-video-pad);
	background: var(--ta-video-bg);
	color: var(--ta-video-ink);
	font-family: var(--ta-video-font);
	direction: rtl;
}

.ta-video *,
.ta-video *::before,
.ta-video *::after {
	box-sizing: border-box;
}

/* The theme's own reset.css ships a global `button:hover, button:focus { background-color:
   #cc3366 (pink); color: #fff; }` with no visible-focus distinction, that any plain <button>
   without its own hover/focus background falls back to. Same theme quirk the mega-menu
   plugin already worked around for sizing; here it needs an explicit override since these
   buttons had no hover/focus background rule of their own to win the specificity tie. */
button.ta-video__item:hover,
button.ta-video__item:focus,
button.ta-video__stage-play:hover,
button.ta-video__stage-play:focus {
	background-color: transparent;
	color: inherit;
}

/* Capped at the 1440 frame's content width (1312px) and centred, per Naor's direction
   2026-10-05: on wide screens the module keeps the approved scale (820px player, 438px
   content column) instead of stretching with the 5% gutters. The section background
   still spans the full width. */
.ta-video__inner {
	display: flex;
	flex-direction: column;
	gap: var(--ta-video-gap);
	width: 100%;
	max-width: var(--ta-video-max-width);
	margin-inline: auto;
}

/* Mobile and tablet flatten both columns into one flow, so the four blocks can be
   ordered independently per breakpoint without duplicating them in the markup. */
.ta-video__composition {
	display: flex;
	flex-direction: column;
	gap: var(--ta-video-gap);
}

.ta-video__col {
	display: contents;
}

.ta-video__intro {
	order: 1;
}

.ta-video__stage-wrap {
	order: 2;
}

.ta-video__proof {
	order: 3;
}

.ta-video__more {
	order: 4;
}

/* ---- Intro: eyebrow, title, body, CTA ---- */

.ta-video__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ta-video-content-gap);
}

.ta-video__eyebrow {
	margin: 0;
	width: 100%;
	color: var(--ta-video-accent);
	font-size: 14px;
	font-weight: 700;
	line-height: 22px;
	text-align: start;
}

/* Decorative rule sits at the inline start (right in RTL), ahead of the text. */
.ta-video__eyebrow::before {
	content: "";
	display: inline-block;
	width: 42px;
	height: 2px;
	border-radius: 1px;
	margin-inline-end: 12px;
	vertical-align: middle;
	background: var(--ta-video-accent);
}

.ta-video__title {
	margin: 0;
	width: 100%;
	color: var(--ta-video-ink);
	font-family: var(--ta-video-font);
	font-size: var(--ta-video-title-size);
	font-weight: 700;
	line-height: var(--ta-video-title-line);
	text-align: start;
	overflow-wrap: break-word;
}

/* One block per field line. Second line indented from the inline start (right in RTL),
   last line in the accent colour (only when there is more than one line), per the approved
   asymmetric composition. Alef ships no 900 cut, so weight stays 700 like the rest. */
.ta-video__title-line {
	display: block;
}

.ta-video__title-line:nth-child(2) {
	padding-inline-start: var(--ta-video-title-indent);
}

.ta-video__title-line:last-child:not(:first-child) {
	color: var(--ta-video-accent);
	font-size: var(--ta-video-title-last-size);
	line-height: var(--ta-video-title-last-line);
}

.ta-video__body {
	margin: 0;
	width: 100%;
	max-width: var(--ta-video-body-width);
	color: var(--ta-video-body);
	font-size: var(--ta-video-body-size);
	font-weight: 400;
	line-height: var(--ta-video-body-line);
	text-align: start;
}

a.ta-video__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ta-video-cta-width);
	max-width: 100%;
	min-height: var(--ta-video-cta-height);
	padding: 6px 16px;
	border-radius: 7px;
	background: var(--ta-video-accent);
	box-shadow: var(--ta-video-cta-shadow);
	color: #fff;
	font-family: var(--ta-video-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
	text-decoration: none;
	transition: filter 0.2s ease;
}

/* The `/ ""` alt text keeps this decorative chevron out of the link's accessible name. */
.ta-video__cta::after {
	content: "\2039" / "";
	margin-inline-start: 8px;
	font-weight: 700;
}

a.ta-video__cta:hover,
a.ta-video__cta:focus-visible {
	color: #fff;
	filter: brightness(1.08);
}

a.ta-video__cta:focus-visible {
	outline: 2px solid var(--ta-video-ink);
	outline-offset: 3px;
}

/* ---- Featured video stage ---- */

/* White, not the former dark navy: the poster is the office logo on white (Naor's
   direction 2026-10-05). The hairline border keeps the white stage readable against the
   section's own near-white background. */
.ta-video__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--ta-video-divider);
	border-radius: var(--ta-video-stage-radius);
	overflow: hidden;
	background: #fff;
}

button.ta-video__stage-play {
	all: unset;
	box-sizing: border-box;
	display: block;
	position: absolute;
	inset: 0;
	cursor: pointer;
}

/* Poster: one fixed logo-on-white card for every video; the real YouTube frame only
   loads on click. The logo sits just above centre and the play badge just below it. */
.ta-video__stage-poster {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}

/* Anchored on .ta-video: Elementor's own `img { height: auto }` and the theme's
   `img { max-width: 100% }` load after this sheet and would otherwise win the tie. */
.ta-video .ta-video__stage-logo {
	display: block;
	width: var(--ta-video-poster-logo-width);
	max-width: 380px;
	height: auto;
	object-fit: contain;
	transform: translateY(calc(-1 * var(--ta-video-poster-shift)));
}

/* Photo poster (field "תמונת תצוגה בנגן הראשי", Naor 2026-10-06): a frame of the selected
   video fills the stage and the logo steps aside. The img is always in the DOM so the
   playlist can fill it on selection; it only shows while the poster has .is-photo. */
.ta-video .ta-video__stage-photo {
	display: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

.ta-video__stage-poster.is-photo {
	background: #dfe5f1; /* shows for a moment while a not-yet-loaded frame arrives */
}

.ta-video__stage-poster.is-photo .ta-video__stage-photo {
	display: block;
}

.ta-video__stage-poster.is-photo .ta-video__stage-logo {
	display: none;
}

/* The play badge sits at the exact centre of a photo (the logo layout offsets it below the logo),
   and the caption is dropped: the frame already carries its own on-screen text. */
.ta-video__stage-poster.is-photo ~ .ta-video__play-badge {
	transform: translate(-50%, -50%);
	filter: drop-shadow(0 6px 18px rgba(8, 14, 36, 0.38));
}

.ta-video__stage-play:hover .ta-video__stage-poster.is-photo ~ .ta-video__play-badge {
	transform: translate(-50%, -50%) scale(1.06);
}

.ta-video__stage-poster.is-photo ~ .ta-video__stage-caption {
	display: none;
}

.ta-video__play-badge {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--ta-video-play-size);
	height: var(--ta-video-play-size);
	transform: translate(-50%, calc(-50% + var(--ta-video-poster-shift)));
	/* The badge is a white disc with a hairline stroke; on the white poster it needs a
	   soft shadow to read as a button at all. */
	filter: drop-shadow(0 6px 16px rgba(20, 31, 56, 0.18));
	pointer-events: none;
	transition: transform 0.2s ease;
}

.ta-video .ta-video__play-badge svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ta-video__stage-play:hover .ta-video__play-badge {
	transform: translate(-50%, calc(-50% + var(--ta-video-poster-shift))) scale(1.06);
}

.ta-video__stage-play[hidden] {
	display: none;
}

.ta-video__stage-play:focus-visible {
	outline: 3px solid var(--ta-video-accent);
	outline-offset: -3px;
}

/* The span is always rendered (so JS can update it on selection) but collapses
   when the editor leaves the optional duration field blank. */
.ta-video__duration:empty {
	display: none;
}

.ta-video__duration {
	position: absolute;
	inset-block-end: 10px;
	inset-inline-end: 10px;
	padding: 3px 10px;
	border-radius: 6px;
	background: rgba(12, 20, 48, 0.78);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: 0.02em;
}

/* Featured-video title caption at the poster's foot, updated on selection. Ink on
   white now that the poster is the logo card, so no scrim is needed. The caption is
   aligned to inline-end, the same side as the duration pill, so the inline-end padding
   reserves the pill's room (logical, not physical: a physical right padding put that
   room on the wrong side in RTL, and the old dark scrim hid the overlap). */
.ta-video__stage-caption {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding-block: 0 10px;
	padding-inline: 20px 90px;
	color: var(--ta-video-ink);
	font-family: var(--ta-video-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-align: end;
	pointer-events: none;
}

.ta-video__stage-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

button.ta-video__stage-close {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(12, 20, 48, 0.72);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

/* `all: unset` above resets display, which would otherwise defeat the hidden attribute. */
.ta-video__stage-close[hidden] {
	display: none;
}

/* The close button receives focus the moment the video opens (video-section.js), so the
   theme's global `button:focus` pink (#cc3366) showed on it. Pin the resting scrim on focus
   and keep the darker scrim on hover; both use tag + class so they beat the theme rule. */
button.ta-video__stage-close:focus {
	background: rgba(12, 20, 48, 0.72);
	color: #fff;
}

button.ta-video__stage-close:hover {
	background: rgba(12, 20, 48, 0.9);
	color: #fff;
}

.ta-video__stage-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ---- Proof card ---- */

/* Flat white card with a 3px accent rule on its inline-start edge (right in RTL), no
   shadow, narrower than the column and aligned to the inline end so it sits offset toward
   the video (approved 2026-10-05). `align-self: flex-end` is the inline end in every
   container it lives in: the flattened mobile/tablet flow and the desktop content column
   are both RTL flex columns. */
.ta-video__proof {
	display: flex;
	align-items: center;
	align-self: flex-end;
	gap: 16px;
	width: var(--ta-video-proof-width);
	max-width: 100%;
	padding: var(--ta-video-proof-pad);
	border-inline-start: 3px solid var(--ta-video-accent);
	border-radius: 4px;
	background: #fff;
}

.ta-video__proof-icon {
	flex: 0 0 auto;
	width: var(--ta-video-proof-icon);
	height: var(--ta-video-proof-icon);
}

.ta-video .ta-video__proof-icon svg,
.ta-video .ta-video__proof-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ta-video__proof-copy {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
	text-align: start;
}

.ta-video__proof-title {
	margin: 0;
	color: var(--ta-video-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 25px;
}

.ta-video__proof-text {
	margin: 0;
	color: var(--ta-video-muted);
	font-size: 13px;
	font-weight: 400;
	line-height: 22px;
}

/* ---- Compact playlist ("סרטונים נוספים") ----
   A list of rows, not cards: small optional thumbnail, title, source/duration meta,
   and a clear selected-state marker. Per Naor's direction 2026-09-23: distinct real
   previews only where genuinely specific to that video, no oversized duplicate of the
   featured player. One definition works from mobile through desktop; only spacing and
   type size step up at the breakpoints below. */

.ta-video__more {
	display: flex;
	flex-direction: column;
	gap: var(--ta-video-gap);
}

.ta-video__more-title {
	margin: 0;
	color: var(--ta-video-ink);
	font-size: 19px;
	font-weight: 700;
	line-height: 27px;
	text-align: start;
}

.ta-video__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

button.ta-video__item {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 8px 10px;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ta-video__item:hover {
	background: #f3f6fb;
}

.ta-video__item:focus-visible {
	outline: 2px solid var(--ta-video-accent);
	outline-offset: 2px;
}

.ta-video__item[aria-pressed="true"] {
	background: #eef4ff;
}

.ta-video__item-thumb {
	position: relative;
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border-radius: 8px;
	overflow: hidden;
	background: #e7ebf3;
}

.ta-video .ta-video__item-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ta-video__item-thumb--type {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, var(--ta-video-ink), #232f5e);
}

.ta-video__item-type-mark {
	font-family: var(--ta-video-font);
	font-size: 19px;
	font-weight: 700;
	color: #fff;
}

.ta-video__item-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
	text-align: start;
}

.ta-video__item-title {
	color: var(--ta-video-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	overflow-wrap: break-word;
}

.ta-video__item[aria-pressed="true"] .ta-video__item-title {
	color: var(--ta-video-accent);
}

.ta-video__item-meta {
	color: var(--ta-video-muted);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 18px;
	overflow-wrap: break-word;
}

/* Selected-state marker: a small play triangle in an outlined circle, filled solid
   accent-blue with a white triangle once selected - a third, non-colour-only signal
   alongside the row tint and the blue title above. */
.ta-video__item-state {
	position: relative;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid var(--ta-video-divider);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ta-video__item-state::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 4px 6px;
	border-color: transparent transparent transparent var(--ta-video-muted);
	transform: translate(-42%, -50%);
}

.ta-video__item[aria-pressed="true"] .ta-video__item-state {
	border-color: var(--ta-video-accent);
	background: var(--ta-video-accent);
}

.ta-video__item[aria-pressed="true"] .ta-video__item-state::before {
	border-color: transparent transparent transparent #fff;
}

.ta-video__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- 390 and up: mobile spacing step ---- */

@media (min-width: 390px) {
	.ta-video {
		--ta-video-pad: 24px;
	}
}

/* ---- Tablet ---- */

@media (min-width: 768px) {
	.ta-video {
		--ta-video-pad: 44px;
		--ta-video-gap: 28px;
		--ta-video-stage-radius: 15px;
		--ta-video-play-size: 76px;
		--ta-video-title-size: 44px;
		--ta-video-title-line: 56px;
		--ta-video-title-last-size: 44px;
		--ta-video-title-last-line: 56px;
		--ta-video-title-indent: 90px;
		--ta-video-body-size: 17px;
		--ta-video-body-line: 29px;
		--ta-video-body-width: 470px;
		--ta-video-content-gap: 24px;
		--ta-video-cta-width: 245px;
		--ta-video-cta-height: 54px;
		--ta-video-proof-width: 440px;
		--ta-video-proof-icon: 42px;
		--ta-video-poster-shift: 50px;
		--ta-video-poster-logo-width: 46%;
	}

	.ta-video__stage-caption {
		padding-block: 0 20px;
		padding-inline: 28px 110px;
		font-size: 20px;
	}

	/* Proof card follows the video list at this width. */
	.ta-video__more {
		order: 3;
	}

	.ta-video__proof {
		order: 4;
	}

	.ta-video__more-title {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.ta-video__list {
		gap: 6px;
	}

	button.ta-video__item {
		gap: 14px;
		padding: 10px 12px;
	}

	.ta-video__item-thumb {
		flex-basis: 60px;
		width: 60px;
		height: 60px;
	}

	.ta-video__item-title {
		font-size: 15px;
		line-height: 21px;
	}

	.ta-video__item-meta {
		font-size: 13px;
	}
}

/* ---- Desktop: two-column composition, media on the left ---- */

@media (min-width: 1025px) {
	.ta-video {
		/* Percentage, not a fixed pixel step: matches the header row's own real side
		   gutter (verified live: 5% of viewport width at both 1440 and 1920), so the
		   section's edges track the header's logo/CTA edges at every desktop width,
		   not just the two breakpoints a fixed value happened to be checked at. */
		--ta-video-pad: 5%;
		--ta-video-gap: 34px;
		/* 1440 frame: 40/51 heading, 66px stagger, body 385 and card 368 of a 438 column. */
		--ta-video-title-size: 40px;
		--ta-video-title-line: 51px;
		--ta-video-title-last-size: 40px;
		--ta-video-title-last-line: 51px;
		--ta-video-title-indent: 66px;
		--ta-video-body-width: 88%;
		--ta-video-proof-width: 84%;
	}

	.ta-video__composition {
		flex-direction: row;
		align-items: flex-start;
		gap: 54px;
	}

	.ta-video__col {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	/* 820 : 438 at 1440, matching the approved frame. Featured video at full column
	   width - "keep one prominent featured video", per Naor's direction 2026-09-23. */
	.ta-video__col--media {
		flex: 1 1 0;
		gap: 20px;
	}

	/* Playlist as one row, not a stacked list, per Naor's direction 2026-09-23 ("כל
	   הסרטונים למטה... כולם בשורה אחת"). Each item keeps its own internal thumb+copy+
	   state layout unchanged, just narrower; text wraps to two lines where needed
	   (overflow-wrap already set) rather than truncating. Mobile and tablet keep the
	   vertical list - three-plus items side by side there would be too cramped to read
	   or tap comfortably. */
	.ta-video__list {
		flex-direction: row;
		gap: 10px;
	}

	button.ta-video__item {
		flex: 1 1 0;
		min-width: 0;
		padding: 8px;
	}

	.ta-video__item-thumb {
		flex-basis: 46px;
		width: 46px;
		height: 46px;
	}

	/* Content column starts 20px below the video's top edge and holds the proof card
	   36px under the CTA (the "asymmetric top offset" of the approved frames). */
	.ta-video__col--content {
		flex: 0 0 33.4%;
		max-width: 33.4%;
		gap: 36px;
		padding-block-start: 20px;
	}
}

/* ---- Wide desktop ----
   No separate step any more: with the module capped at 1312px (Naor's direction
   2026-10-05) a 1920 screen shows the 1440 frame at its own scale, so the wider
   frame's larger type, 76px gap and 35.9% column (which assumed a 1756px module)
   were dropped rather than applied to a narrower one. */

@media (prefers-reduced-motion: reduce) {
	.ta-video__play-badge,
	a.ta-video__cta,
	button.ta-video__item {
		transition: none;
	}

	.ta-video__stage-play:hover .ta-video__play-badge {
		transform: translate(-50%, calc(-50% + var(--ta-video-poster-shift)));
	}

	.ta-video__stage-play:hover .ta-video__stage-poster.is-photo ~ .ta-video__play-badge {
		transform: translate(-50%, -50%);
	}
}