/**
 * Banner Block Styles
 * Banner block styles – per Figma (node 209-2557)
 * RTL, logical properties, accessibility
 *
 * @package Experis_Academy
 */

/* ========================================
   LAYOUT
   ======================================== */

.banner {
	position: relative;
	width: 100%;
	direction: rtl;
	margin-bottom: 16px;
}

.banner__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 32px 40px;
	background: var(--color-banner-bg, #1e2035);
	border-radius: 16px;
	text-align: right;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

.banner__title {
	font-family: var(--font-family-hebrew);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	color: var(--color-violet-hover-start);
	margin: 0 0 16px 0;
}

.banner__text {
	font-family: var(--font-family-hebrew);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-normal);
	line-height: 1.5;
	color: var(--color-banner-text, #e0e0e0);
	margin: 0;
}

.banner__text p:first-child {
	margin-block-start: 0;
}

.banner__text p:last-child {
	margin-block-end: 0;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
	.banner__inner {
		padding: 24px 20px;
	}

	.banner__title {
		font-size: var(--font-size-xl);
		margin-bottom: 12px;
	}

	.banner__text {
		font-size: var(--font-size-sm);
	}
}

/* ========================================
   REDUCED MOTION
   ======================================== */

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