/* Blok „Sekcja z nagłówkiem i obrazem" */

.rb-intro { background: var(--rb-color-bg); }

/* Pasek z nagłówkiem — pełna szerokość, szare tło. */
.rb-intro__bar {
	background: var(--rb-color-bg-alt);
	padding-block: var(--rb-space-12);
}

/*
 * Blok nagłówka jest wyśrodkowany w pasku, ale tekst w nim wyrównany do lewej —
 * przy centrowaniu tekstu krótsza linia wcinała się względem dłuższej, czego
 * w projekcie nie ma.
 */
.rb-intro__heading {
	font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
	line-height: 1.35;
	max-width: 46rem;
	margin-inline: auto;
	text-align: left;
}

.rb-intro__body {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	grid-template-areas:
		"media content"
		"media link";
	align-content: start;
	/* Duży odstęp ma być między kolumnami; link stoi tuż pod tekstem, nie 96 px niżej. */
	column-gap: clamp(2rem, 5vw, 4.5rem);
	row-gap: 0;
	padding-block: var(--rb-space-16);
}
/* Bez obrazu tekst i link zajmują pełną szerokość — inaczej zostaje pusta kolumna. */
.rb-intro__body--no-image {
	grid-template-columns: 1fr;
	grid-template-areas: "content" "link";
}

.rb-intro__media {
	grid-area: media;
	align-self: start;
	border-radius: var(--rb-radius-md);
	overflow: hidden;
}
.rb-intro__image { width: 100%; height: auto; }

.rb-intro__content { grid-area: content; }

.rb-intro__text {
	font-size: var(--rb-fs-body-m);
	line-height: 1.75;
	color: var(--rb-gray-600);
}
.rb-intro__text p { margin-bottom: var(--rb-space-5); }
.rb-intro__text p:last-child { margin-bottom: 0; }
.rb-intro__text strong { color: var(--rb-color-heading); }

.rb-intro__link {
	grid-area: link;
	align-self: start;
	justify-self: start;
	margin-top: var(--rb-space-8);
}

@media (max-width: 900px) {
	/* Kolejność z projektu mobilnego: tekst na całą szerokość, pod nim obraz i link obok siebie. */
	.rb-intro__body {
		grid-template-columns: minmax(0, 55%) minmax(0, 1fr);
		grid-template-areas:
			"content content"
			"media   link";
		align-items: start;
		column-gap: var(--rb-space-6);
		row-gap: var(--rb-space-6);
		padding-block: var(--rb-space-10);
	}
	.rb-intro__body--no-image {
		grid-template-columns: 1fr;
		grid-template-areas: "content" "link";
	}
	.rb-intro__link { margin-top: 0; }
}

@media (max-width: 560px) {
	.rb-intro__bar { padding-block: var(--rb-space-8); }
	.rb-intro__heading { font-size: 1.5rem; }
	.rb-intro__link { font-size: var(--rb-fs-body-s); gap: var(--rb-space-3); }
	.rb-intro__link .rb-arrow-link__icon { width: 38px; height: 38px; }
}