/* --------------------------------------------------------------------------
   מיניסייט חב״ד
   המוקאפ הוא עמוד ברוחב 595 נקודות. המידות כאן תורגמו ליחידת --u של
   התבנית, שבה בנוי שאר האתר, כדי שהעמוד יתכווץ ויתרחב שלם.
   -------------------------------------------------------------------------- */

/* דף נחיתה עצמאי: סרגל הניווט של האתר אינו מופיע בו, כדי שהעמוד
   יעמוד בפני עצמו ולא ייקרא כעוד עמוד פנימי באתר. */
body.page-template-template-chabad .site-header {
	display: none;
}

.chabad {
	/* זוג הכחולים של המוקאפ — הכהה והבהיר שבין קצוות המעבר */
	--cb-navy: #15405b;
	--cb-navy-light: #22597e;
	--cb-gold: #f7b733;
	--cb-sky: #479fc3;

	background: #fff;
	color: var(--cb-navy);
	overflow: hidden;
}

/* רצועת כותרת משופעת. השיפוע על המסגרת, והטקסט מיושר בחזרה כדי
   שיישאר קריא — אחרת האותיות עצמן נוטות. */
.cb-tape {
	display: inline-block;
	padding: calc(10 * var(--u)) calc(30 * var(--u));
	background: var(--cb-gold);
	color: var(--cb-navy);
	font-size: calc(54 * var(--u));
	font-weight: 700;
	line-height: 1.1;
	transform: skewX(-8deg);
	box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) calc(16 * var(--u)) rgba(9, 24, 41, 0.25);
}

.cb-tape > * ,
.cb-tape {
	text-wrap: balance;
}

.cb-tape--navy {
	background: var(--cb-navy);
	color: #fff;
}

.cb-tape.is-italic {
	font-style: italic;
}

/* ----- הגיבור ----- */

.cb-hero {
	position: relative;
	padding: calc(120 * var(--u)) 0 calc(96 * var(--u));
	text-align: center;
	color: #fff;
	isolation: isolate;
}

.cb-hero-bg {
	position: absolute;
	z-index: -2;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* כיסוי כהה: בלעדיו הכותרת הלבנה נבלעת בתמונת הספרייה */
.cb-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 32, 56, 0.55), rgba(10, 32, 56, 0.78));
}

.cb-hero-title {
	margin: 0;
	font-size: calc(74 * var(--u));
	font-weight: 700;
	line-height: 1.12;
}

.cb-hero-title .cb-tape {
	font-size: calc(62 * var(--u));
	margin-bottom: calc(14 * var(--u));
}

.cb-hero-line {
	display: block;
	text-shadow: 0 calc(3 * var(--u)) calc(14 * var(--u)) rgba(5, 18, 33, 0.6);
}

.cb-hero-sub {
	margin: calc(54 * var(--u)) 0 0;
	font-size: calc(30 * var(--u));
	font-weight: 700;
}

/* שלוש הלשוניות יושבות על גבול התמונה ובולטות מתחתיה */
.cb-pillars {
	display: flex;
	justify-content: center;
	gap: calc(26 * var(--u));
	margin: calc(60 * var(--u)) 0 calc(-150 * var(--u));
	padding: 0;
	list-style: none;
}

.cb-pillars li {
	width: calc(210 * var(--u));
	padding: calc(18 * var(--u)) calc(10 * var(--u)) calc(22 * var(--u));
	background: var(--cb-gold);
	color: var(--cb-navy);
	font-size: calc(26 * var(--u));
	font-weight: 700;
	transform: skewX(-8deg);
}

.cb-pillars img {
	display: block;
	width: calc(46 * var(--u));
	margin: 0 auto calc(10 * var(--u));
}

.cb-pillars span {
	display: block;
}

/* ----- שלושת הבלוקים ----- */

.cb-block {
	padding: calc(190 * var(--u)) 0 calc(60 * var(--u));
}

.cb-block + .cb-block {
	padding-top: calc(40 * var(--u));
}

/* כל בלוק הוא כרטיס רחב: הרצועה הזהובה יושבת על שפתו העליונה,
   הטקסט בתוכו, והגזירים גולשים מתחתיתו. הרקע מתחלף בין המקטעים —
   כרטיס כהה על עמוד לבן, וכרטיס לבן על מקטע כהה. */
.cb-block-inner {
	position: relative;
	width: calc(1400 * var(--u));
	margin-inline: auto;
	padding-bottom: calc(120 * var(--u));
}

.cb-block-title {
	position: relative;
	z-index: 2;
	margin: 0;
	text-align: right;
}

.cb-block-title .cb-tape {
	margin-right: calc(70 * var(--u));
	font-size: calc(48 * var(--u));
}

.cb-panel {
	/* הרצועה חופפת את שפת הכרטיס במקום לשבת מעליו */
	margin-top: calc(-28 * var(--u));
	padding: calc(60 * var(--u)) calc(80 * var(--u)) calc(230 * var(--u));
	background: linear-gradient(225deg, var(--cb-navy-light) 0%, var(--cb-navy) 100%);
	color: #fff;
	transform: skewX(-8deg);
	text-align: right;
}

.cb-panel > * {
	transform: skewX(8deg);
}

.cb-panel p {
	margin: 0 0 calc(20 * var(--u));
	font-size: calc(24 * var(--u));
	line-height: 1.6;
	text-wrap: pretty;
}

.cb-panel p:last-child {
	margin-bottom: 0;
}

.cb-panel p.is-strong {
	font-weight: 700;
}

/* הגזירים נשענים על תחתית הכרטיס וגולשים ממנה */
.cb-clips {
	position: absolute;
	z-index: 2;
	left: calc(60 * var(--u));
	bottom: 0;
	width: calc(1180 * var(--u));
	height: calc(300 * var(--u));
	pointer-events: none;
}

.cb-clip {
	position: absolute;
	bottom: 0;
	filter: drop-shadow(calc(4 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u)) rgba(9, 24, 41, 0.3));
}

.cb-clip--1 {
	left: 0;
	width: calc(400 * var(--u));
	rotate: -3deg;
}

.cb-clip--2 {
	left: calc(480 * var(--u));
	bottom: calc(30 * var(--u));
	width: calc(620 * var(--u));
	rotate: 2deg;
}

/* הגזיר הראשון כאן הוא כתבה לאורך ולא רצועה, ולכן ברוחב זהה הוא
   גבוה בהרבה — וצר יותר כדי שלא יטפס אל תוך הטקסט */
.cb-block--who .cb-clip--1 {
	width: calc(280 * var(--u));
}

/* המקטע האמצעי הפוך: רקע כהה וכרטיס לבן */
.cb-block--who {
	background: var(--cb-navy);
}

.cb-block--who .cb-panel {
	background: #fff;
	color: var(--cb-navy);
}

/* ----- חינוך ----- */

.cb-banner {
	margin: 0;
	text-align: center;
}

.cb-banner .cb-tape {
	font-size: calc(58 * var(--u));
}

/* העטיפה מקבלת את רוחב הרצועה הזהובה בלבד, והפס יורש אותו ממנה —
   כך שניהם נגמרים באותו קו, כמו במוקאפ. width:0 עם min-width:100%
   הוא מה שמונע מהטקסט שבפס להרחיב את העטיפה. */
.cb-head {
	width: fit-content;
	margin-inline: auto;
}

/* הכותרת המשנית עם קו מעל ומתחת */
.cb-rule {
	position: relative;
	box-sizing: border-box;
	width: 0;
	min-width: 100%;
	margin: calc(26 * var(--u)) auto 0;
	padding: calc(16 * var(--u)) 0;
	font-size: calc(38 * var(--u));
	text-align: center;
	font-weight: 700;
	font-style: italic;
	color: #fff;
	white-space: nowrap;
}

.cb-rule::before,
.cb-rule::after {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	height: calc(5 * var(--u));
	background: var(--cb-sky);
}

.cb-rule::before {
	top: 0;
}

.cb-rule::after {
	bottom: 0;
}

.cb-edu {
	position: relative;
	padding: calc(90 * var(--u)) 0 calc(110 * var(--u));
	color: #fff;
	isolation: isolate;
	border-block: calc(5 * var(--u)) solid var(--cb-sky);
}

.cb-edu-bg {
	position: absolute;
	z-index: -2;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.55);
}

.cb-edu::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: rgba(71, 159, 195, 0.46);
}

.cb-edu-body {
	width: calc(940 * var(--u));
	margin: calc(48 * var(--u)) auto 0;
	text-align: center;
	font-size: calc(27 * var(--u));
	line-height: 1.75;
}

.cb-edu-body p {
	margin: 0 0 calc(24 * var(--u));
}

.cb-edu-body .is-lead,
.cb-edu-body .is-close {
	font-weight: 700;
}

.cb-edu-body .is-close {
	margin-bottom: 0;
	color: var(--cb-sky);
}

/* סימן השאלה בתכלת, כמו במוקאפ */
.cb-q {
	color: var(--cb-sky);
	font-weight: 700;
}

/* ----- אנשי אמת ----- */

.cb-truth {
	padding: calc(90 * var(--u)) 0 calc(110 * var(--u));
	background: #184866;
	color: #fff;
}

.cb-truth-card {
	width: calc(820 * var(--u));
	margin: calc(46 * var(--u)) auto 0;
	padding: calc(40 * var(--u)) calc(50 * var(--u));
	background: rgba(255, 255, 255, 0.08);
	text-align: center;
	font-size: calc(23 * var(--u));
	line-height: 1.7;
}

.cb-truth-card p {
	margin: 0 0 calc(26 * var(--u));
}

.cb-truth-card p:last-child {
	margin-bottom: 0;
}

.cb-nots span {
	display: block;
	font-weight: 700;
}

.cb-nots em {
	font-style: normal;
	color: var(--cb-sky);
}

.cb-truth-card .is-strong {
	font-weight: 700;
}

/* הרצועה כאן רחבה מרוחב הכיתוב שבה. הפס יורש את רוחבה דרך
   העטיפה, ולכן די בשינוי אחד כדי ששניהם יגדלו יחד. */
.cb-truth .cb-tape {
	min-width: calc(720 * var(--u));
	text-align: center;
}

/* הפסים ב"מדור חדש" לבנים ולא בתכלת */
.cb-rule.is-white::before,
.cb-rule.is-white::after {
	background: #fff;
}

/* ----- הסרטון ----- */

.cb-video {
	padding: calc(80 * var(--u)) 0;
	background: #fff;
}

.cb-video-frame {
	width: calc(1000 * var(--u));
	margin-inline: auto;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}

.cb-video-frame {
	position: relative;
}

.cb-video-clip {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* אותו כפתור עגול כמו בדף הבית, לשפה אחת בכל האתר */
.cb-video-sound {
	position: absolute;
	z-index: 2;
	left: calc(16 * var(--u));
	bottom: calc(16 * var(--u));
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(54 * var(--u));
	height: calc(54 * var(--u));
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(9, 24, 41, 0.6);
	color: #fff;
	font-size: calc(24 * var(--u));
	line-height: 1;
	cursor: pointer;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.cb-video-sound:hover {
	background: rgba(9, 24, 41, 0.85);
}

/* ----- מהנעשה בשטח ----- */

.cb-field {
	padding: calc(80 * var(--u)) 0 calc(96 * var(--u));
	background: linear-gradient(180deg, var(--cb-navy) 0%, var(--cb-navy-light) 100%);
	color: #fff;
}

/* שלוש למעלה ושתיים ממורכזות מתחתן */
.cb-field-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(30 * var(--u));
	width: calc(1180 * var(--u));
	margin: calc(56 * var(--u)) auto 0;
	padding: 0;
	list-style: none;
}

.cb-field-grid li {
	width: calc(340 * var(--u));
}

.cb-field-grid img {
	display: block;
	width: 100%;
	filter: drop-shadow(calc(4 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u)) rgba(5, 18, 33, 0.4));
}

/* הטיה קלה ומשתנה, כמו גזירים שהונחו ביד. הזוויות נבחרו שונות זו
   מזו כדי שלא ייראו כדפוס חוזר. */
.cb-field-grid li:nth-child(1) img { rotate: -2.5deg; }
.cb-field-grid li:nth-child(2) img { rotate: 1.5deg; }
.cb-field-grid li:nth-child(3) img { rotate: -1deg; }
.cb-field-grid li:nth-child(4) img { rotate: 2deg; }
.cb-field-grid li:nth-child(5) img { rotate: -1.8deg; }

/* --------------------------------------------------------------------------
   מסכים צרים
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.cb-tape {
		padding: calc(7 * var(--u)) calc(16 * var(--u));
		font-size: calc(26 * var(--u));
	}

	.cb-hero {
		padding: calc(70 * var(--u)) calc(16 * var(--u)) calc(60 * var(--u));
	}

	.cb-hero-title {
		font-size: calc(38 * var(--u));
	}

	.cb-hero-title .cb-tape {
		font-size: calc(30 * var(--u));
	}

	.cb-hero-sub {
		margin-top: calc(30 * var(--u));
		font-size: calc(17 * var(--u));
	}

	/* שלוש הלשוניות נשארות בשורה אחת, ברוחב שווה */
	.cb-pillars {
		gap: calc(8 * var(--u));
		margin: calc(26 * var(--u)) 0 calc(-34 * var(--u));
		padding-inline: calc(14 * var(--u));
	}

	.cb-pillars li {
		flex: 1 1 0;
		width: auto;
		padding: calc(10 * var(--u)) calc(4 * var(--u)) calc(12 * var(--u));
		font-size: calc(12 * var(--u));
		line-height: 1.2;
	}

	.cb-pillars img {
		width: calc(22 * var(--u));
		margin-bottom: calc(6 * var(--u));
	}

	/* הפאנל, הגזירים והכותרת יורדים לזרימה רגילה במקום לשכבות */
	.cb-block,
	.cb-block + .cb-block {
		padding: calc(70 * var(--u)) calc(16 * var(--u)) calc(40 * var(--u));
	}

	/* הכל בזרימה רגילה: רצועה, כרטיס, ואז הגזירים בשורה */
	.cb-block-inner {
		width: auto;
		padding-bottom: 0;
	}

	.cb-block-title {
		text-align: center;
	}

	.cb-block-title .cb-tape {
		margin-right: 0;
		font-size: calc(22 * var(--u));
	}

	.cb-panel {
		margin-top: calc(-14 * var(--u));
		padding: calc(26 * var(--u)) calc(18 * var(--u));
	}

	/* במסך צר הגזירים זה מעל זה, ולא זה לצד זה */
	.cb-clips {
		position: static;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: calc(12 * var(--u));
		width: auto;
		height: auto;
		margin-top: calc(-20 * var(--u));
	}

	.cb-clip,
	.cb-clip--1,
	.cb-clip--2,
	.cb-block--who .cb-clip--1 {
		position: static;
		bottom: auto;
		left: auto;
		width: calc(260 * var(--u));
	}

	.cb-clip--1 { rotate: -2deg; }
	.cb-clip--2 { rotate: 1.5deg; }

	.cb-panel p {
		font-size: calc(14 * var(--u));
		margin-bottom: calc(14 * var(--u));
	}

	.cb-banner .cb-tape {
		font-size: calc(24 * var(--u));
	}

	.cb-rule {
		margin-top: calc(16 * var(--u));
		padding: calc(8 * var(--u)) 0;
		font-size: calc(18 * var(--u));
		white-space: normal;
	}

	/* הרוחב המזערי של הרצועה נמדד למסך רחב, וכאן הוא גדול מהמסך
	   עצמו ודוחף את הכותרת אל מחוץ לתחום */
	.cb-truth .cb-tape {
		min-width: 0;
	}

	.cb-head {
		max-width: 100%;
	}

	.cb-edu,
	.cb-truth,
	.cb-field {
		padding: calc(50 * var(--u)) calc(16 * var(--u)) calc(60 * var(--u));
	}

	.cb-edu-body,
	.cb-truth-card {
		width: auto;
		font-size: calc(14 * var(--u));
	}

	.cb-truth-card {
		padding: calc(20 * var(--u)) calc(16 * var(--u));
	}

	.cb-video {
		padding: calc(40 * var(--u)) calc(16 * var(--u));
	}

	.cb-video-frame {
		width: 100%;
	}

	.cb-field-grid {
		gap: calc(14 * var(--u));
		width: auto;
		margin-top: calc(26 * var(--u));
	}

	.cb-field-grid li {
		width: calc(150 * var(--u));
	}
}

/* --------------------------------------------------------------------------
   תנועה
   ההנפשות משתמשות ב-translate וב-scale — התכונות הנפרדות — ולא
   ב-transform, כי הכרטיסים משופעים והגזירים מוטים, ו-transform היה
   דורס את השיפוע וההטיה. ראו chabad.js.
   -------------------------------------------------------------------------- */

.chabad [data-in] {
	opacity: 0;
	translate: 0 calc(34 * var(--u));
	transition:
		opacity 620ms ease var(--in-delay, 0ms),
		translate 620ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--in-delay, 0ms);
}

.chabad [data-in].is-in {
	opacity: 1;
	translate: 0 0;
}

/* הגזירים נכנסים בסיבוב קל, כמו פתק שהונח */
.cb-clip[data-in] {
	translate: 0 calc(26 * var(--u));
}

/* התוויות של השלמויות מתרוממות במעבר עכבר */
.cb-pillars li {
	transition: translate 260ms ease, box-shadow 260ms ease;
}

.cb-pillars li:hover {
	translate: 0 calc(-8 * var(--u));
	box-shadow: 0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(9, 24, 41, 0.3);
}

/* הגזירים ותמונות הגלריה גדלים מעט במעבר עכבר.
   האב קובע pointer-events: none, ולכן הוא מוחזר כאן לתמונות עצמן. */
.cb-clip,
.cb-field-grid img {
	pointer-events: auto;
	transition: scale 320ms ease, filter 320ms ease;
}

.cb-clip:hover,
.cb-field-grid img:hover {
	scale: 1.06;
	filter: drop-shadow(calc(6 * var(--u)) calc(12 * var(--u)) calc(20 * var(--u)) rgba(5, 18, 33, 0.5));
}

.cb-field-grid img {
	cursor: default;
}

/* הרצועות הזהובות נעות קלות במעבר */
.cb-tape {
	transition: translate 260ms ease;
}

.cb-block-title:hover .cb-tape,
.cb-banner:hover .cb-tape {
	translate: calc(-6 * var(--u)) 0;
}

@media (prefers-reduced-motion: reduce) {
	.chabad [data-in],
	.chabad [data-in].is-in {
		opacity: 1;
		translate: none;
		transition: none;
	}

	.cb-pillars li,
	.cb-clip,
	.cb-field-grid img,
	.cb-tape {
		transition: none;
	}

	.cb-pillars li:hover,
	.cb-clip:hover,
	.cb-field-grid img:hover,
	.cb-block-title:hover .cb-tape,
	.cb-banner:hover .cb-tape {
		scale: none;
		translate: none;
	}
}