/* ============================================================
   Agru-Frank — Realizacja pojedyncza (case study), CPT `realizacja`.
   Pierwsza wersja — do przemodelowania po pierwszej wizualnej rundzie.
   Tokeny z base.css. Plik ładowany tylko na is_singular('realizacja').
   ============================================================ */

/* --- Hero — migrowany do .u-hero/.u-hero--tall/.u-hero-block (utilities.css), 1:1 z
   section-industry-hero.php (branze = wyznacznik ukladu, decyzja Tomka 24.07, audit prio 2.1).
   .realization-single__lead -> .u-hero__lead, __hero-cta -> .u-hero__cta,
   __hero-text (bylo tylko color:white, martwe — h1/eyebrow/cta maja wlasny kolor) usuniete. --- */

/* --- Pasek liczb pod hero (wzór .hero__stats — home), białe tło, bez nagłówka --- */
.realization-single__hero-stats {
	padding-block: var(--space-24);
	background: var(--white);
}
@media (max-width: 767.98px) {
	.realization-single__hero-stats { padding-block: var(--space-16); }   /* 24->16 mobile (user 2026-07-24) */
}
/* Opcja odwrócona — home ma blue tekst/białe tło, tu odwrotnie: białe tekst/graphite tło */
.realization-single__hero-stats--inverted {
	background: var(--graphite);
}
.realization-single__hero-stats--inverted .realization-stats__value {
	color: var(--white);
}
.realization-single__hero-stats--inverted .realization-stats__label {
	color: color-mix(in srgb, var(--white) 80%, transparent);
}
.realization-single__hero-stats--inverted .realization-stats__grid::before,
.realization-single__hero-stats--inverted .realization-stats__grid::after,
.realization-single__hero-stats--inverted .realization-stats__item::before,
.realization-single__hero-stats--inverted .realization-stats__item:last-child::after {
	background: color-mix(in srgb, var(--white) 25%, transparent);
}

/* --- Layout: treść | aside parametrów --- */
.realization-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: var(--space-64);
	align-items: start;
	padding-block: var(--section-py);
}
@media (max-width: 991px) {
	.realization-single__layout {
		grid-template-columns: 1fr;
		gap: var(--space-32);
	}
}

/* --- Treść (the_content — H2/p/ul pisane przez Radka w edytorze) --- */
.realization-single__content h2 {
	font-size: var(--text-h2);
	font-weight: 600;
	margin: 0 0 var(--space-16);
}
.realization-single__content h2:not(:first-child) {
	margin-top: var(--space-48);
}
@media (max-width: 991px) {
	.realization-single__content h2 { margin-bottom: var(--space-16); }
	.realization-single__content h2:not(:first-child) { margin-top: var(--space-24); }
}
.realization-single__content p,
.realization-single__content ul {
	max-width: var(--measure);
	margin: 0 0 var(--space-16);
}
.realization-single__content ul {
	padding-left: 1.25em;
}
.realization-single__content li {
	margin-bottom: var(--space-8);
}
.realization-single__content a {
	color: var(--blue);
	text-decoration: none;
}
.realization-single__content a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- Aside: parametry projektu (sticky) --- */
/* Sticky na całej kolumnie (specs + użyte produkty razem), nie tylko na specs */
.realization-single__aside-col {
	position: sticky;
	top: calc(var(--header-height, 88px) + var(--space-24));
}
/* Musi zostac PO regule sticky (rownie specyficzna, wygrywa kolejnosc w pliku) —
   scalenie z media queries .layout wyzej cofa fix (sticky wroci na mobile). */
@media (max-width: 991px) {
	.realization-single__aside-col { position: static; } /* pod treścią na mobile — kolejność DOM (content, potem aside) */
}
.realization-products-aside {
	margin-top: 40px; /* css-lint-ok: 40 poza skalą (32/48) — explicit wartość, nie token */
}
.realization-specs {
	position: relative; /* kontekst dla krzyżyków narożnych */
	padding: var(--space-24);
	background: var(--white);
}
/* Krzyżyki narożne (wzór markerów rysunku technicznego) — na krawędzi, pół w/pół poza kontenerem */
.realization-specs__corner {
	position: absolute;
	width: var(--space-16);
	height: var(--space-16);
	pointer-events: none;
	background:
		linear-gradient(var(--blue), var(--blue)) center / 1px var(--space-16) no-repeat,
		linear-gradient(var(--blue), var(--blue)) center / var(--space-16) 1px no-repeat;
}
.realization-specs__corner--tl { top: 0; left: 0; translate: -50% -50%; }
.realization-specs__corner--tr { top: 0; right: 0; translate: 50% -50%; }
.realization-specs__corner--bl { bottom: 0; left: 0; translate: -50% 50%; }
.realization-specs__corner--br { bottom: 0; right: 0; translate: 50% 50%; }
.realization-specs__title {
	font-size: var(--text-h4);
	font-weight: 600;
	margin: 0 0 var(--space-24);
}
.realization-specs__list {
	margin: 0;
	border-top: 1px solid var(--border);
}
.realization-specs__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-24);
	padding-block: var(--space-16);
	border-bottom: 1px solid var(--border);
}
.realization-specs__label {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--text-caption);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	white-space: nowrap;
}
.realization-specs__value {
	margin: 0;
	font-size: var(--text-body);
	font-weight: 600;
	text-align: right;
}

/* --- Nagłówek Galerii/Użytych produktów (sekcje pod treścią, poza aside) --- */
.realization-single__section-title {
	font-size: var(--text-h2);
	font-weight: 600;
	margin: 0 0 var(--space-24);
}

/* --- Galeria (opcjonalna, tylko gdy pola SCF wypełnione) --- */
.realization-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-24);
	column-gap: var(--space-32);
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 768px) {
	.realization-gallery { grid-template-columns: repeat(3, 1fr); }
}
/* Ostre rogi + .u-image (shadow + krzyżyki narożne) — jak .product-gallery__link.
   Ramka (::after) wyłączona — same krzyżyki, restrained w gęstej siatce miniaturek
   (ten sam wybór co product-gallery, decyzja 2026-07-22). Bez overflow:hidden —
   krzyżyki wystają 8px poza kadr, dlatego bez hover-zoom (zoomowane zdjęcie nie ma czym się przyciąć). */
.realization-gallery__link {
	display: block;
	aspect-ratio: 4 / 3;
}
.realization-gallery__link.u-image::after { content: none; }
.realization-gallery__link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Użyte produkty (chipy — wygląd w .agf-chip, base.css) --- */
.realization-products {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	list-style: none;
	margin: 0;
	padding: 0;
}
/* .realization-product-chip — wyglad w .agf-chip (base.css) */

/* --- Efekt w liczbach (opcjonalna, wzór .hero__stat* — pasek pod hero) --- */
.realization-stats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-24) var(--space-16);
	text-align: center;
}
.realization-stats__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	align-items: center;
}
/* Mobile: ticker jak .industries-marquee__bar--decor (wzor industries-marquee.css) —
   item = **value** label inline (baseline), kropka-separator zamiast box-per-stat.
   PHP renderuje stats 2x (pierwszy przebieg aria-hidden, potem realny), petla
   translateX(-50%) bezszwowa. reduced-motion: fallback na natywny scroll-row. */
@media (max-width: 767.98px) {
	.realization-single__hero-stats { overflow: hidden; }
	.realization-stats__grid {
		display: flex;
		width: max-content;
		gap: 0;
		animation: realization-stats-marquee 20s linear infinite;   /* 27->20, troche szybciej (user 2026-07-24) */
	}
	.realization-stats__grid:hover { animation-play-state: paused; }
	.realization-stats__item {
		flex-direction: row;
		align-items: baseline;
		flex-shrink: 0;
	}
	.realization-stats__item::after {
		content: "\00B7";
		margin-inline: var(--space-16);   /* 24->16 (user 2026-07-24) */
		color: color-mix(in srgb, var(--white) 55%, transparent);   /* wzor industries-marquee__dot */
	}
	.realization-stats__item:last-child::after { content: none; }
	.realization-stats__label { white-space: nowrap; }
}
@keyframes realization-stats-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
	.realization-stats__grid {
		width: auto;
		animation: none;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		touch-action: pan-x;
	}
	.realization-stats__grid::-webkit-scrollbar { display: none; }
	.realization-stats__item { scroll-snap-align: start; flex-shrink: 0; }
	.realization-stats__item[aria-hidden] { display: none; }
}
/* Ramka z przedluzonymi liniami (desktop, wzor .hero__stat — home): piony/poziomy
   wychodza 8px poza box. Szara (var(--border)); --inverted przyciemnia do bieli 25%.
   [aria-hidden] = powielona kopia pod mobile marquee, na desktopie nieuzywana. */
@media (min-width: 768px) {
	/* Padding na statach zamiast na pasku -> linie siegaja pelnej wysokosci paska
	   (wzor hero-slider.css komentarz 1:1 — bylo na pasku, ramka floatowala w zlym miejscu). */
	.realization-single__hero-stats { padding-block: 0; }
	.realization-stats__item[aria-hidden] { display: none; }
	.realization-stats__grid {
		position: relative;
		column-gap: 0;
	}
	.realization-stats__grid::before,
	.realization-stats__grid::after {
		content: "";
		position: absolute;
		left: calc(var(--space-8) * -1);
		right: calc(var(--space-8) * -1);
		height: 1px;
		background: var(--border);
	}
	.realization-stats__grid::before { top: 0; }
	.realization-stats__grid::after { bottom: 0; }
	.realization-stats__item {
		position: relative;
		justify-content: center;
		padding-block: var(--space-32);
		padding-inline: var(--space-16);
	}
	.realization-stats__item::before,
	.realization-stats__item:last-child::after {
		content: "";
		position: absolute;
		top: calc(var(--space-8) * -1);
		bottom: calc(var(--space-8) * -1);
		width: 1px;
		background: var(--border);
	}
	.realization-stats__item::before { left: 0; }
	.realization-stats__item:last-child::after { right: 0; }
}
.realization-stats__value {
	font-size: var(--text-h2);
	font-weight: 600;
	line-height: 1;
	color: var(--blue);
}
@media (max-width: 767.98px) {
	.realization-stats__value {
		font-size: var(--text-h4);   /* jak .industries-marquee__item — spojny rozmiar tickerow (user 2026-07-24) */
	}
}
.realization-stats__label {
	font-size: var(--text-label);
	line-height: 1.3;
	color: var(--text-muted);
}
@media (max-width: 767.98px) {
	.realization-stats__label {
		font-size: var(--text-h4);   /* jak value — jednolity ticker (user 2026-07-24) */
	}
}