/* ==========================================================
   epiano-catalog-slider — BEM, mobile-first
   Tokeny CSS i utility classes → assets/css/blocks-base.css
   ========================================================== */

/* ── Sekcja ─────────────────────────────────────────────────── */

.epiano-catalog-slider {
	padding: var(--space-3xl) 0;
	background-color: var(--bg-secondary);
	overflow: hidden;
}

/* ── Nagłówek ────────────────────────────────────────────────── */

.epiano-catalog-slider__header {
	margin-bottom: var(--space-2xl);
}

.epiano-catalog-slider__header-inner {
	text-align: center;
}

/* eyebrow, heading, divider → utility classes w blocks-base.css */

/* ── Embla root — FULL WIDTH, bez .container ─────────────────── */
/* Komentarz z prototypu: nie używamy gap na kontenerze w trybie
   loop — Embla przesuwa przez CSS transform, gap znika przy
   punkcie łączenia pętli. Zamiast tego padding-right na sladzie. */

.epiano-catalog-slider__embla {
	overflow: hidden;
	padding: var(--space-lg) 0 var(--space-xl);
	cursor: grab;
}

.epiano-catalog-slider__embla:active {
	cursor: grabbing;
}

/* ── Embla rail (track) ──────────────────────────────────────── */

.epiano-catalog-slider__rail {
	display: flex;
	align-items: flex-start;
	will-change: transform;
}

/* ── Slajd — stała szerokość px + padding jako odstęp ───────── */

.epiano-catalog-slider__slide {
	flex: 0 0 304px;   /* 280px karta + 24px odstęp */
	min-width: 0;
	padding-right: 24px;
	display: flex;
	align-items: flex-start;
}

@media (min-width: 640px) {
	.epiano-catalog-slider__slide {
		flex: 0 0 364px;   /* 340px + 24px */
	}
}

@media (min-width: 1024px) {
	.epiano-catalog-slider__slide {
		flex: 0 0 440px;   /* 400px + 40px */
		padding-right: 40px;
	}
}

/* ── Stopka z CTA ────────────────────────────────────────────── */

.epiano-catalog-slider__footer {
	text-align: center;
	margin-top: var(--space-2xl);
}

.epiano-catalog-slider__cta-btn {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--fz-sm);
	font-weight: 600;
	letter-spacing: 0.5px;
	text-decoration: none;
	color: var(--bg-dark);
	background-color: transparent;
	border: 2px solid var(--bg-dark);
	padding: 0.75rem 2.5rem;
	transition: background-color var(--transition-fast),
	            color var(--transition-fast);
}

.epiano-catalog-slider__cta-btn:hover,
.epiano-catalog-slider__cta-btn:focus-visible {
	background-color: var(--bg-dark);
	color: var(--text-inverse);
	outline: none;
}

/* ================================================================
   Styl karty (.epiano-card) → assets/css/blocks-base.css (globalny)
   ================================================================ */