/* ══════════════════════════════════════════════════════════════
   KONI FSD — סט מודעות
   תצלום המקור: Gemini_Generated_Image_4i5mvx4i5mvx4i5m.png

   ⚠ יחידה אחת לכל המשבצות ולכל שלושת המסרים. הפריסה נקבעת
   מגיאומטריית המשבצת דרך container queries, והמסר ממחלקת --v.
   הגובה מוצהר כאן כי container-type: size דורש גובה מוגדר,
   אבל הערכים עצמם מגיעים מטוקני --ad-h-* שב-ad-rotation.css.
   זה מקור האמת היחיד לגבהים השמורים.
   ══════════════════════════════════════════════════════════════ */

.knad {
	--kn-red: #e2001a;
	--kn-red-lit: #ff3d51;
	--kn-ink: #0a0c0f;

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

/* ⚠ הספציפיות כאן אינה מקרית, בדיוק כמו אצל שאר הקישורים־שהם־
   כרטיס בתבנית: Hello Elementor מגדיר `.page-content a` במשקל
   (0,1,1), ולכן `.knad` לבדו (0,1,0) מפסיד לו.

   בלי זה כל הטקסט במשבצת שבתוך המאמר יוצא עם קו תחתון — גם
   הכותרת, גם ה-CTA וגם הלוגו. text-decoration מחלחל לצאצאים
   ואי אפשר לבטל אותו מלמטה, ולכן זו חייבת להיות הצהרה על
   העוגן עצמו. המשבצת בפס הצדדי לא נפגעת, כי היא יושבת
   בתבנית ולא בתוכן. */
.page-content a.knad,
a.knad {
	text-decoration: none;
}

/* המשבצת מרפדת את התוכן הזמני ("שטח מודעה"). יחידה אמיתית צריכה
   לגעת בקצוות — אחרת נוצר שוליים כפול והגובה השמור נשבר. */
.at-ad__slot:has(.knad) {
	padding: 0;
	background: none;
}

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

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

.knad__inner {
	display: flex;
	height: 100%;
	box-sizing: border-box;
}

/* ══ התצלום ══
   ⚠ background-image ולא <img> בכוונה: לכל פריסה גזרה משלה,
   ובחירה לפי גיאומטריית המשבצת אפשרית רק ב-CSS. srcset בוחר
   לפי רוחב הדפדפן ולא לפי רוחב המשבצת, ולכן היה נותן מסגור
   שגוי במשבצות הצרות. */
.knad__media {
	position: relative;
	flex: 1 1 auto;
	min-height: 56px; /* רצפה — שלא ייעלם כשהטקסט ארוך */
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* הצללה בגבול בין התצלום לפאנל — בלעדיה הקצה נראה גזור */
.knad__media::after {
	content: '';
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 40px rgba(10, 12, 15, .55);
}

/* ══ הפאנל ══ */
/* ⚠ הפאנל נמדד לפי התוכן והתצלום בולע את השאר (flex: 1 על
   .knad__media בכל פריסה). ההפך — תצלום בגובה אחוזים ופאנל
   גמיש — נכשל בשני הכיוונים: ב-336×280 התוכן דחף את היחידה
   11px מעבר לגובה השמור והתחתית נחתכה, וב-300×600 נפער חלל
   מת של 114px. כאן אורך הטקסט לא משנה: מה שהוא לא לוקח,
   התצלום לוקח. */
.knad__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: none;
	min-width: 0;
	box-sizing: border-box;
	background:
		radial-gradient(120% 100% at 100% 0%, rgba(226, 0, 26, .3), transparent 60%),
		var(--kn-ink);
}

/* הפס האדום התחתון — לקוח מהפס על דופן הרכב */
.knad__panel::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--kn-red), var(--kn-red-lit) 55%, transparent);
}

.knad__copy { display: block; min-width: 0; }

.knad__kicker {
	display: inline-block;
	margin: 0 0 .55em;
	padding: .32em .7em;
	direction: ltr;
	unicode-bidi: isolate;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1;
	white-space: nowrap;
	color: #fff;
	background: var(--kn-red);
	border-radius: 2px;
}

.knad__head {
	display: block;
	margin: 0;
	font-weight: 800;
	line-height: 1.13;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.knad__head em { font-style: normal; color: var(--kn-red-lit); }

.knad__sub {
	display: block;
	margin: .5em 0 0;
	line-height: 1.45;
	color: rgba(255, 255, 255, .7);
	text-wrap: pretty;
}

/* ══ תחתית ══ */
.knad__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .7em;
	margin-top: auto;
}

.knad__brand { display: block; direction: ltr; unicode-bidi: isolate; }

/* הלוגו הרשמי, בגרסה שהכיתוב בה לבן — המקור שחור ונעלם על
   הפאנל הכהה. הפרופורציה נעולה ל-aspect-ratio כדי שהמידה
   תיקבע מרוחב אחד בלבד ולא תוכל להתעוות. */
.knad__logo {
	display: block;
	aspect-ratio: 480 / 126;
	background: var(--kn-img-logo, url('img/koni-logo.png')) center / contain no-repeat;
}

.knad__tagline {
	display: block;
	white-space: nowrap; /* מחרוזת קבועה — שבירה שלה נראית כמו תקלה */
	margin-top: .45em;
	font-weight: 400;
	letter-spacing: .05em;
	line-height: 1;
	color: rgba(255, 255, 255, .5);
}

.knad__cta {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .65em 1em;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	color: #fff;
	background: var(--kn-red);
	border-radius: 999px;
	transition: background .18s ease;
}

.knad:hover .knad__cta,
.knad:focus-visible .knad__cta { background: #ff1f38; }

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

/* ══════════════════════════════════════════════════════════════
   פריסות — נבחרות מגיאומטריית המשבצת
   ══════════════════════════════════════════════════════════════ */

/* ── טור: הפס הצדדי בדסקטופ (300×600) ── */
@container (min-height: 400px) {
	.knad__inner  { flex-direction: column; }
	/* התצלום כאן גבוה יחסית (כ-300×330) — הגזרה המרובעת מתאימה */
	.knad__media  { background-image: var(--kn-img-box, url('img/koni-box.jpg')); }
	.knad__panel  { padding: 20px; }

	/* ⚠ התחתית נערמת ולא נפרשת לרוחב. ב-260px פנויים המילולוגו,
	   הסלוגן וה-CTA לא נכנסים בשורה אחת — הסלוגן נשבר לשתיים
	   וה-CTA נדחס. */
	.knad__foot {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		margin-top: 0;
		padding-top: 18px;
	}

	.knad__cta { justify-content: center; }

	.knad__kicker  { font-size: 10px; }
	.knad__head    { font-size: 29px; }
	.knad__sub     { font-size: 14px; }
	.knad__logo    { width: 116px; }
	.knad__tagline { font-size: 9px; }
	.knad__cta     { font-size: 13px; }
}

/* ── רוחבי: תחתית דף הבית ותחתית מאמר במסך רחב (970×250) ── */
@container (max-height: 399px) and (min-width: 620px) {
	/* order 2 מציב את התצלום בסוף השורה — ב-RTL זה הקצה השמאלי */
	/* ⚠ המסגור מוטה שמאלה בכוונה. במרכוז, חלון התצוגה חותך את
	   הכיתוב KONI שעל דלת הרכב באמצע המילה — מותג חתוך נראה
	   כמו תקלה. בהטיה הזו הבולם האדום הוא הגיבור והכיתוב נשאר
	   מחוץ לפריים במקום להיחתך. */
	.knad__media {
		order: 2;
		width: 52%;
		height: 100%;
		background-image: var(--kn-img-wide, url('img/koni-wide.jpg'));
		background-position: 12% center;
	}

	.knad__panel {
		order: 1;
		justify-content: center;
		padding: 22px clamp(20px, 3cqw, 34px);
	}

	.knad__kicker  { font-size: 10px; }
	.knad__head    { font-size: clamp(20px, 2.7cqw, 27px); }
	.knad__sub     { font-size: clamp(12px, 1.4cqw, 14px); }
	.knad__logo    { width: 112px; }
	.knad__tagline { font-size: 9px; }
	.knad__cta     { font-size: 14px; }
	.knad__foot    { padding-top: 16px; }
}

/* ── קופסה: בתוך המאמר, אמצע דף הבית, וכל הנייד ── */
@container (max-height: 399px) and (max-width: 619px) {
	.knad__inner  { flex-direction: column; }
	/* ⚠ הגזרה הרוחבית ולא המרובעת: רצועת התצלום כאן היא תמיד
	   רחבה ונמוכה (336×118 ≈ 2.8), וגזרה מרובעת הייתה נחתכת
	   לפס צר מהמרכז שלה. גם כאן ההטיה שמאלה — הבולם בפריים. */
	.knad__media {
		background-image: var(--kn-img-wide, url('img/koni-wide.jpg'));
		background-position: 12% center;
	}

	.knad__panel  { padding: clamp(12px, 4.4cqw, 16px); }
	.knad__foot   { margin-top: 0; }

	/* הכיתוב המלא לא נכנס בשורה אחת ברוחב הזה, ושתי שורות קיקר
	   מועכות את הכותרת. נשאר "FSD" בלבד. */
	.knad__kicker-long { display: none; }

	.knad__kicker  { font-size: clamp(8px, 2.7cqw, 10px); }
	.knad__head    { font-size: clamp(16px, 5.6cqw, 20px); }
	.knad__sub     { font-size: clamp(11px, 3.5cqw, 12px); }
	.knad__logo    { width: clamp(74px, 25cqw, 92px); }
	.knad__tagline { font-size: 8px; }
	.knad__cta     { font-size: clamp(11px, 3.5cqw, 12px); padding: .6em .85em; }
	.knad__foot    { padding-top: 10px; }
}

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

/* המשבצת הנמוכה (250) */
@container (max-height: 260px) and (max-width: 619px) {
	.knad__sub { display: none; }
}

/* המשבצת הצרה (272 פנויים במסך 360) */
@container (max-width: 300px) and (max-height: 399px) {
	.knad__sub { display: none; }
}

/* הסלוגן והמילה "למצוא" נופלים אחרונים */
@container (max-width: 320px) and (max-height: 399px) {
	.knad__tagline  { display: none; }
	.knad__cta-long { display: none; }
}

/* ══ נגישות ══ */
.knad:focus-visible {
	outline: 3px solid var(--kn-red-lit);
	outline-offset: 2px;
}