/* Press section: compact publication strips on /category/press/.
   Mobile first. Frames: 360/390 (stacked strips), 768 (horizontal strips), 1440/1920
   (content capped at 1140px). Tokens match the consultation banner (Figma "Compact strips"). */

.ta-press {
	--ta-press-surface: #ffffff;
	--ta-press-card: #f3f6ff;
	--ta-press-ink: #292566;
	--ta-press-body: #53516c;
	--ta-press-accent: #0062fe;
	--ta-press-border: #dedfe6;
	--ta-press-divider: #e8e8ec;
	--ta-press-font-head: Alef, sans-serif;
	--ta-press-font-body: Heebo, sans-serif;

	--ta-press-max-width: 1140px;
	--ta-press-gutter: 16px;
	--ta-press-pad-block: 32px;
	--ta-press-section-gap: 24px;
	--ta-press-list-gap: 10px;
	--ta-press-head-gap: 20px;
	--ta-press-touch: 44px;

	box-sizing: border-box;
	width: 100%;
	padding: var(--ta-press-pad-block) var(--ta-press-gutter);
	background: var(--ta-press-surface);
	color: var(--ta-press-ink);
	direction: rtl;
	font-family: var(--ta-press-font-body);
}

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

.ta-press__inner {
	display: flex;
	flex-direction: column;
	gap: var(--ta-press-section-gap);
	width: 100%;
	max-width: var(--ta-press-max-width);
	margin-inline: auto;
}

/* ---- Heading and filters ---- */

.ta-press__head {
	display: flex;
	flex-direction: column;
	gap: var(--ta-press-head-gap);
}

.ta-press__heading {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.ta-press__title {
	margin: 0;
	padding: 0;
	color: var(--ta-press-ink);
	font-family: var(--ta-press-font-head);
	font-size: 36px;
	font-weight: 700;
	line-height: 45px;
}

.ta-press__desc {
	margin: 0;
	color: var(--ta-press-body);
	font-family: var(--ta-press-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
}

.ta-press__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

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

/* button.<class>: the theme's reset.css styles every plain <button> (pink hover/focus, 3px
   radius, its own padding and font) with the same specificity and a later source order, so
   everything the filter needs is stated explicitly, in every state, with tag + class. */
button.ta-press__filter {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: var(--ta-press-touch);
	border: 1px solid var(--ta-press-border);
	border-radius: 22px;
	background: var(--ta-press-surface);
	color: var(--ta-press-ink);
	cursor: pointer;
	font-family: var(--ta-press-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	text-align: center;
	transition: background-color 0.15s ease, color 0.15s ease;
}

button.ta-press__filter:hover,
button.ta-press__filter:focus {
	background: var(--ta-press-card);
	color: var(--ta-press-ink);
}

button.ta-press__filter[aria-pressed='true'],
button.ta-press__filter[aria-pressed='true']:hover,
button.ta-press__filter[aria-pressed='true']:focus {
	background: var(--ta-press-ink);
	color: var(--ta-press-surface);
}

button.ta-press__filter:focus-visible {
	outline: 2px solid var(--ta-press-accent);
	outline-offset: 2px;
}

/* ---- List and strips ---- */

.ta-press__list {
	display: flex;
	flex-direction: column;
	gap: var(--ta-press-list-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-press__item {
	margin: 0;
	padding: 0;
}

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

/* Mobile: publisher above, headline beside the circular arrow. DOM order is publisher, body,
   arrow, so in RTL the first grid column (headline) sits on the right and the arrow on the left. */
a.ta-press__strip,
a.ta-press__strip:hover,
a.ta-press__strip:focus,
a.ta-press__strip:active {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--ta-press-touch);
	grid-template-areas:
		'publisher publisher'
		'body arrow';
	column-gap: 12px;
	row-gap: 8px;
	align-items: center;
	width: 100%;
	min-height: var(--ta-press-touch);
	padding: 12px 16px;
	border: 1px solid var(--ta-press-divider);
	border-radius: 16px;
	background: var(--ta-press-surface);
	color: var(--ta-press-ink);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

a.ta-press__strip.is-featured {
	background: var(--ta-press-card);
}

a.ta-press__strip:hover {
	background: var(--ta-press-card);
}

/* Keyboard focus: a 2px accent border without moving the content (1px border + 1px inset ring). */
a.ta-press__strip:focus-visible {
	border-color: var(--ta-press-accent);
	background: var(--ta-press-surface);
	box-shadow: inset 0 0 0 1px var(--ta-press-accent);
	outline: none;
}

.ta-press__publisher {
	position: relative;
	grid-area: publisher;
	color: var(--ta-press-ink);
	font-family: var(--ta-press-font-head);
	font-size: 16px;
	font-weight: 700;
	line-height: 26px;
	text-align: start;
}

.ta-press__strip.is-featured .ta-press__publisher {
	color: var(--ta-press-accent);
}

.ta-press__body {
	grid-area: body;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	text-align: start;
}

.ta-press__headline {
	color: var(--ta-press-ink);
	font-family: var(--ta-press-font-head);
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
	overflow-wrap: anywhere;
}

/* The secondary line is omitted on mobile; the interview label is carried by the publisher. */
.ta-press__meta {
	display: none;
	color: var(--ta-press-body);
	font-family: var(--ta-press-font-body);
	font-size: 12px;
	font-weight: 400;
	line-height: 19px;
	white-space: pre-wrap;
}

.ta-press__arrow {
	grid-area: arrow;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ta-press-touch);
	height: var(--ta-press-touch);
	border: 1px solid var(--ta-press-border);
	border-radius: 22px;
	background: var(--ta-press-surface);
	color: var(--ta-press-accent);
}

.ta-press__arrow svg {
	display: block;
	width: 18px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: butt;
	stroke-linejoin: miter;
}

/* ---- Publisher logos: uniform gray at rest, full color on hover and keyboard focus ---- */

.ta-press {
	--ta-press-logo-h: 20px;
	--ta-press-logo-rest-opacity: 0.55;
	--ta-press-logo-dark: #161c28; /* MAKO's own dark ground (sampled from their social image) */
}

.ta-press__publisher.has-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 26px;
}

/* img.<class> under .ta-press: Elementor's `.elementor img { height: auto; max-width: 100%; border-radius: 0 }`
   would otherwise win on specificity. */
.ta-press img.ta-press__logo {
	display: block;
	height: var(--ta-press-logo-h);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: right center;
	filter: grayscale(1);
	opacity: var(--ta-press-logo-rest-opacity);
	transition: filter 0.15s ease, opacity 0.15s ease;
}

/* A white mark made for dark backgrounds sits on a small dark plate, sized from the logo height. */
.ta-press img.ta-press__logo.is-on-dark {
	box-sizing: border-box;
	padding: calc(var(--ta-press-logo-h) * 0.14) calc(var(--ta-press-logo-h) * 0.3);
	border-radius: calc(var(--ta-press-logo-h) * 0.2);
	background: var(--ta-press-logo-dark);
}

a.ta-press__strip:hover img.ta-press__logo,
a.ta-press__strip:focus-visible img.ta-press__logo {
	filter: none;
	opacity: 1;
}

.ta-press__publisher.has-logo .ta-press__format {
	color: var(--ta-press-ink);
	font-family: var(--ta-press-font-head);
	font-size: 16px;
	font-weight: 700;
	line-height: 26px;
}

/* ---- Tablet and up: horizontal strip, publisher on the right, arrow on the left ---- */

@media (min-width: 768px) {
	.ta-press {
		--ta-press-gutter: 32px;
		--ta-press-pad-block: 48px;
		--ta-press-section-gap: 32px;
	}

	.ta-press__head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.ta-press__title {
		font-size: 48px;
		line-height: 60px;
	}

	.ta-press__filters {
		flex-wrap: nowrap;
		flex-shrink: 0;
	}

	a.ta-press__strip,
	a.ta-press__strip:hover,
	a.ta-press__strip:focus,
	a.ta-press__strip:active {
		display: flex;
		gap: 24px;
		padding: 20px 24px;
		border-radius: 20px;
	}

	a.ta-press__strip.is-featured,
	a.ta-press__strip:hover {
		background: var(--ta-press-card);
	}

	a.ta-press__strip:focus-visible {
		background: var(--ta-press-surface);
	}

	.ta-press {
		--ta-press-logo-h: 32px;
	}

	.ta-press__publisher {
		flex: 0 0 144px;
		width: 144px;
		font-size: 22px;
		line-height: 35px;
	}

	.ta-press__publisher.has-logo {
		min-height: 35px;
	}

	.ta-press__format {
		display: none;
	}

	.ta-press__body {
		flex: 1 1 0;
	}

	.ta-press__headline {
		font-size: 24px;
		line-height: 30px;
	}

	.ta-press__meta {
		display: block;
	}

	.ta-press__arrow {
		flex: 0 0 var(--ta-press-touch);
	}
}

/* ---- Visually hidden text (live region, new-tab notice) ---- */

.ta-press__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- "וידאו" tag: card grid, each card expands in place into an embedded player
   (added 2026-10-06; data comes from the homepage video section's own ACF repeater,
   see ta_press_get_videos() in tomerasaf-press-section.php). Mobile first, 1 column. ---- */

.ta-press-video__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-items: start;
}

.ta-press-video__card {
	background: var(--ta-press-surface);
	border: 1px solid var(--ta-press-border);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
}

.ta-press-video__card:hover,
.ta-press-video__card.is-open {
	border-color: var(--ta-press-accent);
}

.ta-press-video__card:hover {
	box-shadow: 0 6px 16px rgba(19, 31, 77, .12);
}

/* Specificity note: hello-elementor's reset.css paints every plain <button>/[type="button"]
   #cc3366 (border at rest, background+white text on :hover/:focus; tomerasaf-theme-fixes.php's
   sitewide safety net repaints the hover/focus state navy instead, but both tie this class
   selector on specificity and are printed later, so they win without the "button" tag added
   here (same fix as .ta-consent .ta-consent__btn, documented in ARCHITECTURE.md). */
button.ta-press-video__thumb-btn {
	all: unset;
	display: block;
	width: 100%;
	box-sizing: border-box;
	cursor: pointer;
}

button.ta-press-video__thumb-btn:hover,
button.ta-press-video__thumb-btn:focus-visible {
	background-color: transparent;
	color: inherit;
}

button.ta-press-video__thumb-btn:focus-visible {
	outline: 3px solid var(--ta-press-accent);
	outline-offset: 2px;
}

button.ta-press-video__thumb-btn:hover .ta-press-video__play {
	box-shadow: 0 10px 24px rgba(19, 31, 77, .45);
}

.ta-press-video__card.is-open .ta-press-video__thumb-btn {
	display: none;
}

.ta-press-video__thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #131f4d;
}

.ta-press-video__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ta-press-video__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 20px rgba(19, 31, 77, .35);
	transition: box-shadow .15s;
}

.ta-press-video__play svg {
	fill: var(--ta-press-accent);
}

.ta-press-video__dur {
	position: absolute;
	inset-inline-start: 8px;
	bottom: 8px;
	background: rgba(19, 31, 77, .82);
	color: #fff;
	font-family: var(--ta-press-font-body);
	font-size: 12px;
	font-weight: 500;
	padding: 3px 8px;
	border-radius: 6px;
}

.ta-press-video__body {
	display: block;
	padding: 14px 16px 16px;
}

.ta-press-video__title {
	display: block;
	font-family: var(--ta-press-font-head);
	font-weight: 700;
	font-size: 16px;
	line-height: 22px;
	color: var(--ta-press-ink);
}

.ta-press-video__meta {
	display: block;
	margin-top: 4px;
	font-family: var(--ta-press-font-body);
	font-size: 13px;
	color: var(--ta-press-body);
}

.ta-press-video__panel[hidden] {
	display: none;
}

.ta-press-video__panel {
	padding: 0 16px 16px;
}

.ta-press-video__frame-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: #131f4d;
}

.ta-press-video__frame-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Same specificity note as .ta-press-video__thumb-btn above: the "button" tag is required so
   this beats hello-elementor's reset.css and tomerasaf-theme-fixes.php's sitewide safety net. */
button.ta-press-video__close {
	all: unset;
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: var(--ta-press-touch);
	padding: 4px 0;
	font-family: var(--ta-press-font-body);
	font-size: 13px;
	color: var(--ta-press-body);
	cursor: pointer;
}

.ta-press-video__close svg {
	stroke: var(--ta-press-body);
	stroke-width: 1.6;
	stroke-linecap: round;
	fill: none;
}

button.ta-press-video__close:hover,
button.ta-press-video__close:focus-visible {
	background-color: transparent;
	color: var(--ta-press-ink);
}

button.ta-press-video__close:hover svg,
button.ta-press-video__close:focus-visible svg {
	stroke: var(--ta-press-ink);
}

button.ta-press-video__close:focus-visible {
	outline: 3px solid var(--ta-press-accent);
	outline-offset: 2px;
}

@media (min-width: 768px) {
	.ta-press-video__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.ta-press-video__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	button.ta-press__filter,
	a.ta-press__strip,
	.ta-press__logo,
	.ta-press-video__card,
	.ta-press-video__play {
		transition: none;
	}
}