/* Strona glowna. Uklad odtworzony z produkcji, ale hero jest wezsze:
   na produkcji formularz siedzi na zdjeciu i zaslania pol kadru, a nad
   zalamaniem nie ma godzin ani oceny. */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(420px, 46vw, 620px);
	overflow: hidden;
	background: var(--c-brand-dark);
}
.hero__bg {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 28%;
}
/* Scrim staly, niezalezny od zdjecia - gwarantuje kontrast H1 zamiast
   liczyc na to, ze tlo bedzie ciemne (punkt B1/B7 audytu). */
.hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(17, 59, 105, 0.94) 0%,
		rgba(17, 59, 105, 0.78) 42%,
		rgba(17, 59, 105, 0.28) 100%
	);
}
.hero__inner { position: relative; padding-block: var(--sp-8); }
.hero__title { color: var(--c-white); max-width: 20ch; margin-bottom: var(--sp-3); }
.hero__lead {
	color: rgba(255, 255, 255, 0.9);
	font-size: 1.08rem;
	max-width: 46ch;
	margin: 0 0 var(--sp-6);
}

/* Etykieta nad przyciskami zamiast w srodku pomaranczowej pigulki - dzieki
   temu oba CTA maja identyczna wysokosc i rownaja sie do siebie. */
.hero__akcje-label {
	margin: 0 0 var(--sp-2);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* Pelna biel - przy 0.85 alfa etykieta ginela na jasniejszych partiach
	   zdjecia. Tekst nad zdjeciem musi miec kontrast niezalezny od kadru. */
	color: var(--c-white);
	text-shadow: 0 1px 3px rgba(17, 59, 105, 0.45);
}
.hero__akcje {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;   /* rowna wysokosc obu przyciskow */
	gap: var(--sp-3);
}

/* Numer telefonu jest najwiekszym elementem interaktywnym nad zalamaniem -
   to najkrotsza droga do wizyty, a recepcja odbiera. */
.hero__tel {
	display: inline-flex;
	align-items: center;
	padding: var(--sp-4) var(--sp-6);
	background: var(--c-cta);
	color: var(--c-white);
	border-radius: var(--r-pill);
	font-family: var(--f-heading);
	font-size: 1.4rem;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.hero__tel:hover { background: var(--c-cta-hover); transform: translateY(-1px); }

/* Mobile: oba CTA na pelna szerokosc i tej samej wysokosci.
   Hierarchie robi KOLOR (pomaranczowe wypelnienie vs obrys), nie rozmiar -
   rozne wysokosci przyciskow jeden pod drugim czytaja sie jako niedoróbka,
   a nie jako hierarchia. Kciuk trafia w cel niezaleznie od dlugosci etykiety. */
@media (max-width: 599.98px) {
	.hero__akcje { flex-direction: column; align-items: stretch; }
	.hero__tel,
	.hero__akcje .btn {
		width: 100%;
		min-height: 60px;
		justify-content: center;
		/* padding-block wyzerowany: przy roznych wartosciach (--sp-4 vs --sp-3)
		   i roznych rozmiarach pisma przyciski wychodzily 67 vs 59 px.
		   Wysokosc ustala min-height, tresc centruje sie w pionie. */
		padding-block: 0;
		padding-inline: var(--sp-4);
	}
	.hero__tel { font-size: 1.32rem; }
}

.hero__fakty {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3) var(--sp-6);
	margin: var(--sp-6) 0 0;
	padding: var(--sp-4) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.28);
	list-style: none;
	font-size: 0.86rem;
	color: rgba(255, 255, 255, 0.88);
}
.hero__fakty strong { color: var(--c-white); }
.hero__fakty .open-now { margin: 0; color: rgba(255, 255, 255, 0.88); }
.hero__fakty .open-now[data-state="open"] { color: #9ce8bd; }

/* --- sekcje --- */
.sekcja { padding-block: var(--sp-8); }
.sekcja--tlo { background: var(--c-brand-bg); }
.sekcja__title { margin-bottom: var(--sp-4); max-width: 30ch; }
.sekcja__lead { max-width: 62ch; color: var(--c-text-soft); margin: 0 0 var(--sp-6); }
.sekcja__wiecej { margin-top: var(--sp-6); }
.container--waski { max-width: var(--w-narrow); }

/* --- siatka uslug --- */
/* Bez ikon w kolkach i bez ramek wokolo kart: oddziela je linia u gory
   i odstep. Produkcja ma karty na jasnym tle - tu sa na tle sekcji. */
.uslugi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--sp-5) var(--sp-6);
}
.usluga { display: flex; flex-direction: column; }

/* Zdjecie bez ramki i bez zaokraglen - oddziela je sama krawedz kadru.
   Kreska nad tytulem zostaje jako element rytmu siatki. */
.usluga__foto {
	display: block;
	margin-bottom: var(--sp-4);
	overflow: hidden;
	background: var(--c-brand-bg);
}
.usluga__foto img {
	width: 100%;
	aspect-ratio: 8 / 5;
	object-fit: cover;
	transition: transform 0.35s var(--ease);
}
.usluga:hover .usluga__foto img { transform: scale(1.03); }

.usluga__title {
	font-size: 1.06rem;
	margin-bottom: var(--sp-2);
	padding-top: var(--sp-3);
	border-top: 2px solid var(--c-brand-light);
}
.usluga__title a { color: var(--c-brand-dark); text-decoration: none; }
.usluga__title a:hover { color: var(--c-cta); }
.usluga__opis { margin: 0 0 var(--sp-3); font-size: 0.9rem; color: var(--c-text-muted); }
.usluga__wiecej { margin: auto 0 0; padding-top: var(--sp-2); }
.usluga__wiecej a {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--c-brand);
	text-decoration: none;
}
.usluga__wiecej a::after { content: " →"; }
.usluga__wiecej a:hover { color: var(--c-cta); }

/* --- zaufanie --- */
.zaufanie {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-6);
	align-items: start;
}
@media (min-width: 900px) {
	/* Asymetria zamiast dzielenia na pol */
	.zaufanie { grid-template-columns: minmax(0, 1.7fr) minmax(220px, 0.8fr); gap: var(--sp-8); }
}
.zaufanie__lista { margin: var(--sp-5) 0; padding: 0; list-style: none; }
.zaufanie__lista li {
	position: relative;
	padding-left: var(--sp-5);
	margin-bottom: var(--sp-3);
	font-size: 0.94rem;
}
.zaufanie__lista li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.7em;
	width: 12px; height: 2px;
	background: var(--c-cta);
}
.zaufanie__lista strong { color: var(--c-brand-dark); }

.zaufanie__ocena {
	padding: var(--sp-6) var(--sp-5);
	background: var(--c-brand-bg);
	border-top: 3px solid var(--c-cta);
	text-align: center;
}
.ocena__liczba {
	margin: 0;
	font-family: var(--f-heading);
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 1;
	color: var(--c-brand-dark);
}
.ocena__skala { font-size: 1.5rem; font-weight: 600; color: var(--c-brand); }
.ocena__etykieta {
	margin: var(--sp-2) 0 var(--sp-1);
	font-family: var(--f-heading);
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--c-brand-dark);
}
.ocena__opis { margin: 0 0 var(--sp-4); font-size: 0.86rem; color: var(--c-text-muted); }
.ocena__link { font-size: 0.84rem; font-weight: 600; color: var(--c-brand); }

/* --- umow wizyte --- */
.umow {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-6);
	align-items: start;
}
@media (min-width: 900px) {
	.umow { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: var(--sp-8); }
}
.umow__tel {
	display: inline-block;
	margin-block: var(--sp-4) 0;
	font-family: var(--f-heading);
	font-size: 2.1rem;
	font-weight: 700;
	color: var(--c-cta);
	text-decoration: none;
}
.umow__hours { max-width: 340px; margin-block: var(--sp-5); }
.umow__adres { font-style: normal; font-size: 0.92rem; line-height: 1.6; color: var(--c-text-muted); }

.umow__form { background: var(--c-brand-bg); border-top: 3px solid var(--c-brand); padding: var(--sp-6) var(--sp-5); }
.umow__form-title { font-size: 1.1rem; margin-bottom: var(--sp-4); }