/* ==========================================================================
   Single blog post (Figma 417:80565 desktop / 539:31507 mobile)
   Desktop: main column 1136px (right) + sticky green CTA card 365px (left).
   Mobile order: hero, article, CTA card, related posts.
   ========================================================================== */

.single { padding: 185px 0 131px; }

.single__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(280px, 19vw, 365px);
	grid-template-areas: "main aside" "related .";
	column-gap: 20px;
	align-items: start;
}
.single__main { grid-area: main; }
.single__aside { grid-area: aside; position: sticky; top: 110px; }
.post-related { grid-area: related; }

/* ---------- Hero card ---------- */
.post-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto 1fr;
	column-gap: 40px;
	min-height: clamp(400px, 27.08vw, 520px);
	padding: 34px 43px 40px 83px; /* physical: right 43 (start), left 83 (end) */
	border-radius: var(--radius-card);
	overflow: hidden;
	isolation: isolate;
	color: #fff;
}
.post-hero__img {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%;
	object-fit: cover; object-position: 50% 8%;
}
.post-hero::before { /* Figma: transparent 44.5% → navy 70% */
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(to bottom, rgba(20, 24, 52, 0) 44.548%, rgba(20, 24, 52, .7));
}
.post-hero__tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 15px; }
.post-tag {
	display: inline-flex; align-items: center;
	height: 38px; padding-inline: 21px;
	border-radius: 50px; background: #fff; color: var(--c-navy);
	font-size: 16px; line-height: 1.2;
	transition: background-color .3s, color .3s;
}
.post-tag:hover { background: var(--c-accent); }

.post-hero__title {
	align-self: end;
	max-width: 681px;
	font-size: clamp(32px, 2.71vw, 52px); font-weight: 500; line-height: 1.19;
}

.post-share { align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 17px; margin-bottom: 10px; }
.post-share__label { font-size: 16px; line-height: 1.2; }
.post-share__list { display: flex; gap: 16px; }

/* ---------- Article body (WP post_content) ---------- */
.post-body {
	margin-top: 20px;
	padding-block: 43px 90px;
	padding-inline: 58px 72px;
	border-radius: var(--radius-card);
	background: #fff;
	box-shadow: 0 3px 15px rgba(20, 24, 52, .1);
}
.post-body .sv-prose { font-size: 20px; line-height: 28px; }
.post-body .sv-prose::after { content: ""; display: table; clear: both; }
.post-body .sv-prose > * + * { margin-top: 28px; }
.post-body .sv-prose h2 { margin-top: 32px; font-size: 24px; font-weight: 500; line-height: 28px; }
.post-body .sv-prose h3 { margin-top: 28px; font-size: 20px; font-weight: 500; line-height: 28px; }
.post-body .sv-prose h2 + * { margin-top: 17px; }
.post-body .sv-prose h3 + *,
.post-body .sv-prose p + ul { margin-top: 0; }
.post-body .sv-prose ul { padding-inline-start: 30px; }
.post-body .sv-prose li::marker { font-size: .8em; }

/* Desktop design keeps the text in the right-hand column (483/1006) beside and below the image. */
@media (min-width: 1400px) {
	.post-body .sv-prose > :not(:first-child):not(figure) { max-width: 48%; }
}
.post-body .alignleft {
	float: left;
	width: min(419px, 41.65%);
	margin: 36px clamp(24px, 5.42vw, 104px) 24px 0;
}
.post-body .alignleft img { width: 100%; aspect-ratio: 419 / 442; object-fit: cover; object-position: 50% 0; border-radius: 10px; }

/* ---------- Sticky CTA card ---------- */
.post-cta {
	display: flex; flex-direction: column; align-items: center;
	padding-top: 28px;
	border-radius: var(--radius-card);
	background: var(--grad-green); color: #fff;
	text-align: center;
	overflow: hidden;
}
.post-cta__kicker { font-size: 20px; font-weight: 500; line-height: 1.2; }
.post-cta__title { margin-top: 12px; font-size: clamp(24px, 1.46vw, 28px); font-weight: 700; line-height: 1.215; }
.post-cta__btn { margin-top: 30px; width: min(264px, calc(100% - 40px)); min-height: 50px; padding-block: 10px; }
.post-cta__link { margin-top: 20px; }
.post-cta__phone { position: relative; width: 264px; height: 168px; margin-top: 20px; overflow: hidden; }
.post-cta__phone img { position: absolute; max-width: none; width: 243.11%; height: 254.09%; left: -72.29%; top: -32.78%; }

/* ---------- Related posts ---------- */
.post-related { margin-top: 37px; }
.post-related__title { font-size: 24px; font-weight: 500; line-height: 28px; }
.post-related__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 28px;
	margin-top: 36px;
}
.post-related__list > li { display: flex; }
.related-card {
	flex: 1;
	border-radius: var(--radius-card);
	background: #fff;
	box-shadow: 0 3px 15px rgba(20, 24, 52, .1);
}
.related-card__link { display: flex; align-items: flex-start; gap: 24px; min-height: 140px; padding: 21px 22px 21px 20px; }
.related-card__thumb { flex: none; width: 104px; height: 92px; margin-top: 4px; border-radius: 10px; overflow: hidden; }
.related-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.related-card:hover .related-card__thumb img { transform: scale(1.08); }
.related-card__body { display: flex; flex-direction: column; align-items: flex-start; max-width: 174px; }
.related-card__title { font-size: 18px; font-weight: 500; line-height: 1.22; }
.related-card__more { margin-top: 11px; font-size: 16px; font-weight: 500; line-height: 1.2; color: var(--c-green); }
.related-card:hover .related-card__more { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- In-between widths ---------- */
@media (max-width: 1399px) {
	.post-body { padding-inline: 40px; }
}

/* Tablet (iPad landscape/portrait-ish): one column — article, then the CTA as a wide
   banner (text + phone side by side), then related posts. */
@media (max-width: 1199px) {
	.single__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "aside" "related"; }
	.single__aside { position: static; margin-top: 20px; }
	.post-body .alignleft { width: min(419px, 40%); margin-inline-end: 0; margin-right: 40px; }

	.post-cta {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 264px;
		grid-template-areas: "kicker phone" "title phone" "btn phone" "link phone";
		grid-template-rows: auto auto auto 1fr;
		justify-items: center;
		column-gap: 30px;
		padding: 28px 40px 0;
	}
	.post-cta__kicker { grid-area: kicker; }
	.post-cta__title { grid-area: title; }
	.post-cta__btn { grid-area: btn; }
	.post-cta__link { grid-area: link; align-self: start; margin-bottom: 28px; }
	.post-cta__phone { grid-area: phone; align-self: end; margin-top: 0; }
}

/* ---------- Mobile (390 design) ---------- */
@media (max-width: 900px) {
	.single { padding: 121px 0 34px; }
	.single__grid { display: flex; flex-direction: column; padding-inline: 15px; }
	/* 360px card column on phones; wider (up to 700px) on small tablets */
	.single__main, .post-related { width: 100%; max-width: 700px; margin-inline: auto; }
	.single__aside { width: 100%; max-width: 360px; margin: 18px auto 0; }
	.post-cta { display: flex; padding: 28px 0 0; }
	.post-cta__link { align-self: auto; margin-bottom: 0; }
	.post-cta__phone { align-self: auto; margin-top: 20px; }

	.post-hero {
		display: flex; flex-direction: column; align-items: center; justify-content: space-between;
		min-height: 307px;
		padding: 26px 20px 21px;
		text-align: center;
	}
	.post-hero::before { background: rgba(20, 24, 52, .4); }
	.post-hero__tags { justify-content: center; gap: 11px; }
	.post-tag { height: 30px; padding-inline: 17px; font-size: 12.63px; }
	.post-hero__title { align-self: auto; max-width: 290px; font-size: 28px; line-height: 1.215; }
	.post-share { align-self: center; flex-direction: row; align-items: center; gap: 19px; margin: 0; }
	.post-share__list { gap: 16px; }
	.post-share__list .sv-socials__btn { width: 40px; height: 40px; border-radius: 5px; }
	.post-share__list .sv-socials__icon { transform: none; }

	.post-body { margin-top: 15px; padding-block: 22px 34px; padding-inline: 27px 38px; }
	.post-body .sv-prose { font-size: 16px; }
	.post-body .sv-prose h2 { margin-top: 24px; font-size: 18px; }
	.post-body .sv-prose h3 { font-size: 16px; }
	.post-body .sv-prose h2 + * { margin-top: 8px; }
	.post-body .sv-prose ul { padding-inline-start: 24px; }
	.post-body .alignleft { float: none; width: auto; max-width: none; margin: 26px -3px 0 -15px; } /* physical: 313px wide image */
	.post-body .alignleft img { aspect-ratio: 313 / 266; }
	.post-body .alignleft + h2 { margin-top: 22px; }

	.post-cta { padding-top: 28px; }
	.post-cta__title { font-size: 27.6px; }

	.post-related { margin-top: 31px; }
	.post-related__title { padding-inline-start: 9px; font-size: 20px; }
	.post-related__list { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; margin-top: 22px; }
}
@media (min-width: 600px) and (max-width: 900px) {
	.post-hero__title { max-width: 520px; }
	.post-body .alignleft { max-width: 419px; margin-inline: auto; }
}

/* The post's breadcrumb (long title) doesn't fit next to the logo on narrow headers.
   Figma mobile shows "עמוד הבית » בלוג" only, so drop the current-page crumb there. */
@media (max-width: 1100px) {
	.page-post .sv-crumbs li[aria-current] { display: none; }
}