/* ============================================================
   Agru-Frank — Sekcja "Wybrane realizacje" (home) — Phase 3 (HOME-05)
   Teaser 3 kart (zdjęcie + chip branży + tytuł + wynik), link do /realizacje/.
   Karta klikalna (foto zoom + strzałka fill na hover). Grid 1/2/3 kol. Tokeny z base.css.
   ⚠ Typografia TYMCZASOWA — retype po Księdze znaku.
   ============================================================ */

/* --- Nagłówek sekcji: .section-head w utilities.css --- */

.realizations {
	overflow-x: clip;   /* zabezpieczenie przed poziomym scrollem od full-bleed viewportu (mobile carousel) */
}

/* --- Grid: 1 / 2 / 3 kol --- */
.realizations__grid {
	display: grid;
	gap: var(--space-32);
	margin: 0;
	padding: 0;
	list-style: none;
}
/* 1 realizacja (branża z niepelnym kompletem case studies) — bez viewport-wrappera/Embla
   (JS guard <2 slajdow), zawsze 1 kolumna pelnej szerokosci, gutter z obu stron z containera
   (user 2026-07-31: "karta jedna, gutter z obu stron, gdy wejdzie slajder — jak ustalone wczesniej"). */
.realizations__grid--single {
	grid-template-columns: 1fr;
}
/* Tablet: 2 kolumny (3 równe kafle) */
@media (min-width: 600px) and (max-width: 991px) {
	.realizations__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
/* Desktop: feature — 1 duża (lewo, 2 rzędy) + 2 małe (prawo, stack). Wysokości równają się z konstrukcji. */
@media (min-width: 992px) {
	.realizations__grid {
		grid-template-columns: 1.6fr 1fr;
	}
	.realizations__grid > li {
		display: flex;
	}
	.realizations__grid > li:first-child {
		grid-row: span 2;
	}
	.realizations__grid > li:first-child .realizations__card {
		height: 100%;
		aspect-ratio: auto;
	}
	.realizations__grid > li:not(:first-child) .realizations__card {
		aspect-ratio: 16 / 10;
	}
	.realizations__grid > li:first-child .realizations__title {
		font-size: var(--text-h2);
	}
}

/* Mobile peek-carousel (Embla) — karta niedotknieta, tylko layout .realizations__grid.
   Bez JS fallback = stacked grid wyzej. */
@media (max-width: 767.98px) {
	/* .section-head mobile margin (8) teraz sitewide default (utilities.css, 24.07) — ten
	   lokalny override byl identyczny, usuniety. Total gap = 32 (viewport padding) + 8 = 40, jak products. */
	.realizations__viewport.is-embla {
		overflow: hidden;
		padding-top: var(--space-16);   /* shadow-mega (0 8px 24px) siega w gore tylko 24-8=16px, jak products-cf__viewport */
		padding-bottom: var(--space-32);
		width: calc(100% + 2 * var(--container-pad));
		margin-inline: calc(-1 * var(--container-pad));
		cursor: grab;
	}
	.realizations__viewport.is-embla.is-dragging {
		cursor: grabbing;
		user-select: none;
	}
	.realizations__viewport.is-embla .realizations__grid {
		display: flex;
		align-items: flex-start;
		gap: 0;   /* bazowy .realizations__grid ma gap:32 (grid) — dziala tez we flex, dublowalo sie z margin-right nizej (64 zamiast 32, peek znikal) */
		margin: 0;
	}
	.realizations__viewport.is-embla .realizations__grid > li {
		flex: 0 0 70%;
		min-width: 0;
		margin-right: var(--space-32);
	}
	.realizations__viewport.is-embla .realizations__card {
		height: 200px;   /* stala wysokosc jak products-cf (--cf-card-h) zamiast aspect-ratio — tresc nie moze juz rozjezdzac karty */
		aspect-ratio: auto;
	}
	.realizations__viewport.is-embla .realizations__title,
	.realizations__viewport.is-embla .u-desc {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* --- Karta = kafel referencyjny (grafit; foto wsuwa się pod scrim; sygnatura: strzałka w rogu) --- */
.realizations__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	aspect-ratio: 3 / 4;
	padding: var(--space-24);
	isolation: isolate;
	background: var(--graphite);
	color: var(--white);
	text-decoration: none;
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: var(--shadow-mega);
	transition: outline-color var(--transition-base);
}
@media (max-width: 767.98px) {
	.realizations__card {
		aspect-ratio: 16 / 10;   /* 3:4 (portret) za wysokie na mobile pelnej-szerokosci karcie;
		                            reuse wartosci z desktop non-first-card (linia ~40), nie nowej */
	}
}
.realizations__card:focus-visible {
	outline-color: var(--blue-light);
}

/* Krzyżyki narożne (stałe) + ramka (hover-reveal): współdzielone z rodziną .u-card--elevated
   (utilities.css) — kopia scalona 2026-07-22 (audyt pkt 4). overflow:hidden celowo usunięty
   na .realizations__card, żeby krzyżyki mogły wystawać 8px poza kartę.
   Lokalny dodatek: z-index 2 — pseudoelementy NAD .realizations__media (foto, z-index 0). */
.realizations__card::before,
.realizations__card::after {
	z-index: 2;
}

/* --- Media: foto wypełnia kafel, scrim u dołu dla czytelności (działa też bez zdjęcia) --- */
.realizations__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--graphite);
}
.realizations__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--graphite) 0%, color-mix(in srgb, var(--graphite) 65%, transparent) 40%, transparent 72%);
}
@media (max-width: 767.98px) {
	.realizations__media::after {
		/* Gradient (ciemno u dolu, transparent od 72%) byl dobrany pod wysoka karte 3:4 (duzo
		   pikseli na fade). Skrocona 16/10 karta ma mniej wysokosci — gora zdjecia zostaje jasna,
		   bialy tytul traci kontrast. Jednolita przyciemniona plama zamiast gradientu na mobile. */
		background: color-mix(in srgb, var(--graphite) 55%, transparent);
	}
}
.realizations__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Treść nad scrimem, dosunięta do dołu --- */
.realizations__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}
.realizations__chip {
	align-self: flex-start;
	margin: 0;                        /* reset margin-bottom z u-eyebrow */
	font-size: var(--text-caption);   /* u-eyebrow, tylko mniejsza czcionka (label→caption); bez kreski */
}
.realizations__title {
	margin: 0;
	font-size: var(--text-h3);
	line-height: 1.2;
	font-weight: 600;
	color: var(--white);
}
/* opis: .u-desc.u-desc--on-dark w utilities.css */

/* --- Sygnatura agru: kółko ze strzałką w rogu; wypełnia się niebieskim na hover --- */
.realizations__arrow {
	position: absolute;
	top: var(--space-24);
	left: var(--space-24);
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--white);
	border: 1px solid color-mix(in srgb, var(--white) 40%, transparent);
	border-radius: var(--radius-pill);
	transition: background-color var(--transition-base), border-color var(--transition-base);
}
.realizations__card:focus-visible .realizations__arrow {
	background: var(--blue);
	border-color: var(--blue);
}
@media (hover: hover) {
	.realizations__card:hover .realizations__arrow {
		background: var(--blue);
		border-color: var(--blue);
	}
}
@media (max-width: 767.98px) {
	.realizations__arrow {
		left: auto;
		right: var(--space-24);
	}
}

/* --- Link "zobacz wszystkie" --- */
.realizations__more {
	margin-top: var(--space-32);
	text-align: center;
}
/* .realizations__more-link: .u-cta w utilities.css */
/* Mobile: .realizations__viewport ma wlasny padding-block:32 (zapas cien+krzyzyki) — bez
   zerowania tu byloby 32+32=64 zamiast 32, jak naprawiony bug .products__more (2026-07-16). */
@media (max-width: 767.98px) {
	.realizations__more {
		margin-top: 0;
	}
}