/* =========================================================================
   O firmie — zamow-kontener.pl
   Prosta strona brandowa /o-firmie/ (budowanie marki + E-E-A-T). Zgodne z
   „Wytyczne designu". Tokeny --zk-* pochodzą z globalnego :root (zk-ui.css) —
   tu KONSUMOWANE przez var() z fallbackami. Prefiks klas .zk-af__.
   Wzorce: jak-dobrac-pojemnosc.css (hero, eyebrow, H2::after), wspolpraca.css
   (pasy tła, siatka logotypów), how-it-works.css (inspiracja osi czasu).

   Zasady kluczowe:
   - #84BF2A (--zk-green) = tylko akcent graficzny; NIGDY tło pod biały tekst
     ani kolor tekstu. Zieleń tekstowa/ikony = --zk-green-dark (#487214).
   - Navy = WYŁĄCZNIE pasek USP (komponent .zk-ui-trust z zk-ui.css) — tu brak.
   - Karty/kontenery = --zk-r-card (12px); kontrolki = --zk-r-control (8px).
   - Kontrast ≥ 4,5:1. Focus-visible = outline 2px --zk-green-dark.
   ========================================================================= */

/* ------------------------------------------------------------------- Baza */
.zk-af {
	--zkaf-soft-shadow: 0 2px 10px rgba(20, 32, 4, .06);
	font-family: var(--zk-font, sans-serif); /* kanon: zk-ui.css (Geist) */
	color: var(--zk-ink, #23291c);
	font-size: 1.02rem;
	line-height: 1.6;
}
.zk-af, .zk-af *, .zk-af *::before, .zk-af *::after { box-sizing: border-box; }

/* Kontenery poziomu strony: sekcje pełnej szerokości, wyśrodkowane. */
.zk-af > section {
	max-width: var(--zk-max, 1240px);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 20px);
	padding-block: clamp(2rem, 4.5vw, 3.5rem);
}

.zk-af h2 {
	font-size: clamp(1.35rem, 2.6vw, 1.85rem);
	line-height: 1.2;
	font-weight: 800;
	margin: 0 0 1.25rem;
	color: var(--zk-ink, #23291c);
}
/* Etykieta-eyebrow nad H2 (wzór: .zk-jp__eyebrow). */
.zk-af__eyebrow {
	display: block;
	font-size: .75rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--zk-muted, #5b6152);
	margin-bottom: .5rem;
}
/* Akcent marki pod każdym H2 sekcji: krótka gruba zielona kreska
   (wzór: .zk-jp > section > h2::after). */
.zk-af > section > h2:not(.screen-reader-text)::after {
	content: ""; display: block;
	width: 34px; height: 4px; margin-top: .7rem;
	border-radius: 2px; background: var(--zk-green, #84bf2a);
}
.zk-af p { margin: 0 0 1rem; }
.zk-af p:last-child { margin-bottom: 0; }
.zk-af a { color: var(--zk-green-dark, #487214); }

.zk-af [id] { scroll-margin-top: 120px; }

.zk-af a:focus-visible,
.zk-af button:focus-visible,
.zk-af summary:focus-visible,
.zk-af [tabindex]:focus-visible {
	outline: 2px solid var(--zk-green-dark, #487214);
	outline-offset: 2px;
}

/* Pełnoszerokościowy pas tła (trik box-shadow — bez poziomego scrolla). */
.zk-af > section.zk-af__band--soft {
	background: var(--zk-bg-soft, #f2f4ec);
	box-shadow: 0 0 0 100vw var(--zk-bg-soft, #f2f4ec);
	clip-path: inset(0 -100vw);
}
.zk-af > section.zk-af__band--navy {
	background: var(--zk-navy, #212f45);
	box-shadow: 0 0 0 100vw var(--zk-navy, #212f45);
	clip-path: inset(0 -100vw);
}

/* ------------------------------------------------------------------- Hero
   Kompaktowy: breadcrumb + H1 + lead. */
.zk-af__hero {
	background: #fff;
	padding-block: clamp(1.5rem, 3.5vw, 2.5rem);
	border-bottom: 1px solid var(--zk-line, #e6e8e1);
}
.zk-af__h1 {
	font-size: clamp(1.6rem, 3.6vw, 2.35rem);
	line-height: 1.15; font-weight: 800;
	margin: .35rem 0 1rem; color: var(--zk-ink, #23291c);
	max-width: 20ch;
}
.zk-af__lead {
	max-width: 70ch; color: var(--zk-ink, #23291c);
	font-size: 1.06rem; margin: 0;
}

/* --------------------------------------------------------------- Historia
   Korekta 26.07: wyrównanie do GÓRY (centrowanie zostawiało pustkę nad
   tekstem) + zdjęcie kadrowane do 4:3 (cover), by kolumny miały zbliżoną
   wysokość zamiast bardzo wysokiego zdjęcia obok krótkiego tekstu. */
.zk-af__history-body { margin-top: .25rem; }
.zk-af__history-body.has-photo {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}
.zk-af__history-text { min-width: 0; }
.zk-af__history-text > p:first-child { margin-top: 0; }
.zk-af__history-figure { margin: 0; }
.zk-af__history-img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: var(--zk-r-card, 12px);
	box-shadow: var(--zkaf-soft-shadow);
}

/* Oś czasu — pozioma; dowolna liczba kamieni (grid-auto-flow: column). */
.zk-af__timeline {
	list-style: none; margin: 2.25rem 0 0; padding: 0;
	display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
	gap: 1.5rem;
}
.zk-af__timeline-item { position: relative; padding-top: 1.9rem; }
.zk-af__timeline-dot {
	position: absolute; z-index: 1; top: 0; left: 0;
	width: 16px; height: 16px; border-radius: 50%;
	background: var(--zk-green, #84bf2a);
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px var(--zk-line, #e6e8e1);
}
/* Przerywany konektor między kamieniami (biegnie na wysokości kropki). */
.zk-af__timeline-item:not(:last-child)::after {
	content: ""; position: absolute; z-index: 0;
	top: 7px; left: 16px; right: calc(-1.5rem + 2px);
	border-top: 2px dashed #cfe3a8;
}
.zk-af__timeline-label {
	margin: 0 0 .3rem; font-weight: 800; font-size: 1.02rem;
	color: var(--zk-ink, #23291c);
}
.zk-af__timeline-year { color: var(--zk-green-dark, #487214); }
.zk-af__timeline-desc {
	margin: 0; color: var(--zk-muted, #5b6152);
	font-size: .92rem; line-height: 1.55;
}

/* ----------------------------------------------------------- Wiarygodność */
.zk-af__cred-intro { max-width: 72ch; color: var(--zk-ink, #23291c); }
.zk-af__cred-grid {
	display: grid;
	grid-template-columns: minmax(0, 300px) 1fr;
	gap: clamp(1.25rem, 3vw, 2rem);
	align-items: start;
	margin-top: 1.5rem;
}
/* Karta BDO — wyeksponowana (E-E-A-T: licencja BDO, legalna utylizacja). */
.zk-af__cred-card--bdo {
	display: flex; flex-direction: column; gap: .35rem;
	padding: 1.35rem 1.4rem;
	background: var(--zk-bg-green-soft, #eef5e2);
	border: 1px solid #dcecc4;
	border-radius: var(--zk-r-card, 12px);
}
.zk-af__cred-ico {
	width: 2.4rem; height: 2.4rem; margin-bottom: .35rem;
	color: var(--zk-green-dark, #487214); display: inline-flex;
}
.zk-af__cred-ico svg { width: 100%; height: 100%; }
.zk-af__cred-label {
	margin: 0; font-size: .75rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .05em;
	color: var(--zk-muted, #5b6152);
}
.zk-af__cred-value {
	margin: 0; font-size: 1.6rem; font-weight: 800; line-height: 1.1;
	color: var(--zk-ink, #23291c);
}
.zk-af__cred-note {
	margin: .25rem 0 0; font-size: .9rem; line-height: 1.5;
	color: var(--zk-muted, #5b6152);
}
/* Dane rejestrowe (nazwa, NIP, adres) — lista definicji w białej karcie. */
.zk-af__cred-data {
	margin: 0; padding: .35rem 1.4rem;
	background: #fff;
	border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-card, 12px);
	box-shadow: var(--zkaf-soft-shadow);
}
.zk-af__cred-row {
	display: flex; flex-wrap: wrap; gap: .35rem 1rem;
	padding: .85rem 0;
	border-bottom: 1px solid var(--zk-line, #e6e8e1);
}
.zk-af__cred-row:last-child { border-bottom: 0; }
.zk-af__cred-row dt {
	flex: 0 0 6.5rem; margin: 0;
	font-size: .8rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em;
	color: var(--zk-muted, #5b6152);
	align-self: center;
}
.zk-af__cred-row dd {
	flex: 1 1 auto; margin: 0;
	font-weight: 700; color: var(--zk-ink, #23291c);
}

/* --------------------------------------------------- Logotypy / referencje
   Korekta 26.07: pas NAVY, teksty rozjaśnione, linki jako przyciski --ondark
   jeden pod drugim; kafle logotypów białe (kontrast na navy), loga do 70px. */
.zk-af__refs .zk-af__eyebrow { color: var(--zk-green, #84bf2a); }
.zk-af__refs h2 { color: #fff; }
.zk-af__refs-grid {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.zk-af__refs-lead { max-width: 56ch; color: rgba(255, 255, 255, .85); }
.zk-af__refs-links {
	display: flex; flex-direction: column; align-items: flex-start;
	gap: .7rem;
	margin: 1.5rem 0 0;
}
.zk-af__logos {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}
.zk-af__logo {
	display: flex; align-items: center; justify-content: center;
	min-height: 118px; padding: 1.1rem 1.3rem;
	background: #fff; border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-card, 12px);
	box-shadow: var(--zkaf-soft-shadow);
}
.zk-af__logo img {
	max-height: 70px; max-width: 100%; width: auto;
	filter: grayscale(1); opacity: .8;
	transition: opacity .15s ease, filter .15s ease;
}
.zk-af__logo:hover img { filter: grayscale(0); opacity: 1; }

/* ------------------------------------------------- Galeria realizacji (26.07)
   Układ 1:1 z landingiem (.zk-lp__gallery-* w landing-lokalny.css): mozaika
   3 kolumny, pierwszy kafel 2×2, cover ~4:3. Lightbox tworzy wspólny JS
   landing-lokalny.js (klasy .zk-lp-lightbox* — style skopiowane niżej;
   przy zmianie na landingu zaktualizuj i tu). */
.zk-af__gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: clamp(135px, 14vw, 196px);
	gap: .75rem;
}
.zk-af__gallery-item {
	position: relative; margin: 0; overflow: hidden;
	border-radius: var(--zk-r-card, 12px);
	box-shadow: var(--zkaf-soft-shadow);
}
.zk-af__gallery-media, .zk-af__gallery-media img { width: 100%; height: 100%; display: block; }
.zk-af__gallery-media img { object-fit: cover; transition: transform .5s ease; }
.zk-af__gallery-item:hover .zk-af__gallery-media img { transform: scale(1.06); }
.zk-af__gallery-item .zk-lp__gallery-link { display: block; height: 100%; cursor: zoom-in; }
.zk-af__gallery-item figcaption {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 1.6rem .85rem .65rem;
	color: #fff; font-size: .82rem; line-height: 1.3; font-weight: 500;
	background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
	opacity: 0; transform: translateY(6px);
	transition: opacity .3s ease, transform .3s ease;
	pointer-events: none;
}
.zk-af__gallery-item:hover figcaption { opacity: 1; transform: none; }
.zk-af__gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
@media (hover: none) {
	.zk-af__gallery-item figcaption { opacity: 1; transform: none; }
}
@media (max-width: 720px) {
	.zk-af__gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 32vw; }
	.zk-af__gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
	.zk-af__gallery-item:last-child:nth-child(even) { display: none; }
}

/* Lightbox (tworzony JS-em; klasy wspólne z landingiem) */
.zk-lp-lb-lock { overflow: hidden; }
.zk-lp-lightbox {
	position: fixed; inset: 0; z-index: 9999; display: none;
	align-items: center; justify-content: center;
	padding: clamp(1.5rem, 6vw, 4rem);
	background: rgba(10, 12, 8, .82);
}
.zk-lp-lightbox.is-open { display: flex; }
.zk-lp-lightbox__fig {
	margin: 0; max-width: 100%; max-height: 100%;
	display: flex; flex-direction: column; align-items: center; gap: .7rem;
}
.zk-lp-lightbox__stage {
	position: relative; display: flex; align-items: center; justify-content: center;
	max-width: 100%;
}
.zk-lp-lightbox__img {
	max-width: min(84vw, 820px); max-height: 74vh; object-fit: contain;
	border-radius: 8px; box-shadow: 0 8px 40px rgba(0, 0, 0, .5); background: #000;
}
.zk-lp-lightbox__cap { color: #fff; font-size: .9rem; text-align: center; max-width: 60ch; }
.zk-lp-lightbox__close,
.zk-lp-lightbox__nav {
	position: absolute; border: 0; color: #fff; cursor: pointer;
	background: rgba(255, 255, 255, .12); border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	line-height: 0; padding: 0;
	transition: background .15s ease;
}
.zk-lp-lightbox__close:hover,
.zk-lp-lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
.zk-lp-lightbox__close:focus-visible,
.zk-lp-lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.zk-lp-lightbox__close { top: 1rem; right: 1rem; width: 44px; height: 44px; }
.zk-lp-lightbox__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.zk-lp-lightbox__nav--prev { left: -58px; }
.zk-lp-lightbox__nav--next { right: -58px; }
.zk-lp-lightbox__nav[hidden] { display: none; }
.zk-lp-lightbox__counter {
	position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
	color: rgba(255, 255, 255, .75); font-size: .82rem;
}
@media (max-width: 760px) {
	.zk-lp-lightbox__img { max-width: 92vw; }
	.zk-lp-lightbox__nav { width: 42px; height: 42px; }
	.zk-lp-lightbox__nav--prev { left: 6px; }
	.zk-lp-lightbox__nav--next { right: 6px; }
}

/* ------------------------------------------------------------ Breakpointy */
@media (max-width: 860px) {
	.zk-af__history-body.has-photo { grid-template-columns: 1fr; }
	.zk-af__cred-grid { grid-template-columns: 1fr; }
	.zk-af__refs-grid { grid-template-columns: 1fr; }
	.zk-af__logo { min-height: 92px; }
	.zk-af__logo img { max-height: 52px; }
}

@media (max-width: 640px) {
	/* Oś czasu → pionowa: kropki na lewej krawędzi, linia w pionie. */
	.zk-af__timeline {
		grid-auto-flow: row; grid-auto-columns: auto;
		gap: 1.6rem; max-width: 520px;
	}
	.zk-af__timeline-item { padding-top: 0; padding-left: 2rem; }
	.zk-af__timeline-dot { top: .2rem; left: 0; }
	.zk-af__timeline-item:not(:last-child)::after {
		top: .2rem; left: 7px; right: auto;
		width: 0; height: auto; bottom: -1.6rem;
		border-top: 0; border-left: 2px dashed #cfe3a8;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zk-af * { transition: none !important; }
}