/*
 * Homepage services section ("שירותי המשרד"), approved Figma concept 02.
 * Mobile first: single-open accordion up to 1024px, service list beside a large photo from 1025px
 * (the site's Elementor desktop breakpoint). Production tokens: ink = site primary #292566,
 * headings Alef, body Heebo. Tints (selected / hover / muted / divider) come from the design.
 */

.ta-svc {
	--svc-ink: #292566;
	--svc-surface: #ffffff;
	--svc-selected: #eeedf8;
	--svc-hover: #f6f5fb;
	--svc-muted: #746f8c;
	--svc-line: #e3e1ee;
	--svc-font-heading: "Alef", sans-serif;
	--svc-font-body: "Heebo", sans-serif;
	--svc-ease: 180ms ease;

	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 48px 24px;
	background: var(--svc-surface);
	color: var(--svc-ink);
	direction: rtl;
	text-align: right;
}

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

.ta-svc__inner {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
}

.ta-svc__title {
	margin: 0 0 24px;
	font: 700 32px/47px var(--svc-font-heading);
	color: var(--svc-ink);
}

.ta-svc__list {
	display: flex;
	flex-direction: column;
}

/* ---------------------------------------------------------------- */
/* Row                                                                */
/* ---------------------------------------------------------------- */

.ta-svc__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 80px;
	padding: 0 16px;
	border-radius: 16px;
	background: var(--svc-surface);
	transition: background-color var(--svc-ease);
}

/* Straight full-width hairline between services (sits above the rounded row). */
.ta-svc__item + .ta-svc__item .ta-svc__row::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline: 0;
	height: 1px;
	background: var(--svc-line);
}

.ta-svc__item + .ta-svc__item .ta-svc__row {
	margin-top: 1px; /* reserve the hairline so it never overlaps the row surface */
}

/* Hover tint only for real pointers, so it never sticks after a tap on touch screens. */
@media (hover: hover) {
	.ta-svc__row:hover {
		background: var(--svc-hover);
	}
}

.ta-svc__item.is-open .ta-svc__row,
.ta-svc__item.is-open .ta-svc__row:hover {
	background: var(--svc-selected);
}

.ta-svc__heading {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	line-height: inherit;
}

/* Tag + class (not a bare class): the theme's reset.css styles every <button> (pink #c36 border,
   inline-block, padding, pink hover fill) with [type=button] / button:hover selectors that would
   beat a lone class on source order. `all: unset` plus explicit values wins cleanly. */
.ta-svc button.ta-svc__select {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 80px;
	border-radius: 16px;
	color: var(--svc-ink);
	font: inherit;
	text-align: right;
	cursor: pointer;
}

.ta-svc button.ta-svc__select:hover,
.ta-svc button.ta-svc__select:focus,
.ta-svc button.ta-svc__select:active {
	background: transparent;
	color: var(--svc-ink);
	text-decoration: none;
}

.ta-svc button.ta-svc__select:focus-visible {
	outline: 2px solid var(--svc-ink);
	outline-offset: -2px;
}

.ta-svc__num {
	flex: 0 0 24px;
	width: 24px;
	font: 400 14px/21px var(--svc-font-body);
	color: var(--svc-muted);
	text-align: center;
	direction: ltr;
}

.ta-svc__sep {
	flex: 0 0 1px;
	width: 1px;
	height: 28px;
	background: var(--svc-line);
}

.ta-svc__label {
	flex: 1 1 auto;
	min-width: 0;
	font: 400 20px/29px var(--svc-font-heading);
	color: var(--svc-ink);
	overflow-wrap: anywhere;
}

.ta-svc__item.is-open .ta-svc__label {
	font-weight: 700;
}

/* Plus / minus (mobile and tablet, JavaScript on). */
.ta-svc__toggle {
	display: none;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--svc-line);
	border-radius: 999px;
	background: var(--svc-surface);
	color: var(--svc-ink);
	transition: background-color var(--svc-ease), color var(--svc-ease), border-color var(--svc-ease);
}

.ta-svc--js .ta-svc__toggle {
	display: flex;
}

.ta-svc__toggle svg {
	display: block;
	width: 24px;
	height: 24px;
}

.ta-svc__toggle-minus {
	display: none;
}

.ta-svc__item.is-open .ta-svc__toggle {
	border-color: var(--svc-ink);
	background: var(--svc-ink);
	color: #ffffff;
}

.ta-svc__item.is-open .ta-svc__toggle-plus {
	display: none;
}

.ta-svc__item.is-open .ta-svc__toggle-minus {
	display: block;
}

/* Arrow link to the service page: the row control on desktop; shown on mobile only without JavaScript. */
.ta-svc__go {
	display: flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--svc-line);
	border-radius: 999px;
	background: var(--svc-surface);
	color: var(--svc-ink);
	text-decoration: none;
	transition: background-color var(--svc-ease), color var(--svc-ease), border-color var(--svc-ease);
}

.ta-svc--js .ta-svc__go {
	display: none;
}

.ta-svc__go svg {
	display: block;
	width: 24px;
	height: 24px;
}

.ta-svc__go:hover,
.ta-svc__go:focus-visible,
.ta-svc__item.is-open .ta-svc__go {
	border-color: var(--svc-ink);
	background: var(--svc-ink);
	color: #ffffff;
}

.ta-svc__go:focus-visible {
	outline: 2px solid var(--svc-ink);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------- */
/* Panel: photo, caption, link                                        */
/* ---------------------------------------------------------------- */

.ta-svc__panel {
	overflow: hidden;
	border-radius: 24px;
	background: var(--svc-surface);
}

.ta-svc__panel[hidden] {
	display: none !important;
}

.ta-svc__media {
	position: relative;
	width: 100%;
	aspect-ratio: 376 / 271;
	overflow: hidden;
	border-radius: 24px 24px 0 0;
	background: var(--svc-selected);
}

.ta-svc__media-link {
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none; /* mobile and tablet: the photo is not a link (see the desktop block) */
}

.ta-svc__media img,
.ta-svc .ta-svc__media .ta-svc__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.ta-svc__caption {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 16px 24px 20px;
	text-align: right;
}

.ta-svc__caption-title {
	margin: 0;
	font: 700 24px/35px var(--svc-font-heading);
	color: var(--svc-ink);
}

.ta-svc__caption-text {
	margin: 0;
	font: 400 16px/24px var(--svc-font-body);
	color: var(--svc-muted);
}

.ta-svc__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font: 500 16px/24px var(--svc-font-body);
	color: var(--svc-ink);
	text-decoration: none;
}

.ta-svc__more svg {
	display: block;
	width: 24px;
	height: 24px;
}

.ta-svc__more:hover {
	color: var(--svc-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ta-svc__more:focus-visible {
	outline: 2px solid var(--svc-ink);
	outline-offset: 3px;
	border-radius: 4px;
}

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

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

@media (min-width: 768px) {
	.ta-svc {
		padding: 48px 40px;
	}

	.ta-svc__media {
		aspect-ratio: 688 / 360;
	}
}

/* ---------------------------------------------------------------- */
/* Desktop: list on the right, selected photo on the left              */
/* ---------------------------------------------------------------- */

@media (min-width: 1025px) {
	.ta-svc {
		padding: 80px 80px;
	}

	.ta-svc__title {
		margin-bottom: 40px;
		font-size: 48px;
		line-height: 70px;
	}

	.ta-svc__layout {
		display: grid;
		/* RTL grid: column 1 is the right-hand column. List right, photo left, as in the Figma frames. */
		grid-template-columns: 520px minmax(0, 1fr);
		grid-template-rows: repeat(var(--ta-svc-count, 6), auto);
		column-gap: 40px;
		align-items: start;
	}

	.ta-svc__list,
	.ta-svc__item {
		display: contents;
	}

	.ta-svc__row {
		grid-column: 1;
		gap: 20px;
		min-height: 96px;
		padding: 0 24px;
	}

	.ta-svc button.ta-svc__select {
		gap: 20px;
		min-height: 96px;
	}

	.ta-svc__label {
		font-size: 24px;
		line-height: 35px;
	}

	.ta-svc--js .ta-svc__toggle {
		display: none;
	}

	.ta-svc--js .ta-svc__go,
	.ta-svc__go {
		display: flex;
		flex-basis: 52px;
		width: 52px;
		height: 52px;
	}

	/* Whole row is clickable: the arrow link is stretched over the row (stretched-link pattern), so it
	   stays a real anchor (middle click, copy link, one tab stop) and the label button underneath
	   only receives keyboard activation. */
	.ta-svc__go::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 16px;
		cursor: pointer;
	}

	.ta-svc__media-link {
		pointer-events: auto;
		cursor: pointer;
	}

	/* All panels share the left cell and cross-fade; the hidden ones leave the tab order. */
	.ta-svc__panel {
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: start;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--svc-ease), visibility 0s linear 180ms;
	}

	.ta-svc__item.is-open .ta-svc__panel {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s, 0s;
	}

	.ta-svc__media {
		aspect-ratio: auto;
		height: 448px;
	}

	.ta-svc__caption {
		padding: 20px 24px 24px;
	}

	.ta-svc__caption-title {
		font-size: 32px;
		line-height: 47px;
	}

	.ta-svc__caption-text {
		font-size: 18px;
		line-height: 27px;
	}

	.ta-svc__more {
		display: none;
	}
}

@media (min-width: 1920px) {
	.ta-svc {
		padding: 80px 240px;
	}

	.ta-svc__layout {
		grid-template-columns: 600px minmax(0, 1fr);
		column-gap: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ta-svc__row,
	.ta-svc__toggle,
	.ta-svc__go,
	.ta-svc__panel {
		transition: none;
	}
}