/* Komponenty wspólne dla wszystkich stron: nadtytuł z linią, przyciski, animacje wejścia. */

/* ---------- Nadtytuł (mała etykieta z linią po lewej) ---------- */

.pr-nadtytul {
	display: flex;
	align-items: center;
	width: var(--pr-linia, 430px);
	max-width: 100%;
	margin: 0;
	padding-block: 15px;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 12px;
	font-weight: 600;
	line-height: 12px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--wp--preset--color--krem);
}

/* Linia wypełnia szerokość znacznika minus tekst i odstęp 10 px. */
.pr-nadtytul::before {
	content: "";
	flex: 1 1 auto;
	min-width: var(--pr-linia-min, 0);
	border-top: 1px solid currentColor;
}

.pr-nadtytul span {
	margin-left: 10px;
}

.pr-nadtytul--granat {
	color: var(--wp--preset--color--granat-nocny);
}

.pr-nadtytul--krem {
	color: var(--wp--preset--color--krem);
}

.pr-nadtytul--burgund {
	color: var(--wp--preset--color--burgund);
}

/* ---------- Strzałka (maska SVG, kolor z currentColor) ---------- */

.pr-link-strzalka .wp-block-button__link::after,
.pr-przycisk .wp-block-button__link::after,
.pr-przycisk-pelny .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M1 6h9M7 3l3 3-3 3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M1 6h9M7 3l3 3-3 3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Przycisk tekstowy ze strzałką i podkreśleniem przy najechaniu ---------- */

.wp-block-buttons > .pr-link-strzalka {
	display: inline-flex;
	padding-bottom: 4px;
	background-image: linear-gradient(var(--wp--preset--color--krem), var(--wp--preset--color--krem));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	transition: background-size 0.7s ease;
}

.wp-block-buttons > .pr-link-strzalka:hover {
	background-size: 100% 1px;
}

.pr-link-strzalka .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	padding: 2.5px 2px;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 12px;
	font-weight: 600;
	line-height: 12px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--wp--preset--color--krem);
}

/* ---------- Przycisk tekstowy (wariant z kolorem) ---------- */

.pr-przycisk .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 12px 24px 12px 0;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	background: transparent;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 12px;
	font-weight: 600;
	line-height: 12px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--pr-przycisk-kolor, var(--wp--preset--color--krem));
	transition: color 0.3s, border-color 0.3s;
}

.pr-przycisk .wp-block-button__link:hover,
.pr-przycisk .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--atrament);
	border-color: var(--wp--preset--color--atrament);
}

.pr-przycisk--krem {
	--pr-przycisk-kolor: var(--wp--preset--color--krem);
}

.pr-przycisk--granat {
	--pr-przycisk-kolor: var(--wp--preset--color--granat-nocny);
}

.pr-przycisk--atrament {
	--pr-przycisk-kolor: var(--wp--preset--color--atrament);
}

/* ---------- Przycisk pełny (bordowy, zaokrąglony) ---------- */

.pr-przycisk-pelny .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 19px;
	padding: 15px 25px;
	border: 0;
	border-radius: 10px;
	background: var(--wp--preset--color--burgund);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 17px;
	font-weight: 600;
	line-height: 17px;
	letter-spacing: -0.204px;
	color: var(--wp--preset--color--krem);
	transition: background 0.3s, color 0.3s;
}

.pr-przycisk-pelny .wp-block-button__link::after {
	width: 17px;
	height: 17px;
}

.pr-przycisk-pelny .wp-block-button__link:hover,
.pr-przycisk-pelny .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--burgund-ciemny);
}

/* ---------- Przycisk z kółkiem i strzałką w górę-prawo ---------- */

.pr-przycisk-ikona .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	padding: 15px 15px 15px 30px;
	border: 0;
	border-radius: 10px;
	background: var(--wp--preset--color--burgund);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 17px;
	font-weight: 600;
	line-height: 17px;
	letter-spacing: -0.204px;
	color: var(--wp--preset--color--krem);
	transition: background 0.3s;
}

.pr-przycisk-ikona .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 37px;
	height: 37px;
	border-radius: 100px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' fill='none' stroke='%236c303c' stroke-width='1.8'%3E%3Cpath d='M3 14 14 3M5 3h9v9'/%3E%3C/svg%3E") center / 17px 17px no-repeat var(--wp--preset--color--krem);
}

.pr-przycisk-ikona .wp-block-button__link:hover,
.pr-przycisk-ikona .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--burgund-ciemny);
}

/* ---------- Pas ze wzorem logo i gradientem (strona główna, oferta) ---------- */

.pr-pas {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-height: clamp(380px, 40vw, 720px);
	padding: 60px 80px;
	background: var(--wp--preset--color--burgund) url("../images/tlo-wzor-logo.png") center / cover;
}

.pr-pas::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 22%, var(--wp--preset--color--burgund) 98%);
	pointer-events: none;
}

.pr-pas > * {
	position: relative;
}

.pr-nadtytul--pas {
	--pr-linia: 314px;
}

.pr-pas__rzad {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
}

.pr-pas .pr-pas__tytul {
	margin: 0;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: clamp(2.4rem, 6vw, 7rem);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--krem);
}

.pr-pas .pr-pas__przycisk {
	margin: 0;
}

/* Wariant z treścią przy dolnej krawędzi (nagłówek i opis zamiast rzędu z przyciskiem). */
.pr-pas--dol {
	justify-content: flex-end;
	gap: 20px;
}

/* Oferta: burgund narasta od dołu, pod tekstem (odwrotnie niż na stronie głównej), na każdej szerokości. */
.pr-pas.pr-pas--dol::before {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 22%, var(--wp--preset--color--burgund) 98%);
}

.pr-pas .pr-pas__tytul--oferta {
	width: 52%;
	font-size: clamp(2.4rem, 4vw, 5.6rem);
}

.pr-pas .pr-pas__opis {
	width: 47%;
	margin: 20px 0 14.4px;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 16px;
	line-height: 1.7em;
	color: var(--wp--preset--color--krem);
}

@media (max-width: 1024px) {
	.pr-pas::before {
		background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 2%, var(--wp--preset--color--burgund) 72%);
	}

	.pr-pas__rzad {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 767px) {
	.pr-pas {
		padding: 32px 25px;
	}

	.pr-pas::before {
		background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 18%, var(--wp--preset--color--burgund) 71%);
	}

	.pr-pas .pr-pas__tytul--oferta,
	.pr-pas .pr-pas__opis {
		width: 100%;
	}
}

/* ---------- Akcent konturowy w nagłówkach ---------- */

.pr-akcent {
	color: transparent;
	-webkit-text-stroke: 2px var(--wp--preset--color--tlo);
}

/* Podkreślenie rysowane od lewej (odpowiednik markera „underline” z Elementora). */
.pr-podkreslenie {
	position: relative;
	display: inline-block;
}

.pr-podkreslenie::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 150' preserveAspectRatio='none'%3E%3Cpath d='M7.7,145.6C109,125,299.9,116.2,401,121.3c42.1,2.2,87.6,11.8,87.3,25.7' fill='none' stroke='%23F4EEE2' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	transform: translate(-50%, -50%);
	animation: pr-podkreslenie 1.2s ease-out both;
	pointer-events: none;
}

@keyframes pr-podkreslenie {
	from {
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pr-podkreslenie::after {
		animation: none;
	}
}

/* ---------- Zaproszenie do kontaktu „Masz przestrzeń?” (strona główna, realizacje) ---------- */

.pr-cta {
	position: relative;
	display: flex;
	justify-content: space-between;
	padding: 150px 80px;
	background: var(--wp--preset--color--tlo);
}

.pr-cta__wzor {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	width: 46%;
	background: repeating-linear-gradient(135deg, rgba(48, 72, 84, 0.05) 0 2px, transparent 2px 14px);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
	mask-image: linear-gradient(90deg, transparent, #000 70%);
	pointer-events: none;
}

.pr-cta__lewa,
.pr-cta__prawa {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pr-cta__lewa {
	width: 65%;
}

.pr-cta__prawa {
	justify-content: center;
	width: 35%;
}

.pr-cta .pr-cta__etykieta {
	margin: 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 12px;
	font-weight: 600;
	line-height: 12px;
	letter-spacing: 0.22em;
	color: var(--wp--preset--color--przygaszony);
}

.pr-cta .pr-cta__tytul {
	margin: 0;
	padding: 0 55px 30px 0;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: clamp(2.7rem, 5vw, 7.5rem);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--atrament);
}

.pr-cta__akcent {
	color: var(--wp--preset--color--burgund);
}

.pr-linia {
	position: relative;
}

.pr-linia::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0.07em;
	left: 0;
	height: 0.09em;
	background: var(--wp--preset--color--burgund);
}

.pr-cta .pr-cta__uwaga {
	max-width: 218px;
	margin: 0;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 21px;
	color: var(--wp--preset--color--przygaszony);
}

@media (max-width: 767px) {
	.pr-cta {
		flex-direction: column;
		gap: 0;
		padding: 32px 25px;
	}

	.pr-cta__lewa,
	.pr-cta__prawa {
		width: 100%;
	}
}

/* ---------- Kursor maszyny do pisania ---------- */

.pr-kursor {
	display: inline-block;
	width: 2px;
	height: 0.8em;
	margin-left: 4px;
	vertical-align: middle;
	background: #f5f0e8;
	animation: pr-kursor-miga 0.7s step-end infinite;
}

.pr-kursor.gotowe {
	animation: pr-kursor-znika 0.5s ease 1s forwards;
}

@keyframes pr-kursor-miga {
	50% {
		opacity: 0;
	}
}

@keyframes pr-kursor-znika {
	to {
		opacity: 0;
	}
}

/* ---------- Animacje wejścia (odpowiedniki fadeIn i fadeInUp z Elementora) ---------- */
/* Treść jest ukryta tylko wtedy, gdy działa JavaScript (klasa pr-js na <html>). */

.pr-js .pr-wejscie:not(.pr-wejscie--jest) {
	opacity: 0;
}

.pr-js .pr-wejscie--jest {
	animation: pr-zanikanie 1.25s both;
}

.pr-js .pr-wejscie--jest.pr-wejscie--w-gore {
	animation-name: pr-w-gore;
}

.pr-js .pr-wejscie--jest.pr-wejscie--szybko {
	animation-duration: 0.75s;
}

.pr-js .pr-wejscie--jest.pr-wejscie--300 {
	animation-delay: 0.3s;
}

@keyframes pr-zanikanie {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes pr-w-gore {
	from {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pr-js .pr-wejscie:not(.pr-wejscie--jest),
	.pr-js .pr-wejscie--jest {
		opacity: 1;
		animation: none;
	}
}