/* hero-home — Figma 243:22 (background photos) + 243:27 (the name box).
   Every value from tokens (R8), logical properties (R9); the box's height comes
   from its text column + padding tokens, never from the Figma frame (R4). */

.hero-home {
	position: relative;
	isolation: isolate;
	overflow: clip; /* the portrait runs past the bottom; the next divider covers it in Figma */
	padding-block: var(--space-hero-top) var(--space-hero-bottom);
	padding-inline: var(--gutter);
}

/* ---- Background slideshow (Figma: photos at 70% over the cream page) ---- */

.hero-home__slides {
	position: absolute;
	/* Figma's photo strip has 8px padding: the visible photo starts 8px down
	   and 5px in (physical: the frame's left edge). */
	inset-block: var(--space-2) calc(-1 * var(--space-2));
	left: 5px; /* physical: matches the Figma strip offset; lint-ok: sub-token nudge */
	right: 0; /* physical */
	z-index: -1;
	pointer-events: none;
}

.hero-home__slide {
	position: absolute;
	inset: 0;
	overflow: hidden; /* crop mask for the Ken Burns zoom — decorative */
	opacity: 0;
	transition: opacity 1s ease;
}

.hero-home__slide.is-active {
	opacity: 1;
}

.hero-home__slide img {
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	opacity: 0.7;
}

@media (prefers-reduced-motion: no-preference) {
	.hero-home__slide.is-active img {
		animation: hero-home-kenburns 3.5s ease-out; /* spans the 2.5s slide + its 1s fade-out */
	}
}

@keyframes hero-home-kenburns {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.1);
	}
}

/* ---- The box (white 74%, radius 40, "צל קופסאות גדולות") ---- */

.hero-home__box {
	position: relative;
	max-inline-size: 75.0625rem; /* lint-ok: 1201px — the Figma box width, a cap */
	margin-inline: auto;
	padding-block: var(--space-box-top) var(--space-box-bottom);
	padding-inline-start: var(--space-box-side);
	border-radius: var(--radius-lg);
	background: color-mix(in srgb, var(--color-white) 74%, transparent);
	box-shadow: var(--shadow-box);
}

.hero-home__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL: the column's right edge, as in Figma */
	max-inline-size: 39.1%; /* 450px of the 1151px content box — the portrait owns the rest */
}

.hero-home__heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-fluid-sm);
	align-self: stretch;
}

/* Flower + stem on the visual LEFT, the navy line to its RIGHT, bottoms aligned.
   RTL: the line is the first child (right), the flower second (left). */
.hero-home__mark {
	display: flex;
	align-items: flex-end;
	inline-size: 100%;
}

.hero-home__mark-line {
	flex: 1 1 0;
	border-block-start: 2px solid var(--color-ink);
}

.hero-home__deco-flower {
	flex: none;
	inline-size: 63.3%; /* 285 of 450px */
	block-size: auto;
	margin-inline-start: -4%; /* Figma: the flower overlaps the line by 18px */
}

.hero-home__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-hero-name);
	font-weight: var(--fw-regular);
	text-align: center;
}

.hero-home__name,
.hero-home__tagline {
	display: block;
	text-box: trim-both cap alphabetic;
	white-space: nowrap; /* one line each, as in Figma, while the box is side-by-side */
}

.hero-home__name {
	font-size: var(--fs-800);
	letter-spacing: var(--tracking-name);
	margin-inline-end: calc(-1 * var(--tracking-name)); /* drop the trailing tracking so centring matches Figma */
}

.hero-home__tagline {
	font-size: var(--fs-700);
	font-weight: var(--fw-light);
	letter-spacing: var(--tracking-tagline);
	margin-inline-end: calc(-1 * var(--tracking-tagline));
}

.hero-home__text {
	position: relative;
	inline-size: fit-content;
	margin-block-start: var(--space-hero-group);
	font-size: var(--fs-500);
}

.hero-home__cfp-logo {
	position: absolute;
	inset-block-start: calc(var(--size-cfp) * -0.545); /* Figma: 54 of 99px above the text */
	inset-inline-end: 0;
	inline-size: var(--size-cfp);
	block-size: auto;
}

.hero-home__cta {
	margin-block-start: var(--space-hero-group);
}

/* Portrait: the LEFT 66% of the box, 22px past its left edge, top-aligned,
   spilling below the box. Positioned so the text column — not the photo —
   defines the box's height. */
.hero-home__portrait {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: -1.83%;
	inline-size: 66.1%;
	block-size: auto;
	pointer-events: none;
}

/* ---- Tablet + phone: a profile card (client feedback 2026-09-24) ----
   The desktop cut-out portrait read as a cropped torso stuck inside the box on
   a phone. Below bp-lg it becomes a round profile photo straddling the box's
   top edge (white ring + the about card's cream→navy gradient behind the
   cut-out), the flower sits centred above the name, everything centred. */

@media (max-width: 1023px) { /* bp: --bp-lg — the text column gets too narrow beside the photo */
	.hero-home {
		--hero-avatar: min(52vw, 17.5rem); /* lint-ok: phone/tablet avatar size, capped */
		padding-block-start: calc(var(--space-hero-top) + var(--hero-avatar) / 2);
	}
	.hero-home__slides {
		inset: 0;
	}
	.hero-home__box {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-block-start: 0;
		padding-inline: var(--space-box-side);
		background: color-mix(in srgb, var(--color-white) 86%, transparent);
	}
	.hero-home__portrait {
		position: static;
		order: -1;
		inline-size: var(--hero-avatar);
		aspect-ratio: 1;
		margin-block: calc(var(--hero-avatar) / -2) var(--space-fluid-sm);
		border: 5px solid var(--color-white); /* lint-ok: avatar ring */
		border-radius: var(--radius-full);
		background: linear-gradient(135deg, var(--color-surface) 20%, var(--color-ink)); /* same palette as the about photo card */
		box-shadow: var(--shadow-box);
		object-fit: cover;
		object-position: 50% 0; /* head and shoulders */
	}
	.hero-home__mark {
		justify-content: center;
	}
	.hero-home__mark-line {
		display: none;
	}
	.hero-home__deco-flower {
		inline-size: 45%;
		margin-inline-start: 0;
	}
	.hero-home__name,
	.hero-home__tagline {
		white-space: normal;
	}
	.hero-home__content {
		max-inline-size: 30rem; /* lint-ok: comfortable phone measure */
		align-items: center;
		text-align: center;
	}
	.hero-home__text {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-4);
	}
	.hero-home__cfp-logo {
		position: static;
		order: -1;
	}
	.hero-home__text,
	.hero-home__cta {
		margin-block-start: var(--space-fluid-md);
	}
}

@media (max-width: 767px) { /* bp: --bp-md */
	.hero-home__deco-flower {
		inline-size: 38%;
	}
}

/* ---- Articles archive (home.php, Figma 243:471): the same box over the
   latest articles' photos, at 50% instead of 70%, from the very top. ---- */

.hero-home--archive .hero-home__slides {
	inset-block: 0;
	left: 0; /* physical: full bleed */
}

.hero-home--archive .hero-home__slide img {
	opacity: 0.5;
}

.hero-home--archive {
	display: flow-root; /* keeps the box's negative end margin inside the section */
	padding-block: var(--space-hero-page-top) 0; /* Figma: box at 148; the title band starts 48px above its bottom */
}

@media (min-width: 1024px) { /* bp: --bp-lg — side-by-side box only; the stacked phone box keeps its padding */
	.hero-home--archive .hero-home__box {
		margin-block-end: calc(-1 * var(--space-12));
	}
}

@media (max-width: 1023px) { /* bp: --bp-lg */
	.hero-home--archive {
		padding-block: calc(var(--space-hero-page-top) + var(--hero-avatar) / 2) var(--space-hero-bottom);
	}
}