/* =========================================================
   MODUŁ: Książka / Product Showcase
   ========================================================= */

.sp-ks {
	--spks-font:        'Inter', sans-serif;
	--spks-size-label:  15px;
	--spks-size-tytul:  56px;
	--spks-weight-tytul:800;
	--spks-lh-tytul:    1.1;
	--spks-size-opis:   17px;
	--spks-lh-opis:     1.6;
	--spks-size-cta:    15px;
	--spks-max-width:   1180px;
	--spks-pad-y:       100px;
	--spks-pad-x:       32px;
	--spks-gap:         80px;
	--spks-radius-sec:  0px;
	--spks-margin-y:    0px;
	--spks-obraz-max:   440px;
	--spks-karta-radius: 28px;
	--spks-karta-pad:   60px;
	--spks-tlo:         #FFFFFF;
	--spks-label:       #1A2540;
	--spks-label-ikona: #D4A017;
	--spks-tytul:       #1A2540;
	--spks-mark:        #D4A017;
	--spks-opis:        #5A5A5A;
	--spks-cta1-tlo:    #1A2540;
	--spks-cta1-tekst:  #FFFFFF;
	--spks-cta2-border: #1A2540;
	--spks-cta2-tekst:  #1A2540;
	--spks-karta-tlo:   #F8F3E0;
	--spks-karta-border: #E8DFCB;

	font-family: var(--spks-font);
	background: var(--spks-tlo);
	padding: var(--spks-pad-y) var(--spks-pad-x);
	border-radius: var(--spks-radius-sec);
	margin-top: var(--spks-margin-y);
	margin-bottom: var(--spks-margin-y);
	color: var(--spks-opis);
	position: relative;
	overflow: hidden;
}
.sp-ks * { box-sizing: border-box; }

.sp-ks--w-full {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.sp-ks--w-container {
	width: 100%;
	max-width: var(--spks-max-width);
	margin-left: auto;
	margin-right: auto;
}

.sp-ks__inner {
	max-width: var(--spks-max-width);
	margin: 0 auto;
	display: grid;
	gap: var(--spks-gap);
	align-items: center;
}

/* Proporcje kolumn */
.sp-ks--prop-equal      .sp-ks__inner { grid-template-columns: 1fr 1fr; }
.sp-ks--prop-text-wide  .sp-ks__inner { grid-template-columns: 1.5fr 1fr; }
.sp-ks--prop-image-wide .sp-ks__inner { grid-template-columns: 1fr 1.5fr; }

/* Układ: text-left (default) / text-right */
.sp-ks--ukl-text-left  .sp-ks__col--text  { grid-column: 1; }
.sp-ks--ukl-text-left  .sp-ks__col--obraz { grid-column: 2; }
.sp-ks--ukl-text-right .sp-ks__col--text  { grid-column: 2; }
.sp-ks--ukl-text-right .sp-ks__col--obraz { grid-column: 1; }

/* =========================================================
   KOLUMNA TEKSTU
   ========================================================= */
.sp-ks__col--text {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.sp-ks__label {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-size: var(--spks-size-label);
	font-weight: 700;
	color: var(--spks-label);
	letter-spacing: .005em;
	align-self: flex-start;
}
.sp-ks__label-ikona {
	display: inline-flex;
	width: 18px;
	height: 18px;
	color: var(--spks-label-ikona);
	flex-shrink: 0;
	animation: sp-ks-ikona-shine 2.6s ease-in-out infinite;
}
.sp-ks__label-ikona svg {
	width: 100%;
	height: 100%;
}
@keyframes sp-ks-ikona-shine {
	0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
	50%      { transform: scale(1.18) rotate(8deg); opacity: .85; }
}
.sp-ks__label-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--spks-label-ikona);
	box-shadow: 0 0 0 4px rgba(212,160,23,.22);
	animation: sp-ks-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes sp-ks-dot-pulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(212,160,23,.22); transform: scale(1); }
	50%      { box-shadow: 0 0 0 9px rgba(212,160,23,.04); transform: scale(1.15); }
}

.sp-ks__tytul {
	font-size: clamp(32px, 5vw, var(--spks-size-tytul));
	font-weight: var(--spks-weight-tytul);
	color: var(--spks-tytul);
	line-height: var(--spks-lh-tytul);
	letter-spacing: -.015em;
	margin: 0;
}
.sp-ks--serif .sp-ks__tytul {
	font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
	font-weight: 600;
	letter-spacing: -.005em;
}
.sp-ks__tytul mark {
	background: transparent;
	color: var(--spks-mark);
	font-weight: inherit;
}
.sp-ks__tytul em {
	font-style: italic;
	font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
	font-weight: 600;
}

.sp-ks__opis {
	font-size: var(--spks-size-opis);
	line-height: var(--spks-lh-opis);
	color: var(--spks-opis);
	margin: 0;
	max-width: 540px;
}
.sp-ks__opis strong { color: var(--spks-tytul); }

/* =========================================================
   PRZYCISKI CTA
   ========================================================= */
.sp-ks__cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1rem;
}

.sp-ks__btn {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: 1em 1.65em;
	border-radius: 999px;
	font-weight: 700;
	font-size: var(--spks-size-cta);
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	border: 2px solid transparent;
	transition: transform .25s cubic-bezier(.4,0,.2,1),
	            box-shadow .25s cubic-bezier(.4,0,.2,1),
	            background .2s ease,
	            color .2s ease,
	            border-color .2s ease,
	            filter .2s ease;
	cursor: pointer;
	font-family: inherit;
	line-height: 1;
	position: relative;
	overflow: hidden;
	border-bottom: none !important;
}
.sp-ks__btn svg {
	width: 14px;
	height: 14px;
	transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.sp-ks__btn:hover svg { transform: translateX(3px); }

/* Wariant: dark (granat) — jak na screenie */
.sp-ks__btn--dark {
	background: var(--spks-cta1-tlo);
	color: var(--spks-cta1-tekst);
	border-color: var(--spks-cta1-tlo);
	box-shadow:
		0 10px 26px rgba(26,37,64,.25),
		inset 0 1px 0 rgba(255,255,255,.10);
}
.sp-ks__btn--dark:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 16px 36px rgba(26,37,64,.36);
	filter: brightness(1.1);
	color: var(--spks-cta1-tekst);
}

/* Wariant: outline */
.sp-ks__btn--outline {
	background: transparent;
	color: var(--spks-cta2-tekst);
	border-color: var(--spks-cta2-border);
	box-shadow: 0 2px 6px rgba(26,37,64,.04);
}
.sp-ks__btn--outline:hover {
	transform: translateY(-3px);
	background: var(--spks-cta2-border);
	color: var(--spks-tlo);
	box-shadow: 0 12px 28px rgba(26,37,64,.18);
}

/* Wariant: ghost (sam tekst, hover-tinted) */
.sp-ks__btn--ghost {
	background: transparent;
	color: var(--spks-cta2-tekst);
	padding: 1em .5em;
	border: none;
	box-shadow: none;
}
.sp-ks__btn--ghost:hover {
	color: var(--spks-mark);
}

/* Wariant: gold (złoty gradient + shimmer) */
.sp-ks__btn--gold {
	background: linear-gradient(135deg, var(--spks-mark), color-mix(in srgb, var(--spks-mark) 78%, #FFF));
	color: var(--spks-cta1-tlo);
	border-color: transparent;
	box-shadow:
		0 12px 30px rgba(212,160,23,.40),
		inset 0 1px 0 rgba(255,255,255,.25);
}
.sp-ks__btn--gold::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.40) 50%, transparent 100%);
	transform: translateX(-100%);
	transition: transform .7s cubic-bezier(.4,0,.2,1);
	pointer-events: none;
}
.sp-ks__btn--gold:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 18px 40px rgba(212,160,23,.55);
	filter: brightness(1.05);
	color: var(--spks-cta1-tlo);
}
.sp-ks__btn--gold:hover::before { transform: translateX(100%); }
.sp-ks__btn--gold > * { position: relative; z-index: 1; }

/* =========================================================
   KOLUMNA OBRAZU
   ========================================================= */
.sp-ks__col--obraz {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sp-ks__karta {
	width: 100%;
	background: var(--spks-karta-tlo);
	border: 1px solid var(--spks-karta-border);
	border-radius: var(--spks-karta-radius);
	padding: var(--spks-karta-pad);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 18px 50px rgba(26,37,64,.06),
		inset 0 1px 0 rgba(255,255,255,.5);
	transition: transform .4s cubic-bezier(.4,0,.2,1),
	            box-shadow .4s cubic-bezier(.4,0,.2,1);
	position: relative;
	overflow: hidden;
}
.sp-ks__karta::before {
	content: "";
	position: absolute;
	top: -30%;
	right: -10%;
	width: 280px;
	height: 280px;
	background: radial-gradient(circle, var(--spks-label-ikona) 0%, transparent 65%);
	opacity: .05;
	border-radius: 50%;
	pointer-events: none;
}

.sp-ks__img {
	width: 100%;
	max-width: var(--spks-obraz-max);
	height: auto;
	display: block;
	position: relative;
	z-index: 1;
}
.sp-ks__img--standalone {
	max-width: var(--spks-obraz-max);
	margin: 0 auto;
}

.sp-ks__img-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .65rem;
	color: rgba(26,37,64,.35);
	padding: 3rem 1rem;
}
.sp-ks__img-placeholder svg {
	width: 72px;
	height: 72px;
}
.sp-ks__img-placeholder span {
	font-size: 13px;
	font-weight: 600;
}

/* =========================================================
   EFEKTY OBRAZU
   ========================================================= */
.sp-ks--obraz-shadow .sp-ks__img {
	filter: drop-shadow(0 30px 50px rgba(0,0,0,.30));
}
.sp-ks--obraz-float .sp-ks__img {
	animation: sp-ks-img-float 6s ease-in-out infinite;
	filter: drop-shadow(0 25px 45px rgba(0,0,0,.25));
}
@keyframes sp-ks-img-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}
.sp-ks--obraz-tilt .sp-ks__img {
	transition: transform .5s cubic-bezier(.4,0,.2,1),
	            filter .5s ease;
	filter: drop-shadow(0 22px 40px rgba(0,0,0,.25));
	transform-style: preserve-3d;
}
.sp-ks--obraz-tilt .sp-ks__karta:hover .sp-ks__img,
.sp-ks--obraz-tilt .sp-ks__col--obraz:hover .sp-ks__img {
	transform: perspective(900px) rotateY(-6deg) rotateX(3deg);
	filter: drop-shadow(0 35px 55px rgba(0,0,0,.35));
}
.sp-ks--obraz-lift .sp-ks__img {
	transition: transform .4s cubic-bezier(.4,0,.2,1),
	            filter .4s ease;
	filter: drop-shadow(0 18px 32px rgba(0,0,0,.22));
}
.sp-ks--obraz-lift .sp-ks__karta:hover .sp-ks__img,
.sp-ks--obraz-lift .sp-ks__col--obraz:hover .sp-ks__img {
	transform: translateY(-10px) scale(1.03);
	filter: drop-shadow(0 30px 50px rgba(0,0,0,.32));
}
.sp-ks--obraz-glow .sp-ks__img {
	filter:
		drop-shadow(0 0 25px var(--spks-label-ikona))
		drop-shadow(0 0 45px rgba(212,160,23,.35))
		drop-shadow(0 20px 30px rgba(0,0,0,.20));
}
.sp-ks--obraz-none .sp-ks__img { filter: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
	.sp-ks {
		--spks-pad-y: 60px;
		--spks-pad-x: 22px;
		--spks-gap: 48px;
		--spks-karta-pad: 36px;
	}
	.sp-ks__inner {
		grid-template-columns: 1fr !important;
	}
	.sp-ks__col--text,
	.sp-ks__col--obraz {
		grid-column: 1 !important;
	}
	/* Na mobile zawsze: obraz nad tekstem dla lepszego UX */
	.sp-ks--ukl-text-left  .sp-ks__col--obraz,
	.sp-ks--ukl-text-right .sp-ks__col--obraz {
		order: -1;
	}
	.sp-ks__col--text { text-align: center; }
	.sp-ks__label, .sp-ks__cta-row { align-self: center; justify-content: center; }
	.sp-ks__opis { margin-left: auto; margin-right: auto; }
}
@media (max-width: 480px) {
	.sp-ks__btn { font-size: 14px; padding: .9em 1.4em; }
	.sp-ks__cta-row { width: 100%; }
	.sp-ks__btn { flex: 1 1 auto; justify-content: center; }
}