/* Strona główna: slider (odwzorowanie brendz.com) */

.home-slider {
	position: relative;
	height: 225px;
	overflow: hidden;
	background: #000;
	--slider-arrow: 30px;
	--dots-w: calc(var(--n, 4) * 14px + (var(--n, 4) - 1) * 10px);
}
@media (min-width: 576px)  { .home-slider { height: 325px; } }
@media (min-width: 768px)  { .home-slider { height: 425px; } }
@media (min-width: 1024px) { .home-slider { height: 525px; } }

.glide__track,
.glide__slides { height: 100%; }
.glide__slides { cursor: grab; }
.glide__slides--dragging { cursor: grabbing; }

.home-slide {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	color: #fff;
	isolation: isolate; /* zdjęcie (z-index -1) zostaje pod tekstem */
	user-select: none;
	-webkit-user-select: none;
}
.home-slide__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: -1;
	pointer-events: none;
}

/* Treść: lewy margines jak kontener sklepu (bez position – link przycisku rozciąga się na cały slajd) */
.home-slide__inner {
	width: 100%;
	max-width: none;
	padding-inline: 15px;
}
@media (min-width: 576px) {
	.home-slide__inner { max-width: none; padding-inline: 10.5px; }
}
@media (min-width: 1200px) { .home-slide__inner { max-width: 1140px; margin-inline: auto; } }
@media (min-width: 1400px) { .home-slide__inner { max-width: 1320px; } }

.home-slide__title {
	margin: 0;
	font-family: "Baloo 2", var(--font);
	font-size: 25px;
	font-weight: 700;
	line-height: 31px;
	color: #fff;
}
@media (min-width: 576px) {
	.home-slide__title { font-size: 52px; line-height: 52px; }
}

.home-slide__button { margin-top: 12px; }
@media (min-width: 576px) { .home-slide__button { margin-top: 35px; } }

/* Cały slajd klikalny: rozciągnięty link przycisku (kontener to .home-slide) */
.home-slide__button::after { content: ""; position: absolute; inset: 0; }

/* Strzałki (od 768 px) */
.home-slider__arrow {
	position: absolute;
	bottom: 35px;
	z-index: 2;
	display: none;
	width: var(--slider-arrow);
	height: var(--slider-arrow);
	padding: 0;
	border: 0;
	background: none;
	color: #fbfbfb;
	cursor: pointer;
}
.home-slider__arrow::before {
	content: "";
	display: block;
	width: 14px;
	height: 22px;
	margin: auto;
	background: currentColor;
	-webkit-mask: url("../img/icons/chevron-left.svg") center / contain no-repeat;
	mask: url("../img/icons/chevron-left.svg") center / contain no-repeat;
}
.home-slider__arrow--prev { left: calc(50% - var(--dots-w) / 2 - 14px - var(--slider-arrow)); }
.home-slider__arrow--next { left: calc(50% + var(--dots-w) / 2 + 14px); }
.home-slider__arrow--next::before { transform: scaleX(-1); }
.home-slider__arrow:hover { color: var(--green); }
@media (min-width: 768px) { .home-slider__arrow { display: block; } }

/* Kropki */
.home-slider__dots {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 10px;
	height: 49px;
	padding: 20px 14px 15px;
}
@media (min-width: 576px) {
	.home-slider__dots { height: 63px; padding: 5px 0 44px; }
}

.home-slider__dots { pointer-events: none; } /* pasek na całą szerokość nie może zasłaniać strzałek */
.home-slider__dot {
	pointer-events: auto;
	display: block;
	width: 14px;
	height: 14px;
	padding: 0;
	border: 0;
	border-radius: 3.5px;
	background: #fff;
	cursor: pointer;
}
.home-slider__dot.glide__bullet--active,
.home-slider__dot[aria-current="true"] { background: var(--green); }

.home-slider :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }


/* ---------- Baner CTA ---------- */

.home-cta {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 337px;
	padding-block: 82px;
	overflow: hidden;
	color: #fff;
	isolation: isolate;
	background: #1d2a1a;
}
.home-cta__image {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* Delikatne przyciemnienie zdjęcia, żeby tekst był czytelny (mocniej po prawej, gdzie leży tekst) */
.home-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 0.45);
}
@media (min-width: 768px) {
	.home-cta::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0.6) 100%); }
}
.home-cta__title,
.home-cta__text { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }

.home-cta__inner {
	width: 100%;
	margin-inline: auto;
	padding-inline: 25px;
}
@media (min-width: 576px)  { .home-cta__inner { padding-inline: 10.5px; } }
@media (min-width: 1200px) { .home-cta__inner { max-width: 1140px; } }
@media (min-width: 1400px) { .home-cta__inner { max-width: 1320px; } }

.home-cta__content { text-align: center; }
@media (min-width: 576px) {
	.home-cta__content { width: 489px; max-width: 100%; margin-left: auto; margin-right: 14px; }
}
@media (min-width: 1200px) { .home-cta__content { margin-right: 28px; } }

.home-cta__title {
	margin: 0 0 4px;
	font-family: "Baloo 2", var(--font);
	font-size: 18.2px;
	font-weight: 700;
	line-height: 32px;
	color: #fff;
}
@media (min-width: 576px) { .home-cta__title { font-size: 28px; } }

.home-cta__text { margin: 0 0 33px; font-size: 14px; line-height: 1.6; color: #fff; }

/* ---------- Kategorie (kafelki) ---------- */

.cats { position: relative; padding-block: 50px; }
.cats::before { /* jasne tło tylko w górnej połowie sekcji */
	content: "";
	position: absolute;
	inset: 0 0 50% 0;
	background: #f6f9fc;
}
.cats > .container { position: relative; }

.cats__title {
	margin: 0 0 50px;
	font-size: 18.2px;
	font-weight: 700;
	line-height: 29px;
	color: #1a1b1d;
	text-align: center;
}
@media (min-width: 768px) { .cats__title { font-size: 28px; line-height: 44.8px; } }

.cats__grid { display: grid; grid-template-columns: 1fr; }
/* Tablet: 2 kolumny; kontener ma 10,5 px paddingu, więc grid cofamy tylko o tyle (inaczej strona dostaje poziomy scroll) */
@media (min-width: 576px) {
	.cats__grid { grid-template-columns: repeat(2, 1fr); margin-inline: -10.5px; row-gap: 28px; }
}
@media (min-width: 992px) {
	.cats__grid { grid-template-columns: repeat(4, 1fr); margin-inline: -21px; row-gap: 0; }
}

.cats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 14px;
	padding-inline: 10.5px;
	text-align: center;
}
@media (min-width: 576px) { .cats__item { margin-bottom: 0; } }
@media (min-width: 992px) { .cats__item { padding-inline: 21px; } }

.cats__card {
	display: inline-flex;
	margin-bottom: 14px;
	padding: 28px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.cats__card:hover { transform: translateY(-4px); box-shadow: 0 14px 26px rgba(0, 0, 0, 0.09); }
@media (min-width: 576px) { .cats__card { width: 100%; } }

.cats__img {
	display: block;
	width: 60vw;
	max-width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
}
@media (min-width: 576px) { .cats__img { width: 100%; } }

.cats__name {
	margin: 0 0 12.25px;
	font-size: 15.9px;
	font-weight: 700;
	line-height: 25.5px;
	color: #1a1b1d;
}
@media (min-width: 768px) { .cats__name { font-size: 21px; line-height: 33.6px; } }
@media (min-width: 1200px) { .cats__name { font-size: 22px; line-height: 35.2px; } }
.cats__name a { color: inherit; text-decoration: none; }

.cats__text { margin: 0 0 16px; padding-inline: 10px; font-size: 16px; line-height: 25.6px; color: var(--text-soft); }