/* Bloki dodane do slajdu (programmes/extras.py) i „Slajd z bloków”. Strona pobiera ten plik
   tylko wtedy, gdy ma takie bloki. Wymiary w cqw (1% szerokości slajdu), jak w programme.css. */
.xb { margin-top: 4cqw; }
.xb--head { margin-top: 6cqw; font-size: 7cqw; line-height: 1.05; }
.xb--head + .xb { margin-top: 2.4cqw; }
.xb--img { margin-inline: 0; margin-bottom: 0; }
.xb--img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--line); }
.xb--portrait img { aspect-ratio: 4 / 5; }
.xb--square img { aspect-ratio: 1; }
.xb--tall img { width: 60%; margin-inline: auto; aspect-ratio: 9 / 16; }
.xb--original img { aspect-ratio: auto; height: auto; }
.xb--img figcaption { margin-top: 1.6cqw; font-size: 2.9cqw; line-height: 1.4; color: var(--muted); }
.xb--quote { margin-inline: 0; margin-bottom: 0; padding-left: 4cqw; border-left: 1cqw solid var(--accent); }
.xb--quote p { margin: 0; font-size: 4.6cqw; line-height: 1.35; font-weight: 700; color: var(--fg); }
.xb--quote cite { display: block; margin-top: 2cqw; font-size: 2.9cqw; font-style: normal; font-weight: 700; font-stretch: 75%; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.xb--gap { margin-top: 0; }
.cta.xb { margin-top: 5cqw; }

/* „Slajd z bloków”: zdjęcie w tle przyciemnione pod treścią w kolorze motywu. */
.custom .pg__shade { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 40%, transparent) 0%, color-mix(in srgb, var(--bg) 85%, transparent) 50%, var(--bg) 100%); }
/* Przewijany: dłuższa treść przewija się w slajdzie zamiast ucinać (stopka zostaje na dole). */
.pg[data-scroll] .pg__in { overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; }
.pg[data-scroll] .pg__in::-webkit-scrollbar { display: none; }

/* Galeria: zdjęcia otwierają okno zdjęć silnika (`data-look`, jak lookbook). */
.xb--gal { margin-inline: 0; margin-bottom: 0; }
.xb--gal button { position: relative; display: block; padding: 0; border: 0; background: var(--line); overflow: hidden; }
.xb--gal img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xb--gal figcaption, .xb--embed figcaption { margin-top: 1.6cqw; font-size: 2.9cqw; line-height: 1.4; color: var(--muted); }
.xb--grid .xb__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; }
.xb--grid .xb__photos button { aspect-ratio: 1; }
.xb__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); color: #FFFFFF; font-family: var(--display); font-size: 7cqw; }
/* Karuzela przewijana palcem w poprzek slajdu; przewijanie nie przechodzi na sąsiedni slajd. */
.xb--carousel .xb__photos { display: flex; gap: 2cqw; margin-inline: -7cqw; padding-inline: 7cqw; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 7cqw; scrollbar-width: none; }
.xb--carousel .xb__photos::-webkit-scrollbar { display: none; }
.xb--carousel .xb__photos button { flex: 0 0 66%; aspect-ratio: 4 / 5; scroll-snap-align: start; }
.xb__show { width: 100%; aspect-ratio: 4 / 5; }
.xb__count { position: absolute; right: 2cqw; bottom: 2cqw; padding: 1cqw 2.2cqw; background: rgba(0, 0, 0, 0.7); color: #FFFFFF; font-size: 3cqw; font-weight: 800; }
.xb__count::before { content: "▦ "; }

/* Osadzenie: karta „dotknij, aby wczytać” — ramka serwisu dopiero po kliknięciu (`js/embeds.js`). */
.xb--embed { margin-inline: 0; margin-bottom: 0; }
.xb__facade { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(160deg, #1B2033, #0B0D14); color: #FFFFFF; text-decoration: none; }
.xb__facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xb__facade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.75) 100%); }
.xb__play { position: absolute; left: 50%; top: 42%; z-index: 1; display: grid; place-items: center; width: 13cqw; height: 13cqw; margin: -6.5cqw 0 0 -6.5cqw; border-radius: 50%; background: var(--red); }
.xb__play svg { width: 6cqw; height: 6cqw; margin-left: 0.8cqw; }
.xb__load { position: relative; z-index: 1; padding: 2.4cqw 3cqw; font-size: 2.7cqw; line-height: 1.35; }
.xb__load b { display: block; font-family: var(--display); font-weight: 400; font-size: 4.2cqw; text-transform: uppercase; }
.embedview .videoview__stage iframe { width: min(100%, calc((100svh - 73px) * var(--ratio, 16 / 9))); aspect-ratio: var(--ratio, 16 / 9); background: #FFFFFF; }
/* Karta produktu albo artykułu (z biblioteki materiałów): zdjęcie obok tytułu, ceny i przycisku. */
.xb--card { display: grid; grid-template-columns: 38% 1fr; gap: 4cqw; align-items: center; padding: 3cqw; border-radius: 2.4cqw; background: color-mix(in srgb, currentColor 7%, transparent); }
.xb--card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 1.6cqw; background: var(--line); }
.xb__card { min-width: 0; }
.xb__title { margin: 0; font-size: 5cqw; line-height: 1.1; color: var(--fg); }
.xb__price { margin: 1.6cqw 0 0; font-size: 5cqw; font-weight: 800; color: var(--accent); }
.xb__text { margin: 1.6cqw 0 0; font-size: 3.2cqw; line-height: 1.4; color: var(--muted); }
.xb--card .cta { margin-top: 3cqw; }