/* Blok „Program kursu" */

.rb-program {
	background: var(--rb-color-bg);
	padding-block: var(--rb-space-12);
}

/*
 * Program i karta ceny tworzą jeden ciąg — muszą mieć wspólną prawą krawędź,
 * więc dzielą tę samą szerokość obrysu (--rb-offer-max).
 */
.rb-program__grid {
	/* Grid nosi klasę .container, więc do obrysu doliczamy jej padding —
	 * inaczej treść kończy się o gutter wcześniej niż karta ceny poniżej. */
	max-width: calc(var(--rb-offer-max) + 2 * var(--rb-container-gutter));
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

/* ---------------------------------- lewa kolumna -------------------------------- */

.rb-program__heading {
	font-size: clamp(1.375rem, 0.95rem + 1.4vw, 1.875rem);
	line-height: 1.35;
	margin-bottom: clamp(2rem, 6vw, 5rem);
}

.rb-program__note {
	display: flex;
	align-items: flex-start;
	gap: var(--rb-space-5);
	margin-bottom: var(--rb-space-8);
}

.rb-program__note-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: var(--rb-radius-full);
	background: var(--rb-color-accent);
	color: #fff;
}
/* Wgrana grafika przynosi własne tło — nie dokładamy drugiego koła. */
.rb-program__note-icon:has(img) { background: none; width: auto; height: auto; }
.rb-program__note-icon img { width: 76px; height: 76px; }

.rb-program__note-text {
	font-size: 1.125rem;   /* 18 px */
	line-height: 1.5;      /* 27 px */
	font-weight: 600;
	color: var(--rb-color-text);
}
.rb-program__note-text p:last-child { margin-bottom: 0; }

/* Przycisk jest dwuwierszowy — napis łamie się tam, gdzie w projekcie. */
.rb-program__cta {
	font-size: 1.125rem;   /* 18 px */
	font-weight: 700;
	line-height: 1.5;      /* 27 px */
	text-align: center;
	padding: 1.25rem 3.5rem;
	border-width: 1px;
}

/* --------------------------------- lista bloków --------------------------------- */

.rb-program__list { display: grid; gap: var(--rb-space-3); }

.rb-program__item { border: 0; }

.rb-program__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rb-space-4);
	padding: var(--rb-space-4) var(--rb-space-5);
	background: var(--rb-color-bg-alt);
	border-radius: var(--rb-radius-lg);
	cursor: pointer;
	list-style: none;
	transition: background var(--rb-transition-fast);
}
.rb-program__summary::-webkit-details-marker { display: none; }
.rb-program__summary:hover { background: var(--rb-gray-200); }
.rb-program__summary:focus-visible { outline: 3px solid var(--rb-orange-300); outline-offset: 2px; }

.rb-program__label {
	font-size: 1.125rem;   /* 18 px */
	line-height: 1.5;      /* 27 px */
	color: var(--rb-color-heading);
}
.rb-program__title { font-weight: 700; }
.rb-program__meta { color: var(--rb-gray-500); }

.rb-program__chevron {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: var(--rb-radius-full);
	background: var(--rb-color-accent);
	color: #fff;
	transition: transform var(--rb-transition-fast);
}
.rb-program__item[open] .rb-program__chevron { transform: rotate(180deg); }
/* Ikona to strzałka w prawo — obracamy w dół, żeby czytała się jako „rozwiń". */
.rb-program__chevron .rb-icon { transform: rotate(90deg); }

.rb-program__body {
	display: flex;
	align-items: flex-start;
	gap: var(--rb-space-3);
	padding: var(--rb-space-4) var(--rb-space-5) var(--rb-space-2);
	font-size: 1rem;       /* 16 px */
	line-height: 1.5;      /* 24 px */
	color: var(--rb-gray-600);
}
.rb-program__body p { margin: 0; }

.rb-program__dot {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	margin-top: 5px;
	border-radius: var(--rb-radius-full);
	background: var(--rb-color-accent);
}

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

@media (max-width: 900px) {
	/* Kolejność z projektu mobilnego: nagłówek, lista, dopiero potem notka i przycisk. */
	.rb-program { padding-block: var(--rb-space-8); }
	.rb-program__grid { grid-template-columns: 1fr; gap: var(--rb-space-6); }

	.rb-program__intro {
		display: contents;
	}
	.rb-program__heading { order: 1; margin-bottom: 0; }
	.rb-program__list    { order: 2; }
	.rb-program__note    { order: 3; margin-bottom: 0; text-align: center; }
	.rb-program__cta     { order: 4; justify-self: stretch; padding-inline: var(--rb-space-4); }

	.rb-program__note { align-items: center; }
	.rb-program__note-icon { width: 84px; height: 84px; }
	.rb-program__note-icon img { width: 84px; height: 84px; }

	.rb-program__label { font-size: var(--rb-fs-body-s); }
	.rb-program__summary { padding: var(--rb-space-3) var(--rb-space-4); }
}