/* ==========================================================
   Behind Lighting Block
   ========================================================== */

.behind-lighting,
.behind-lighting *,
.behind-lighting *::before,
.behind-lighting *::after {
	box-sizing: border-box;
}

.behind-lighting {
	padding: 110px 24px;
	background-color: var(--behind-lighting-background, #f7f4ef);
}

.behind-lighting__container {
	width: 100%;
	max-width: 1376px;
	margin: 0 auto;
}

/* ==========================================================
   Header
   ========================================================== */

.behind-lighting__header {
	max-width: 920px;
	margin: 0 auto 60px;
}

.behind-lighting--align-right .behind-lighting__header {
	margin-right: 0;
	margin-left: auto;
	text-align: right;
}

.behind-lighting--align-center .behind-lighting__header {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.behind-lighting--align-left .behind-lighting__header {
	margin-right: auto;
	margin-left: 0;
	text-align: left;
}

.behind-lighting__title {
	margin: 0 0 22px;
	color: var(--behind-lighting-title-color, #1f1f1f);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.behind-lighting__title--medium {
	font-size: 42px;
}

.behind-lighting__title--large {
	font-size: 54px;
}

.behind-lighting__title--xlarge {
	font-size: 68px;
}

.behind-lighting__subtitle {
	color: var(--behind-lighting-subtitle-color, #5f5a54);
	font-weight: 300;
	line-height: 1.8;
}

.behind-lighting__subtitle p {
	margin: 0;
}

.behind-lighting__subtitle--small {
	font-size: 17px;
}

.behind-lighting__subtitle--medium {
	font-size: 20px;
}

.behind-lighting__subtitle--large {
	font-size: 24px;
}

/* ==========================================================
   Intro Image
   ========================================================== */

.behind-lighting__intro-image {
	margin: 0 auto;
	overflow: hidden;
}

.behind-lighting__intro-image--small {
	max-width: 620px;
}

.behind-lighting__intro-image--medium {
	max-width: 820px;
}

.behind-lighting__intro-image--large {
	max-width: 1100px;
}

.behind-lighting__intro-image--full {
	max-width: 1328px;
}

.behind-lighting__intro-image-element {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

/* ==========================================================
   Content Rows
   ========================================================== */

.behind-lighting__rows {
	margin-top: 110px;
}

.behind-lighting__row {
	display: grid;
	align-items: center;
	gap: 70px;
	width: 100%;
	padding-top: 80px;
	padding-bottom: 80px;
}

/*
 * באתר RTL ההגדרות האלו מציגות את הצדדים
 * בהתאם לבחירה שכבר נבדקה באתר.
 */
.behind-lighting__row--image-right {
	grid-template-areas: "image content";
}

.behind-lighting__row--image-left {
	grid-template-areas: "content image";
}

/* רוחב תמונה — תמונה מימין */

.behind-lighting__row--image-right.behind-lighting__row--width-small {
	grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
}

.behind-lighting__row--image-right.behind-lighting__row--width-medium {
	grid-template-columns: minmax(320px, 46%) minmax(0, 1fr);
}

.behind-lighting__row--image-right.behind-lighting__row--width-large {
	grid-template-columns: minmax(420px, 62%) minmax(280px, 38%);
}

/* רוחב תמונה — תמונה משמאל */

.behind-lighting__row--image-left.behind-lighting__row--width-small {
	grid-template-columns: minmax(0, 1fr) minmax(260px, 34%);
}

.behind-lighting__row--image-left.behind-lighting__row--width-medium {
	grid-template-columns: minmax(0, 1fr) minmax(320px, 46%);
}

.behind-lighting__row--image-left.behind-lighting__row--width-large {
	grid-template-columns: minmax(280px, 38%) minmax(420px, 62%);
}

/* ==========================================================
   Figure and Image
   ========================================================== */

.behind-lighting__row-figure {
	grid-area: image;
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: visible;
}

.behind-lighting__row-image {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: transparent;
	border: 0;
	box-shadow: none;
}

/* יחס חיתוך */

.behind-lighting__row-image--ratio-landscape {
	aspect-ratio: 4 / 3;
}

.behind-lighting__row-image--ratio-portrait {
	aspect-ratio: 3 / 4;
}

.behind-lighting__row-image--ratio-square {
	aspect-ratio: 1 / 1;
}

.behind-lighting__row-image--ratio-wide {
	aspect-ratio: 16 / 9;
}

.behind-lighting__row-image--ratio-natural {
	aspect-ratio: auto;
}

/* התמונה עצמה */

.behind-lighting__row-image-element {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	object-fit: cover;
}

/* ללא חיתוך */

.behind-lighting__row-image--ratio-natural
.behind-lighting__row-image-element {
	height: auto;
	object-fit: contain;
}

/* מיקום החיתוך */

.behind-lighting__row-image--position-center
.behind-lighting__row-image-element {
	object-position: center center;
}

.behind-lighting__row-image--position-top
.behind-lighting__row-image-element {
	object-position: center top;
}

.behind-lighting__row-image--position-bottom
.behind-lighting__row-image-element {
	object-position: center bottom;
}

.behind-lighting__row-image--position-left
.behind-lighting__row-image-element {
	object-position: left center;
}

.behind-lighting__row-image--position-right
.behind-lighting__row-image-element {
	object-position: right center;
}

/* ==========================================================
   Image Radius
   ========================================================== */

.behind-lighting__row-image--radius-none {
	border-radius: 0;
}

.behind-lighting__row-image--radius-small {
	border-radius: 8px;
}

.behind-lighting__row-image--radius-medium {
	border-radius: 18px;
}

.behind-lighting__row-image--radius-large {
	border-radius: 32px;
}

/* ==========================================================
   Image Border
   ========================================================== */

.behind-lighting__row-image--has-border {
	border-style: solid;
	border-color: var(
		--behind-lighting-image-border-color,
		#b59a6a
	);
}

.behind-lighting__row-image--border-thin {
	border-width: 1px;
}

.behind-lighting__row-image--border-medium {
	border-width: 3px;
}

.behind-lighting__row-image--border-thick {
	border-width: 6px;
}

.behind-lighting__row-image:not(
	.behind-lighting__row-image--has-border
) {
	border-width: 0;
	border-style: none;
}

/* ==========================================================
   Image Shadow
   ========================================================== */

.behind-lighting__row-image--shadow-soft {
	box-shadow:
		0 12px 34px
		rgba(
			var(--behind-lighting-image-shadow-rgb, 0, 0, 0),
			0.18
		);
}

.behind-lighting__row-image--shadow-medium {
	box-shadow:
		0 18px 48px
		rgba(
			var(--behind-lighting-image-shadow-rgb, 0, 0, 0),
			0.26
		);
}

.behind-lighting__row-image--shadow-deep {
	box-shadow:
		0 28px 72px
		rgba(
			var(--behind-lighting-image-shadow-rgb, 0, 0, 0),
			0.36
		);
}

.behind-lighting__row-image--shadow-offset_right {
	box-shadow:
		24px 24px 0
		rgba(
			var(--behind-lighting-image-shadow-rgb, 0, 0, 0),
			0.34
		);
}

.behind-lighting__row-image--shadow-offset_left {
	box-shadow:
		-24px 24px 0
		rgba(
			var(--behind-lighting-image-shadow-rgb, 0, 0, 0),
			0.34
		);
}

.behind-lighting__row-image:not(
	.behind-lighting__row-image--has-shadow
) {
	box-shadow: none;
}

/* ==========================================================
   Image Caption
   ========================================================== */

.behind-lighting__row-caption {
	display: block;
	margin: 14px 0 0;
	padding: 0;
	color: var(--behind-lighting-subtitle-color, #5f5a54);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: 0.03em;
	text-align: right;
}

/* ==========================================================
   Row Content
   ========================================================== */

.behind-lighting__row-content {
	grid-area: content;
	width: 100%;
	min-width: 0;
}

.behind-lighting__row--image-right
.behind-lighting__row-content {
	justify-self: start;
}

.behind-lighting__row--image-left
.behind-lighting__row-content {
	justify-self: end;
}

.behind-lighting__row--text-narrow
.behind-lighting__row-content {
	max-width: 360px;
}

.behind-lighting__row--text-medium
.behind-lighting__row-content {
	max-width: 520px;
}

.behind-lighting__row--text-wide
.behind-lighting__row-content {
	max-width: 680px;
}

.behind-lighting__row-title {
	margin: 0 0 22px;
	color: var(--behind-lighting-title-color, #1f1f1f);
	font-size: 38px;
	font-weight: 400;
	line-height: 1.25;
}

.behind-lighting__row-text {
	color: var(--behind-lighting-subtitle-color, #5f5a54);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.9;
}

.behind-lighting__row-text p {
	margin: 0 0 18px;
}

.behind-lighting__row-text p:last-child {
	margin-bottom: 0;
}

/* ==========================================================
   Row Spacing
   ========================================================== */

.behind-lighting__row--spacing-small {
	margin-top: 20px;
}

.behind-lighting__row--spacing-medium {
	margin-top: 60px;
}

.behind-lighting__row--spacing-large {
	margin-top: 110px;
}

/* ==========================================================
   Row Background
   ========================================================== */

.behind-lighting__row--background-transparent {
	background-color: transparent;
}

.behind-lighting__row--background-cream {
	padding-right: 50px;
	padding-left: 50px;
	background-color: #f3eee5;
}

.behind-lighting__row--background-white {
	padding-right: 50px;
	padding-left: 50px;
	background-color: #ffffff;
}

.behind-lighting__row--background-light_gray {
	padding-right: 50px;
	padding-left: 50px;
	background-color: #eeeeec;
}

/* ==========================================================
   Row Width
   ========================================================== */

.behind-lighting__row--custom-width {
	margin-right: auto;
	margin-left: auto;
}

.behind-lighting__row--container-narrow {
	max-width: 900px;
}

.behind-lighting__row--container-medium {
	max-width: 1080px;
}

.behind-lighting__row--container-wide {
	max-width: 1240px;
}

.behind-lighting__row--container-full {
	max-width: 100%;
}

/* ==========================================================
   Divider
   ========================================================== */

.behind-lighting__row--has-divider {
	border-top: 1px solid rgba(31, 31, 31, 0.14);
}

/* ==========================================================
   Ending
   ========================================================== */

.behind-lighting__ending {
	max-width: 980px;
	margin: 120px auto 0;
	padding-top: 70px;
	border-top: 1px solid rgba(31, 31, 31, 0.14);
}

.behind-lighting__ending--align-right {
	margin-right: 0;
	margin-left: auto;
	text-align: right;
}

.behind-lighting__ending--align-center {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.behind-lighting__ending--align-left {
	margin-right: auto;
	margin-left: 0;
	text-align: left;
}

.behind-lighting__ending-text {
	color: var(--behind-lighting-title-color, #1f1f1f);
	font-weight: 300;
	line-height: 1.55;
}

.behind-lighting__ending-text p {
	margin: 0;
}

.behind-lighting__ending--medium
.behind-lighting__ending-text {
	font-size: 28px;
}

.behind-lighting__ending--large
.behind-lighting__ending-text {
	font-size: 38px;
}

.behind-lighting__ending--xlarge
.behind-lighting__ending-text {
	font-size: 50px;
}

/* ==========================================================
   Button
   ========================================================== */

.behind-lighting__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 210px;
	margin-top: 34px;
	padding: 15px 30px;
	border: 1px solid var(--behind-lighting-title-color, #1f1f1f);
	background-color: transparent;
	color: var(--behind-lighting-title-color, #1f1f1f);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease;
}

.behind-lighting__button:hover,
.behind-lighting__button:focus {
	background-color: var(--behind-lighting-title-color, #1f1f1f);
	color: var(--behind-lighting-background, #f7f4ef);
	text-decoration: none;
	transform: translateY(-2px);
}

/* ==========================================================
   Tablet
   ========================================================== */

@media screen and (max-width: 1024px) {
	.behind-lighting__row {
		gap: 45px;
	}

	.behind-lighting__row--image-right.behind-lighting__row--width-large {
		grid-template-columns: minmax(380px, 58%) minmax(260px, 42%);
	}

	.behind-lighting__row--image-left.behind-lighting__row--width-large {
		grid-template-columns: minmax(260px, 42%) minmax(380px, 58%);
	}
}

/* ==========================================================
   Mobile
   ========================================================== */

@media screen and (max-width: 767px) {
	.behind-lighting {
		padding: 70px 20px;
	}

	.behind-lighting__header {
		margin-bottom: 38px;
	}

	.behind-lighting__title {
		margin-bottom: 16px;
	}

	.behind-lighting__title--medium {
		font-size: 32px;
	}

	.behind-lighting__title--large {
		font-size: 38px;
	}

	.behind-lighting__title--xlarge {
		font-size: 44px;
	}

	.behind-lighting__subtitle--small {
		font-size: 16px;
	}

	.behind-lighting__subtitle--medium {
		font-size: 18px;
	}

	.behind-lighting__subtitle--large {
		font-size: 20px;
	}

	.behind-lighting__intro-image--small,
	.behind-lighting__intro-image--medium,
	.behind-lighting__intro-image--large,
	.behind-lighting__intro-image--full {
		max-width: 100%;
	}

	.behind-lighting__rows {
		margin-top: 70px;
	}

	.behind-lighting__row,
	.behind-lighting__row--image-right.behind-lighting__row--width-small,
	.behind-lighting__row--image-right.behind-lighting__row--width-medium,
	.behind-lighting__row--image-right.behind-lighting__row--width-large,
	.behind-lighting__row--image-left.behind-lighting__row--width-small,
	.behind-lighting__row--image-left.behind-lighting__row--width-medium,
	.behind-lighting__row--image-left.behind-lighting__row--width-large {
		display: flex;
		width: 100%;
		gap: 32px;
		padding-top: 55px;
		padding-bottom: 55px;
	}

	.behind-lighting__row--mobile-image_first {
		flex-direction: column;
	}

	.behind-lighting__row--mobile-text_first {
		flex-direction: column-reverse;
	}

	.behind-lighting__row--spacing-small,
	.behind-lighting__row--spacing-medium,
	.behind-lighting__row--spacing-large {
		margin-top: 0;
	}

	.behind-lighting__row--background-cream,
	.behind-lighting__row--background-white,
	.behind-lighting__row--background-light_gray {
		padding-right: 22px;
		padding-left: 22px;
	}

	.behind-lighting__row--container-narrow,
	.behind-lighting__row--container-medium,
	.behind-lighting__row--container-wide,
	.behind-lighting__row--container-full {
		max-width: 100%;
	}

	.behind-lighting__row-content,
	.behind-lighting__row--text-narrow
	.behind-lighting__row-content,
	.behind-lighting__row--text-medium
	.behind-lighting__row-content,
	.behind-lighting__row--text-wide
	.behind-lighting__row-content {
		width: 100%;
		max-width: none;
	}

	.behind-lighting__row-figure {
		width: 100%;
	}

	.behind-lighting__row-title {
		margin-bottom: 16px;
		font-size: 30px;
	}

	.behind-lighting__row-text {
		font-size: 17px;
		line-height: 1.8;
	}

	.behind-lighting__row-image--radius-large {
		border-radius: 22px;
	}

	.behind-lighting__row-image--shadow-offset_right {
		box-shadow:
			14px 14px 0
			rgba(
				var(--behind-lighting-image-shadow-rgb, 0, 0, 0),
				0.34
			);
	}

	.behind-lighting__row-image--shadow-offset_left {
		box-shadow:
			-14px 14px 0
			rgba(
				var(--behind-lighting-image-shadow-rgb, 0, 0, 0),
				0.34
			);
	}

	.behind-lighting__ending {
		margin-top: 80px;
		padding-top: 48px;
	}

	.behind-lighting__ending--medium
	.behind-lighting__ending-text {
		font-size: 24px;
	}

	.behind-lighting__ending--large
	.behind-lighting__ending-text {
		font-size: 30px;
	}

	.behind-lighting__ending--xlarge
	.behind-lighting__ending-text {
		font-size: 36px;
	}

	.behind-lighting__button {
		width: 100%;
		min-width: 0;
	}
}