/* =========================================================================
   סולמות – פרוייקטים
   פריסת שורות זיגזג + פופאפ "קרא עוד".
   טיפוגרפיה: כותרת – Mandatory | שאר הטקסט – Simpler / SimplerPro.
   ========================================================================= */

.sp-projects {
	--sp-muted:    #4a4a4a;
	--sp-radius:   6px;
	--sp-img-h:    406px;   /* גובה תמונה – דסקטופ */
	--sp-section:  140px;   /* רווח בין סקשנים – דסקטופ */
	margin: 0 auto;
	direction: rtl;
	text-align: right;
}
.sp-card__img, .sp-card__media img {
      border-radius: 0px !important;
}

.sp-card__image-description {
	margin-top: 8px;
	padding: 0 4px;
	font-size: 12px;
	line-height: 1.5;
	color: #777;
	text-align: right;
}

.sp-card__image-description p {
	margin: 0;
}

.sp-card__media {
      border-radius: 0 !important;
}
/* ----- כרטיס פרוייקט ----- */
.sp-card {
	display: flex;
	align-items: center;
	gap: 64px;
	margin-bottom: var(--sp-section);
}
.sp-card:last-child { margin-bottom: 0; }

/* זיגזג: בכרטיסים זוגיים התמונה עוברת לצד השני */
.sp-card:nth-child(even) {
	flex-direction: row-reverse;
}

.sp-card--no-media .sp-card__body {
	flex: 1 1 100%;
	max-width: 760px;
	margin: 0 auto;
}

.sp-card__media,
.sp-card__body {
	flex: 1 1 50%;
	min-width: 0;
}

.sp-card__media {
	overflow: hidden;
	border-radius: var(--sp-radius);
}
.sp-card__img,
.sp-card__media img {
	display: block;
	width: 100%;
	height: var(--sp-img-h);
	object-fit: cover;
	border-radius: var(--sp-radius);
}

/* ----- כותרת ראשית ----- */
.sp-card__title {
	margin-bottom: 6px !important;
      margin-right: -10px;
      font-variation-settings: "wght" 500, "wdth" 20;
    font-weight: 100 !important;
	font-family: "Mandatory", Sans-serif;
	font-size: 80px;
	font-weight: 400;
	letter-spacing: 12px;
	line-height: 1.1;
	color: #000000;
}

/* ----- שם העיר ----- */
.sp-card__city {
	margin-bottom: .7em;
	font-family: "Simpler", Sans-serif;
	font-size: 30px;
	font-weight: 600;
	color: #000;
}

/* ----- אנשי צוות / תת כותרת ----- */
.sp-card__staff {
	margin-bottom: .9em;
	font-family: "Simpler", Sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.55;
	color: #000;
}
.sp-card__staff p { margin: 0; }

/* ----- טקסט רץ ----- */
.sp-card__desc {
	font-family: "Simpler", Sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.7;
	color: var(--sp-muted);
}
.sp-card__desc p { margin: 0 0 .8em; }
.sp-card__desc p:last-child { margin-bottom: 0; }

/* מצב מקוצר – נקבע ע"י ה-JS (max-height ל-4 שורות) */
.sp-card__desc.is-clamped {
	overflow: hidden;
	position: relative;
}

/* גיבוי במקרה שה-JS לא נטען */
.sp-card__desc:not(.sp-measured) {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ----- כפתור "קרא עוד" ----- */
.sp-card__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 14px;
	padding: 0;
	background: none!important;
	border: 0;
	font-family: "Simpler", Sans-serif;
	font-weight: bold;
	font-size: 18px;
	color: #000!important;
	cursor: pointer;
}
.sp-card__more[hidden] { display: none; }
.sp-card__more span { font-size: 1.2em; line-height: 1; }
.sp-card__more:hover { opacity: .65; }

/* =========================================================================
   פופאפ
   ========================================================================= */
.sp-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 20px;
	direction: rtl;
}
.sp-modal[hidden] { display: none; }

.sp-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .62);
}

.sp-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 1120px;
	max-height: 88vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
	-webkit-overflow-scrolling: touch;
}

/* תוכן הפופאפ – שני חצאים: טקסט (ימין) ותמונה (שמאל) */
.sp-modal__content {
	display: flex;
	align-items: flex-start;
	gap: 48px;
	padding: 56px 64px 60px;
}

/* חצי טקסט */
.sp-modal__text {
	flex: 1 1 50%;
	min-width: 0;
}

/* חצי תמונה – נשאר במקום בזמן גלילת הטקסט */
.sp-modal__media {
	flex: 0 0 46%;
	position: sticky;
	top: 56px;
}

/* כשאין תמונה – הטקסט תופס את כל הרוחב */
.sp-modal__content--no-media .sp-modal__text {
	flex: 1 1 100%;
}

.sp-modal__close {
	position: absolute;
	top: 18px;
	left: 18px;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	font-size: 30px;
	line-height: 1;
	color: #000;
	cursor: pointer;
	z-index: 2;
}
.sp-modal__close:hover { opacity: .55; }

.sp-modal__img {
	display: block;
	width: 100%;
	height: 406px;
	border-radius: 0px;
}

.sp-modal__title {
	margin: 0 0 .25em;
      font-variation-settings: "wght" 500, "wdth" 20;
    font-weight: 100 !important;
	font-family: "Mandatory", Sans-serif;
	font-size: 80px;
	font-weight: 400;
	letter-spacing: 12px;
	line-height: 1.1;
	color: #000;
}
.sp-modal__city {
	margin-bottom: .7em;
	font-family: "Simpler", Sans-serif;
	font-size: 30px;
	font-weight: 400;
	color: #000;
}
.sp-modal__staff {
	margin-bottom: .9em;
	font-family: "Simpler", Sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.55;
	color: #000;
}
.sp-modal__staff p { margin: 0; }
.sp-modal__desc {
	font-family: "Simpler", Sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.85;
	color: var(--sp-muted);
}
.sp-modal__desc p { margin: 0 0 1em; }
.sp-modal__desc p:last-child { margin-bottom: 0; }

.sp-modal-open {
	overflow: hidden;
}

@media (min-width: 900px) {
.sp-card__img, .sp-card__media img {
    display: block;
	        object-fit: cover;
    width: 100%;
    height: 406px !important;
}
  
  .sp-modal__title {
      margin-right: -10px!important;
  }

}

    .sp-modal__img {
             object-fit: cover;
}

/* =========================================================================
   מובייל
   ========================================================================= */
@media (max-width: 900px) {
	.sp-projects {
		--sp-img-h:   175px;
		--sp-section: 60px;
	}

  .sp-card__title {
    margin-bottom: 6px !important;
    margin-right: -5px!important;
            padding-bottom: 4px;
  }

	.sp-card,
	.sp-card:nth-child(even) {
		flex-direction: column;
		gap: 24px;
	}
	.sp-card__media,
	.sp-card__body { flex: 1 1 100%; width: 100%; }
.sp-modal__title {
      margin-right: -5px!important;
  }
	/* כותרת ראשית – מובייל */
	.sp-card__title,
	.sp-modal__title {
		font-size: 60px;
		font-weight: 400;
		line-height: 55px;
		letter-spacing: 6px;
		text-align: right;
	}

	/* עיר – מובייל */
	.sp-card__city,
	.sp-modal__city {
		font-family: "SimplerPro", "Simpler", Sans-serif;
		font-weight: 600;
		font-size: 22px;
		line-height: 22px;
		letter-spacing: 0;
		text-align: right;
	}

	/* תת כותרת / צוות – מובייל */
	.sp-card__staff,
	.sp-modal__staff {
		font-weight: 400;
		font-size: 18px;
		line-height: 28px;
		text-align: right;
	}

  .sp-card__img, .sp-card__media img {
    display: block;
    width: 100%;
    height: 200px !important;
  }

	/* טקסט רץ – מובייל */
	.sp-card__desc,
	.sp-modal__desc {
		font-weight: 200;
		line-height: 28px;
		letter-spacing: .3px;
		text-align: right;
	}
  
  .sp-modal__img {
	display: block;
	width: 100%;
	height: 107px!important;
  }

	/* פופאפ – מובייל: עמודה אחת, ללא חצאים */
	.sp-modal__content {
		flex-direction: column;
		padding: 54px 24px 36px;
		gap: 22px;
	}
	.sp-modal__media {
		position: static;
		flex: 1 1 auto;
		width: 100%;
	}
}