/*
 * Blok Hero.
 * Grafika to jeden gotowy plik obejmujący całą prawą stronę sekcji (zdjęcie,
 * znak zapytania, kafelki z ikonami). Motyw nic do niej nie dokłada — układa
 * tylko tekst na jej pustej, lewej części.
 */

.rb-hero {
	position: relative;
	overflow: hidden;
	background: var(--rb-color-bg);
}

/* ------------------------------- warstwa grafiki ------------------------------- */

.rb-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.rb-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}

/* ---------------------------------- treść ---------------------------------- */

.rb-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	min-height: clamp(520px, 42vw, 680px);
	padding-block: var(--rb-space-12) var(--rb-space-16);
}

.rb-hero__content { max-width: 34rem; }

.rb-hero__title { margin-bottom: var(--rb-space-2); }

.rb-hero__claim {
	margin: 0 0 var(--rb-space-6);
	font-size: var(--rb-fs-h2);
	line-height: var(--rb-lh-h2);
	font-weight: var(--rb-fw-h2);
	letter-spacing: -0.02em;
}
.rb-hero__claim-prefix { color: var(--rb-color-heading); }
.rb-hero__claim-accent { color: var(--rb-color-accent); }

.rb-hero__description {
	max-width: 33rem;
	font-size: var(--rb-fs-body-m);
	line-height: 1.7;
	color: var(--rb-gray-600);
}
.rb-hero__description p:last-child { margin-bottom: 0; }

.rb-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rb-space-4);
	margin-top: var(--rb-space-8);
}

.rb-hero__bullets {
	display: flex;
	align-items: flex-start;
	gap: var(--rb-space-4);
	margin-top: var(--rb-space-8);
}

.rb-hero__bullets-mark {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-top: 2px;
	border-radius: var(--rb-radius-full);
	background: var(--rb-color-accent);
	color: #fff;
}

.rb-hero__bullets-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
	font-size: var(--rb-fs-body-s);
	line-height: 1.5;
	color: var(--rb-gray-600);
}

/* ---------------------------------- responsywnie -------------------------------- */

/*
 * Poniżej 1024 px grafika przestaje być tłem — tekst nie miałby na niej wolnego
 * miejsca. Wraca do zwykłego przepływu, pod treść.
 */
@media (max-width: 1023px) {
	/*
	 * Układ z projektu: tekst wyśrodkowany na całą szerokość, a grafika wsuwa się
	 * od prawej dolnej krawędzi i podchodzi pod listę atutów. Grafika ma po lewej
	 * przezroczyste tło, więc nachodzenie na tekst jest bezpieczne.
	 */
	.rb-hero { padding-bottom: 0; }

	.rb-hero__inner {
		display: block;
		min-height: 0;
		padding-block: var(--rb-space-10) 0;
		text-align: center;
	}

	.rb-hero__content { max-width: none; }

	.rb-hero__description {
		max-width: 34rem;
		margin-inline: auto;
	}
	.rb-hero__description strong { font-weight: 700; color: var(--rb-color-heading); }

	.rb-hero__ctas {
		flex-direction: column;
		align-items: center;
		gap: var(--rb-space-4);
		margin-top: var(--rb-space-8);
	}
	.rb-hero__ctas .btn {
		width: min(340px, 100%);
		padding-block: 1.1rem;
	}

	/* Lista atutów wraca do lewej i traci strzałkę — w projekcie mobilnym jej nie ma. */
	.rb-hero__bullets {
		display: block;
		margin-top: var(--rb-space-10);
		text-align: left;
	}
	.rb-hero__bullets-mark { display: none; }
	.rb-hero__bullets-list {
		gap: var(--rb-space-5);
		max-width: 52%;
		font-size: var(--rb-fs-body-m);
	}

	/* Grafika jako warstwa przy prawej krawędzi, pod tekstem. */
	.rb-hero__media {
		position: absolute;
		right: 0;
		bottom: 0;
		left: auto;
		top: auto;
		z-index: 0;
		width: 46%;
		height: 300px;
		margin: 0;
	}
	/*
	 * Postać stoi w prawej części grafiki, więc odsłania ją PRZESUNIĘCIE KADRU W PRAWO
	 * (wyższy procent) — zawartość jedzie wtedy w lewo. Przy niższych wartościach
	 * w wycinku zostaje samo puste tło i laptop.
	 */
	.rb-hero__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 82% bottom;
	}

	/* Grafika wystaje poniżej listy atutów, tak jak w projekcie. */
	.rb-hero__inner { padding-bottom: var(--rb-space-24); }
}

@media (max-width: 560px) {
	.rb-hero__bullets-list { max-width: 56%; font-size: var(--rb-fs-body-s); }
	.rb-hero__media { width: 50%; height: 260px; }
	.rb-hero__image { object-position: 86% bottom; }
}

/* Brak grafiki — sekcja nadal ma sensowną wysokość. */
.rb-hero--no-image .rb-hero__inner { min-height: 0; }