/* ══════════════════════════════════════════════════════════════
   GripLab — מודעות "השטח הזה פנוי"

   מוכרות את שטח הפרסום עצמו. שני מסרים:
   `empty` — משבצת ריקה מוצהרת, בלי תצלום. הרקע הוא אותו קו
     אלכסוני ששימש את החלופה הזמנית "שטח מודעה", כדי שהיא
     תיקרא מיד כמקום פנוי ולא כמודעה של מישהו.
   `photo` — תצלום מהאתר, שאומר מי הקהל שקונים כאן.

   ⚠ צבע המבטא הוא הזהב של הלוגו — לא האדום של KONI ולא הציאן
   של פרונט מוטורס. זו מודעה של הבית וצריכה להיקרא ככזו.

   ⚠ אלה `span` ולא `a` כל עוד אין כתובת יעד. אין כאן שום כלל
   שמניח עוגן, כדי שהמעבר ל-`a` בעתיד לא ידרוש שינוי בגיליון.
   ══════════════════════════════════════════════════════════════ */

.glad {
	--gl-gold: #f5cf45;
	--gl-ink: #0b0d10;

	container-type: size;
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
	color: #fff;
	background: var(--gl-ink);
	font-family: 'Heebo', 'Segoe UI', 'Arial Hebrew', Arial, sans-serif;
}

/* אותה בעיית ספציפיות כמו אצל המפרסמים, למקרה שיהפוך לעוגן */
.page-content a.glad,
a.glad { text-decoration: none; }

.glad--inline { height: var(--ad-h-inline, 280px); }
.glad--end    { height: var(--ad-h-end, 250px); }
.glad--rail   { height: var(--ad-h-rail, 600px); }

@media (max-width: 68rem) {
	.glad--rail { height: var(--ad-h-rail-narrow, 280px); }
}

/* ══ הווריאנט הריק ══ */
.glad--empty {
	background:
		repeating-linear-gradient(-45deg,
			rgba(245, 207, 69, .05) 0 10px, transparent 10px 20px),
		var(--gl-ink);
}

/* המסגרת המקווקוות — הסימן החזותי ל"פנוי" */
.glad--empty .glad__frame {
	position: absolute;
	inset: 10px;
	border: 2px dashed rgba(245, 207, 69, .45);
	border-radius: 4px;
	pointer-events: none;
}

/* ══ הווריאנט עם התצלום ══ */
.glad__media {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.glad--empty .glad__media,
.glad--photo .glad__frame { display: none; }

.glad__scrim { position: absolute; inset: 0; }

/* ══ גוש הטקסט ══ */
.glad__body {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	min-width: 0;
}

/* ⚠ הלוגו נטען מקובץ נפרד שבו הצבעים צרובים. המקור משתמש
   ב-currentColor וב-var(--logo-accent), ושניהם לא מגיעים
   לתוך SVG שנטען כ-background-image — הכיתוב היה יוצא שחור
   על רקע כהה. */
.glad__logo {
	display: block;
	aspect-ratio: 2595 / 657;
	background: url('img/griplab-logo-light.svg') center / contain no-repeat;
}

.glad__head {
	display: block;
	margin: 0;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.01em;
	text-wrap: balance;
	text-shadow: 0 2px 14px rgba(11, 13, 16, .9);
}

.glad__head em { font-style: normal; color: var(--gl-gold); }

.glad__sub {
	display: block;
	margin: .5em 0 0;
	line-height: 1.45;
	color: rgba(255, 255, 255, .72);
	text-wrap: pretty;
	text-shadow: 0 2px 12px rgba(11, 13, 16, .95);
}

/* ══ ה-CTA ══
   ⚠ כל עוד אין כתובת, זו תווית ולא כפתור. לכן אין ריחוף ואין
   סמן יד — כפתור שנראה לחיץ ולא עושה כלום גרוע ממודעה בלי
   כפתור בכלל. */
.glad__cta {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	align-self: flex-start;
	padding: .68em 1.05em;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	color: var(--gl-ink);
	background: var(--gl-gold);
	border-radius: 3px;
}

.glad__cta svg {
	width: .9em;
	height: .9em;
	transform: scaleX(-1); /* חץ פונה שמאלה ב-RTL */
}

a.glad:hover .glad__cta,
a.glad:focus-visible .glad__cta { background: #ffe27a; }

/* ══════════════════════════════════════════════════════════════
   פריסות
   ══════════════════════════════════════════════════════════════ */

/* ── רוחבי ── */
@container (max-height: 399px) and (min-width: 620px) {
	.glad--photo .glad__media { background-image: url('img/gl-wide.jpg'); }
	.glad--photo .glad__scrim {
		background: linear-gradient(to left,
			rgba(11, 13, 16, .96) 0%, rgba(11, 13, 16, .9) 38%,
			rgba(11, 13, 16, .5) 60%, rgba(11, 13, 16, .05) 82%);
	}

	.glad__body {
		justify-content: center;
		width: 64%;
		padding: 22px clamp(20px, 3cqw, 36px) 22px 0;
	}

	.glad__logo { width: clamp(128px, 15cqw, 168px); }
	.glad__head { font-size: clamp(19px, 2.4cqw, 25px); margin-top: .8em; }
	.glad__sub  { font-size: clamp(12px, 1.35cqw, 13.5px); max-width: 48ch; }
	.glad__cta  { font-size: 13.5px; margin-top: 1.1em; }
}

/* ── טור: הפס הצדדי בדסקטופ ── */
@container (min-height: 400px) {
	.glad--photo .glad__media { background-image: url('img/gl-box.jpg'); }
	.glad--photo .glad__scrim {
		background: linear-gradient(to top,
			rgba(11, 13, 16, .97) 0%, rgba(11, 13, 16, .9) 44%,
			rgba(11, 13, 16, .45) 70%, rgba(11, 13, 16, .05) 94%);
	}

	.glad__body { justify-content: flex-end; padding: 22px; }
	.glad__cta  { align-self: stretch; justify-content: center; }

	.glad__logo { width: 150px; }
	.glad__head { font-size: 24px; margin-top: .85em; }
	.glad__sub  { font-size: 13.5px; }
	.glad__cta  { font-size: 13px; margin-top: 1.1em; }
}

/* ── רצועה: אמצע דף הבית וכל הנייד ── */
@container (max-height: 399px) and (max-width: 619px) {
	.glad--photo .glad__media { background-image: url('img/gl-wide.jpg'); }
	.glad--photo .glad__scrim {
		background: linear-gradient(to top,
			rgba(11, 13, 16, .97) 0%, rgba(11, 13, 16, .9) 46%,
			rgba(11, 13, 16, .45) 72%, rgba(11, 13, 16, .05) 95%);
	}

	.glad__body { justify-content: flex-end; padding: clamp(13px, 4.6cqw, 18px); }
	.glad__cta  { align-self: stretch; justify-content: center; }

	.glad__logo { width: clamp(96px, 32cqw, 124px); }
	.glad__head { font-size: clamp(15px, 4.9cqw, 18px); margin-top: .7em; }
	.glad__sub  { font-size: clamp(11px, 3.4cqw, 12px); }
	.glad__cta  { font-size: clamp(11px, 3.4cqw, 12.5px); margin-top: .8em; }
}

/* ── קיצורים לפי מקום פנוי ── */
@container (max-height: 260px) and (max-width: 619px) {
	.glad__sub { display: none; }
}

@container (max-width: 300px) and (max-height: 399px) {
	.glad__sub { display: none; }
}