/* Nagrania prawdziwego raportu na podstronach (od 28.09.2026, "Jak wyglada raport" 13621).
   .lo-demo--okno = ramka przegladarki, .lo-demo--telefon = ramka telefonu, .lo-zakladki = zakladki sekcji.
   Wzor ukladu: senuto.com/pl ("Zobacz Senuto w akcji", "Jedna platforma"). Kolory tylko ze zmiennych motywu. */

.lo-demo { position: relative; margin: 0; }
/* Blok z nagraniem nie siega krawedzi ekranu: szerokosc jak okno aplikacji u Senuto. */
.lo-demo-wrap { max-width: 1120px; margin-inline: auto; }
.lo-demo video { display: block; width: 100%; height: auto; background: var(--black-50); }

/* Ramka przegladarki: pasek z trzema kropkami i adresem raportu, bez kolorow systemowych. */
.lo-demo--okno {
	border: 1px solid var(--black-100);
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 18px 44px rgba(118, 59, 143, .14);
}
.lo-demo__pasek {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 40px;
	padding: 0 16px;
	border-bottom: 1px solid var(--black-100);
	background: var(--black-50);
}
.lo-demo__kropki { display: flex; gap: 6px; flex: none; }
.lo-demo__kropki i { width: 10px; height: 10px; border-radius: 50%; background: var(--black-200); }
.lo-demo__adres {
	flex: 1;
	max-width: 360px;
	margin: 0 auto;
	padding: 4px 14px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid var(--black-100);
	font-size: 1.3rem;
	line-height: 1.4;
	color: var(--black-600);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Ramka telefonu. */
.lo-demo--telefon {
	width: min(100%, 320px);
	margin-inline: auto;
	padding: 10px;
	border-radius: 44px;
	background: var(--black-900);
	box-shadow: 0 18px 44px rgba(20, 20, 26, .22);
}
.lo-demo--telefon video { border-radius: 34px; }

/* Zakladki sekcji raportu. Podkreslenie zamiast pigulek: pigulka nie jest domyslnym ksztaltem (DESIGN.md). */
.lo-zakladki__lista {
	display: flex;
	gap: 4px 28px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 0 40px;
	padding: 0;
	border-bottom: 1px solid var(--black-100);
}
.lo-zakladki__lista button {
	appearance: none;
	margin: 0 0 -1px;
	padding: 12px 2px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	font-size: 1.7rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--black-600);
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease;
}
.lo-zakladki__lista button:hover { color: var(--black-900); }
.lo-zakladki__lista button[aria-selected="true"] { color: var(--primary-600); border-bottom-color: var(--primary-600); font-weight: 600; }
.lo-zakladki__lista button:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 4px; border-radius: 4px; }

.lo-zakladki__panel {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 56px;
	align-items: center;
}
.lo-zakladki__panel[hidden] { display: none; }
.lo-zakladki__panel h3 { margin: 0 0 20px; }
.lo-zakladki__panel .wp-block-buttons { margin-top: 8px; }
.lo-zakladki__panel p { margin: 0 0 16px; }
.lo-zakladki__plan { font-weight: 600; color: var(--primary-600); }
.lo-zakladki__panel .lo-demo { animation: lo-demo-wejscie .45s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes lo-demo-wejscie { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Telefon: zakladki przewijane w poziomie, tekst nad filmem. */
@media (max-width: 991px) {
	.lo-zakladki__lista {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: -16px;
		padding-inline: 16px;
		margin-bottom: 28px;
	}
	.lo-zakladki__lista::-webkit-scrollbar { display: none; }
	.lo-zakladki__lista button { flex: none; font-size: 1.6rem; }
	.lo-zakladki__panel { grid-template-columns: 1fr; gap: 24px; }
	.lo-demo__pasek { height: 32px; padding: 0 10px; gap: 10px; }
	.lo-demo__kropki i { width: 8px; height: 8px; }
	.lo-demo__adres { font-size: 1.2rem; padding: 2px 10px; }
	.lo-demo--okno { border-radius: 12px; }
}

/* Nagranie pionowe w ramce przegladarki na telefonie: bez paska adresu, zeby nie udawac okna komputera. */
.lo-demo--pion .lo-demo__pasek { display: none; }
.lo-demo--pion video { aspect-ratio: 390 / 640; }

@media (prefers-reduced-motion: reduce) {
	.lo-zakladki__panel .lo-demo { animation: none; }
}