/*
 * Banner. Figma 1598:47669 desktop: 64 padding, r20, photo + rgba(9,3,19,.75)
 * overlay, title header/XL + body/M white on the left, button/M 310 on the right.
 * Mobile 936:11062: 32/20 padding, stacked (24 gap), header/L, full-width button
 * without arrow.
 */

.banner__box {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(32px, 4.4vw, 64px);
	border-radius: var(--r-l);
	background: var(--c-text-dark);
	color: var(--c-text-white);
}

.banner__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.banner__box::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(9, 3, 19, .75);
}

.banner__content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 32px;
}

.banner__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.banner__title { font: var(--f-header-xl); }
.banner__desc { font: var(--f-body-m); }

.banner__button { min-width: 310px; }

@media (max-width: 767px) {
	.banner__box { padding: 32px 20px; }
	.banner__content { flex-direction: column; align-items: stretch; }
	.banner__title { font: var(--f-header-l); }
	.banner__desc { font: var(--f-body-xs); }
	.banner__button { min-width: 0; width: 100%; }
	.banner__button .icon { display: none; }
}

/* Show on: desktop only / mobile only. */
@media (max-width: 767px) { .banner--desktop-only { display: none; } }
@media (min-width: 768px) { .banner--mobile-only { display: none; } }

/* Slim bar. Figma mobile/banner/sticky 1674:32810: 390x85, photo + 75% overlay
   + shadow, 16/20 padding, title header 18/800 white (173 wide), button/S 169x53. */
.banner--bar .banner__box {
	padding: 16px 20px;
	border-radius: 0;
	box-shadow: 0 4px 8px rgba(9, 3, 19, .12);
}
.banner--bar .banner__content {
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	gap: 12px;
}
.banner--bar .banner__title {
	flex: 0 1 173px;
	font: var(--f-header-xs);
}
.banner--bar .banner__button {
	flex: 0 0 169px;
	width: 169px;
	min-width: 0;
	white-space: nowrap;
}