/*
 * Banery ze strony opcji „Wygląd sklepu” (strona główna i kategorie) oraz sekcja zaufania Little Traveller.
 * Na telefonie obraz nad tekstem (osobny kadr z pola „Obraz na telefon”), od 768 px tekst na obrazie po lewej.
 */

.promos { padding-top: 40px; }
.promos__list { display: grid; gap: 24px; }
.promos--category { padding: 0 0 24px; }
.promos--category .wrap { max-width: none; }

.promo {
	position: relative;
	display: grid;
	overflow: hidden;
	border-radius: var(--radius-xl);
	background: var(--c-card);
	border: 1px solid var(--c-line);
	color: var(--c-ink);
	text-decoration: none;
	isolation: isolate;
}
.promo__picture { display: block; }
.promo__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .5s ease;
}
a.promo:hover .promo__img { transform: scale(1.02); }
.promo__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; }
.promo__title { font-family: var(--font-display); font-size: 26px; line-height: 1.15; text-wrap: balance; }
.promo__text { color: var(--c-muted); }
.promo__button { margin-top: 8px; }

@media (min-width: 768px) {
	.promos { padding-top: 56px; }
	.promo__img { aspect-ratio: 3 / 1; min-height: 280px; }
	.promo--text .promo__body {
		position: absolute;
		left: 32px;
		top: 50%;
		transform: translateY(-50%);
		max-width: min(30rem, 50%);
		padding: 28px;
		border-radius: var(--radius-lg);
		background: rgba(255, 255, 255, .94);
		box-shadow: var(--shadow);
	}
	.promo__title { font-size: 32px; }
}

/* Sekcja zaufania: Little Traveller */
.trust {
	display: grid;
	gap: 20px;
	align-items: center;
	padding: 28px 24px;
	border-radius: var(--radius-xl);
	background: var(--c-sun-soft);
}
.trust__icon { background: var(--c-card); }
.trust__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.trust__title { font-size: 28px; }
.trust__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.trust__actions .btn--outline { background: var(--c-card); }
@media (min-width: 1024px) {
	.trust { grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px; padding: 36px 40px; }
	.trust__title { font-size: 32px; }
}

/* Dopisek pod przyciskami w nagłówku strony głównej */
.hero__note { font-size: 15px; }