/* ══════════════════════════════════════════════════════════════
   פרונט מוטורס — סדרת מודעות

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

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

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

.fmad {
	--fm-accent: #00d8ff;
	--fm-accent-deep: #0091c2;
	--fm-ink: #05080b;

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

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

.at-ad__slot:has(.fmad) {
	padding: 0;
	background: none;
}

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

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

/* ══ ארבעת התצלומים ══ */
.fmad--va { --fm-img-wide: url('img/fm-a-wide.jpg'); --fm-img-box: url('img/fm-a-box.jpg'); }
.fmad--vb { --fm-img-wide: url('img/fm-b-wide.jpg'); --fm-img-box: url('img/fm-b-box.jpg'); }
.fmad--vc { --fm-img-wide: url('img/fm-c-wide.jpg'); --fm-img-box: url('img/fm-c-box.jpg'); }
.fmad--vd { --fm-img-wide: url('img/fm-d-wide.jpg'); --fm-img-box: url('img/fm-d-box.jpg'); }

/* ══ התצלום — מלא, מתחת לכל השאר ══ */
.fmad__media {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* ההצללה שמאפשרת לקרוא טקסט מעל תצלום. הכיוון שלה מתחלף לפי
   הפריסה — מהצד הקורא במסך רחב, מלמטה במשבצת צרה. */
.fmad__scrim {
	position: absolute;
	inset: 0;
}

.fmad__laser { display: none; }

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

/* ══ המותג — האלמנט המוביל ══
   ⚠ עברית, ולכן direction: rtl. אצל KONI המילולוגו הוא שורה
   קטנה בתחתית; כאן הוא פותח את המודעה. */
.fmad__brand {
	display: block;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.02em;
}

/* הקו מתחת לשם — עד רוחב השם עצמו ולא לרוחב הפאנל */
.fmad__brand::after {
	content: '';
	display: block;
	width: 2.6em;
	height: 3px;
	margin-top: .34em;
	background: var(--fm-accent);
	box-shadow: 0 0 10px rgba(0, 216, 255, .8);
}

.fmad__where {
	display: block;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	color: rgba(255, 255, 255, .62);
}

/* ══ קריאת המכשיר ══
   מוצבת כתגית על התצלום, בפינה — לא בתוך גוש הטקסט. זו
   הפרדה מכוונת: היא שייכת למכשיר שבתמונה, לא לקופי. */
.fmad__readout {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	z-index: 2;
	display: inline-flex;
	gap: 1em;
	padding: .5em .75em;
	direction: ltr;
	unicode-bidi: isolate;
	font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
	line-height: 1;
	white-space: nowrap;
	color: #fff;
	background: rgba(5, 8, 11, .72);
	border-inline-end: 2px solid var(--fm-accent);
	backdrop-filter: blur(3px);
}

.fmad__readout span { display: inline-flex; gap: .5em; align-items: baseline; }
.fmad__readout b { font-weight: 500; color: rgba(255, 255, 255, .55); letter-spacing: .1em; }
.fmad__readout i {
	font-style: normal;
	font-weight: 700;
	color: var(--fm-accent);
	text-shadow: 0 0 9px rgba(0, 216, 255, .85);
}

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

.fmad__head em {
	font-style: normal;
	color: var(--fm-accent);
	text-shadow: 0 0 20px rgba(0, 216, 255, .5), 0 2px 14px rgba(5, 8, 11, .9);
}

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

/* ══ ה-CTA ══
   ⚠ מלבן עם פינה קטומה, לא גלולה. הגלולה היא הצורה של KONI. */
.fmad__cta {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .7em 1.1em;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	/* ⚠ טקסט כהה ולא לבן: לבן על ציאן נותן יחס ניגודיות של כ-1.6:1
	   ונופל בכל תקן. כהה נותן כ-11:1. */
	color: #04212b;
	background: var(--fm-accent);
	clip-path: polygon(.7em 0, 100% 0, 100% 100%, 0 100%, 0 .7em);
	transition: background .18s ease;
}

.fmad:hover .fmad__cta,
.fmad:focus-visible .fmad__cta { background: #6ee9ff; }

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

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

/* ── רוחבי: תחתית, ובתוך המאמר בדסקטופ ──
   הצללה מהצד הקורא, טקסט ממורכז אנכית. */
@container (max-height: 399px) and (min-width: 620px) {
	.fmad__media { background-image: var(--fm-img-wide); background-position: 30% center; }

	.fmad__scrim {
		background: linear-gradient(to left,
			rgba(5, 8, 11, .97) 0%,
			rgba(5, 8, 11, .93) 34%,
			rgba(5, 8, 11, .55) 56%,
			rgba(5, 8, 11, .05) 76%);
	}

	.fmad__body {
		justify-content: center;
		width: 62%;
		padding: 20px clamp(20px, 3cqw, 34px) 20px 0;
	}

	.fmad__readout { font-size: 10px; }
	.fmad__brand   { font-size: clamp(24px, 3.2cqw, 32px); }
	.fmad__where   { font-size: 11px; margin-top: .5em; }
	.fmad__head    { font-size: clamp(19px, 2.4cqw, 24px); margin-top: .7em; }
	.fmad__sub     { font-size: clamp(12px, 1.35cqw, 13.5px); max-width: 44ch; }
	.fmad__cta     { font-size: 13.5px; align-self: flex-start; margin-top: 1.1em; }
}

/* ── טור ורצועה: הפס הצדדי, אמצע דף הבית, וכל הנייד ──
   הצללה מלמטה, טקסט עוגן לתחתית. */
@container (max-height: 399px) and (max-width: 619px),
           (min-height: 400px) {
	.fmad__scrim {
		background: linear-gradient(to top,
			rgba(5, 8, 11, .97) 0%,
			rgba(5, 8, 11, .92) 42%,
			rgba(5, 8, 11, .5) 68%,
			rgba(5, 8, 11, .05) 92%);
	}

	.fmad__body { justify-content: flex-end; }
	.fmad__cta  { align-self: stretch; justify-content: center; }
}

/* טור — הפס הצדדי בדסקטופ (300×600) */
@container (min-height: 400px) {
	.fmad__media { background-image: var(--fm-img-box); }
	.fmad__body  { padding: 20px; }

	.fmad__readout { font-size: 10px; }
	.fmad__brand   { font-size: 30px; }
	.fmad__where   { font-size: 11px; margin-top: .55em; }
	.fmad__head    { font-size: 23px; margin-top: .8em; }
	.fmad__sub     { font-size: 13px; }
	.fmad__cta     { font-size: 13px; margin-top: 1.1em; }
}

/* רצועה — אמצע דף הבית וכל הנייד */
@container (max-height: 399px) and (max-width: 619px) {
	.fmad__media { background-image: var(--fm-img-wide); background-position: 30% center; }
	.fmad__body  { padding: clamp(12px, 4.4cqw, 16px); }

	/* ⚠ "שריינו תור בראשון לציון" לצד השם לא נכנס ברוחב הזה,
	   והמיקום ממילא מופיע מתחת לשם. */
	.fmad__cta-long { display: none; }

	.fmad__readout { font-size: clamp(8px, 2.5cqw, 9.5px); gap: .8em; }
	.fmad__brand   { font-size: clamp(19px, 6.2cqw, 24px); }
	.fmad__where   { font-size: clamp(9px, 2.9cqw, 11px); margin-top: .5em; }
	.fmad__head    { font-size: clamp(15px, 4.8cqw, 18px); margin-top: .65em; }
	.fmad__sub     { font-size: clamp(11px, 3.4cqw, 12px); }
	.fmad__cta     { font-size: clamp(11px, 3.4cqw, 12.5px); margin-top: .8em; }
}

/* ── קיצורים לפי מקום פנוי ── */

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

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

/* במשבצת הצרה ביותר נופלים גם הקריאה והמיקום */
@container (max-width: 320px) and (max-height: 399px) {
	.fmad__readout { display: none; }
	.fmad__where   { display: none; }
}

/* ══ נגישות ══ */
.fmad:focus-visible {
	outline: 3px solid var(--fm-accent);
	outline-offset: 2px;
}