/* =====================================================================
   PODSTRONY PRODUKTOWE (/oferta/<usluga>/).
   Tresc przeniesiona 1:1 ze starej strony, wiec uklad musi obsluzyc
   dowolna dlugosc akapitow i list. Rytm sekcji: jasna, granatowa, jasna,
   piaskowa, jasna, piaskowa.
   ===================================================================== */

.pr { padding-block: clamp(3.2rem, 6.5vw, 6rem); }
.pr__inner {
	max-width: 1720px;
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.pr--surface { background: var(--wp--preset--color--surface); }
.pr--dark { background: var(--wp--preset--color--accent); color: #fff; }

/* --- typografia wspolna --- */
.pr__eyebrow {
	display: inline-flex; align-items: center; gap: .6rem;
	margin: 0 0 .8rem;
	font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.pr__eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.pr--dark .pr__eyebrow { color: rgba(255, 255, 255, .68); }

.pr__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: clamp(1.75rem, 3.1vw, 2.7rem);
	line-height: 1.1; letter-spacing: -.01em;
	max-width: 24ch;
}
.pr__sub {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: clamp(1.18rem, 1.75vw, 1.5rem);
	line-height: 1.25; letter-spacing: -.005em;
}
.pr__p {
	margin: clamp(.9rem, 1.6vw, 1.2rem) 0 0;
	font-size: clamp(1rem, 1.1vw, 1.08rem);
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	max-width: 68ch;
}
/* naglowki maja wlasny kolor z main.css, wiec na ciemnym pasie trzeba go nadpisac */
.pr--dark .pr__title, .pr--dark .pr__sub { color: #fff; }
.pr--dark .pr__p { color: rgba(255, 255, 255, .78); }
.pr__p a { color: inherit; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
@media (hover: hover) { .pr__p a:hover { color: var(--wp--preset--color--accent); } }
.pr--dark .pr__p a:hover { color: #fff; }

.pr__akcja { margin-top: clamp(1.6rem, 2.6vw, 2.2rem); }

/* --- zdjecie w sekcji --- */
.pr__foto {
	display: block;
	border-radius: clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px) clamp(26px, 3.2vw, 44px) clamp(14px, 1.6vw, 22px);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}
.pr__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   1. WSTEP - tekst i zdjecie obok
   ===================================================================== */
/* minmax(0, 1fr), a nie samo 1fr: domyslne minimum kolumny to szerokosc jej
   zawartosci, wiec przycisk z zakazem zawijania rozpychal kolumne ponizej
   1000 px szerzej niz ekran i tresc byla przycinana. */
.pr-intro__uklad {
	display: grid; align-items: start;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
}
/* position ustawiona tutaj, a nie przy ramce: ponizej jest media query,
   ktore podmienia ja na sticky, wiec pozniejsza deklaracja by je skasowala */
.pr-intro__foto { position: relative; }
@media (min-width: 1000px) {
	.pr-intro__uklad { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
/* Bez position: sticky. Kolumna ze zdjeciem jest elementem siatki z
   align-items: start, wiec ma wysokosc swojej tresci i przyklejanie nie
   mialoby gdzie dzialac. Reguła tu byla, ale nic nie robila. */
/* cienka ramka odsunieta w dol i w prawo - zdjecie dostaje glebie bez cienia */
.pr-intro__foto::after {
	content: "";
	position: absolute; z-index: -1;
	inset: clamp(1rem, 2vw, 1.6rem) calc(-1 * clamp(1rem, 2vw, 1.6rem)) calc(-1 * clamp(1rem, 2vw, 1.6rem)) clamp(1rem, 2vw, 1.6rem);
	border: 1px solid rgba(38, 53, 71, .3);
	border-radius: clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px) clamp(26px, 3.2vw, 44px) clamp(14px, 1.6vw, 22px);
	pointer-events: none;
}
.pr-intro__blok { margin-top: clamp(2rem, 3.4vw, 3rem); }

/* =====================================================================
   2. KORZYSCI - granatowy pas, lista na wloskowych liniach
   ===================================================================== */
.pr-korzysci__uklad {
	display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
@media (min-width: 1000px) {
	.pr-korzysci__uklad { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}
.pr-lista { list-style: none; margin: clamp(1.4rem, 2.4vw, 2rem) 0 0; padding: 0; }
.pr-lista li {
	position: relative;
	padding: clamp(.7rem, 1.2vw, .95rem) 0 clamp(.7rem, 1.2vw, .95rem) 2rem;
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: clamp(.97rem, 1.05vw, 1.05rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, .86);
}
.pr-lista li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.pr-lista li::before {
	content: ""; position: absolute; left: 0; top: calc(clamp(.7rem, 1.2vw, .95rem) + .62em);
	width: 18px; height: 1px; background: #efeae2;
}

/* =====================================================================
   3. PROCES - cztery kroki
   ===================================================================== */
.pr-proces__kroki {
	display: grid; gap: clamp(1.2rem, 2.2vw, 2rem);
	margin-top: clamp(2rem, 3.4vw, 3rem);
}
@media (min-width: 760px)  { .pr-proces__kroki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .pr-proces__kroki { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pr-krok {
	padding: clamp(1.4rem, 2.2vw, 2rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: clamp(12px, 1.4vw, 18px) clamp(12px, 1.4vw, 18px) clamp(22px, 2.6vw, 34px) clamp(12px, 1.4vw, 18px);
	background: var(--wp--preset--color--base);
}
.pr-krok__nr {
	display: block; margin-bottom: .7rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 800; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1;
	color: rgba(38, 53, 71, .26);
	font-variant-numeric: tabular-nums;
}
.pr-krok .pr__p { margin-top: .6rem; font-size: clamp(.94rem, 1vw, 1rem); }

/* wyrozniony krok: granat jak maska w hero, wiec tekst musi sie odwrocic */
.pr-krok--ciemny {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}
.pr-krok--ciemny .pr__sub { color: #fff; }
.pr-krok--ciemny .pr__p { color: rgba(255, 255, 255, .78); }
.pr-krok--ciemny .pr-krok__nr { color: rgba(255, 255, 255, .38); }

/* =====================================================================
   4. RODZAJE - lista w dwoch kolumnach + pas zdjec
   ===================================================================== */
.pr-rodzaje__lista {
	list-style: none; margin: clamp(1.4rem, 2.4vw, 2rem) 0 0; padding: 0;
	display: grid; gap: 0 clamp(1.5rem, 3vw, 3rem);
}
@media (min-width: 760px) { .pr-rodzaje__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pr-rodzaje__lista li {
	position: relative;
	padding: clamp(.6rem, 1vw, .8rem) 0 clamp(.6rem, 1vw, .8rem) 2rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: clamp(.97rem, 1.05vw, 1.05rem);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
}
.pr-rodzaje__lista li::before {
	content: ""; position: absolute; left: 0; top: calc(clamp(.6rem, 1vw, .8rem) + .6em);
	width: 18px; height: 1px; background: var(--wp--preset--color--accent); opacity: .5;
}
.pr-galeria {
	display: grid; gap: clamp(.6rem, 1vw, 1rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: clamp(2rem, 3.4vw, 3rem);
}
@media (min-width: 760px)  { .pr-galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .pr-galeria { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.pr-galeria img {
	display: block; width: 100%; aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: clamp(10px, 1.2vw, 16px);
	transition: transform .5s var(--ease-out);
}
.pr-galeria > *:last-child img { border-bottom-right-radius: clamp(20px, 2.4vw, 30px); }

/* kazde zdjecie otwiera pelnoekranowy podglad - ten sam co w Galerii */
.pr-galeria button {
	position: relative;
	display: block; width: 100%; padding: 0;
	border: 0; background: none; cursor: zoom-in;
	border-radius: clamp(10px, 1.2vw, 16px);
	overflow: hidden;
}
.pr-galeria button::after {
	content: "";
	position: absolute; inset: 0;
	background: rgba(15, 20, 28, 0);
	transition: background .35s ease;
}
@media (hover: hover) {
	.pr-galeria button:hover img { transform: scale(1.06); }
	.pr-galeria button:hover::after { background: rgba(15, 20, 28, .18); }
}
.pr-galeria button:focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 2px; }

/* =====================================================================
   5. DLACZEGO WARTO - cztery karty
   ===================================================================== */
.pr-dlaczego__karty {
	display: grid; gap: clamp(1.2rem, 2.2vw, 2rem);
	margin-top: clamp(2rem, 3.4vw, 3rem);
}
@media (min-width: 900px) { .pr-dlaczego__karty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pr-karta {
	padding: clamp(1.5rem, 2.4vw, 2.2rem);
	border-radius: clamp(12px, 1.4vw, 18px) clamp(12px, 1.4vw, 18px) clamp(22px, 2.6vw, 34px) clamp(12px, 1.4vw, 18px);
	background: var(--wp--preset--color--surface);
}
.pr-karta .pr__p { margin-top: .7rem; color: #4b5563; }

/* =====================================================================
   6. FAQ - natywne <details>, zero JavaScriptu
   ===================================================================== */
/* Cala sekcja stoi na srodku, inaczej niz pozostale sekcje podstrony, ktore
   ciagna do lewej. Naglowek dostaje pelna szerokosc, zeby zmiescil sie w
   jednym wierszu (domyslne 24ch lamie go na dwa) i zeby srodek liczyl sie
   wzgledem sekcji, a nie wzgledem przycietego pudelka.
   Same pytania i odpowiedzi zostaja wyrownane do lewej - wysrodkowany tekst
   ciezko sie czyta, zwlaszcza przy dluzszych odpowiedziach. */
.pr-faq-sekcja .pr__title { max-width: none; text-align: center; }
.pr-faq {
	max-width: 68rem; margin: clamp(2rem, 3.4vw, 3rem) auto 0;
	display: grid; gap: .5rem;
}
/* wlasne tlo, bo na piaskowej sekcji sama kreska ginela */
.pr-faq__item {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: clamp(10px, 1.2vw, 14px);
	padding-inline: clamp(1rem, 1.8vw, 1.6rem);
	transition: border-color .3s ease;
}
.pr-faq__item[open] { border-color: rgba(38, 53, 71, .35); }
.pr-faq__item summary {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
	padding: clamp(.95rem, 1.6vw, 1.3rem) 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: clamp(1rem, 1.25vw, 1.15rem);
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
}
.pr-faq__item summary::-webkit-details-marker { display: none; }
.pr-faq__znak {
	position: relative; flex: none;
	width: 20px; height: 20px; margin-top: .18em;
}
.pr-faq__znak::before, .pr-faq__znak::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	background: var(--wp--preset--color--accent);
	transform: translate(-50%, -50%);
	transition: transform .3s var(--ease-out), opacity .3s ease;
}
.pr-faq__znak::before { width: 14px; height: 1.5px; }
.pr-faq__znak::after  { width: 1.5px; height: 14px; }
.pr-faq__item[open] .pr-faq__znak::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.pr-faq__item .pr__p {
	margin-top: 0;
	padding: 0 0 clamp(1rem, 1.7vw, 1.4rem);
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: clamp(.8rem, 1.3vw, 1.1rem);
	max-width: 76ch;
}
@media (hover: hover) { .pr-faq__item summary:hover { color: var(--wp--preset--color--accent); } }
.pr-faq__item summary:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

/* Blog: na razie sam hero i pusta biala sekcja pod nim. Minimalna wysokosc
   trzyma stopke przy dole ekranu, dopoki nie ma wpisow. */
.blog-lista { background: var(--wp--preset--color--base); min-height: clamp(220px, 34vh, 420px); }

/* =====================================================================
   WASKIE EKRANY - przyciski w sekcjach
   Przycisk ma domyslnie zakaz zawijania, zeby napis nie lamal sie w polowie.
   Przy 320 px najdluzsze wezwania (np. "Omow z nami Twoj projekt kuchni")
   potrzebuja 330 px, a na tresc zostaje 265 px. Na takich ekranach przycisk
   dostaje pelna szerokosc i zgode na zlamanie napisu - tak samo jak przyciski
   w hero podstron.
   ===================================================================== */
@media (max-width: 620px) {
	.pr__akcja .btn,
	.pr-krok .btn {
		display: flex;
		width: 100%;
		white-space: normal;
		text-align: center;
	}
}