/* =====================================================
   HERO BANNER
   ===================================================== */

.hero-banner-wrapper {
	margin: 0 calc(5% + 20px);

	@media (max-width: 768px) {
		margin: 0 16px;
	}
}

.hero-banner {
	position: relative;
	width: 100%;
	min-height: 520px;
	overflow: hidden;
	display: flex;
	align-items: center;
	background-color: #f0f0f3;
	border-radius: 16px;

	/* ─── Decorative background image (large "A" letter) ─── */
	& .hero-banner__deco {
		position: absolute;
		position-anchor: --hero-content;
		top: 0;
		bottom: 0;
		right: anchor(70%);
		/* translate: -50% 0; */
		width: anchor-size(width);
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;
		overflow: visible;
		opacity: 0.7;

		& img {
			width: auto;
			height: 120%;
			max-width: none;
			object-fit: contain;
			opacity: 1 !important;
			user-select: none;
		}
	}

	/* ─── Inner grid ─── */
	& .hero-banner__inner {
		position: relative;
		z-index: 2;
		width: 100%;
		max-width: 1440px;
		margin: 0 auto;
		padding: 50px 60px;
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		align-items: center;
		gap: 40px;
	}

	/* ─── Content (left column – 5 cols) ─── */
	& .hero-banner__content {
		grid-column: span 5;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		anchor-name: --hero-content;
	}

	/* ─── Right image (7 cols) ─── */
	& .hero-banner__image {
		grid-column: span 7;
	}

	& .hero-banner__label {
		display: inline-block;
		padding: 6px 16px;
		border: 1.5px solid #24317c;
		color: #24317c;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 2px;
		text-transform: uppercase;
		line-height: 1;
		border-radius: 4px;
	}

	& .hero-banner__heading {
		color: #1a1a2e;
		font-size: 42px;
		font-weight: 700;
		line-height: 1.1;
		margin: 0;
		max-width: 520px;
	}

	& .hero-banner__text {
		color: #3a3a4a;
		font-size: 16px;
		font-weight: 400;
		line-height: 1.6;
		margin: 0;
		max-width: 440px;
	}

	& .hero-banner__button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-top: 6px;
		padding: 14px 36px;
		background: #24317c;
		color: #fff;
		font-size: 15px;
		font-weight: 600;
		line-height: 1;
		text-decoration: none !important;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;

		&:hover {
			background: #1b2660;
			color: #fff;
			transform: translateY(-2px);
		}
	}

	& .hero-banner__image {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		& img {
			width: 100%;
			height: auto;
			object-fit: contain;
			display: block;
		}
	}

	/* ─── Bottom angled edge ─── */
	& .hero-banner__angle {
		position: absolute;
		bottom: -1px;
		left: 0;
		width: 100%;
		z-index: 3;
		line-height: 0;

		& svg {
			width: 100%;
			height: 60px;
			display: block;
		}
	}

	/* ─── Responsive ─── */
	@media (max-width: 1200px) {
		& .hero-banner__inner {
			padding: 60px 40px;
			gap: 30px;
		}

		& .hero-banner__heading {
			font-size: 36px;
		}
	}

	@media (max-width: 991px) {
		& .hero-banner__inner {
			grid-template-columns: 1fr;
			text-align: center;
			padding: 50px 30px 80px;
		}

		& .hero-banner__content {
			grid-column: span 1;
			align-items: center;
			order: 1;
		}

		& .hero-banner__image {
			grid-column: span 1;
			order: 2;
			margin-top: 10px;

			& img {
				max-width: 420px;
			}
		}

		& .hero-banner__heading {
			font-size: 32px;
			max-width: 100%;
		}

		& .hero-banner__text {
			max-width: 100%;
		}
	}

	@media (max-width: 768px) {
		min-height: 400px;

		& .hero-banner__inner {
			padding: 40px 20px 70px;
			gap: 20px;
		}

		& .hero-banner__heading {
			font-size: 28px;
		}

		& .hero-banner__text {
			font-size: 15px;
		}

		& .hero-banner__button {
			padding: 12px 30px;
			font-size: 14px;
		}

		& .hero-banner__angle svg {
			height: 40px;
		}

		& .hero-banner__image img {
			max-width: 320px;
		}
	}

	@media (max-width: 480px) {
		& .hero-banner__heading {
			font-size: 24px;
		}

		& .hero-banner__inner {
			padding: 30px 16px 60px;
		}

		& .hero-banner__label {
			font-size: 11px;
			padding: 5px 12px;
            
		}
	}
}

/* ─── Elementor editor ─── */
.elementor-editor-active .hero-banner {
	min-height: 400px;
}