/* ==========================================================================
   Sprawdzianowo — strona główna (home.css)
   Tylko style specyficzne dla front-page: hero, moduł wyszukiwania, kafelki
   statystyk, nagłówki sekcji z karuzelą, FAQ i blok opisowy.
   Bazowe komponenty (.sp-card, .sp-carousel, .sp-accordion, .sp-select-ui…)
   są w main.css i NIE są tu redefiniowane — poniżej wyłącznie doprecyzowania
   w kontekście strony głównej.
   ========================================================================== */

/* ==========================================================================
   1. Hero
   ========================================================================== */

.sp-home-hero{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:48px;
	align-items:start;
	/* Longhandy, żeby nie skasować bocznego paddingu z .sp-wrap. */
	padding-top:52px;
	padding-bottom:64px;
}

.sp-home-hero__intro{min-width:0}

.sp-home-hero__badge{margin:0 0 22px}

.sp-home-hero__title{margin:0 0 20px}

.sp-home-hero__lead{margin:0 0 24px;max-width:560px}

.sp-home-hero__rule{margin:0 0 20px}
.sp-home-hero__rule--last{margin:0 0 22px}

.sp-home-hero__rating{
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:wrap;
	margin-bottom:20px;
}
.sp-home-hero__rating .sp-stars{font-size:15px;letter-spacing:2px}
.sp-home-hero__rating-text{font-size:13.5px;color:var(--muted)}
.sp-home-hero__rating-text strong{color:var(--text);font-weight:700}

/* --- Kafelki statystyk --- */

.sp-home-stats{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:12px;
	margin-bottom:26px;
}

.sp-home-stat{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:12px;
	padding:13px 14px;
	min-width:0;
}
.sp-home-stat__value{
	font-family:var(--sp-font-head);
	font-weight:800;
	font-size:19px;
	letter-spacing:-.02em;
	line-height:1.1;
	margin-bottom:5px;
}
.sp-home-stat__label{font-size:11.5px;color:var(--dim);line-height:1.35}

/* --- Cechy oferty --- */

.sp-home-features{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:16px 32px;
	list-style:none;
	margin:0;
	padding:0;
}
.sp-home-feature{display:flex;align-items:center;gap:12px;min-width:0}
.sp-home-feature__icon{
	width:32px;
	height:32px;
	flex:none;
	border:1px solid var(--line);
	border-radius:9px;
	background:var(--surface);
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--accent-hi);
}
.sp-home-feature__label{font-size:13.5px;font-weight:600;line-height:1.35;text-wrap:pretty}

/* ==========================================================================
   2. Moduł wyszukiwania („Znajdź sprawdzian")
   ========================================================================== */

.sp-home-search{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:22px;
	padding:30px;
	min-width:0;
}

.sp-home-search__title{margin:0 0 10px}
.sp-home-search__hl{background:linear-gradient(transparent 56%,var(--accent-soft) 56%)}

.sp-home-search__lead{
	margin:0 0 22px;
	color:var(--muted);
	font-size:14px;
	line-height:1.6;
	text-wrap:pretty;
}

.sp-home-search__row{
	display:grid;
	grid-template-columns:1fr 1fr 124px;
	gap:10px;
	align-items:start;
}
.sp-home-search__row--single{grid-template-columns:1fr 124px}

.sp-home-search__submit{height:48px}

/* Doprecyzowanie custom selecta w kontekście karty wyszukiwania
   (main.css: 46px / r11 / padding 14px — design hero: 48px / r12 / padding 13px). */
.sp-home-search .sp-select-ui__toggle{
	height:48px;
	border-radius:12px;
	padding:0 13px;
	color:var(--text);
}
.sp-home-search .sp-select-ui.is-filled > .sp-select-ui__toggle{border-color:var(--accent-line)}
.sp-home-search .sp-select-ui__value{
	flex:1;
	font-size:13.5px;
	font-weight:600;
}
.sp-home-search__select-icon{flex:none;color:var(--muted)}

.sp-home-search .sp-select-ui__menu{
	top:calc(100% + 4px);
	max-height:264px;
	background:var(--surface2);
	border-color:var(--line2);
	border-radius:13px;
	padding:6px;
}
.sp-home-search .sp-select-ui__option{
	height:36px;
	padding:0 11px;
	font-size:13px;
	font-weight:600;
	color:var(--text);
}
.sp-home-search__opt-count{font-size:11.5px;color:var(--dim);flex:none}

.sp-home-search__divider{margin:22px 0 14px}

.sp-home-search__topic{display:block}

.sp-home-search__popular-title{
	margin:22px 0 10px;
	font-size:12.5px;
	font-weight:700;
	color:var(--muted);
}

.sp-home-popular{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:8px;
}
.sp-home-popular__item{
	display:flex;
	align-items:center;
	gap:9px;
	height:40px;
	padding:0 12px;
	min-width:0;
	background:var(--surface2);
	border:1px solid var(--line);
	border-radius:11px;
	color:var(--text);
	text-decoration:none;
	transition:border-color .2s ease,background .2s ease;
}
.sp-home-popular__item:hover{
	border-color:var(--accent-line);
	background:var(--accent-soft);
	color:var(--text);
	text-decoration:none;
}
.sp-home-popular__icon{flex:none;color:var(--accent-hi)}
.sp-home-popular__label{
	font-size:12.5px;
	font-weight:600;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

/* ==========================================================================
   3. Sekcje z karuzelą
   ========================================================================== */

.sp-home-rail{
	padding-top:56px;
	padding-bottom:8px;
	scroll-margin-top:calc(var(--sp-header-h,70px) + 20px);
}
.sp-home-rail--first{padding-top:44px}

.sp-home-head{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	gap:40px;
	margin-bottom:28px;
}
.sp-home-head__text{max-width:760px;min-width:0}
.sp-home-head--narrow .sp-home-head__text{max-width:740px}
.sp-home-head__title{margin:0 0 14px}

/* ==========================================================================
   4. FAQ + blok opisowy
   ========================================================================== */

.sp-home-bottom{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:60px;
	align-items:start;
	padding-top:72px;
	padding-bottom:20px;
}

.sp-home-faq{min-width:0}
.sp-home-faq__title{margin:0 0 14px}
.sp-home-faq__lead{margin:0 0 26px;max-width:480px}
.sp-home-faq__list{max-width:560px}

/* Znak +/– w akordeonie FAQ rysuje teraz main.css globalnie
   (`.sp-accordion__sign::before`) — lokalna kopia usunięta, żeby nie renderować „++". */

.sp-home-faq__cta{margin:30px 0 0;font-size:14px;color:var(--muted)}
.sp-home-faq__link{
	display:inline-flex;
	align-items:center;
	gap:9px;
	margin-top:10px;
	font-size:14.5px;
	font-weight:700;
	text-decoration:none;
}
.sp-home-faq__link:hover{text-decoration:none}

.sp-home-seo{min-width:0}
.sp-home-seo__title{margin:0 0 18px}
.sp-home-seo__text{
	margin:0 0 26px;
	color:var(--muted);
	font-size:14.5px;
	line-height:1.8;
	text-wrap:pretty;
}
.sp-home-seo__text--tight{margin-bottom:16px}
.sp-home-seo__text a{
	color:var(--accent-hi);
	text-decoration:underline;
	text-decoration-color:var(--accent-line);
	text-underline-offset:3px;
}
.sp-home-seo__text a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.sp-home-seo__h3{margin:0 0 12px}
.sp-home-seo__rule{margin:0 0 22px}
.sp-home-seo__disclaimer{
	margin:0;
	color:var(--dim);
	font-size:12.5px;
	line-height:1.75;
	text-wrap:pretty;
}

/* ==========================================================================
   5. Responsywność — 1180px / 900px / 640px
   ========================================================================== */

@media (max-width:1180px){
	.sp-home-hero{gap:36px;padding-top:44px;padding-bottom:52px}
	.sp-home-hero__lead{max-width:none}

	.sp-home-search{padding:26px}
	.sp-home-search__row{grid-template-columns:1fr 1fr 108px}
	.sp-home-search__row--single{grid-template-columns:1fr 108px}

	.sp-home-features{gap:14px 22px}

	.sp-home-head{gap:28px}
	.sp-home-bottom{gap:40px;padding-top:56px;padding-bottom:16px}
	.sp-home-faq__list,
	.sp-home-faq__lead{max-width:none}
}

@media (max-width:900px){
	.sp-home-hero{
		grid-template-columns:minmax(0,1fr);
		gap:32px;
		padding-top:32px;
		padding-bottom:40px;
	}

	.sp-home-search__row,
	.sp-home-search__row--single{grid-template-columns:1fr 1fr}
	.sp-home-search__submit{grid-column:1 / -1}

	.sp-home-rail{padding-top:40px;padding-bottom:8px}
	.sp-home-rail--first{padding-top:32px}

	.sp-home-head{
		flex-direction:column;
		align-items:flex-start;
		gap:20px;
		margin-bottom:22px;
	}
	.sp-home-head__text,
	.sp-home-head--narrow .sp-home-head__text{max-width:none}

	.sp-home-bottom{
		grid-template-columns:minmax(0,1fr);
		gap:40px;
		padding-top:44px;
		padding-bottom:16px;
	}
}

@media (max-width:640px){
	.sp-home-hero{padding-top:24px;padding-bottom:32px}
	.sp-home-hero__badge{margin-bottom:18px}

	.sp-home-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
	.sp-home-features{grid-template-columns:minmax(0,1fr);gap:14px}

	.sp-home-search{padding:22px 18px;border-radius:18px}
	.sp-home-search__row,
	.sp-home-search__row--single{grid-template-columns:minmax(0,1fr)}
	.sp-home-search__submit{grid-column:auto}

	.sp-home-popular{grid-template-columns:minmax(0,1fr)}

	.sp-home-bottom{padding-top:32px;padding-bottom:12px;gap:34px}
	.sp-home-faq__cta{margin-top:24px}
}