/* =========================================================================
   Referencje i klienci (/zaufali-nam/) — prefiks .zk-zn__
   Tokeny --zk-* z site-header.css. Przyciski, etykiety, nagłówki, pasek USP i
   pas B2B = WSPÓLNA warstwa .zk-ui-* / zk_trust_render / zk_b2b_render.
   Tu tylko układy specyficzne dla tej strony.
   ========================================================================= */

.zk-zn {
	max-width: var(--zk-max, 1240px);
	margin-inline: auto;
	/* Boczny padding = jak header/kalkulator (max 20px), żeby treść nie odjeżdżała. */
	padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 20px) clamp(2.5rem, 6vw, 4.5rem);
	color: var(--zk-ink, #23291c);
	/* Font jak reszta serwisu (blog/kalkulator/landing ustawiają Inter na swoim
	   kontenerze; brak globalnej reguły body → bez tego zaufali dziedziczyło
	   domyślny font motywu i całość, w tym breadcrumb, wyglądała inaczej). */
	font-family: var(--zk-font, sans-serif); /* kanon: zk-ui.css (Geist) */
	font-size: 1.05rem; line-height: 1.6;
}
.zk-zn h1, .zk-zn h2 { letter-spacing: -.01em; }
.zk-zn :focus-visible { outline: 2px solid var(--zk-green-dark, #487214); outline-offset: 2px; }

/* --------------------------------------------------------------- Hero */
/* Wygląd 1:1 z /kalkulator-bdo/: kompaktowy, bez gwiazdek, border-bottom jako
   separator, te same wielkości fontów. */
.zk-zn__hero {
	padding-block: 0 clamp(1rem, 2.5vw, 1.5rem);
	border-bottom: 1px solid var(--zk-line, #e6e8e1);
}
/* Breadcrumb: warstwa wspólna (.zk-ui-breadcrumb). Bez własnych reguł. */
.zk-zn__rating { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; color: var(--zk-muted, #5b6152); margin-bottom: 1rem; }
.zk-zn__rating strong { color: var(--zk-ink, #23291c); }
.zk-zn__stars { position: relative; display: inline-block; line-height: 1; font-size: 1.15rem; letter-spacing: 1px; }
.zk-zn__stars-bg { color: #d7dccb; }
.zk-zn__stars-fill { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; color: var(--zk-gold, #ffc53d); }
.zk-zn__h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.14; font-weight: 800; margin: 0 0 .9rem; color: var(--zk-ink, #23291c); max-width: 26ch; }
.zk-zn__lead { color: var(--zk-ink, #23291c); font-size: 1.08rem; max-width: 70ch; margin: 0 0 1.4rem; }
.zk-zn__hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.zk-zn__hero-cta .zk-ui-btn--call .zk-ui-btn-ico { color: var(--zk-green-dark, #487214); }

/* ------------------------------------------------------ Logotypy klientów */
.zk-zn__clients { margin-block: clamp(2.5rem, 5vw, 4rem); }
.zk-zn__logo-groups { display: grid; gap: clamp(1.5rem, 3vw, 2.2rem); }
.zk-zn__logo-group-label { text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; font-weight: 700; color: var(--zk-green-dark, #487214); margin: 0 0 .8rem; }
.zk-zn__logo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.zk-zn__logo {
	display: flex; align-items: center; justify-content: center; min-height: 104px;
	background: var(--zk-bg, #fff); border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-card, 12px); padding: 1rem;
}
.zk-zn__logo-img { max-width: 100%; height: auto; max-height: 70px; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .15s ease, opacity .15s ease; }
.zk-zn__logo:hover .zk-zn__logo-img { filter: none; opacity: 1; }
.zk-zn__logo--text .zk-zn__logo-name { font-weight: 700; color: var(--zk-ink, #23291c); text-align: center; }

/* ------------------------------------------------------------ Referencje */
.zk-zn__band--soft {
	background: var(--zk-bg-soft, #f2f4ec);
	box-shadow: 0 0 0 100vw var(--zk-bg-soft, #f2f4ec);
	clip-path: inset(0 -100vw);
	padding-block: clamp(2.5rem, 5vw, 4rem);
	margin-block: clamp(2.5rem, 5vw, 4rem);
}
.zk-zn__refs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1rem, 2.5vw, 1.5rem); }
.zk-zn__ref {
	margin: 0; background: var(--zk-bg, #fff); border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-card, 12px); padding: 1.5rem;
	display: flex; flex-direction: column; gap: .9rem;
}
.zk-zn__ref-stars { position: relative; display: inline-block; line-height: 1; font-size: 1.05rem; letter-spacing: 1px; width: max-content; }
.zk-zn__ref-quote { margin: 0; color: var(--zk-ink, #23291c); font-size: 1.02rem; line-height: 1.55; flex: 1 1 auto; }
.zk-zn__ref-author { display: flex; align-items: center; gap: .7rem; }
.zk-zn__ref-avatar {
	flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--zk-bg-green, #e8f2d6); color: var(--zk-green-dark, #487214); font-weight: 800;
}
.zk-zn__ref-avatar img { width: 100%; height: 100%; object-fit: cover; }
.zk-zn__ref-id { display: flex; flex-direction: column; }
.zk-zn__ref-name { font-weight: 700; color: var(--zk-ink, #23291c); }
.zk-zn__ref-meta { font-size: .88rem; color: var(--zk-muted, #5b6152); }

/* --------------------------------------------------------------- Opinie */

/* ---------------------------------------------------- Notka redaktora */
.zk-zn__editor-note {
	background: #fff8e5; border: 1px dashed #e2c86b; border-radius: var(--zk-r-card, 12px);
	padding: .8rem 1rem; color: #6b5a1e; font-size: .9rem; margin: 0 0 1.2rem;
}
.zk-zn__editor-note code { background: rgba(0, 0, 0, .06); padding: .05rem .3rem; border-radius: 4px; }