/* Blok „Pas z nagłówkiem" — przerywnik pełnej szerokości */

.rb-banner { padding-block: clamp(2.5rem, 5vw, 4rem); }

.rb-banner__inner {
	max-width: 62rem;
	text-align: center;
}

.rb-banner__heading {
	font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);   /* do 52 px */
	line-height: 1.25;
	margin-bottom: var(--rb-space-4);
}

.rb-banner__lead {
	font-size: 1.25rem;   /* 20 px */
	line-height: 1.5;     /* 30 px */
	font-weight: 400;
	max-width: 48rem;
	margin-inline: auto;
}
.rb-banner__lead p:last-child { margin-bottom: 0; }

.rb-banner__cta {
	margin-top: var(--rb-space-6);
	font-size: 1.625rem;  /* 26 px */
	line-height: 1;
	padding: 1.5rem 3.5rem;
}

.rb-banner__note {
	margin-top: var(--rb-space-5);
	font-size: 1.125rem;  /* 18 px */
	line-height: 1.6;     /* 28,8 px */
	max-width: 42rem;
	margin-inline: auto;
	color: var(--rb-gray-600);
}
.rb-banner__note p:last-child { margin-bottom: 0; }

/* --------------------------------- warianty tła -------------------------------- */

.rb-banner--navy { background: var(--rb-navy-900); }
.rb-banner--navy .rb-banner__heading { color: #fff; }
.rb-banner--navy .rb-banner__lead { color: rgb(255 255 255 / 0.82); }
.rb-banner--navy .rb-banner__note { color: rgb(255 255 255 / 0.75); }
/* Na granacie granatowy przycisk zniknąłby — przechodzi na biel. */
.rb-banner--navy .rb-banner__cta { background: #fff; color: var(--rb-navy-900); }
.rb-banner--navy .rb-banner__cta:hover { background: var(--rb-gray-100); color: var(--rb-navy-950); }

.rb-banner--white { background: var(--rb-color-bg); }
.rb-banner--white .rb-banner__lead,
.rb-banner--white .rb-banner__note { color: var(--rb-gray-600); }

.rb-banner--light { background: var(--rb-color-bg-alt); }
.rb-banner--light .rb-banner__lead { color: var(--rb-gray-600); }

.rb-banner--accent { background: var(--rb-color-accent); }
.rb-banner--accent .rb-banner__heading { color: #fff; }
.rb-banner--accent .rb-banner__lead { color: rgb(255 255 255 / 0.9); }

@media (max-width: 560px) {
	/* Rozciągnięty przycisk nie ma zapasu na szeroki padding z desktopu. */
	.rb-banner__cta { padding-inline: var(--rb-space-4); }

	/* Na wąskim ekranie łamanie wpisane pod desktop rozjeżdża tekst — puszczamy je płynnie. */
	.rb-banner__heading br { display: none; }
}