/*
 * FabrykaCmyka 2.0 — Katalogi: lista (.fcs-katalogi) + pojedynczy flipbook (.fcs-katalog).
 * Port stylow z handoffu „Katalogi", scope pod .fcs-katalogi / .fcs-katalog. Ciemny motyw (#141418).
 * Tokeny z motywu z fallbackami var(--fc-..., #hex). Responsywnosc media queries 1080/680 (nie container).
 * Mobile ≤680: ksiazka 3D ukryta, w zamian pager jednej strony (.fcs-pager, klik = lightbox).
 * Uwaga: w komentarzach nigdy sekwencja gwiazdka-slash.
 */

/* ============================================================
 *  WSPOLNE tokeny + primitywy
 * ============================================================ */
.fcs-katalogi,
.fcs-katalog {
	--fck-yellow: var(--fc-yellow, #FFDE2C);
	--fck-yellow-deep: var(--fc-yellow-deep, #F5C400);
	--fck-magenta: var(--fc-magenta, #C800A7);
	--fck-cyan: var(--fc-cyan, #6EC1E4);
	--fck-head: var(--fc-font-head, 'Poppins', sans-serif);
	--fck-body: var(--fc-font-body, 'Lato', sans-serif);

	background: #141418;
	color: #E8E8EA;
	font-family: var(--fck-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.fcs-katalogi h1,
.fcs-katalogi h2,
.fcs-katalogi h3,
.fcs-katalog h1,
.fcs-katalog h2,
.fcs-katalog h3 {
	font-family: var(--fck-head);
	margin: 0;
	line-height: 1.12;
}

.fcs-katalogi p,
.fcs-katalog p {
	margin: 0;
}

.fcs-katalogi a,
.fcs-katalog a {
	text-decoration: none;
	color: inherit;
}

.fcs-katalogi button,
.fcs-katalog button {
	font-family: inherit;
	cursor: pointer;
}

.fcs-kwrap {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 56px;
}

/* Eyebrow */
.fcs-katalogi .fcs-keyebrow,
.fcs-katalog .fcs-keyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--fck-head);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	margin-bottom: 16px;
	color: var(--fck-yellow);
}

.fcs-katalogi .fcs-keyebrow i,
.fcs-katalog .fcs-keyebrow i {
	width: 22px;
	height: 2px;
	background: currentColor;
	display: block;
	flex: none;
}

/* Buttony */
.fcs-katalogi .fcs-kbtn,
.fcs-katalog .fcs-kbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 48px;
	padding: 0 22px;
	border-radius: 11px;
	font-family: var(--fck-head);
	font-weight: 700;
	font-size: 14.5px;
	border: 2px solid transparent;
	transition: .16s;
	white-space: nowrap;
	cursor: pointer;
}

.fcs-katalogi .fcs-kbtn svg,
.fcs-katalog .fcs-kbtn svg {
	flex: none;
	transition: transform .16s;
}

.fcs-katalogi .fcs-kbtn--yellow:hover svg,
.fcs-katalog .fcs-kbtn--yellow:hover svg {
	transform: translateX(3px);
}

.fcs-katalogi .fcs-kbtn--yellow,
.fcs-katalog .fcs-kbtn--yellow {
	background: var(--fck-yellow);
	color: #1a1600;
}

.fcs-katalogi .fcs-kbtn--yellow:hover,
.fcs-katalogi .fcs-kbtn--yellow:focus-visible,
.fcs-katalog .fcs-kbtn--yellow:hover,
.fcs-katalog .fcs-kbtn--yellow:focus-visible {
	background: #fff;
	color: #1a1600;
	outline: none;
}

.fcs-katalogi .fcs-kbtn--yellow:active,
.fcs-katalog .fcs-kbtn--yellow:active {
	transform: translateY(1px);
}

.fcs-katalogi .fcs-kbtn--ghost,
.fcs-katalog .fcs-kbtn--ghost {
	background: transparent;
	color: #e8e8ea;
	border-color: rgba(255, 255, 255, .22);
}

.fcs-katalogi .fcs-kbtn--ghost:hover,
.fcs-katalogi .fcs-kbtn--ghost:focus-visible,
.fcs-katalog .fcs-kbtn--ghost:hover,
.fcs-katalog .fcs-kbtn--ghost:focus-visible {
	border-color: var(--fck-yellow);
	color: var(--fck-yellow);
	outline: none;
}

.fcs-katalog .fcs-kbtn--outline {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .3);
}

.fcs-katalog .fcs-kbtn--outline:hover,
.fcs-katalog .fcs-kbtn--outline:focus-visible {
	border-color: var(--fck-yellow);
	color: var(--fck-yellow);
	outline: none;
}

/* Reveal */
.fcs-krv {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s cubic-bezier(.16, .8, .24, 1), transform .7s cubic-bezier(.16, .8, .24, 1);
}

.fcs-krv.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.fcs-krv {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Crumb */
.fcs-katalogi .fcs-kcrumb,
.fcs-katalog .fcs-kcrumb {
	font-family: var(--fck-head);
	font-weight: 600;
	font-size: 13px;
	color: #c9c9d2;
	margin-bottom: 20px;
	display: flex;
	gap: 9px;
	align-items: center;
	flex-wrap: wrap;
}

.fcs-katalogi .fcs-kcrumb a:hover,
.fcs-katalog .fcs-kcrumb a:hover {
	color: var(--fck-yellow);
}

.fcs-katalogi .fcs-kcrumb span,
.fcs-katalog .fcs-kcrumb span {
	color: #7a7a84;
}

/* HERO */
.fcs-katalogi .fcs-khero,
.fcs-katalog .fcs-khero {
	padding: 64px 0 0;
	background: #141418;
}

.fcs-katalogi .fcs-khero h1,
.fcs-katalog .fcs-khero h1 {
	font-family: var(--fck-head);
	font-weight: 800;
	font-size: 60px;
	line-height: 1;
	letter-spacing: -2px;
	text-transform: uppercase;
	color: #fff;
}

.fcs-khero__bar {
	width: 92px;
	height: 5px;
	background: var(--fck-yellow);
	border-radius: 3px;
	margin-top: 24px;
}

/* SEKCJA + SHEAD */
.fcs-katalogi .fcs-ksec,
.fcs-katalog .fcs-ksec {
	padding: 60px 0 96px;
}

.fcs-kshead {
	max-width: 720px;
	margin: 0 auto 40px;
	text-align: center;
}

.fcs-kshead .fcs-keyebrow {
	justify-content: center;
}

.fcs-katalogi .fcs-kshead h2,
.fcs-katalog .fcs-kshead h2 {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -1.4px;
	text-transform: uppercase;
	line-height: 1;
	color: #fff;
}

.fcs-katalogi .fcs-kshead p,
.fcs-katalog .fcs-kshead p {
	font-size: 16.5px;
	margin-top: 16px;
	color: #a6a6b0;
}

/* ============================================================
 *  LISTA KATALOGOW (.fcs-katalogi)
 * ============================================================ */
.fcs-kgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.fcs-kcard {
	display: flex;
	flex-direction: column;
	background: #1c1c22;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 18px;
	overflow: hidden;
	transition: transform .2s cubic-bezier(.16, .8, .24, 1), border-color .2s, box-shadow .2s;
}

.fcs-kcard:hover {
	transform: translateY(-6px);
	border-color: var(--fck-magenta);
	box-shadow: 0 28px 54px -30px rgba(200, 0, 167, .5);
}

.fcs-kcard__cov {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	background: #26262f;
	overflow: hidden;
}

.fcs-kcard__cov img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fcs-kcard__ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #26262f, #1c1c22);
}

.fcs-kcard__mark {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px;
	width: 56px;
	height: 56px;
}

.fcs-kcard__mark i {
	border-radius: 6px;
	display: block;
}

.fcs-kcard__mark i:nth-child(1) { background: var(--fck-cyan); }
.fcs-kcard__mark i:nth-child(2) { background: var(--fck-magenta); }
.fcs-kcard__mark i:nth-child(3) { background: var(--fck-yellow); }
.fcs-kcard__mark i:nth-child(4) { background: #f7f8f8; }

.fcs-kcard__badge {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(20, 20, 24, .82);
	color: #fff;
	font-family: var(--fck-head);
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: .3px;
	padding: 7px 12px;
	border-radius: 999px;
	opacity: 0;
	transform: translateY(6px);
	transition: .18s;
}

.fcs-kcard__badge svg { flex: none; }

.fcs-kcard:hover .fcs-kcard__badge {
	opacity: 1;
	transform: none;
}

.fcs-kcard__b {
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.fcs-katalogi .fcs-kcard__b h3 {
	font-family: var(--fck-head);
	font-weight: 800;
	font-size: 19px;
	line-height: 1.22;
	letter-spacing: -.3px;
	color: #fff;
}

.fcs-kcard__meta {
	font-family: var(--fck-head);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: #7a7a84;
	margin-top: 8px;
}

.fcs-kcard__act {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 20px;
}

.fcs-kcard__act .fcs-kbtn {
	flex: 1 1 auto;
	min-width: 0;
}

/* Pusty stan */
.fcs-kempty {
	max-width: 520px;
	margin: 0 auto;
	text-align: center;
	background: #1c1c22;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 20px;
	padding: 54px 40px;
}

.fcs-kempty__ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	border-radius: 20px;
	background: #26262f;
	color: var(--fck-yellow);
	margin-bottom: 22px;
}

.fcs-katalogi .fcs-kempty h3,
.fcs-katalog .fcs-kempty h3 {
	font-family: var(--fck-head);
	font-weight: 800;
	font-size: 22px;
	color: #fff;
}

.fcs-katalogi .fcs-kempty p,
.fcs-katalog .fcs-kempty p {
	font-size: 15.5px;
	color: #a6a6b0;
	margin: 12px 0 24px;
	line-height: 1.6;
}

/* ============================================================
 *  FLIPBOOK (.fcs-katalog)
 * ============================================================ */
.fcs-reader {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.fcs-stage {
	position: relative;
	width: 100%;
	max-width: 940px;
	aspect-ratio: 1.5 / 1;
	perspective: 2600px;
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: pan-y;
}

.fcs-book {
	position: relative;
	width: 88%;
	height: 92%;
	transform-style: preserve-3d;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.fcs-book--closed {
	transform: translateX(-25%);
}

.fcs-book__base {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	background: #0d0d11;
	border-radius: 4px 12px 12px 4px;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
}

.fcs-leaf {
	position: absolute;
	top: 0;
	left: 50%;
	width: 50%;
	height: 100%;
	transform-origin: left center;
	transform-style: preserve-3d;
	transition: transform .9s cubic-bezier(.4, .15, .2, 1);
}

.fcs-leaf.is-flip {
	transform: rotateY(-180deg);
}

.fcs-leaf__face {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #f4f4f2;
	border: 1px solid rgba(0, 0, 0, .12);
}

.fcs-leaf__front {
	visibility: visible;
	border-radius: 2px 8px 8px 2px;
}

.fcs-leaf__back {
	visibility: hidden;
	transform: rotateY(180deg);
	border-radius: 8px 2px 2px 8px;
}

.fcs-leaf.is-flip .fcs-leaf__front {
	visibility: hidden;
}

.fcs-leaf.is-flip .fcs-leaf__back {
	visibility: visible;
}

.fcs-leaf__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	display: block;
	cursor: zoom-in;
}

.fcs-leaf__spine {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 34px;
	z-index: 6;
	pointer-events: none;
}

.fcs-leaf__front .fcs-leaf__spine {
	left: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, .28), transparent);
}

.fcs-leaf__back .fcs-leaf__spine {
	right: 0;
	background: linear-gradient(270deg, rgba(0, 0, 0, .28), transparent);
}

.fcs-leaf__num {
	position: absolute;
	bottom: 12px;
	z-index: 5;
	font-family: var(--fck-head);
	font-weight: 700;
	font-size: 12px;
	color: #9a9aa2;
}

.fcs-leaf__front .fcs-leaf__num { right: 16px; }
.fcs-leaf__back .fcs-leaf__num { left: 16px; }

/* Strzalki nawigacji */
.fcs-navarrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #1c1c22;
	border: 1px solid rgba(255, 255, 255, .14);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: .16s;
}

.fcs-navarrow svg { flex: none; }

.fcs-navarrow:hover:not(:disabled),
.fcs-navarrow:focus-visible:not(:disabled) {
	background: var(--fck-magenta);
	border-color: var(--fck-magenta);
	outline: none;
}

.fcs-navarrow:disabled {
	opacity: .3;
	cursor: default;
}

.fcs-navarrow--prev { left: -10px; }
.fcs-navarrow--next { right: -10px; }

/* Pasek pod ksiazka */
.fcs-reader__bar {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 30px;
}

.fcs-reader__count {
	font-family: var(--fck-head);
	font-weight: 700;
	font-size: 14px;
	color: #c4c4cc;
	min-width: 150px;
	text-align: center;
}

.fcs-reader__count b {
	color: var(--fck-yellow);
}

.fcs-reader__dot {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #1c1c22;
	border: 1px solid rgba(255, 255, 255, .14);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: .16s;
}

.fcs-reader__dot svg { flex: none; }

.fcs-reader__dot:hover:not(:disabled),
.fcs-reader__dot:focus-visible:not(:disabled) {
	background: #26262f;
	border-color: var(--fck-yellow);
	color: var(--fck-yellow);
	outline: none;
}

.fcs-reader__dot:disabled {
	opacity: .3;
	cursor: default;
}

.fcs-reader__hint {
	margin-top: 18px;
	font-size: 13px;
	color: #7a7a84;
	display: flex;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.fcs-reader__hint svg { flex: none; }

.fcs-reader__actions {
	display: flex;
	gap: 12px;
	margin-top: 26px;
	flex-wrap: wrap;
	justify-content: center;
}

/* ============================================================
 *  RESPONSYWNOSC
 * ============================================================ */
@media (max-width: 1080px) {
	.fcs-kwrap {
		padding: 0 32px;
	}

	.fcs-katalogi .fcs-khero h1,
	.fcs-katalog .fcs-khero h1 {
		font-size: 44px;
	}

	.fcs-katalogi .fcs-kshead h2,
	.fcs-katalog .fcs-kshead h2 {
		font-size: 34px;
	}

	.fcs-kgrid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 680px) {
	.fcs-katalogi .fcs-khero,
	.fcs-katalog .fcs-khero {
		padding: 44px 0 0;
	}

	.fcs-katalogi .fcs-khero h1,
	.fcs-katalog .fcs-khero h1 {
		font-size: 32px;
	}

	.fcs-kgrid {
		grid-template-columns: 1fr;
	}

	.fcs-stage {
		aspect-ratio: .8 / 1;
		perspective: 1600px;
	}

	.fcs-book--closed {
		transform: none;
	}

	.fcs-navarrow--prev { left: -4px; }
	.fcs-navarrow--next { right: -4px; }

	.fcs-kcard__badge {
		opacity: 1;
		transform: none;
	}
}

/* ============================================================
 *  PAGER MOBILE (jedna strona ≤680) — .fcs-pager
 *  Ksiazka 3D ukryta; jedna strona wypelnia szerokosc kontenera.
 * ============================================================ */
.fcs-pager {
	display: none;
}

.fcs-pager__page {
	display: none;
	width: 100%;
}

.fcs-pager__page.is-on {
	display: block;
}

.fcs-pager__page .fcs-leaf__img {
	position: static;
	inset: auto;
	width: 100%;
	height: auto;
	max-height: 72vh;
	object-fit: contain;
	display: block;
	border-radius: 4px;
	background: #f4f4f2;
}

@media (max-width: 680px) {
	/* Tryb mobilny czytnika: chowamy ksiazke 3D, pokazujemy pager. */
	.fcs-reader--mobile .fcs-book,
	.fcs-reader--mobile .fcs-book__base {
		display: none;
	}

	.fcs-reader--mobile .fcs-stage {
		aspect-ratio: auto;
		perspective: none;
		min-height: 0;
	}

	.fcs-reader--mobile .fcs-pager {
		display: block;
		width: 100%;
	}
}

/* ============================================================
 *  ORIENTACJA POZIOMA (katalog A4 poziomy) — data-fcs-orient="pozioma"
 *  Flipbook zakłada strony pionowe (spread 2× 3:4 → stage 1.5/1).
 *  Dla poziomych: komórka strony = 0,478 × aspect stage → aspect 2,96/1
 *  daje pojedynczą stronę ≈ A4 poziome (1,41:1). Mobile (pager, contain)
 *  jest orientacja-agnostyczny → guard :not(.fcs-reader--mobile).
 * ============================================================ */
.fcs-reader[data-fcs-orient="pozioma"]:not(.fcs-reader--mobile) .fcs-stage {
	aspect-ratio: 2.96 / 1;
	max-width: 1040px;
}

/* Miniatura okładki na liście katalogów: pozioma A4 zamiast 3:4 pionowej. */
.fcs-kcard__cov[data-fcs-orient="pozioma"] {
	aspect-ratio: 1.41 / 1;
}

/* ============================================================
 *  LIGHTBOX POWIĘKSZENIA STRON (.fcs-klb)
 * ============================================================ */
body.fcs-klb-lock {
	overflow: hidden;
}

.fcs-klb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fcs-klb[hidden] {
	display: none;
}

.fcs-klb__bg {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 14, .92);
	cursor: zoom-out;
}

.fcs-klb__stage {
	position: relative;
	z-index: 1;
	max-width: 92vw;
	max-height: 92vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.fcs-klb__img {
	display: block;
	max-width: 92vw;
	max-height: 92vh;
	width: auto;
	height: auto;
	object-fit: contain;
	cursor: zoom-in;
	user-select: none;
	-webkit-user-drag: none;
}

.fcs-klb__stage.is-zoom {
	cursor: grab;
}

.fcs-klb__img.is-zoom {
	max-width: none;
	max-height: none;
	width: auto;
	height: auto;
	cursor: zoom-out;
}

.fcs-klb__x {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 3;
	width: 46px;
	height: 46px;
	min-width: 40px;
	min-height: 40px;
	border-radius: 50%;
	background: rgba(28, 28, 34, .9);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: .16s;
}

.fcs-klb__x svg { flex: none; }

.fcs-klb__x:hover,
.fcs-klb__x:focus-visible {
	background: var(--fck-magenta);
	border-color: var(--fck-magenta);
	outline: none;
}

.fcs-klb__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 54px;
	height: 54px;
	min-width: 40px;
	min-height: 40px;
	border-radius: 50%;
	background: rgba(28, 28, 34, .82);
	border: 1px solid rgba(255, 255, 255, .16);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: .16s;
}

.fcs-klb__nav svg { flex: none; }

.fcs-klb__nav:hover,
.fcs-klb__nav:focus-visible {
	background: var(--fck-magenta);
	border-color: var(--fck-magenta);
	outline: none;
}

.fcs-klb__nav--prev { left: 20px; }
.fcs-klb__nav--next { right: 20px; }

.fcs-klb__count {
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	z-index: 3;
	font-family: var(--fck-head);
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	background: rgba(28, 28, 34, .82);
	border: 1px solid rgba(255, 255, 255, .14);
	padding: 7px 16px;
	border-radius: 999px;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.fcs-klb:not([hidden]) .fcs-klb__stage {
		animation: fcs-klb-in .22s cubic-bezier(.16, .8, .24, 1);
	}
}

@keyframes fcs-klb-in {
	from { opacity: 0; transform: scale(.97); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 680px) {
	.fcs-klb__img {
		max-width: 100vw;
		padding: 0;
	}

	.fcs-klb__stage {
		max-width: 100vw;
	}

	.fcs-klb__nav--prev { left: 8px; }
	.fcs-klb__nav--next { right: 8px; }
}

/* Dlugie wyrazy (np. niemieckie zlozenia jak Geschaeftspartner) rozpychaly strone w poziomie na mobile.
   overflow-wrap dziedziczy na potomkow i lamie wyraz TYLKO gdy nie miesci sie w kolumnie - zero zmian w normalnym skladzie; "anywhere" (nie break-word) bo wplywa na min-content = dziala tez we flex/grid. */
main[class*="fcs-"]{overflow-wrap:anywhere}