/* ==========================================================================
   סקשני תוכן לעמוד מוצר — [gc_model_content]
   שפה עיצובית לפי sihoo.com/products/doro-c300-pro-v2:
   - כרטיסים על אריחים אפורים בהירים (#f4f4f4), פינות ישרות (בקשת בעל האתר)
   - כל תמונה נעולה ליחס גובה-רוחב אחיד עם object-fit: cover -> אחידות מלאה
   - כותרות סקשן גדולות, ממורכזות, letter-spacing שלילי עדין
   - טקסט משני #606875, ריווח נדיב
   ========================================================================== */

.gc-mc {
	--gc-bg-tile: #f4f4f4;
	--gc-text: #2a2b2a;
	--gc-text-soft: #606875;
	--gc-radius: 0;
	--gc-gap: 20px;

	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 16px;
	color: var(--gc-text);
	text-align: start;
}

.gc-mc--placeholder {
	padding: 24px;
	border: 1px dashed #bbb;
	border-radius: 0;
	text-align: center;
	color: #777;
	font-size: 14px;
}

/* ---- סקשן ---- */

.gc-mc__section {
	padding-block: 44px;
	content-visibility: auto;
	contain-intrinsic-size: auto 640px;
}

.gc-mc__title {
	margin: 0 0 32px;
	font-size: clamp(26px, 3.2vw, 42px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-align: center;
	color: var(--gc-text);
}

/* ---- שורת כרטיסיות: כל מספר, תמיד מלוא הרוחב, חלוקה שווה ---- */

.gc-cards {
	display: flex;
	gap: var(--gc-gap);
	align-items: stretch;
}

/* ~ ולא + כי פס התקדמות של קרוסלה נדחף בין יחידות; המרווח חל גם על
   שורות בתוך יחידה וגם בין היחידות עצמן */
.gc-cards ~ .gc-cards,
.gc-row-unit ~ .gc-row-unit {
	margin-top: var(--gc-gap);
}

/* פס התקדמות לקרוסלת מובייל — מוסתר בדסקטופ; JS מדליק is-active כשיש גלילה */
.gc-carousel-bar {
	display: none;
	position: relative;
	width: min(220px, 60%);
	height: 3px;
	margin: 14px auto 0;
	background: #e2e2e2;
	overflow: hidden;
}

.gc-carousel-bar span {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	height: 100%;
	width: 30%;
	background: var(--gc-text);
}

/* ---- כרטיס = אריח ---- */

.gc-card {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--gc-bg-tile);
	border-radius: var(--gc-radius);
	overflow: hidden;
}

/* התמונה נעולה ליחס אחיד לפי מספר הכרטיסיות בשורה — זה מה שמייצר את האחידות */

.gc-card__media {
	width: 100%;
	background: var(--gc-bg-tile);
}

.gc-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.gc-cards--n1 .gc-card__media img { aspect-ratio: 12 / 5; }
.gc-cards--n2 .gc-card__media img { aspect-ratio: 16 / 10; }
.gc-cards--n3 .gc-card__media img { aspect-ratio: 4 / 3; }

.gc-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px 26px;
}

.gc-card__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--gc-text);
}

.gc-card__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--gc-text-soft);
}

/* ---- בלוק עליון: זוגות תמונה + טקסט ---- */

.gc-card--icon {
	text-align: center;
}

.gc-card--icon img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.gc-card__label {
	margin: 0;
	padding: 14px 12px 18px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--gc-text);
}

/* ---- מפרט: שלושה אריחים שווים כמו אצל Sihoo ----
   [סקירה כללית] [שרטוט + מידות] [שרטוט + מדריכים] */

.gc-spec-row {
	display: flex;
	gap: var(--gc-gap);
	align-items: stretch;
}

.gc-card--spec {
	flex: 1 1 0;
}

.gc-card--spec .gc-card__body {
	padding: 26px 28px 30px;
	gap: 12px;
}

/* שרטוטי מידות — contain בלי חיתוך; multiply מעלים רקע לבן של הקובץ
   כך שהשרטוט יושב ישירות על אריח האפור, בדיוק כמו אצל Sihoo */

.gc-spec-diagram {
	padding: 0;
}

.gc-spec-diagram img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* טקסט מפרט: שורות "תווית: ערך" עם תווית מודגשת */

.gc-spec-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.9;
	color: var(--gc-text-soft);
}

.gc-spec-text strong {
	color: var(--gc-text);
	font-weight: 600;
}

/* קישורי מדריכים — קישורי טקסט עם קו תחתון, כמו במקור */

.gc-guide-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.gc-guide-links a {
	color: var(--gc-text);
	font-size: 15px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color 0.15s;
}

.gc-guide-links a:hover,
.gc-guide-links a:focus {
	color: var(--gc-text-soft);
}

/* ---- רספונסיביות (נקודות שבירה של Elementor) ---- */

@media (max-width: 1024px) {
	.gc-cards,
	.gc-spec-row {
		flex-wrap: wrap;
	}

	/* שתי כרטיסיות בשורה בטאבלט */
	.gc-card {
		flex: 1 1 calc(50% - var(--gc-gap) / 2);
	}
}

@media (max-width: 767px) {
	.gc-mc__section {
		padding-block: 32px;
	}

	/* כרטיסיית תוכן — אחת בשורה במובייל */
	.gc-card {
		flex: 1 1 100%;
	}

	/* יחידת קרוסלה (לפי המתג באדמין): היחידה עצמה נגללת, הכרטיס ~85% רוחב
	   כך שהבא מציץ מהצד. השורות שבתוכה "שקופות" (display: contents) כדי
	   שכרטיסיות משורות שאוחדו יזרמו ברצף גלילה אחד. */
	.gc-row-unit--carousel {
		display: flex;
		gap: var(--gc-gap);
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.gc-row-unit--carousel::-webkit-scrollbar {
		display: none;
	}

	.gc-row-unit--carousel .gc-cards {
		display: contents;
	}

	.gc-row-unit--carousel .gc-card {
		flex: 0 0 85%;
		scroll-snap-align: start;
	}

	/* תמונות הכרטיסיות נמוכות בכ-30% במובייל */
	.gc-row-unit--carousel .gc-card__media img {
		aspect-ratio: 10 / 7;
	}

	/* תקרת גובה גם לשורות שאינן קרוסלה */
	.gc-card__media img {
		max-height: 64vw;
	}

	.gc-carousel-bar.is-active {
		display: block;
	}

	/* נקודות המכירה העליונות נשארות שתיים בשורה גם במובייל */
	.gc-card--icon {
		flex: 1 1 calc(50% - var(--gc-gap) / 2);
	}

	.gc-card--icon .gc-card__label {
		font-size: 13px;
	}

	.gc-card__body {
		padding: 16px 18px 22px;
	}
}