/* Blok „Materiały z przyciskami" */

.rb-resources { padding-block: clamp(2rem, 4vw, 3.5rem); }
.rb-resources--bg-white { background: var(--rb-color-bg); }
.rb-resources--bg-light { background: var(--rb-color-bg-alt); }

/* ---- wspólne: przyciski ---- */
.rb-resources__buttons { display: flex; flex-wrap: wrap; gap: clamp(0.75rem, 1.5vw, 1.5rem); }
.rb-resources__btn {
	display: inline-flex; align-items: center; gap: var(--rb-space-2);
	padding: 1.1rem 2rem;
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);   /* do 22 px */
	line-height: 1;
	white-space: nowrap;
}
.rb-resources__btn-icon { display: inline-grid; place-items: center; }

/* ======================= układ „karta ze zdjęciem" ======================= */

/*
 * Proporcje z projektu (karta = 100%): zdjęcie zaczyna się na 42% szerokości
 * i ma 44%, wystaje ~6% nad kartę i ~8% pod nią; koło ma Ø26% i wisi nad górną
 * krawędzią, przy prawym boku. Zdjęcie i koło leżą absolutnie, więc wysokość
 * karty pilnuje min-height, a nie zawartość.
 */
.rb-resources--card {
	padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
	/* Wystające koło nie może dodać stronie poziomego przewijania. */
	overflow-x: clip;
}

.rb-resources__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	min-height: clamp(24rem, 36vw, 32rem);
	padding: clamp(2.5rem, 4vw, 4rem) clamp(1.5rem, 5vw, 5rem) clamp(9rem, 14vw, 11.5rem);
	/* miejsce na koło (góra) i zdjęcie (dół) wystające poza kartę */
	margin-block: clamp(4.5rem, 8vw, 7rem) clamp(2.5rem, 4vw, 3.5rem);
	margin-right: clamp(2rem, 5vw, 5rem);   /* miejsce na koło wychodzące poza kartę */
	background: var(--rb-color-bg-alt);
	border-radius: clamp(1.5rem, 3vw, 3rem);
}

.rb-resources__content { position: relative; z-index: 1; max-width: 29rem; }
.rb-resources--card .rb-resources__heading {
	font-size: clamp(1.5rem, 1rem + 1.5vw, 2.125rem);   /* do 34 px — w projekcie cztery linijki */
	line-height: 1.2;
	margin: 0;
}
.rb-resources__accent { display: block; }
.rb-resources--card .rb-resources__lead { margin-top: var(--rb-space-4); color: var(--rb-gray-600); }

.rb-resources__media {
	position: absolute;
	left: 42%;
	width: 44%;
	top: -6%;
	bottom: -8%;
}
.rb-resources__image {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: var(--rb-radius-sm, 0.5rem);
}

.rb-resources__badge {
	position: absolute;
	top: clamp(-6rem, -6vw, -4rem);
	/*
	 * Lewa krawędź koła stoi 40 px przed prawą krawędzią zdjęcia (zdjęcie kończy się
	 * na 86% karty), więc koło zahacza o włosy, nigdy o twarz — bez względu na
	 * szerokość okna. Stąd right liczone z szerokości karty i średnicy koła.
	 */
	--kolo: clamp(15rem, 24vw, 22rem);
	right: calc(14% + 3.75rem - var(--kolo));
	z-index: 2;
	width: var(--kolo);
	aspect-ratio: 1;
	display: grid; place-items: center;
	padding: clamp(1.25rem, 2.6vw, 2.25rem);
	border-radius: 50%;
	background: var(--rb-color-accent);
	color: #fff;
	text-align: center;
	font-family: 'Lora', Georgia, serif;
	font-weight: 600;
	font-size: clamp(0.9375rem, 0.7rem + 0.55vw, 1.25rem);   /* do 20 px */
	line-height: 1.3;
}
.rb-resources__badge p { margin: 0; }

.rb-resources--card .rb-resources__buttons {
	position: absolute;
	left: clamp(1.5rem, 5vw, 5rem);
	right: clamp(1.5rem, 5vw, 5rem);
	bottom: clamp(3rem, 5vw, 4.5rem);
	z-index: 2;
	flex-wrap: nowrap;
	gap: 1rem;
}
/*
 * Napis w przycisku nigdy się nie łamie — pigułka na dwie–trzy linijki wygląda
 * jak błąd. Cztery przyciski mieszczą się w rzędzie od ~1200 px; poniżej
 * przechodzą w siatkę 2×2 (reguła niżej).
 */
.rb-resources--card .rb-resources__btn {
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 0.9rem 1.4rem;
	font-size: 1rem;
	line-height: 1;
}
@media (min-width: 1024px) and (max-width: 1199px) {
	.rb-resources--card .rb-resources__buttons {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem 1rem;
	}
	.rb-resources--card .rb-resources__btn { justify-content: center; }
	/* dwa rzędy przycisków potrzebują więcej miejsca na dole karty */
	.rb-resources__card { padding-bottom: clamp(13rem, 21vw, 15rem); }
}

/* ======================= układ wyśrodkowany ======================= */

.rb-resources__inner { max-width: 56rem; text-align: center; }
.rb-resources--centered .rb-resources__heading { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.25rem); line-height: 1.3; margin-bottom: var(--rb-space-4); }
.rb-resources--centered .rb-resources__lead { font-size: 1.0625rem; line-height: 1.6; color: var(--rb-gray-600); max-width: 44rem; margin: 0 auto var(--rb-space-6); }
.rb-resources--centered .rb-resources__buttons { justify-content: center; }
.rb-resources__note { margin: var(--rb-space-6) auto 0; max-width: 40rem; font-size: 0.9375rem; line-height: 1.55; color: var(--rb-gray-600); }
.rb-resources__note p:last-child, .rb-resources__lead p:last-child { margin-bottom: 0; }
.rb-resources__note strong { color: var(--rb-color-heading); }

/* ======================= responsywnie ======================= */

@media (max-width: 1023px) {
	/* Bez miejsca na wystające elementy: zdjęcie i koło wracają do przepływu. */
	.rb-resources__card {
		grid-template-columns: 1fr;
		row-gap: var(--rb-space-6);
		padding: var(--rb-space-6) var(--rb-space-5) var(--rb-space-6);
		margin: 0;
		min-height: 0;
	}
	.rb-resources__content { max-width: none; }
	.rb-resources__media { position: static; width: auto; aspect-ratio: 4 / 3; }
	.rb-resources__image { border-radius: var(--rb-radius-md); }
	.rb-resources__badge {
		position: static;
		width: auto; aspect-ratio: auto;
		padding: var(--rb-space-5) var(--rb-space-6);
		border-radius: var(--rb-radius-lg);
		text-align: left;
	}
	.rb-resources--card .rb-resources__buttons { position: static; }
}

@media (max-width: 560px) {
	.rb-resources__buttons { flex-direction: column; align-items: stretch; }
	.rb-resources__btn { justify-content: center; }
}