/* Only approved, structured blocks emitted by Studio. */ .st-added{padding:80px max(24px,7vw);background:#f7f4ef;color:#343a34} .st-added h2{font-size:clamp(32px,5vw,60px);font-family:Georgia,serif} .st-added p{font-size:18px;line-height:1.8;max-width:650px} .st-added a{display:inline-block;padding:15px 24px;border:1px solid #7c9981;color:inherit} .st-added img,.st-added video{width:100%;max-width:100%;object-fit:cover} .st-added video{aspect-ratio:16/9;background:#253b30} .st-added-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .st-added-split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center} .st-added-grid img,.st-added-split img{aspect-ratio:3/2} html[data-cms-static] main>section[hidden]{display:none!important} /* Ukrycie ustawione w Studiu. Atrybut `hidden` przegrywa z jawnym `display` w CSS szablonu (np. .sx-btn ma display:inline-block), dlatego potrzebna jest własna reguła z !important. Podgląd edytora ma na data-cms-document i celowo tej reguły nie stosuje — tam ukryte elementy pozostają widoczne, tylko oznaczone. */ html:not([data-cms-document]) [data-ms-hidden]{display:none!important} html[data-cms-static] .sx-hero-slides figure video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} @media(max-width:700px){.st-added-grid,.st-added-split{grid-template-columns:1fr}} /* Pokaz slajdów złożony w Studio: pierwsze zdjęcie trzyma wysokość ramki, reszta leży na nim. */ [data-ms-slides]{position:relative} [data-ms-slides]>img,[data-ms-slides]>video,[data-ms-slides]>figure,[data-ms-slides]>picture{transition:opacity .9s ease} [data-ms-slides]>img:not(:first-child),[data-ms-slides]>video:not(:first-child),[data-ms-slides]>figure:not(:first-child),[data-ms-slides]>picture:not(:first-child){position:absolute;inset:0;width:100%;height:100%;margin:0} [data-ms-slides]>figure>img,[data-ms-slides]>figure>video,[data-ms-slides]>picture>img{width:100%;height:100%;object-fit:cover} [data-ms-slides]>.ms-slide-off{opacity:0;pointer-events:none} [data-ms-slides]>:is(img,video,figure,picture).ms-slide-base{position:relative;inset:auto;height:auto} @media(prefers-reduced-motion:reduce){[data-ms-slides]>img,[data-ms-slides]>video,[data-ms-slides]>figure,[data-ms-slides]>picture{transition:none}} /* Ramka, z której usunięto zdjęcie w Studiu — spokojne, puste miejsce na nowy kadr, takie samo jak przygotowane w szablonie miejsca „zdjęcie wkrótce”. */ [data-ms-empty]{background-color:#efe7dc;background-image:repeating-linear-gradient(135deg,rgba(45,41,38,.07) 0 2px,transparent 2px 26px);display:flex;align-items:center;justify-content:center} /* :where() ma zerową swoistość, więc własna wysokość ramki z szablonu ma pierwszeństwo. */ :where([data-ms-empty]){min-height:120px} [data-ms-empty] .sx-idx{color:rgba(45,41,38,.32);text-shadow:none} /* Empty slots belong to the editor; the public page never displays a stock photograph. */ .st-media-frame{position:relative;overflow:hidden;min-width:0;margin:0;aspect-ratio:3/2} .st-media-frame>:is(img,video){display:block;width:100%;height:100%;object-fit:cover} html:not([data-cms-document]) [data-ms-empty]{background-image:none} [data-cms-document] [data-ms-empty]::after{content:'＋ Zdjęcie lub film';padding:24px;color:#645f55;font:14px system-ui;text-align:center} /* A clip occupies the same frame as the photograph it replaces. */ :is(.sx-chap-media,.sz-chap-media,.ku-chap-media,.sx-portrait,.ms-session-inspiration-card)>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} :is(.sx-chap-strip,.sx-people-photos,.sx-split-media,.sx-film) video{display:block;width:100%;height:100%;object-fit:cover} [data-hero] [data-ms-empty]{background-color:transparent}