/* =====================================================
   HERO BANNER SLIDER (Swiper)
   ===================================================== */

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

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

/* ─── Swiper container ─── */
.hero-banner-slider {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	/* Force GPU to respect border-radius clip with transformed children (Swiper translate3d) */
	isolation: isolate;
	-webkit-mask-image: -webkit-radial-gradient(white, black);

	& .swiper-wrapper {
		border-radius: inherit;
	}

	& .swiper-slide {
		height: auto;
		overflow: hidden;
		border-radius: inherit;
	}

	/* ─── Navigation arrows ─── */
	& .swiper-button-prev,
	& .swiper-button-next {
		color: #24317c;
		width: 48px;
		height: 48px;
		background: rgba(255, 255, 255, 0.85);
		border-radius: 50%;
		backdrop-filter: blur(4px);
		transition: background 0.25s ease, transform 0.2s ease;

		&::after {
			font-size: 18px;
			font-weight: 700;
		}

		&:hover {
			background: rgba(255, 255, 255, 1);
			transform: scale(1.08);
		}
	}

	& .swiper-button-prev {
		left: 20px;
	}

	& .swiper-button-next {
		right: 20px;
	}

	/* ─── Pagination ─── */
	& .swiper-pagination {
		bottom: 20px !important;
	}

	& .swiper-pagination-bullet {
		width: 10px;
		height: 10px;
		background: rgba(255, 255, 255, 0.6);
		opacity: 1;
		transition: background 0.3s ease, transform 0.2s ease;

		&-active {
			background: #24317c;
			transform: scale(1.3);
		}
	}

	& .swiper-pagination-progressbar {
		background: rgba(0, 0, 0, 0.1);

		& .swiper-pagination-progressbar-fill {
			background: #24317c;
		}
	}

	& .swiper-pagination-fraction {
		color: #24317c;
		font-weight: 600;
		font-size: 14px;
	}

	/* ─── Hide nav on mobile ─── */
	@media (max-width: 768px) {
		& .swiper-button-prev,
		& .swiper-button-next {
			display: none;
		}

		& .swiper-pagination {
			bottom: 12px !important;
		}
	}
}

/* ─── Individual slide ─── */
.hero-banner {
	position: relative;
	width: 100%;
	min-height: 520px;
	overflow: hidden;
	display: flex;
	align-items: center;
	background-color: #f0f0f3;

	/* ─── Decorative background image (large "A" letter) ─── */
	& .hero-banner__deco {
		position: absolute;
		position-anchor: --hero-content;
		top: 0;
		bottom: 0;
		right: anchor(70%);
		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 – 4 cols) ─── */
	& .hero-banner__content {
		grid-column: span 4;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		anchor-name: --hero-content;
	}

	/* ─── Right image (8 cols) ─── */
	& .hero-banner__image {
		grid-column: span 8;
		display: flex;
		align-items: center;
	}

	& .hero-banner__image--top {
		align-items: flex-start;
	}

	& .hero-banner__image--bottom {
		align-items: flex-end;
	}

	&:has(.hero-banner__image--bottom) {
		align-items: flex-end;
	}

	&:has(.hero-banner__image--bottom) .hero-banner__inner {
		padding-bottom: 0;
	}

	& .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;
		height: 100%;

		& .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;
		}
	}
}

/* =====================================================
   STATIC MODE (single slide – no Swiper)
   ===================================================== */
.hero-banner-static {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
}

/* =====================================================
   WHITE TEXT COLOR SCHEME
   ===================================================== */
.hero-banner-wrapper--white .hero-banner__label {
	color: #fff;
	border-color: #fff;
}

.hero-banner-wrapper--white .hero-banner__heading {
	color: #fff;
}

.hero-banner-wrapper--white .hero-banner__text {
	color: rgba(255, 255, 255, 0.85);
}

.hero-banner-wrapper--white .hero-banner__button {
	background: #fff;
	color: #24317c;

	&:hover {
		background: rgba(255, 255, 255, 0.9);
		color: #1b2660;
	}
}

.hero-banner-wrapper--white .swiper-button-prev,
.hero-banner-wrapper--white .swiper-button-next {
	color: #fff;
	background: rgba(255, 255, 255, 0.2);

	&:hover {
		background: rgba(255, 255, 255, 0.35);
	}
}

.hero-banner-wrapper--white .swiper-pagination-bullet {
	background: rgba(255, 255, 255, 0.5);

	&-active {
		background: #fff;
	}
}

/* ─── Per-slide text color override ─── */
.hero-banner--text-white .hero-banner__label {
	color: #fff;
	border-color: #fff;
}

.hero-banner--text-white .hero-banner__heading {
	color: #fff;
}

.hero-banner--text-white .hero-banner__text {
	color: rgba(255, 255, 255, 0.85);
}

.hero-banner--text-white .hero-banner__button {
	background: #fff;
	color: #24317c;

	&:hover {
		background: rgba(255, 255, 255, 0.9);
		color: #1b2660;
	}
}

.hero-banner--text-default .hero-banner__label {
	color: #24317c;
	border-color: #24317c;
}

.hero-banner--text-default .hero-banner__heading {
	color: #0f1b4d;
}

.hero-banner--text-default .hero-banner__text {
	color: #444;
}

.hero-banner--text-default .hero-banner__button {
	background: #24317c;
	color: #fff;

	&:hover {
		background: #1b2660;
		color: #fff;
	}
}

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

.elementor-editor-active .hero-banner-slider {
	overflow: visible;
}