/*
 * Investment storytelling — właściciel: agent B (sprint HOME v1).
 * Sekcje: O inwestycji (#inwestycja, .inb-about), Inwestycja w liczbach (#liczby, .inb-numbers),
 * Galeria (#galeria, .inb-gallery).
 * Kolory wyłącznie przez tokeny theme.json. Piasek (accent) jako tekst tylko w .inb-numbers (tło primary-deep);
 * na jasnym tle wyłącznie dekoracyjnie (kreska podtytułu).
 * Ruch (HOME v2): klasy z base.css (sekcja 6) — maska renderu „O inwestycji”, stopnie i liczniki liczb,
 * kierunkowe odsłonięcia galerii. Tutaj tylko opóźnienia i detale sekcji.
 */

/* Wspólne: rynna i szerokość treści (zgodnie z root padding i wideSize). */
.inb-about,
.inb-numbers,
.inb-gallery {
	--inb-gutter: var(--wp--style--root--padding-left, var(--wp--preset--spacing--40));
	--inb-wide: var(--wp--style--global--wide-size, 1280px);
}

/* =====================================================================
 * 1. O inwestycji — render dominujący (do lewej krawędzi okna) + tekst nachodzący
 * ===================================================================== */

.inb-about {
	--inb-about-overhang: clamp(3rem, 1rem + 6vw, 7.5rem);
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--inb-gutter), 1fr)
		[wide-start] repeat(12, minmax(0, calc(var(--inb-wide) / 12)))
		[wide-end] minmax(var(--inb-gutter), 1fr)
		[full-end];
	grid-template-rows: minmax(0, 1fr) var(--inb-about-overhang);
	background-color: var(--wp--preset--color--base);
}

.inb-about.inb-about > * {
	margin-block: 0;
}

.inb-about > .inb-about__media {
	grid-column: full-start / 10;
	grid-row: 1 / 2;
	min-height: clamp(30rem, 14rem + 40vw, 54rem);
	margin: 0;
}

.inb-about > .inb-about__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 40% 45%;
}

.inb-about > .inb-about__body {
	grid-column: 9 / wide-end;
	grid-row: 1 / 3;
	align-self: end;
	position: relative;
	z-index: 1;
	background-color: var(--wp--preset--color--base);
	padding:
		clamp(2rem, 1rem + 3vw, 3.75rem)
		0
		0
		clamp(1.75rem, 0.75rem + 3vw, 3.75rem);
}

/* Pionowa linia w kolorze primary (na jasnym tle — nie piasek). */
.inb-about > .inb-about__body::before {
	content: "";
	position: absolute;
	inset-block: clamp(2rem, 1rem + 3vw, 3.75rem) 0;
	inset-inline-start: 0;
	width: 2px;
	background-color: var(--wp--preset--color--primary);
}

.inb-about__body > * {
	margin-block: 0;
}

.inb-about .inb-about__title {
	margin-block-start: 1.25rem;
	font-size: var(--wp--preset--font-size--xx-large);
	color: var(--wp--custom--color--text);
}

.inb-about__title strong {
	display: block;
}

/* Ruch (HOME v2): render odsłania się maską od lewej, tekst wchodzi z opóźnieniem,
   pionowa linia dorysowuje się z góry. */
.inb-about > .inb-about__body.inb-stagger {
	--inb-stagger-base: 380ms;
}

@media (prefers-reduced-motion: no-preference) {
	.inb-js .inb-about > .inb-about__body.inb-stagger::before {
		transform: scaleY(0);
		transform-origin: top center;
		transition: transform 1200ms var(--wp--custom--motion--easing-out) 300ms;
	}

	.inb-js .inb-about > .inb-about__body.is-inview::before {
		transform: none;
	}
}

.inb-about .inb-about__lead {
	margin-block-start: clamp(1.25rem, 1rem + 1vw, 2rem);
	font-size: var(--wp--preset--font-size--large);
	font-weight: var(--wp--custom--font-weight--light);
	line-height: 1.4;
	color: var(--wp--custom--color--text);
	text-wrap: pretty;
}

.inb-about .inb-about__text {
	margin-block-start: 1rem;
	max-width: 36rem;
	color: var(--wp--custom--color--text-muted);
	line-height: var(--wp--custom--line-height--body);
	text-wrap: pretty;
}

.inb-about .inb-about__actions {
	margin-block-start: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

@media (max-width: 1100px) and (min-width: 782px) {
	.inb-about > .inb-about__media {
		grid-column: full-start / 9;
	}

	.inb-about > .inb-about__body {
		grid-column: 7 / wide-end;
	}

	.inb-about .inb-about__title {
		font-size: var(--wp--preset--font-size--x-large);
	}
}

/* Mobile: render pełnej szerokości, tekst na jasnym panelu wchodzącym na dolną krawędź obrazu. */
@media (max-width: 781px) {
	.inb-about {
		display: block;
		padding-block-start: 0 !important;
	}

	.inb-about > .inb-about__media {
		min-height: 0;
	}

	.inb-about > .inb-about__media img {
		height: auto;
		aspect-ratio: 4 / 3;
		object-position: 60% 50%;
	}

	.inb-about > .inb-about__body {
		margin: -3rem var(--inb-gutter) 0 0 !important;
		padding: 2rem var(--inb-gutter) 0 calc(var(--inb-gutter) + 1.25rem);
	}

	.inb-about > .inb-about__body::before {
		inset-inline-start: var(--inb-gutter);
		inset-block-start: 2rem;
	}

	.inb-about .inb-about__title {
		font-size: var(--wp--preset--font-size--x-large);
	}

	.inb-about .inb-about__lead {
		font-size: var(--wp--preset--font-size--medium);
		font-weight: var(--wp--custom--font-weight--regular);
	}
}

@media (max-width: 480px) {
	.inb-about__actions .wp-block-button,
	.inb-about__actions .wp-block-button__link {
		width: 100%;
	}
}

/* =====================================================================
 * 2. Inwestycja w liczbach — „schody tarasów”
 * Każdy kolejny stopień wyżej (jak tarasy budynku). Podest = cienka linia u góry,
 * podstopnica = pionowa linia z lewej, sięgająca wspólnej podstawy.
 * ===================================================================== */

.inb-numbers {
	--inb-step-rise: clamp(3rem, 0.5rem + 6.5vw, 7.5rem);
	padding-inline: var(--inb-gutter);
}

.inb-numbers .inb-numbers__stairs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: end;
	max-width: var(--inb-wide);
	margin-inline: auto;
	border-block-end: 1px solid var(--wp--custom--color--rule-on-dark);
}

.inb-numbers .inb-numbers__stairs > * {
	margin-block: 0;
}

.inb-numbers .inb-numbers__head {
	grid-column: 1 / 3;
	grid-row: 1;
	align-self: start;
}

.inb-numbers__head > * {
	margin-block: 0;
}

.inb-numbers .inb-numbers__title {
	margin-block-start: 1.25rem;
	font-size: var(--wp--preset--font-size--xx-large);
	color: var(--wp--custom--color--on-dark);
}

.inb-numbers__title strong {
	display: block;
	color: var(--wp--custom--color--accent-on-dark);
}

.inb-numbers .inb-numbers__step {
	grid-row: 1;
	position: relative;
	padding: clamp(1.25rem, 0.75rem + 1vw, 2rem) clamp(1rem, 0.25rem + 1.5vw, 2rem) 0;
	border-block-start: 1px solid var(--wp--custom--color--rule-on-dark);
	border-inline-start: 1px solid var(--wp--custom--color--rule-on-dark);
}

.inb-numbers .inb-numbers__step--1 { grid-column: 1; padding-block-end: clamp(1.5rem, 1rem + 1vw, 2.25rem); }
.inb-numbers .inb-numbers__step--2 { grid-column: 2; padding-block-end: calc(clamp(1.5rem, 1rem + 1vw, 2.25rem) + var(--inb-step-rise)); }
.inb-numbers .inb-numbers__step--3 { grid-column: 3; padding-block-end: calc(clamp(1.5rem, 1rem + 1vw, 2.25rem) + 2 * var(--inb-step-rise)); }
.inb-numbers .inb-numbers__step--4 { grid-column: 4; padding-block-end: calc(clamp(1.5rem, 1rem + 1vw, 2.25rem) + 3 * var(--inb-step-rise)); }

/* Narożnik stopnia — mały piaskowy znacznik na styku podestu i podstopnicy. */
.inb-numbers .inb-numbers__step::before {
	content: "";
	position: absolute;
	inset-block-start: -2px;
	inset-inline-start: -2px;
	width: 0.75rem;
	height: 0.75rem;
	border-block-start: 3px solid var(--wp--custom--color--accent-on-dark);
	border-inline-start: 3px solid var(--wp--custom--color--accent-on-dark);
}

.inb-numbers__step > * {
	margin-block: 0;
}

.inb-numbers .inb-numbers__prefix {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
	color: var(--wp--custom--color--accent-on-dark);
	margin-block-end: 0.35rem;
}

.inb-numbers .inb-numbers__value {
	color: var(--wp--custom--color--on-dark);
	letter-spacing: 0;
	white-space: nowrap;
}

.inb-numbers .inb-numbers__unit {
	margin-block-start: 0.6rem;
	font-size: var(--wp--preset--font-size--large);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: 1.2;
	color: var(--wp--custom--color--accent-on-dark);
}

.inb-numbers .inb-numbers__text {
	margin-block-start: 0.85rem;
	max-width: 22ch;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--custom--color--on-dark-muted);
	text-wrap: pretty;
}

/*
 * Odsłonięcie stopni po kolei (wartości opóźnień zamiast stylu inline — group nie zapisuje zmiennych CSS).
 * HOME v2: każdy stopień „wyrasta” z podstawy (większy dystans), narożnik dorysowuje się po wejściu,
 * a liczby 6, 67 i 200 liczą od zera (site.js, .inb-count) w rytmie swojego stopnia.
 */
.inb-js .inb-numbers__step--1.inb-reveal { --inb-delay: 0ms; }
.inb-js .inb-numbers__step--2.inb-reveal { --inb-delay: 140ms; }
.inb-js .inb-numbers__step--3.inb-reveal { --inb-delay: 280ms; }
.inb-js .inb-numbers__step--4.inb-reveal { --inb-delay: 420ms; }

@media (prefers-reduced-motion: no-preference) {
	.inb-js .inb-numbers .inb-numbers__step.inb-reveal {
		--inb-from-y: 3.5rem;
	}

	.inb-js .inb-numbers .inb-numbers__step.inb-reveal::before {
		transform: scale(0);
		transform-origin: top left;
		transition: transform 600ms var(--wp--custom--motion--easing-out);
		transition-delay: calc(var(--inb-delay, 0ms) + 450ms);
	}

	.inb-js .inb-numbers .inb-numbers__step.is-inview::before {
		transform: none;
	}
}

/* Tablet: niższe stopnie i mniejsze cyfry, wciąż w jednym rzędzie. */
@media (max-width: 1100px) and (min-width: 782px) {
	.inb-numbers {
		--inb-step-rise: clamp(2.5rem, 1rem + 4vw, 4rem);
	}

	.inb-numbers .inb-numbers__value {
		font-size: var(--wp--preset--font-size--display);
	}

	.inb-numbers .inb-numbers__unit {
		font-size: var(--wp--preset--font-size--medium);
	}
}

/* Mobile: schody pionowo — stopnie jeden pod drugim, każdy kolejny wysunięty w prawo. */
@media (max-width: 781px) {
	.inb-numbers {
		--inb-step-indent: clamp(1rem, 0.25rem + 3vw, 2rem);
	}

	.inb-numbers .inb-numbers__stairs {
		display: block;
		border-block-end: 0;
	}

	.inb-numbers .inb-numbers__head {
		margin-block-end: 2.5rem;
	}

	.inb-numbers .inb-numbers__step {
		padding: 1.25rem 0 1.75rem 1.25rem !important;
	}

	.inb-numbers .inb-numbers__step--2 { margin-inline-start: var(--inb-step-indent); }
	.inb-numbers .inb-numbers__step--3 { margin-inline-start: calc(2 * var(--inb-step-indent)); }
	.inb-numbers .inb-numbers__step--4 { margin-inline-start: calc(3 * var(--inb-step-indent)); }

	.inb-numbers .inb-numbers__value {
		font-size: clamp(3.75rem, 2rem + 9vw, 5.5rem);
	}

	.inb-numbers .inb-numbers__unit {
		font-size: var(--wp--preset--font-size--medium);
	}

	.inb-numbers .inb-numbers__text {
		max-width: 30ch;
	}
}

/* Szeroki mobile / mały tablet: liczba z lewej, opis z prawej — stopień wypełnia szerokość. */
@media (max-width: 781px) and (min-width: 560px) {
	.inb-numbers .inb-numbers__step {
		display: grid;
		grid-template-columns: minmax(9.5rem, auto) minmax(0, 1fr);
		column-gap: 1.75rem;
		align-items: end;
	}

	.inb-numbers .inb-numbers__step > * {
		grid-column: 2;
	}

	.inb-numbers .inb-numbers__step > .inb-numbers__value {
		grid-column: 1;
		grid-row: 1 / span 3;
		align-self: center;
	}

	.inb-numbers .inb-numbers__step > .inb-numbers__prefix {
		margin-block-end: 0;
	}
}

/* =====================================================================
 * 3. Galeria — asymetryczna mozaika (bez slidera)
 * ===================================================================== */

.inb-gallery {
	padding-inline: var(--inb-gutter);
}

.inb-gallery.inb-gallery > * {
	max-width: var(--inb-wide);
	margin-inline: auto;
}

.inb-gallery.inb-gallery > * + * {
	margin-block-start: clamp(2rem, 1.25rem + 2vw, 3.5rem);
}

.inb-gallery .inb-gallery__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
}

.inb-gallery__head > * {
	margin-block: 0 !important;
}

.inb-gallery .inb-gallery__head > .inb-eyebrow {
	flex-basis: 100%;
}

.inb-gallery .inb-gallery__title {
	font-size: var(--wp--preset--font-size--xx-large);
	color: var(--wp--custom--color--text);
}

/* Ruch (HOME v2): kadry odsłaniają się z trzech kierunków, jeden po drugim. */
.inb-js .inb-gallery .inb-gallery__item--main.inb-mask { --inb-delay: 0ms; }
.inb-js .inb-gallery .inb-gallery__item--top.inb-mask { --inb-delay: 180ms; }
.inb-js .inb-gallery .inb-gallery__item--side.inb-mask { --inb-delay: 340ms; }

.inb-gallery .inb-gallery__note {
	color: var(--wp--custom--color--text-muted);
}

.inb-gallery .inb-gallery__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: minmax(0, 3fr) minmax(0, 2fr);
	gap: clamp(0.75rem, 0.5rem + 0.75vw, 1.25rem);
	height: clamp(30rem, 12rem + 38vw, 50rem);
}

.inb-gallery__grid > .inb-gallery__item {
	margin: 0;
	min-height: 0;
	overflow: hidden;
}

.inb-gallery__grid > .inb-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.inb-gallery .inb-gallery__item--main {
	grid-column: 1 / 8;
	grid-row: 1 / 3;
}

.inb-gallery .inb-gallery__item--main img {
	object-position: 30% 55%;
}

.inb-gallery .inb-gallery__item--top {
	grid-column: 8 / 13;
	grid-row: 1;
}

.inb-gallery .inb-gallery__item--top img {
	object-position: 55% 30%;
}

.inb-gallery .inb-gallery__item--side {
	grid-column: 8 / 13;
	grid-row: 2;
}

.inb-gallery .inb-gallery__item--side img {
	object-position: 40% 60%;
}

@media (max-width: 781px) {
	.inb-gallery .inb-gallery__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		height: auto;
	}

	.inb-gallery .inb-gallery__item--main {
		grid-column: 1 / 3;
		grid-row: auto;
		aspect-ratio: 4 / 3;
	}

	.inb-gallery .inb-gallery__item--top,
	.inb-gallery .inb-gallery__item--side {
		grid-column: auto;
		grid-row: auto;
		aspect-ratio: 3 / 4;
	}

	.inb-gallery .inb-gallery__title {
		font-size: var(--wp--preset--font-size--x-large);
	}
}