.ppp-pracownie {
	--ppp-radius: 8px;
	--ppp-gap: 20px;
	padding: 64px 20px;
	max-width: 1240px;
	margin: 0 auto;
	font-family: inherit;
	box-sizing: border-box;
}
.ppp-pracownie *,
.ppp-pracownie *::before,
.ppp-pracownie *::after {
	box-sizing: border-box;
}

/* SLIDER — wrapper z pozycjonowaniem strzałek */
.ppp-slider {
	position: relative;
}

/* Tor scrolla — tu się dzieje cała magia */
.ppp-slider__track {
	display: flex;
	gap: var(--ppp-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 8px var(--ppp-gap) 24px;       /* poziomy padding = gap → miejsce na cień */
	scroll-padding-inline: var(--ppp-gap);  /* snap dosuwa kafel do paddingu, nie do krawędzi → brak wystających sąsiadów */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #B0BEC5 #F5F5F5;
}
.ppp-slider__track::-webkit-scrollbar { height: 8px; }
.ppp-slider__track::-webkit-scrollbar-track { background: #F5F5F5; border-radius: 8px; }
.ppp-slider__track::-webkit-scrollbar-thumb { background: #B0BEC5; border-radius: 8px; }
.ppp-slider__track::-webkit-scrollbar-thumb:hover { background: #37474F; }

/* Pojedynczy slot — szerokość zależna od breakpointu */
.ppp-slide {
	flex: 0 0 calc((100% - 3 * var(--ppp-gap)) / 4); /* 4 kafle na desktop */
	scroll-snap-align: start;
	display: flex;
}
@media (max-width: 1199px) { .ppp-slide { flex-basis: calc((100% - 2 * var(--ppp-gap)) / 3); } }
@media (max-width: 899px)  { .ppp-slide { flex-basis: calc((100% - var(--ppp-gap)) / 2); } }
@media (max-width: 599px)  { .ppp-slide { flex-basis: 100%; } }

/* KAFEL */
.ppp-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	min-height: 230px;
	padding: 24px;
	border-radius: var(--ppp-radius);
	text-decoration: none;
	color: inherit;
	transition: transform .25s ease, box-shadow .25s ease;
	box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 3px 6px rgba(0, 0, 0, .08) !important;
}
.ppp-tile:hover,
.ppp-tile:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, .15), 0 4px 8px rgba(0, 0, 0, .08) !important;
	text-decoration: none;
	color: inherit !important;
}
.ppp-tile__icon {
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	color: #2D3748;
	margin-bottom: 16px;
}
.ppp-tile__icon svg { width: 24px; height: 24px; stroke-width: 1.8; }

/* Rozmiar glifu Font Awesome (Elementor) w ikonach kafli */
.ppp-tile__icon i { font-size: 18px; line-height: 1; }
.ppp-tile h3 { margin: 0 0 8px; min-height: 2.9rem; font-size: 1.12rem; line-height: 1.3; font-weight: 600; color: inherit; }
.ppp-tile p  {
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid rgba(45, 55, 72, .12);
	font-size: .9rem;
	line-height: 1.45;
	color: #4A5568;
}

/* BADGE — etykieta typu (Pracownia / Punkt konsultacyjny) */
.ppp-tile__badge {
	position: absolute;
	top: 14px;
	right: 14px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 8px;
	background: rgba(0, 0, 0, .07);
	color: inherit;
	white-space: nowrap;
}
.ppp-tile__badge--punkt {
	background: rgba(255, 255, 255, .55);
	box-shadow: inset 0 0 0 1px rgba(55, 71, 79, .2);
}

/* PALETA — białe kafle */
.ppp-tile      { color: #2D3748; background: #fff; }

/* Tło ikon = pastel danego kafla; glif ciemny (#2D3748) */
.ppp-tile--1  .ppp-tile__icon { background: #FFD6E0; }
.ppp-tile--2  .ppp-tile__icon { background: #FFE5B4; }
.ppp-tile--3  .ppp-tile__icon { background: #FFF3B0; }
.ppp-tile--4  .ppp-tile__icon { background: #D4F1C5; }
.ppp-tile--5  .ppp-tile__icon { background: #B5EAD7; }
.ppp-tile--6  .ppp-tile__icon { background: #BDE0FE; }
.ppp-tile--7  .ppp-tile__icon { background: #A2D2FF; }
.ppp-tile--8  .ppp-tile__icon { background: #9fb3d6; }
.ppp-tile--9  .ppp-tile__icon { background: #cac1df; }
.ppp-tile--10 .ppp-tile__icon { background: #ceafce; }
.ppp-tile--11 .ppp-tile__icon { background: #dab2bf; }
.ppp-tile--12 .ppp-tile__icon { background: #E89B92; }

/* STRZAŁKI */
.ppp-slider__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px; height: 44px;
	border-radius: 8px;
	border: none;
	background: #F8EBD7; 
	color: #256521;
	box-shadow: 0 4px 12px rgba(55, 71, 79, .3);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	font-size: 22px; line-height: 1;
	z-index: 5;
	transition: background .2s, color .2s, transform .2s;
}
.ppp-slider__btn:hover { background:#256521 ; color: #F8EBD7; }
.ppp-slider__btn:disabled { opacity: .35; cursor: not-allowed; }
.ppp-slider__btn--prev { left: -60px; }
.ppp-slider__btn--next { right: -60px; }
@media (max-width: 1100px) {
	.ppp-slider__btn--prev { left: -30px; }
	.ppp-slider__btn--next { right: -30px; }
}
@media (max-width: 599px) {
	.ppp-slider__btn { width: 30px; height: 30px; font-size: 18px; }
	.ppp-slider__btn--prev { left: -10px; }
	.ppp-slider__btn--next { right: -10px; }
}

@media (max-width: 600px) {
	.ppp-pracownie { padding: 40px 12px; }
	.ppp-tile { min-height: 200px; padding: 20px; }
}