/**
 * באנר יום ניסיון לדף החוגים.
 *
 * העיצוב נגזר מדף החוגים עצמו (post-102.css):
 *   פונט   "Assistant"  – הפונט הדומיננטי בדף
 *   ורוד   #FF1584      – צבע הפס שמתחת לבאנר וכפתורי האתר
 *   סגול   #352382      – צבע הכותרות בדף
 * הכרטיס בגוון ורוד רך ולא בוורוד מלא, כדי שלא ייבלע בפס הוורוד שמיד אחריו.
 */

.bnb-ban {
	font-family: "Assistant", sans-serif;
	direction: rtl;
	text-align: right;
}

.bnb-ban__inner {
	display: flex;
	align-items: center;
	gap: 22px;
	background: #FFF2F8;
	border: 2px solid #FF1584;
	border-radius: 16px;
	padding: 20px 26px;
}

/* --- הסמל --- */

.bnb-ban__mark {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #FF1584;
	color: #fff;
}

.bnb-ban__mark svg {
	width: 27px;
	height: 27px;
	display: block;
}

/* --- הטקסט --- */

.bnb-ban__body {
	flex: 1 1 auto;
	min-width: 0;
}

.bnb-ban__title {
	margin: 0 0 4px;
	color: #352382;
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 800;
	line-height: 1.25;
}

.bnb-ban__text {
	margin: 0;
	color: #000;
	font-size: clamp(16px, 1.6vw, 19px);
	font-weight: 400;
	line-height: 1.45;
}

/* --- הכפתור --- */

.bnb-ban__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #FF1584;
	color: #fff;
	font-family: inherit;
	font-size: clamp(16px, 1.6vw, 19px);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	padding: 14px 28px;
	border-radius: 999px;
	transition: background-color .18s ease, transform .18s ease;
}

.bnb-ban__cta:hover,
.bnb-ban__cta:focus {
	background: #E00070;
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

.bnb-ban__cta:focus-visible {
	outline: 3px solid #352382;
	outline-offset: 3px;
}

.bnb-ban__cta svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

/* --- מובייל --- */

@media (max-width: 780px) {
	/* הסמל נשאר לצד הטקסט, רק הכפתור יורד לשורה מלאה */
	.bnb-ban__inner {
		flex-wrap: wrap;
		gap: 14px 16px;
		padding: 18px 20px;
	}

	.bnb-ban__mark {
		width: 44px;
		height: 44px;
	}

	.bnb-ban__mark svg {
		width: 23px;
		height: 23px;
	}

	.bnb-ban__body {
		flex: 1 1 60%;
	}

	.bnb-ban__cta {
		flex: 1 1 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bnb-ban__cta {
		transition: none;
	}

	.bnb-ban__cta:hover,
	.bnb-ban__cta:focus {
		transform: none;
	}
}