/*
 * Sekcje strony glownej ponizej hero: slider, banderola, promocja,
 * indeks uslug, skrot galerii i kolumna czytelnicza.
 */

/* ============================================================== slider */

.slider {
	position: relative;
	padding: var(--o5);
	background: var(--papier-jasny);
	border-radius: var(--rog-papier);
	box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--tusz) 65%, transparent);
	overflow: hidden;
}

.gilosz--rama { opacity: 0.4; }

.slider__tasma {
	position: relative;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	gap: var(--o5);
}

.slider__tasma::-webkit-scrollbar { display: none; }

.slajd {
	flex: 0 0 100%;
	scroll-snap-align: start;
	display: grid;
	gap: var(--o4);
	justify-items: center;
	text-align: center;
}

.slajd__rycina {
	position: relative;
	width: 100%;
	/* Rycina rosnie razem z oknem: przy stalych 360 px rama giloszowa
	   oprawiala glownie puste tlo. */
	max-width: min(440px, 82%);
	/* Wystep poza krawedz sekcji jest celowy. */
	margin-bottom: calc(var(--o4) * -1);
}

.slajd__obraz { margin-inline: auto; }
.slajd__obraz--top { object-position: top; }
.slajd__obraz--bottom { object-position: bottom; }

.slajd__tytul {
	font-size: clamp(1.3rem, 1.05rem + 1vw, 1.9rem);
	margin-bottom: var(--o2);
}

.slajd__podtytul {
	color: var(--zielen-rewersu);
	margin-bottom: var(--o3);
	max-width: 44ch;
}

.slider__sterowanie {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--o4);
	margin-top: var(--o4);
}

.slider__kropki { display: flex; gap: var(--o2); margin: 0; }

.slider__kropki button {
	width: 28px;
	height: 28px;
	min-width: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	position: relative;
}

.slider__kropki button::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	border: 1px solid var(--zielen-rewersu);
	background: transparent;
}

.slider__kropki button[aria-current="true"]::after { background: var(--zielen-gleboka); border-color: var(--zielen-gleboka); }

.slider__pauza {
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--zielen-rewersu) 45%, transparent);
	border-radius: var(--rog-papier);
	padding: var(--o2) var(--o3);
	min-height: 32px;
	font-size: var(--krok-drobny);
	cursor: pointer;
}

/* Na telefonie slider jest pasem przesuwanym palcem, bez autoodtwarzania.
   Kolejnosc: tablica kursow przed sliderem. */
@media (max-width: 1099px) {
	.hero__okno { order: 2; }
	.slider { padding: var(--o4); }
}

/* ============================================================ banderola */

.banderola {
	position: relative;
	z-index: 2;
	/* Banderola spina plik banknotow: obrot i nachodzenie na hero
	   sa tu odwzorowaniem przedmiotu, nie ozdobnikiem. */
	margin-top: calc(var(--o7) * -1);
	margin-bottom: var(--o7);
	/* Pas jest szerszy od ekranu, zeby obrot nie odslonil klinow tla
	   przy lewej i prawej krawedzi. */
	width: 108%;
	margin-inline: -4%;
	transform: rotate(-1.2deg);
	background: var(--zielen-gleboka);
	color: var(--papier);
	box-shadow: 0 16px 36px -22px color-mix(in srgb, var(--tusz) 80%, transparent);
}

.banderola__lista {
	list-style: none;
	margin: 0 auto;
	padding: var(--o5) var(--o4);
	max-width: var(--szerokosc-max);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--o4) var(--o5);
}

.banderola__poz { display: flex; gap: var(--o3); align-items: flex-start; }
.banderola__rycina { flex: none; width: 56px; opacity: 0.92; }
.banderola__tekst { display: grid; gap: var(--o1); }
.banderola__tekst strong { font-stretch: 110%; font-size: 1.02rem; }
.banderola__tekst span { font-size: var(--krok-drobny); opacity: 0.84; line-height: 1.45; }

/* ============================================================= promocja */

.promocja {
	border-block: 1px solid color-mix(in srgb, var(--dukat) 45%, transparent);
	background: color-mix(in srgb, var(--dukat) 9%, var(--papier));
	margin-bottom: var(--o7);
}

.promocja__wnetrze {
	max-width: var(--szerokosc-max);
	margin-inline: auto;
	padding: var(--o5) var(--o4);
	display: grid;
	gap: var(--o3);
}

.promocja__tytul { color: var(--dukat-tekst); margin: 0; }
.promocja__tresc { margin: 0; max-width: 60ch; }