/*
 * Sekcje „Dlaczego warto” (#atuty) i „Mieszkania” (#mieszkania) — właściciel: agent C (sprint HOME v1).
 *
 * #atuty: nocny render jako dominanta (na desktopie przyklejony do krawędzi podczas przewijania),
 *         obok na zieleni `primary` redakcyjna lista sześciu atutów oddzielonych cienkimi liniami.
 * #mieszkania: jasna zapowiedź oferty — schodkowa typografia typów lokali (2 / 3 / 4 pokoje),
 *         pionowy kadr renderu z balkonami, lista cech i kontakt z doradcą.
 *
 * HOME v2: odsłonięcia przy przewijaniu (klasy z base.css, sekcja 6) i dryf przyklejonego renderu.
 * Kolory wyłącznie z tokenów theme.json.
 */

/* =====================================================================
 * Dlaczego warto
 * =================================================================== */

.inb-benefits {
	--inb-benefits-gutter: var(--wp--preset--spacing--40);
	--inb-benefits-edge: max(var(--inb-benefits-gutter), calc((100vw - var(--wp--style--global--wide-size)) / 2));
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-block: 0;
	/* Atuty wjeżdżają z prawej — bez poziomego przewijania strony. clip (nie hidden) zachowuje sticky. */
	overflow-x: clip;
}

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

.inb-benefits > .inb-benefits__media {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.inb-benefits > .inb-benefits__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 30% 70%;
}

.inb-benefits > .inb-benefits__body {
	padding: var(--wp--preset--spacing--60) var(--inb-benefits-gutter) var(--wp--preset--spacing--70);
}

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

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

.inb-benefits .inb-benefits__title {
	max-width: 15ch;
	margin-block-start: 1.25rem;
	font-size: var(--wp--preset--font-size--xx-large);
	color: var(--wp--custom--color--on-dark);
}

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

/* Ruch (HOME v2): kolejne atuty wchodzą z prawej, każdy w chwili, gdy do niego dotrzesz. */
.inb-js .inb-benefits .inb-benefits__item.inb-reveal {
	--inb-from-x: 1.75rem;
	--inb-from-y: 0;
}

.inb-benefits .inb-benefits__list {
	margin-block-start: var(--wp--preset--spacing--60);
}

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

.inb-benefits .inb-benefits__item {
	padding-block: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
}

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

.inb-benefits .inb-benefits__item-title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	color: var(--wp--custom--color--on-dark);
}

.inb-benefits .inb-benefits__item-text {
	max-width: 44ch;
	margin-block-start: 0.6rem;
	font-weight: var(--wp--custom--font-weight--light);
	text-wrap: pretty;
}

.inb-benefits .inb-benefits__actions {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Desktop: render przyklejony do lewej krawędzi, lista po prawej. */
@media (min-width: 960px) {
	.inb-benefits {
		grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
		align-items: start;
	}

	.inb-benefits > .inb-benefits__media {
		/* Przyklejony pod sticky headerem (layout.css: 2 × 0.625rem + 3.25rem = 4.5rem). */
		--inb-benefits-dock: calc(var(--wp-admin--admin-bar--height, 0px) + var(--inb-header-height, 4.5rem));
		position: sticky;
		top: var(--inb-benefits-dock);
		height: calc(100vh - var(--inb-benefits-dock));
		height: calc(100svh - var(--inb-benefits-dock));
		max-height: 64rem;
		aspect-ratio: auto;
	}

	.inb-benefits > .inb-benefits__media img {
		object-position: 34% 62%;
	}

	.inb-benefits > .inb-benefits__body {
		padding-block: var(--wp--preset--spacing--70);
		padding-inline: clamp(2.5rem, 1rem + 4vw, 6rem) var(--inb-benefits-edge);
	}

	.inb-benefits .inb-benefits__list {
		max-width: 34rem;
	}
}

/*
 * Przyklejony render reaguje na przewijanie sekcji: powoli przesuwa się i „oddala”.
 * CSS scroll-driven animations (bez JS). Przeglądarki bez wsparcia pokazują statyczny kadr.
 * Właściwości translate/scale nie kolidują z transform maski (base.css, 6b).
 */
@supports (animation-timeline: view()) {
	@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
		.inb-benefits {
			view-timeline-name: --inb-benefits;
		}

		.inb-benefits > .inb-benefits__media img {
			animation: inb-benefits-drift linear both;
			animation-timeline: --inb-benefits;
			animation-range: cover 0% cover 100%;
		}
	}
}

@keyframes inb-benefits-drift {
	from {
		translate: 0 -2.5%;
		scale: 1.1;
	}

	to {
		translate: 0 2.5%;
		scale: 1.02;
	}
}

/* =====================================================================
 * Mieszkania
 * =================================================================== */

.inb-apartments {
	margin-block: 0;
}

.inb-apartments .inb-apartments__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
}

.inb-apartments .inb-apartments__grid > *,
.inb-apartments .inb-apartments__intro > *,
.inb-apartments .inb-apartments__details > * {
	margin-block: 0;
}

.inb-apartments .inb-apartments__title {
	max-width: 13ch;
	margin-block-start: 1.25rem;
	font-size: var(--wp--preset--font-size--xx-large);
	color: var(--wp--custom--color--text);
}

/* Ruch (HOME v2): typy lokali wchodzą kolejno, render odsłania się od dołu. */
.inb-apartments .inb-apartments__types.inb-stagger {
	--inb-stagger-base: 120ms;
	--inb-stagger-step: 160ms;
}

.inb-apartments .inb-apartments__details.inb-stagger {
	--inb-stagger-base: 120ms;
}

.inb-apartments .inb-apartments__title strong {
	display: block;
}

.inb-apartments .inb-apartments__lead {
	max-width: 32ch;
	margin-block-start: var(--wp--preset--spacing--40);
}

.inb-apartments .inb-apartments__text {
	max-width: 46ch;
	margin-block-start: var(--wp--preset--spacing--30);
	text-wrap: pretty;
}

/* Typy lokali: duże cyfry w schodkowym rytmie. */
.inb-apartments .inb-apartments__types {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	margin: 0;
}

.inb-apartments .inb-apartments__types li {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding-inline-start: clamp(0.75rem, 0.4rem + 1vw, 1.5rem);
	border-inline-start: 1px solid var(--wp--custom--color--rule);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--font-weight--light);
	color: var(--wp--custom--color--text-muted);
}

.inb-apartments .inb-apartments__types li:nth-child(2) {
	margin-block-start: clamp(1.25rem, 0.5rem + 2.5vw, 3rem);
}

.inb-apartments .inb-apartments__types li:nth-child(3) {
	margin-block-start: clamp(2.5rem, 1rem + 5vw, 6rem);
}

.inb-apartments .inb-apartments__types strong {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--jumbo);
	font-weight: var(--wp--custom--font-weight--black);
	line-height: 0.85;
	letter-spacing: var(--wp--custom--letter-spacing--display);
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--wp--preset--color--primary);
}

.inb-apartments .inb-apartments__media {
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.inb-apartments .inb-apartments__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 40%;
}

/* Cechy: arkusz specyfikacji — etykieta i wartość w jednym wierszu. */
.inb-apartments .inb-apartments__features {
	margin: 0;
	border-block-end: 1px solid var(--wp--custom--color--rule);
}

.inb-apartments .inb-apartments__features li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.25rem 1.5rem;
	margin: 0;
	padding-block: 1rem;
	border-block-start: 1px solid var(--wp--custom--color--rule);
	color: var(--wp--custom--color--text-muted);
}

.inb-apartments .inb-apartments__features strong {
	font-weight: var(--wp--custom--font-weight--bold);
	color: var(--wp--custom--color--text);
}

.inb-apartments .inb-apartments__actions {
	gap: 0.75rem;
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Przycisk domyślny dostaje ramkę 2px w kolorze tła, jak obok styl inb-ghost — inaczej jest
   o 4px niższy i para w jednym rzędzie nie ma równej wysokości. */
.inb-apartments .inb-apartments__actions .wp-block-button:not([class*="is-style-"]) .wp-block-button__link {
	border: 2px solid var(--wp--custom--color--action);
}

.inb-apartments .inb-apartments__note {
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}

/* Tablet: cyfry obok renderu. */
@media (min-width: 640px) and (max-width: 959px) {
	.inb-apartments .inb-apartments__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--50);
	}

	.inb-apartments .inb-apartments__intro,
	.inb-apartments .inb-apartments__details {
		grid-column: 1 / -1;
	}

	.inb-apartments .inb-apartments__types {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--40);
		align-self: center;
	}

	.inb-apartments .inb-apartments__types li:nth-child(n) {
		flex-direction: row;
		align-items: baseline;
		gap: 0.75rem;
		margin-block-start: 0;
	}

	.inb-apartments .inb-apartments__types li:nth-child(2) {
		margin-inline-start: 2rem;
	}

	.inb-apartments .inb-apartments__types li:nth-child(3) {
		margin-inline-start: 4rem;
	}
}

/* Desktop: treść 7/12 po lewej, pionowy render 5/12 po prawej. */
@media (min-width: 960px) {
	.inb-apartments .inb-apartments__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-template-rows: auto auto 1fr;
		column-gap: var(--wp--preset--spacing--50);
		row-gap: var(--wp--preset--spacing--60);
	}

	.inb-apartments .inb-apartments__intro {
		grid-column: 1 / span 7;
		grid-row: 1;
	}

	.inb-apartments .inb-apartments__types {
		grid-column: 1 / span 6;
		grid-row: 2;
	}

	/* Kolumna cech i kontaktu = szerokość wstępu (7/12): oba przyciski mieszczą się w jednym rzędzie. */
	.inb-apartments .inb-apartments__details {
		grid-column: 1 / span 7;
		grid-row: 3;
	}

	.inb-apartments .inb-apartments__media {
		grid-column: 8 / -1;
		grid-row: 1 / span 3;
		align-self: stretch;
		aspect-ratio: auto;
		min-height: 36rem;
	}
}

/* Węższy desktop: przy 7/12 przyciski zawijałyby się do dwóch wierszy — treść 8/12, render 4/12. */
@media (min-width: 960px) and (max-width: 1199px) {
	.inb-apartments .inb-apartments__details {
		grid-column: 1 / span 8;
	}

	.inb-apartments .inb-apartments__media {
		grid-column: 9 / -1;
	}
}

/* Wąski telefon: przyciski na całą szerokość. */
@media (max-width: 480px) {
	.inb-benefits .inb-benefits__actions .wp-block-button,
	.inb-benefits .inb-benefits__actions .wp-block-button__link,
	.inb-apartments .inb-apartments__actions .wp-block-button,
	.inb-apartments .inb-apartments__actions .wp-block-button__link {
		width: 100%;
	}
}