/* ══════════════════════════════════════════════════════════════
   מערכת הפרסום — מכל הרוטציה, גבהים שמורים, ומודעת הבית
   ══════════════════════════════════════════════════════════════ */

/* ══ הגבהים השמורים — מקור אמת אחד ══
   ⚠ עד עכשיו הערכים האלה הופיעו בשלושה קבצים נפרדים
   (‏style.css, koni-fsd.css, fm.css), כי container-type: size
   דורש גובה מוגדר בכל קריאייטיב. שינוי באחד ולא באחרים היה
   שובר את בחירת הפריסה בלי שום שגיאה. מכאן והלאה כולם
   צורכים את המשתנים האלה.

   סדר הטעינה לא משנה: משתני CSS על :root נפתרים בזמן חישוב
   הערך, לא לפי סדר הגיליונות. */
:root {
	--ad-h-inline: 280px;
	--ad-h-end: 250px;
	--ad-h-rail: 600px;
	--ad-h-rail-narrow: 280px;
}

/* ══ מכל הרוטציה ══
   ⚠ אין כאן min-height בכוונה. הבורר סינכרוני ורץ מיד אחרי
   המכל, כך שהבחירה נופלת לפני הציור ואין קפיצה. כשאין JS
   המשבצת פשוט לא תופסת מקום — וזה המצב הנכון: עדיף בלי
   מודעה מאשר חור שמור וריק. */
.at-rot { display: block; }

.at-rot__opt[hidden] { display: none; }

/* ⚠ הפריצה לרוחב מלא בנייד עברה מ-.at-ad--inline אל המכל, כי
   עכשיו הוא הילד הישיר של גוף המאמר. הכלל המקביל ב-style.css
   הפך ללא־רלוונטי ואפשר להסיר אותו. */
@media (max-width: 60rem) {
	.is-article .at-article__body > .at-rot--inline {
		margin-inline: calc(var(--sheet-pad) * -1);
	}
}

/* ══════════════════════════════════════════════════════════════
   מודעת הבית
   ⚠ מסומנת "מבית GripLab" ולא "פרסומת", ולובשת את הצהוב של
   האתר ולא צבע של מפרסם. היא ממלאת את המשבצת השלישית במאמר,
   שאין לה מפרסם שלישי — וחייבת להיקרא מיד כתוכן של הבית.
   ══════════════════════════════════════════════════════════════ */

.hsad {
	container-type: size;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	color: var(--text, #e8ecf1);
	background:
		radial-gradient(120% 100% at 100% 0%, rgba(245, 197, 24, .12), transparent 62%),
		#0d1014;
}

/* אותה בעיית ספציפיות כמו אצל המפרסמים: Hello Elementor מגדיר
   `.page-content a` במשקל (0,1,1). */
.page-content a.hsad,
a.hsad {
	text-decoration: none;
}

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

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

.hsad::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--accent, #f5c518), transparent 70%);
}

.hsad__kicker {
	display: inline-block;
	align-self: flex-start;
	margin-bottom: .7em;
	padding: .3em .65em;
	font-family: var(--font-mono, ui-monospace, Consolas, monospace);
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1;
	color: #0d1014;
	background: var(--accent, #f5c518);
	border-radius: 2px;
}

.hsad__head {
	display: block;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.hsad__sub {
	display: block;
	margin-top: .55em;
	line-height: 1.45;
	color: var(--text-muted, rgba(232, 236, 241, .68));
	text-wrap: pretty;
}

.hsad__cta {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: .4em;
	margin-top: 1.1em;
	padding-bottom: .25em;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	color: var(--accent, #f5c518);
	border-bottom: 2px solid currentColor;
	transition: gap .18s ease;
}

.hsad:hover .hsad__cta { gap: .75em; }

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

/* ── פריסות ──
   אין תצלום, ולכן החלוקה פשוטה: מרכוז אנכי בכל המידות ורק
   הטיפוגרפיה משתנה. */

@container (min-height: 400px) {
	.hsad { padding: 24px 20px; }
	.hsad__kicker { font-size: 10px; }
	.hsad__head   { font-size: 27px; }
	.hsad__sub    { font-size: 14px; }
	.hsad__cta    { font-size: 14px; }
}

@container (max-height: 399px) and (min-width: 620px) {
	.hsad { padding: 24px clamp(20px, 3cqw, 40px); }
	.hsad__kicker { font-size: 10px; }
	.hsad__head   { font-size: clamp(22px, 2.9cqw, 30px); }
	.hsad__sub    { font-size: clamp(13px, 1.5cqw, 15px); max-width: 62ch; }
	.hsad__cta    { font-size: 15px; }
}

@container (max-height: 399px) and (max-width: 619px) {
	.hsad { padding: clamp(14px, 5cqw, 20px); }
	.hsad__kicker { font-size: clamp(8px, 2.7cqw, 10px); }
	.hsad__head   { font-size: clamp(17px, 6cqw, 22px); }
	.hsad__sub    { font-size: clamp(12px, 3.6cqw, 13px); }
	.hsad__cta    { font-size: clamp(12px, 3.6cqw, 13px); }
}

@container (max-height: 260px) and (max-width: 619px) {
	.hsad__sub { display: none; }
}

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

.hsad:focus-visible {
	outline: 3px solid var(--accent, #f5c518);
	outline-offset: 2px;
}