/* ============================================================
   PARENDI - Story Section (Clingr-style)
   Lewa: tekst zmienny. Prawa: pelnowysokosciowy obraz, slidy
   nachodza na siebie od dolu (slide-up overlay).
   ============================================================ */

.parendi-story {
	position: relative;
	width: 100%;
	/* 400vh = 100vh sticky pin + 300vh scroll (100vh per slide x 3 slidy) */
	height: 400vh;
	background: var(--c-bg, #F8F5F0);
	z-index: 40;
	overflow: visible;
	margin-top: 0;
}

.parendi-story__pin {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.parendi-story__container {
	width: 100%;
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: stretch;
}

/* Tablet (768-1024) - krotszy scroll (250vh), grid 1fr 1fr nadal dziala */
@media (max-width: 1024px) and (min-width: 768px) {
	.parendi-story {
		height: 250vh;
		margin-top: 0;
	}
}

/* ─── Left column (text) ─────────────────────────── */

.parendi-story__left {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(40px, 6vw, 100px);
	background: var(--c-bg, #F8F5F0);
}

.parendi-story__icon {
	width: 56px;
	height: 56px;
	border: 1px solid var(--c-line-soft, #D1C7C1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-accent, #C9A96E);
	margin-bottom: 32px;
}

.parendi-story__icon svg {
	width: 28px;
	height: 28px;
}

.parendi-story__eyebrow {
	display: block;
	font-family: var(--font-sans, 'Inter', sans-serif);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: #C9A96E;
	margin-bottom: 24px;
}

.parendi-story__slides {
	position: relative;
	width: 100%;
	min-height: 280px;
}

.parendi-story__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.parendi-story__slide.is-active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.parendi-story__title {
	font-family: var(--font-serif, 'Fraunces', serif);
	font-weight: 400;
	font-size: clamp(32px, 3.5vw, 48px);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--c-text-on-light, #1A1714);
	margin: 0 0 24px;
	max-width: 480px;
}

.parendi-story__content {
	font-family: var(--font-sans, 'Inter', sans-serif);
	font-weight: 400;
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.65;
	color: var(--c-text-muted, #5A5A5A);
	margin: 0;
	max-width: 460px;
}

/* ─── Right column (full-height image stack) ──────── */

.parendi-story__right {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.parendi-story__card {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--c-accent-soft, #F5ECD8);
}

/* Pink wash w prawym dolnym rogu - signature PARENDI editorial.
   Duzy radial gradient z prawego naroza, rozlewa sie na ~70% kadru. */
.parendi-story__card::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
	background:
		radial-gradient(ellipse 110% 90% at 100% 100%, rgba(201, 169, 110, 0.6) 0%, rgba(201, 169, 110, 0.32) 30%, rgba(201, 169, 110, 0.12) 55%, rgba(201, 169, 110, 0) 80%),
		linear-gradient(to top left, rgba(201, 169, 110, 0.18) 0%, transparent 50%);
}

.parendi-story__image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	/* Default: poza ekranem od dolu - JS ustawia inline transform na podstawie scroll progress */
	transform: translateY(100%);
	will-change: transform;
	/* BEZ transition - JS aktualizuje transform inline kazda klatka, synchronicznie ze scrollem */
}

/* Fallback pinkowy gradient gdy brak obrazu */
.parendi-story__image:not([style*="background-image"]) {
	background: linear-gradient(135deg, #F5ECD8 0%, #C9A96E 100%);
}

/* Counter 01/03 - lewy dolny rog karty obrazu, pinkowy */
.parendi-story__counter {
	position: absolute;
	bottom: clamp(24px, 3vw, 48px);
	left: clamp(24px, 3vw, 48px);
	font-family: var(--font-serif, 'Fraunces', serif);
	color: var(--c-accent, #C9A96E);
	z-index: 10;
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.parendi-story__counter-current {
	font-style: italic;
	font-weight: 500;
	font-size: clamp(44px, 5vw, 72px);
	line-height: 1;
	letter-spacing: -0.02em;
}

.parendi-story__counter-total {
	font-style: italic;
	font-weight: 300;
	font-size: clamp(20px, 2vw, 28px);
	opacity: 0.7;
}

/* Progress dots - prawy dolny rog karty (balansuja counter po lewej) */
.parendi-story__progress {
	position: absolute;
	bottom: clamp(32px, 3.5vw, 56px);
	right: clamp(24px, 3vw, 48px);
	display: flex;
	gap: 10px;
	z-index: 10;
}

.parendi-story__progress-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(201, 169, 110, 0.35);
	transition: background 0.3s ease, transform 0.3s ease;
}

.parendi-story__progress-dot.is-active {
	background: var(--c-accent, #C9A96E);
	transform: scale(1.3);
}

/* ─── Mobile (≤767px) - statyczne 3 sekcje stacked ──────────────────
   3 kafle "tresc + obrazek" jeden pod drugim. Bez slidera, bez sticky pinu.
   Numerek "01/02/03" przez CSS counter. Obraz przez ::after z --slide-img.
   Inline style="--slide-img: url(...)" jest ustawiany w parts/parendi-story.php. */

@media (max-width: 767px) {
	.parendi-story {
		height: auto !important;
		min-height: auto;
		margin-top: 0;
		padding: clamp(48px, 7vh, 80px) 0 clamp(32px, 5vh, 56px);
		background: var(--c-bg, #F8F5F0);
	}
	.parendi-story__pin {
		position: relative !important;
		height: auto !important;
		overflow: visible;
	}
	.parendi-story__container {
		display: block !important;
		height: auto !important;
		padding: 0 20px;
		grid-template-columns: none;
	}

	/* HEADER (eyebrow + ikona na gorze sekcji) */
	.parendi-story__left {
		padding: 0;
		background: transparent;
		margin-bottom: 32px;
		text-align: center;
		display: block;
	}
	.parendi-story__icon {
		margin: 0 auto 16px;
	}
	.parendi-story__eyebrow {
		font-size: 11px;
		letter-spacing: 0.32em;
		margin-bottom: 0;
	}

	/* SLIDES - 3 sekcje statyczne, gap pomiedzy */
	.parendi-story__slides {
		position: relative;
		min-height: auto;
		display: flex !important;
		flex-direction: column;
		gap: 48px;
		counter-reset: story-counter;
	}
	.parendi-story__slide {
		position: relative !important;
		inset: auto !important;
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto !important;
		display: block !important;
		counter-increment: story-counter;
		transition: none !important;
	}
	/* Numerek "01" "02" "03" - italic Fraunces, lewy gorny rog */
	.parendi-story__slide::before {
		content: counter(story-counter, decimal-leading-zero);
		display: block;
		font-family: var(--font-serif, 'Fraunces', serif);
		font-style: italic;
		font-weight: 300;
		font-size: 14px;
		line-height: 1;
		color: var(--c-accent, #C9A96E);
		margin-bottom: 12px;
		letter-spacing: 0.05em;
	}
	.parendi-story__title {
		font-family: var(--font-serif, 'Fraunces', serif);
		font-style: italic;
		font-weight: 400;
		font-size: clamp(22px, 6vw, 28px);
		line-height: 1.18;
		letter-spacing: -0.015em;
		color: var(--c-text-on-light, #1A1714);
		margin: 0 0 14px;
		max-width: 100%;
	}
	.parendi-story__content {
		font-family: var(--font-sans, 'Inter', sans-serif);
		font-size: 14px;
		line-height: 1.6;
		color: var(--c-text-muted, #5A5A5A);
		margin: 0 0 20px;
		max-width: 100%;
	}
	.parendi-story__content p { margin: 0 0 12px; }
	.parendi-story__content p:last-child { margin-bottom: 0; }
	/* Obrazek POD tekstem (full-width, aspect 16:10) - z --slide-img lub pink gradient fallback */
	.parendi-story__slide::after {
		content: '';
		display: block;
		width: 100%;
		aspect-ratio: 16 / 10;
		border-radius: 12px;
		background-image: var(--slide-img, none),
			linear-gradient(135deg, var(--c-accent-soft, #F5ECD8) 0%, var(--c-accent, #C9A96E) 60%, #7A5C1E 100%);
		background-size: cover, cover;
		background-position: center, center;
		background-repeat: no-repeat;
		box-shadow: 0 8px 24px -10px rgba(26, 23, 20, 0.15);
	}

	/* RIGHT col (oryginalna kolumna obrazu) - ukryty na mobile */
	.parendi-story__right {
		display: none !important;
	}
}