/* -----------------------------------------------------------------------
   "מחכים להכיר אותך" (page-meet-me.php) — full-bleed, no sidebar.
   RTL-first, logical properties only.

   A conversion page, not an editorial one: everything above the form exists
   to get someone to start typing, so it stays short and the form itself gets
   the widest, calmest block on the page. Generic field styling lives in
   assets/css/forms.css — this file is the page around it.
   ----------------------------------------------------------------------- */

.meet-me-page {
	--mm-ink: #0e1120;
	--mm-gap: clamp(2.5rem, 5vw, 4rem);

	display: grid;
	gap: var(--mm-gap);
	/* Swallow .site-content's padding so the hero runs flush under the
	   site header. */
	margin-block-start: calc(-1 * var(--shivuk-space));
	padding-block-end: var(--mm-gap);
}

.meet-me-page .container {
	inline-size: 100%;
	max-inline-size: min(980px, calc(100% - 2 * var(--shivuk-space)));
	margin-inline: auto;
}

/* -----------------------------------------------------------------------
   1. Hero
   ----------------------------------------------------------------------- */

.meet-me-hero {
	position: relative;
	display: grid;
	place-items: center;
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
	overflow: hidden;
	text-align: center;
	color: #ffffff;
	background:
		radial-gradient(120% 120% at 80% 0%, rgba(26, 125, 190, 0.55), transparent 60%),
		linear-gradient(160deg, #123553, #081320);
}

.meet-me-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.meet-me-hero__bg img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Scrim only where there's a photo behind it — over the gradient it would
   just mud the brand colour. */
.meet-me-hero--has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(6, 16, 26, 0.55) 0%, rgba(6, 16, 26, 0.82) 100%);
}

.meet-me-hero__inner {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 0.9rem;
}

.meet-me-hero__kicker {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5ch;
	margin: 0;
	padding: 0.4rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	backdrop-filter: blur(4px);
}

/* The number is the whole argument for filling in the form — it gets to be
   bigger than the words around it. */
.meet-me-hero__count {
	font-size: 1.25em;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: #8ecdf3;
}

.meet-me-hero__title {
	margin: 0;
	font-size: clamp(2.1rem, 1rem + 4.6vw, 3.8rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.025em;
	text-wrap: balance;
	text-shadow: 0 2px 18px rgba(4, 12, 20, 0.45);
}

.meet-me-hero__lead {
	margin: 0;
	max-inline-size: 60ch;
	color: rgba(255, 255, 255, 0.85);
	font-size: clamp(0.98rem, 0.92rem + 0.35vw, 1.15rem);
	line-height: 1.65;
}

.meet-me-hero__cta {
	margin-block-start: 0.6rem;
	padding: 0.8rem 2.2rem;
	border-radius: 999px;
	background: #ffffff;
	color: var(--mm-ink);
	font-weight: 800;
	text-decoration: none;
	transition: transform 0.2s var(--shivuk-ease), box-shadow 0.2s var(--shivuk-ease);
}

.meet-me-hero__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(4, 12, 20, 0.35);
	color: var(--mm-ink);
}

.meet-me-hero *:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* -----------------------------------------------------------------------
   2. What happens next
   ----------------------------------------------------------------------- */

.meet-me-steps__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.meet-me-step {
	position: relative;
	padding: 1.4rem 1.3rem 1.3rem;
	border: 1px solid var(--shivuk-color-border);
	border-radius: var(--shivuk-radius-lg);
	background: var(--shivuk-color-bg);
	box-shadow: var(--shivuk-shadow-sm);
}

.meet-me-step__num {
	display: grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	margin-block-end: 0.7rem;
	border-radius: 50%;
	background: var(--shivuk-color-accent-soft);
	color: var(--shivuk-color-accent);
	font-weight: 800;
}

.meet-me-step__title {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.meet-me-step__text {
	margin: 0;
	color: var(--shivuk-color-muted);
	font-size: 0.92rem;
	line-height: 1.6;
}

/* -----------------------------------------------------------------------
   3. The form block
   ----------------------------------------------------------------------- */

.meet-me-form {
	padding: clamp(1.4rem, 3vw, 2.6rem);
	border: 1px solid var(--shivuk-color-border);
	border-radius: var(--shivuk-radius-lg);
	background: var(--shivuk-color-bg);
	box-shadow: var(--shivuk-shadow-md);
	/* .container already centres it; scroll-margin keeps the CTA's anchor
	   jump clear of the sticky header. */
	scroll-margin-block-start: 90px;
}

.meet-me-form__head {
	margin-block-end: 1.8rem;
	text-align: center;
}

.meet-me-form__title {
	margin: 0 0 0.35rem;
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.meet-me-form__sub {
	margin: 0;
	color: var(--shivuk-color-muted);
	font-size: 0.95rem;
}

.meet-me-extra .entry-content {
	font-size: 1.02rem;
	line-height: 1.75;
}

/* -----------------------------------------------------------------------
   4. Closing link to the section itself
   ----------------------------------------------------------------------- */

.meet-me-more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	text-align: center;
}

.meet-me-more__text {
	margin: 0;
	color: var(--shivuk-color-muted);
}

.meet-me-more__link {
	font-weight: 800;
	color: var(--shivuk-color-accent);
}

@media (prefers-reduced-motion: reduce) {
	.meet-me-hero__cta {
		transition: none;
	}

	.meet-me-hero__cta:hover {
		transform: none;
	}
}