/* Blok „Karta ceny" */

.rb-pricing {
	background: var(--rb-color-bg);
	padding-block: var(--rb-space-8) var(--rb-space-16);
}

/* --------------------------------- karta oferty --------------------------------- */

.rb-pricing__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	/* Karta nie rozciąga się na pełny kontener — w projekcie jest wyraźnie węższa. */
	max-width: var(--rb-offer-max);
	margin-inline: auto;
	background: var(--rb-color-accent);
	border-radius: var(--rb-radius-2xl);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	color: #000;
}

.rb-pricing__action { justify-self: center; }

/* Główny przycisk karty jest w projekcie wyraźnie największy na stronie —
 * skalę robi tu stopień pisma, nie sam padding. */
.rb-pricing__cta {
	font-size: 1.5rem;   /* 24 px */
	line-height: 1;
	padding: 0.875rem 4.875rem;
}
.rb-pricing__cta .rb-icon { margin-left: -0.25rem; }

/*
 * Wiersze w karcie idą ciasno jeden pod drugim — to jeden blok informacji,
 * a nie osobne akapity. Stąd marginesy liczone w kilku pikselach.
 */
.rb-pricing__title {
	font-family: var(--rb-font-sans);
	font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.25rem);  /* do 36 px */
	line-height: 1.2;
	font-weight: 700;
	color: #000;
	margin-bottom: var(--rb-space-1);
}

.rb-pricing__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--rb-space-4);
	margin-bottom: var(--rb-space-2);
}
.rb-pricing__badge { font-size: 1.25rem; font-weight: 700; color: #fff; }
.rb-pricing__term  { font-size: 1.25rem; line-height: 1.5; color: #000; }

.rb-pricing__price {
	font-size: clamp(1.875rem, 1.2rem + 2vw, 2.5rem);     /* do 40 px */
	line-height: 1;
	font-weight: 800;
	color: #000;
	margin-bottom: var(--rb-space-2);
}

.rb-pricing__highlight {
	font-size: 1.25rem;    /* 20 px */
	line-height: 1.4;
	font-weight: 700;
	color: #000;
	margin-bottom: var(--rb-space-1);
}

.rb-pricing__note {
	font-size: 1.125rem;   /* 18 px */
	line-height: 1.4;
	color: #000;
	margin-bottom: 0;
}

/* ------------------------------ pasek „sprawdź także" --------------------------- */

.rb-pricing__cross {
	max-width: var(--rb-offer-max);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rb-space-6);
	margin-top: var(--rb-space-6);
	padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
	border: 2px solid var(--rb-color-accent);
	border-radius: var(--rb-radius-2xl);
}

.rb-pricing__cross-eyebrow {
	font-size: 1.125rem;   /* 18 px */
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--rb-color-accent);
	margin-bottom: var(--rb-space-1);
}

.rb-pricing__cross-title {
	font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
	font-weight: 600;
	color: var(--rb-color-heading);
	margin-bottom: 0;
}

.rb-pricing__cross-cta {
	flex: 0 0 auto;
	font-size: 1.25rem;   /* 20 px */
	line-height: 1;
	padding: 1rem 4.125rem;
}

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

@media (max-width: 900px) {
	.rb-pricing { padding-block: var(--rb-space-6) var(--rb-space-10); }

	/* Na mobile treść idzie pierwsza, przycisk pod nią — odwrotnie niż na desktopie. */
	.rb-pricing__card {
		grid-template-columns: 1fr;
		gap: var(--rb-space-6);
	}
	.rb-pricing__body   { order: 1; }
	.rb-pricing__action { order: 2; justify-self: stretch; }
	/* Przycisk rozciąga się na całą szerokość, więc szeroki padding z desktopu
	 * tylko zabierałby miejsce napisowi i łamał go na dwie linie. */
	.rb-pricing__cta    { width: 100%; padding-inline: var(--rb-space-4); }

	.rb-pricing__cross {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--rb-space-5);
	}
	.rb-pricing__cross-cta { width: 100%; padding-inline: var(--rb-space-4); }
}