/* ==========================================================================
   Bannery (modul Bannery) — templates/_banners.latte, js/bannery.js.
   Jen tokeny (--c-*, --k*, --r-ovladac), takže platí pro oba motivy
   (světlý i tmavý) a oba směry. Vzhled hero přebírá z uvod.css
   (.uvod-hero, .uvod-cta); tady je jen posuvník a kompaktní bloky.
   ========================================================================== */

/* ----- Hero: posuvník ----- */
.bnr--hero {
	position: relative;
}

.bnr-draha {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--uvod-r-foto, 16px);
}

.bnr-draha::-webkit-scrollbar {
	display: none;
}

.bnr-draha:focus-visible {
	outline: 2px solid var(--c-akcent);
	outline-offset: 4px;
}

.bnr-draha > .bnr-slide {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	/* Bez stretch: slide s panelem musí být vysoký jako fotka, jinak by panel
	   (absolutně dole) visel pod fotkou, když má jiný slide text pod ní. */
	align-self: flex-start;
}

/* Text v panelu přes fotku: slide je sám kontejner, odsazení je jen vnitřní. */
.bnr-slide.uvod-hero--panel {
	position: relative;
}

@media (min-width: 1100px) {
	.bnr-slide.uvod-hero--panel .uvod-hero-text {
		inset-inline-start: var(--k6);
	}
}

.bnr-slide .uvod-hero-foto a {
	display: block;
	height: 100%;
}

.bnr-slide .uvod-hero-foto picture {
	display: block;
	height: 100%;
}

.bnr-slide .bnr-nadpis {
	grid-area: nadpis;
	margin: 0;
	font-family: var(--pismo-display);
	font-size: var(--t-h1);
	font-weight: 500;
	line-height: var(--vyska-radku-display, 1.15);
	letter-spacing: -.01em;
	color: var(--c-text);
	max-width: 22ch;
}

/* ----- Ovládání (zobrazí ho bannery.js) ----- */
.bnr-ovladani {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--k4);
	margin-top: var(--k3);
}

.bnr-ovladani[hidden] {
	display: none;
}

.bnr-tecky {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	/* Tečka (10 px) uprostřed 24px cíle: vyrovná první tečku na hranu textu. */
	margin-inline-start: -7px;
}

.bnr-tecka {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.bnr-tecka::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--c-text) 28%, transparent);
	transition: background .15s ease, transform .15s ease;
}

.bnr-tecka[aria-current="true"]::before {
	background: var(--c-akcent);
	transform: scale(1.25);
}

.bnr-tecka:focus-visible,
.bnr-btn:focus-visible {
	outline: 2px solid var(--c-akcent);
	outline-offset: 2px;
}

.bnr-tlacitka {
	display: flex;
	gap: var(--k2);
}

.bnr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--c-linka);
	border-radius: 50%;
	background: var(--c-povrch);
	color: var(--c-text);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.bnr-btn:hover {
	border-color: var(--c-akcent);
}

.bnr-btn .ikona,
.bnr-ikona {
	width: 18px;
	height: 18px;
}

.bnr-btn--zpet .ikona {
	transform: scaleX(-1);
}

/* Pozastavení: jedna ikona podle stavu (aria-pressed="true" = stojí). */
.bnr-btn--pauza .bnr-ikona--play,
.bnr-btn--pauza[aria-pressed="true"] .bnr-ikona--pauza {
	display: none;
}

.bnr-btn--pauza[aria-pressed="true"] .bnr-ikona--play {
	display: block;
}

/* ----- Ostatní umístění: kompaktní blok ----- */
.bnr--blok {
	display: grid;
	gap: var(--k4);
	margin-block: var(--k6);
}

.bnr--footer_top {
	margin-top: var(--k8);
	margin-bottom: var(--k6);
}

.bnr-blok {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	align-items: center;
	gap: var(--k6);
	overflow: hidden;
	border-radius: var(--uvod-r-karta, 12px);
	background: var(--c-pozadi2);
}

.bnr-blok--bez-fotky {
	grid-template-columns: minmax(0, 1fr);
	padding: var(--k6);
}

.bnr-blok-foto {
	align-self: stretch;
	min-height: 160px;
}

.bnr-blok-foto a,
.bnr-blok-foto picture {
	display: block;
	height: 100%;
}

.bnr-blok-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bnr-blok-text {
	display: grid;
	justify-items: start;
	gap: var(--k3);
	padding: var(--k5) var(--k6) var(--k5) 0;
}

.bnr-blok--bez-fotky .bnr-blok-text {
	padding: 0;
}

.bnr-blok .bnr-nadpis {
	margin: 0;
	font-family: var(--pismo-display);
	font-size: var(--t-h2, 1.5rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--c-text);
	text-wrap: balance;
}

.bnr-blok .uvod-cta {
	/* uvod.css dává CTA grid-area: cta (pro hero); v bloku by vytvořila
	   implicitní sloupec a text by se rozjel do dvou sloupců. */
	grid-area: auto;
	justify-self: start;
	margin-top: var(--k2);
}

/* Košík: krátké upozornění, ne druhý nadpis stránky. */
.bnr--cart {
	margin-block: var(--k4) var(--k5);
}

.bnr--cart .bnr-blok--bez-fotky {
	padding: var(--k5);
}

.bnr--cart .bnr-nadpis {
	font-size: 1.25rem;
}

.bnr-popis {
	margin: 0;
	max-width: 56ch;
	line-height: 1.55;
	color: var(--c-text-tlumene);
}

@media (max-width: 700px) {
	.bnr-blok {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.bnr-blok-foto {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.bnr-blok-text {
		padding: var(--k5);
	}

	.bnr-blok--bez-fotky,
	.bnr--cart .bnr-blok--bez-fotky {
		padding: var(--k5);
	}

	.bnr-blok .uvod-cta {
		justify-self: stretch;
	}

	.bnr-ovladani {
		margin-top: var(--k2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bnr-draha {
		scroll-behavior: auto;
	}

	.bnr-tecka::before,
	.bnr-btn {
		transition: none;
	}
}