/*
 * Szkoła Matematyki — components.css
 * Elementy wspólne dla strony głównej i podstron: karty, opinie, FAQ,
 * okruszki, listy z odhaczeniami, ramki informacyjne.
 *
 * Generowane z podziału jednego arkusza. Edytuj ten plik, nie łącz z powrotem.
 */

.smf-badge-circle {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	flex: 0 0 auto;
}

.smf-badge-circle--green { background: var(--smf-green-50); color: #15803d; }

.smf-badge-circle--blue { background: var(--smf-blue-50); color: var(--smf-blue); }

.smf-badge-circle--gold { background: var(--smf-gold-50); color: var(--smf-gold-deep); }

/* Karty (dla kogo / opinie) ------------------------------------------------ */

/*
 * auto-fit zamiast sztywnych trzech kolumn: przy 768 px trzy karty schodziły
 * do 213 px, czyli ok. 20 znaków w wierszu. Teraz układ sam wybiera 1/2/3
 * kolumny tak, żeby karta nigdy nie zeszła poniżej 260 px.
 */
.smf-grid-3 {
	display: grid;
	gap: var(--smf-s3);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.smf-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--smf-s4);
	border-radius: var(--smf-radius-lg);
	background: #f8fafc;
	border: 1px solid var(--smf-line);
	transition: transform .2s var(--smf-ease), box-shadow .2s ease;
}

.smf-card:hover { transform: translateY(-3px); box-shadow: var(--smf-shadow); }

.smf-card__icon {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 1.125rem;
	margin-bottom: var(--smf-s3);
}

.smf-card__icon .smf-icon { width: 1.625rem; height: 1.625rem; }

.smf-card__title { font-size: 1.1875rem; font-weight: 700; margin-bottom: .625rem; }

.smf-card__text { color: var(--smf-muted); font-size: .9375rem; }

.smf-card--quote { background: var(--smf-bg); }

.smf-stars { display: flex; gap: .1875rem; color: var(--smf-gold); margin-bottom: .875rem; }

.smf-stars .smf-icon { width: 1rem; height: 1rem; }

.smf-quote__text { font-style: italic; color: #334155; margin-bottom: var(--smf-s3); }

.smf-quote__author { font-weight: 700; color: var(--smf-navy); }

.smf-quote__meta { font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--smf-muted); margin-top: .25rem; }

/* FAQ ---------------------------------------------------------------------- */
.smf-faq { display: grid; gap: .75rem; }

.smf-faq__item {
	background: #fff;
	border: 1px solid var(--smf-line);
	border-radius: var(--smf-radius);
	box-shadow: var(--smf-shadow-sm);
	overflow: hidden;
}

.smf-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.125rem 1.25rem;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	font-family: Montserrat, sans-serif;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--smf-navy);
}

.smf-faq__q::-webkit-details-marker { display: none; }

.smf-faq__q { list-style: none; }

.smf-faq__sign {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--smf-bg);
	color: var(--smf-blue);
	transition: background-color .18s ease, color .18s ease;
}

.smf-faq__item[open] .smf-faq__sign { background: var(--smf-blue); color: #fff; }

.smf-faq__item[open] .smf-faq__sign .smf-i-plus { display: none; }

.smf-faq__sign .smf-i-minus { display: none; }

.smf-faq__item[open] .smf-faq__sign .smf-i-minus { display: block; }

.smf-faq__a {
	padding: 0 1.25rem 1.25rem;
	color: var(--smf-muted);
	font-size: .9375rem;
	/* 34rem ≈ 72 znaki w wierszu (zmierzone). Bez limitu wychodziło 107. */
	max-width: 34rem;
}

.smf-faq__a::before {
	content: "";
	display: block;
	height: 1px;
	background: var(--smf-line);
	margin-bottom: 1rem;
}

.smf-chip {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .375rem .75rem;
	border-radius: 999px;
	background: var(--smf-green-50);
	color: #15803d;
	font-size: .8125rem;
	font-weight: 600;
	white-space: nowrap;
}

.smf-chip .smf-icon { width: 1rem; height: 1rem; }

/* Okruszki ----------------------------------------------------------------- */
.smf-crumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .375rem;
	font-size: .8125rem;
	color: var(--smf-muted);
	margin-bottom: var(--smf-s3);
}

.smf-crumbs a { color: var(--smf-blue); padding-block: .25rem; }

.smf-crumbs a:hover { text-decoration: underline; }

.smf-crumbs .smf-icon { width: .75rem; height: .75rem; opacity: .6; }

.smf-ticks { display: grid; gap: .625rem; }

.smf-ticks li {
	display: flex;
	align-items: flex-start;
	gap: .625rem;
	font-size: .9375rem;
	color: #334155;
}

.smf-ticks .smf-icon { width: 1.125rem; height: 1.125rem; margin-top: .1875rem; color: var(--smf-green); }

.smf-checklist { display: grid; gap: .875rem; }

.smf-checklist li {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	font-size: .9375rem;
	color: #334155;
}

.smf-checklist .smf-icon { width: 1.125rem; height: 1.125rem; margin-top: .1875rem; color: var(--smf-blue); flex: 0 0 auto; }

.smf-checklist--gold .smf-icon { color: var(--smf-gold-deep); }

/* Wyróżniona informacja ---------------------------------------------------- */
.smf-callout {
	display: flex;
	gap: var(--smf-s2);
	align-items: flex-start;
	margin-top: var(--smf-s3);
	padding: var(--smf-s3);
	border-radius: var(--smf-radius);
	background: var(--smf-gold-50);
	border: 1px solid #fde68a;
}

.smf-callout__title { font-size: 1.0625rem; font-weight: 700; margin-bottom: .375rem; }

.smf-callout p { font-size: .9375rem; color: #78350f; max-width: 32.5rem; }

.smf-callout .smf-badge-circle { width: 2.75rem; height: 2.75rem; flex: 0 0 auto; }

/* Pozostałe pakiety -------------------------------------------------------- */
.smf-otherpkg { display: grid; gap: .875rem; }

.smf-otherpkg__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem var(--smf-s3);
	border-radius: var(--smf-radius);
	background: var(--smf-bg);
	border: 1px solid var(--smf-line);
	color: var(--smf-navy); /* odnośnik ma klasę, więc nie dziedziczy koloru */
	transition: border-color .18s ease, background-color .18s ease, transform .18s var(--smf-ease);
}

.smf-otherpkg__item:hover {
	border-color: var(--smf-blue);
	background: var(--smf-blue-50);
	transform: translateX(3px);
}

.smf-otherpkg__item strong { display: block; color: var(--smf-navy); }

.smf-otherpkg__item small { display: block; font-size: .8125rem; color: var(--smf-muted); }

.smf-otherpkg__price {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-weight: 800;
	color: var(--smf-blue);
	white-space: nowrap;
}

.smf-legal__help .smf-badge-circle { flex: 0 0 auto; }

/* Terminy grup ------------------------------------------------------------- */
/*
 * Blok pojawia się na stronie produktu (WooCommerce) i na podstronie kursu,
 * czyli w dwóch bardzo różnych kontenerach. Dlatego bez własnych marginesów
 * zewnętrznych poza górnym — odstęp od sąsiada należy do rodzica.
 */
.smf-slots {
	margin-top: 1.5rem;
	/*
	 * 34rem to ta sama szerokość, co form.cart i lista zaufania na stronie
	 * produktu. Bez tego blok rozciągał się na całe 1140 px i wisiał nad
	 * przyciskiem zakupu jak obcy element.
	 */
	max-width: 34rem;
	/* content-box liczyłby 34rem BEZ paddingu i blok wystawałby poza przycisk. */
	box-sizing: border-box;
	padding: 1.25rem;
	background: var(--smf-blue-50);
	border-radius: var(--smf-radius);
}

.smf-slots__head {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .875rem;
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--smf-navy);
}

.smf-slots__head .smf-icon { color: var(--smf-blue); flex: 0 0 auto; }

.smf-slots__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.smf-slot {
	display: grid;
	gap: .125rem .875rem;
	padding: .75rem .875rem;
	background: #fff;
	border-radius: .75rem;
	border-left: 3px solid #cbd5e1;
}

/* Grupa z ostatnimi miejscami — złoty pasek zamiast szarego. */
.smf-slot--urgent { border-left-color: var(--smf-gold); background: var(--smf-gold-50); }

.smf-slot__when { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }

.smf-slot__when strong { font-weight: 700; color: var(--smf-navy); }

.smf-slot__time {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--smf-blue);
	white-space: nowrap;
}

.smf-slot--urgent .smf-slot__time { color: var(--smf-gold-deep); }

.smf-slot__note { font-size: .875rem; color: var(--smf-muted); }

/* `who` jest pisane małą literą, bo w FAQ i formularzu siedzi w środku zdania. */
.smf-slot__note::first-letter { text-transform: uppercase; }

.smf-slots__foot {
	margin: .875rem 0 0;
	font-size: .875rem;
	/*
	 * Nie --smf-muted: ten kolor jest liczony na biały (4,76:1), a tu tło jest
	 * błękitne i wychodzi 4,37:1, czyli poniżej progu. #475569 daje 6,96:1.
	 */
	color: #475569;
}

/* Od tabletu w górę dzień i godzina mieszczą się obok opisu. */
@media (min-width: 30rem) {
	.smf-slot { grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: baseline; }
}