/* =========================================================================
   PT Home V2
   Skrocenie strony glownej na mobile plus przypiety przycisk „Umow wizyte”.

   Zasady:
   1. Wszystko jest zakotwiczone w body.pt-hv2, wiec nic nie wycieka
      na inne podstrony ani na oryginalna strone glowna.
   2. Zadne zdanie, naglowek ani karta nie znika z DOM. Zmienia sie
      wylacznie uklad, wiec tresc dla Google zostaje bez zmian.
   3. Zero JavaScriptu, same linki <a>, zeby nie ruszyc pomiaru w GTM
      i zeby Cookiebot nie mial czego blokowac.

   Uwaga techniczna: oryginalne style siedza we wtyczce pt-blog-styles
   jako .pt-home ... (specyficznosc 0,2,0) i sa drukowane pozniej niz ten
   plik. Dlatego kazdy selektor zaczyna sie od body.pt-hv2 (0,2,1),
   inaczej przegrywalby kolejnoscia. Punkt lamania serwisu to 820 px.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Przypiety przycisk „Umow wizyte”
   ------------------------------------------------------------------------- */

body.pt-hv2 .pt-sticky-cta {
	position: fixed;
	z-index: 9990;
	display: flex;
	gap: 10px;
	font-family: Montserrat, sans-serif;
}

body.pt-hv2 .pt-sticky-btn,
body.pt-hv2 .pt-sticky-tel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	border-radius: 30px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}

body.pt-hv2 .pt-sticky-btn {
	padding: 14px 26px;
	color: #fff;
	background-image: linear-gradient(135deg, #e8637a 0%, #c94a5e 100%);
	box-shadow: 0 10px 24px rgba(201, 74, 94, .28);
}

body.pt-hv2 .pt-sticky-tel {
	padding: 14px 20px;
	color: #c94a5e;
	background: #fff;
	border: 1.5px solid #f8b6c0;
}

body.pt-hv2 .pt-sticky-btn:hover,
body.pt-hv2 .pt-sticky-tel:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(201, 74, 94, .32);
}

body.pt-hv2 .pt-sticky-btn:focus-visible,
body.pt-hv2 .pt-sticky-tel:focus-visible {
	outline: 3px solid #c94a5e;
	outline-offset: 2px;
}

/* Kotwica nie moze konczyc sie tuz pod krawedzia ekranu. */
body.pt-hv2 #rezerwacja,
body.pt-hv2 #kontakt {
	scroll-margin-top: 16px;
}

/* Mobile: pelnej szerokosci pasek przy dolnej krawedzi. */
@media (max-width: 820px) {

	body.pt-hv2 .pt-sticky-cta {
		left: 0;
		right: 0;
		bottom: 0;
		padding: 10px 14px;
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, .95);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		border-top: 1px solid #f1dde1;
		box-shadow: 0 -6px 20px rgba(43, 43, 58, .08);
	}

	body.pt-hv2 .pt-sticky-btn {
		flex: 1 1 auto;
		padding: 14px 18px;
	}

	body.pt-hv2 .pt-sticky-tel {
		flex: 0 0 auto;
	}

	/* Zeby pasek nie zaslanial konca strony. */
	body.pt-hv2 {
		padding-bottom: 80px;
	}

	/* Plakietka Cookiebota siedzi w lewym dolnym rogu i nachodzila
	   na przycisk. Podnosimy ja ponad pasek. Sama zgoda dziala bez zmian. */
	body.pt-hv2 #CookiebotWidget {
		bottom: 96px !important;
	}
}

/* Desktop: pigulka w prawym dolnym rogu, widoczna od pierwszego piksela. */
@media (min-width: 821px) {

	body.pt-hv2 .pt-sticky-cta {
		right: 24px;
		bottom: 24px;
		align-items: center;
	}

	body.pt-hv2 .pt-sticky-tel {
		background: #fff;
		box-shadow: 0 8px 20px rgba(43, 43, 58, .12);
	}
}

/* -------------------------------------------------------------------------
   2. Mobile: mniej powietrza miedzy sekcjami (bylo 60/64 px)
   ------------------------------------------------------------------------- */

@media (max-width: 820px) {

	body.pt-hv2 .pt-problems,
	body.pt-hv2 .pt-steps,
	body.pt-hv2 .pt-benefits,
	body.pt-hv2 .pt-services,
	body.pt-hv2 .pt-testimonials,
	body.pt-hv2 .pt-materialy,
	body.pt-hv2 .pt-about,
	body.pt-hv2 .pt-videos,
	body.pt-hv2 .pt-faq {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	body.pt-hv2 .pt-section-title {
		margin-bottom: 16px;
	}

	body.pt-hv2 .pt-problems-sub {
		margin-bottom: 20px;
		font-size: 15px;
	}
}

/* -------------------------------------------------------------------------
   3. Mobile: hero, zeby przycisk wchodzil nad zgiecie
   ------------------------------------------------------------------------- */

@media (max-width: 820px) {

	body.pt-hv2 .pt-hero2 {
		padding-top: 28px;
		padding-bottom: 28px;
	}

	body.pt-hv2 .pt-hero2 h1 {
		line-height: 1.16;
		margin-bottom: 14px;
	}

	body.pt-hv2 .pt-hero2-sub {
		margin-bottom: 18px;
	}

	/* Zdjecie Natalii nad naglowkiem, zeby twarz byla widoczna od razu.
	   To zmiana wylacznie wizualna (CSS order). W DOM H1 zostaje pierwszy,
	   wiec kolejnosc czytana przez Google sie nie zmienia. */
	body.pt-hv2 .pt-hero2-photo {
		order: -1;
		margin-bottom: 18px;
	}

	body.pt-hv2 .pt-hero2-photo img {
		/* Sztywna wysokosc, a nie max-height: miejsce na zdjecie jest
		   zarezerwowane zanim doladuje je lazy loading, wiec tresc
		   pod spodem nie podskakuje (CLS). */
		height: 205px;
		width: 100%;
		object-fit: cover;
		object-position: center 18%;
	}

	body.pt-hv2 .pt-trust-inner {
		gap: 4px 16px;
		font-size: 13px;
	}
}

/* -------------------------------------------------------------------------
   4. Mobile: karty w dwoch kolumnach zamiast jednej
   Tresc kart zostaje w calosci, zmienia sie tylko szerokosc.
   Karty produktow (pt-materialy) zostaja w jednej kolumnie, bo w dwoch
   lamia sie w nich przyciski.
   ------------------------------------------------------------------------- */

@media (max-width: 820px) {

	body.pt-hv2 .pt-problems-grid,
	body.pt-hv2 .pt-benefits-grid,
	body.pt-hv2 .pt-services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	body.pt-hv2 .pt-problem,
	body.pt-hv2 .pt-benefit-card,
	body.pt-hv2 .pt-service-card {
		padding: 16px 14px;
	}

	body.pt-hv2 .pt-problem h3,
	body.pt-hv2 .pt-benefit-card h3,
	body.pt-hv2 .pt-service-card h3 {
		font-size: 15px;
		line-height: 1.25;
		margin-bottom: 6px;
	}

	body.pt-hv2 .pt-problem p,
	body.pt-hv2 .pt-benefit-card p,
	body.pt-hv2 .pt-service-card p {
		font-size: 13px;
		line-height: 1.45;
	}

	body.pt-hv2 .pt-service-icon {
		margin-bottom: 6px;
	}

	body.pt-hv2 .pt-service-icon img {
		width: 28px;
		height: 28px;
	}
}

/* -------------------------------------------------------------------------
   5. Mobile: filmy i opinie jako karuzela przesuwana palcem
   Kafle zostaja w DOM i sa widoczne, tylko ulozone w poziomie.
   Widoczny skrawek kolejnego kafla mowi uzytkownikowi „przesun”.
   ------------------------------------------------------------------------- */

@media (max-width: 820px) {

	body.pt-hv2 .pt-videos-grid,
	body.pt-hv2 .pt-testimonials-grid {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 12px;
		margin-left: -20px;
		margin-right: -20px;
		padding: 4px 20px 10px;
	}

	body.pt-hv2 .pt-videos-grid::-webkit-scrollbar,
	body.pt-hv2 .pt-testimonials-grid::-webkit-scrollbar {
		display: none;
	}

	body.pt-hv2 .pt-video-wrap,
	body.pt-hv2 .pt-testimonial-card {
		flex: 0 0 84%;
		scroll-snap-align: center;
	}

	body.pt-hv2 .pt-video-wrap video {
		display: block;
		width: 100%;
		height: auto;
	}

	body.pt-hv2 .pt-testimonial-card {
		padding-top: 56px;
	}
}

/* -------------------------------------------------------------------------
   6. Formularz rezerwacji
   Sam CSS, pola i ID formularza (CF7 nr 3131) zostaja nietkniete,
   wiec zdarzenie wpcf7mailsent i konwersja w Ads dzialaja jak dotad.
   ------------------------------------------------------------------------- */

body.pt-hv2 .wpcf7-form textarea {
	height: 92px;
	min-height: 92px;
}

body.pt-hv2 .wpcf7-form .wpcf7-submit {
	width: 100%;
	min-height: 54px;
	border: 0;
	border-radius: 30px;
	color: #fff;
	background-color: #c94a5e;
	background-image: linear-gradient(135deg, #e8637a 0%, #c94a5e 100%);
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	box-shadow: 0 10px 24px rgba(201, 74, 94, .28);
	cursor: pointer;
	transition: transform .15s ease;
}

body.pt-hv2 .wpcf7-form .wpcf7-submit:hover {
	transform: translateY(-1px);
}