/* Uzupełnienia do webflow-design.css (oryginalny design z Webflow).
   Zastępują to, co robiły skrypty Webflow i reguły przypisane do identyfikatorów elementów (#w-node-…). */

img { height: auto; }

/* wyrównanie kafelków w siatkach list (w Webflow: place-self na #w-node-…) */
.section---collection-list .collection-list > .collection-item,
.collection-list-3 > .w-dyn-item { place-self: end start; }
.collection-list-5 > .w-dyn-item { place-self: baseline start; }
.more-publications .collection-list-5 > .w-dyn-item { place-self: end stretch; }

/* menu mobilne: ikona „hamburger” zmienia się w X (w Webflow robiła to animacja IX2) */
.menu-button .line { transition: transform .25s ease, opacity .2s ease; }
.menu-button.w--open .line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-button.w--open .line:nth-child(2) { opacity: 0; }
.menu-button.w--open .line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.w-nav-overlay [data-nav-menu-open] { text-align: left; background: var(--white, #fff); min-height: 100vh; top: 0; margin-top: 0; }

/* wideo z YouTube / Vimeo w proporcji 16:9 */
.w-video.embed-16x9 { padding-top: 56.25%; }

/* pole-pułapka na boty w formularzu kontaktowym (ludzie go nie widzą) */
.cms-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; opacity: 0; }

/* delikatne animacje (Ustawienia → Wygląd): elementy pojawiają się przy przewijaniu */
@media (prefers-reduced-motion: no-preference) {
  html[data-anim] .rv { opacity: 0; transform: translateY(var(--rv-y, 14px)); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rv-d, 0s); }
  html[data-anim] .rv.in { opacity: 1; transform: none; }
  html[data-anim] .rv.rv-init { transition: none !important; }
  html[data-anim="more"] .rv { --rv-y: 32px; transition-duration: 1.1s; }
  html[data-anim="more"] a img { transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .7s ease; }
  html[data-anim="more"] .collection-item a:hover img, html[data-anim="more"] .w-dyn-item a:hover img, html[data-anim="more"] .link-block:hover img { transform: scale(1.015); }
  html[data-anim="more"] body { animation: cms-page-in .6s ease both; }
  @keyframes cms-page-in { from { opacity: 0; } to { opacity: 1; } }
}

/* poprawki wersji mobilnej */
@media screen and (max-width: 767px) {
  /* Support Ukraine: zdjęcie obok tekstu wychodziło poza ekran telefonu — przechodzi pod tekst */
  .section-main.ukr .column_text_mp { flex-wrap: wrap; }
  .section-main.ukr .column_text_mp > img { min-width: 0; max-width: 100%; }
}

/* Contact: w Webflow sekcja była „przyklejona” (position: fixed), przez co stopka lądowała na górze strony.
   Sekcja wraca do normalnego układu, a stopka trzyma się dołu okna (krótka strona). */
body:has(> .section-main.contact), body:has(> .section-main.test.ukr) { display: flex; flex-direction: column; align-items: stretch; min-height: 100vh; min-height: 100svh; }
body:has(> .section-main.contact) > .futer, body:has(> .section-main.test.ukr) > .futer { margin-top: auto; padding-top: 20px; }
.section-main.contact { position: static; inset: auto; min-height: 0; margin-top: 28px; }
@media screen and (max-width: 991px) {
  .section-main.contact { position: static; margin-top: 20px; }
}
@media screen and (max-width: 767px) {
  .section-main.contact, .section-main.test.ukr { margin-left: 0; margin-right: 0; } /* w układzie flex „auto” zwężałoby sekcję */
}

/* Menu na ciemnych stronach (MP Project, Amber River): czarny pasek, białe logo, jasnoszare linki — jak w Webflow */
.navbar.black .logo-text, .navbar.black .logo-text:hover { color: var(--white); }
.navbar.black .nav-link, .navbar.black .html-embed { color: var(--light-grey); }
.navbar.black .nav-link:hover, .navbar.black .nav-link:focus, .navbar.black .nav-link.w--current, .navbar.black .html-embed:hover { color: var(--white); }
.navbar.black .line { background-color: var(--light-grey); }
.navbar.black .w-nav-overlay [data-nav-menu-open] { background: var(--black_text); }
/* Support Ukraine: niebieski pasek, żółte logo i linki */
.navbar.ukr .logo-text, .navbar.ukr .nav-link, .navbar.ukr .html-embed { color: var(--gold); }
.navbar.ukr .logo-text:hover, .navbar.ukr .nav-link:hover, .navbar.ukr .nav-link:focus, .navbar.ukr .nav-link.w--current, .navbar.ukr .html-embed:hover { color: var(--white); }
.navbar.ukr .line { background-color: var(--gold); }
.navbar.ukr .w-nav-overlay [data-nav-menu-open] { background: var(--royal-blue); }

/* MP Project — opis: akapity jeden pod drugim (w Webflow stawały obok siebie i robiły „dziury”),
   ta sama wielkość i interlinia co w opisach innych stron */
.section-main-text .column_text_mp { display: block; }
.section-main-text .column_text_mp p { display: block; font-size: 13px; line-height: 1.7em; margin: 0 0 10px; }
@media screen and (max-width: 991px) {
  .section-main-text .column_text_mp p { margin-bottom: 7px; }
}

/* CV: przyciski PDF mają prawy margines taki jak tekst i ikona menu (w Webflow były przyklejone do krawędzi) */
@media screen and (max-width: 991px) { .section-main.sections.cv { padding-right: 40px; } }
@media screen and (max-width: 767px) { .section-main.sections.cv { padding-right: 24px; } }
@media screen and (max-width: 479px) { .section-main.sections.cv { padding-right: 12px; } }
.section-main.sections.cv > .columns-2 { flex: 1 1 auto; } /* na wąskim telefonie kolumna z PDF była ściśnięta obok tytułu */

/* Tytuły stron (.page-title w sekcji .page-head — klasy dodają szablony):
   na każdej stronie zaczynają się w tym samym miejscu, a opis jest 20 px niżej (jak na stronie Artworks).
   Komputer: 28 px od góry · iPad pionowo: 28 px pod paskiem menu · telefon: 4 px pod paskiem menu. */
:root { --title-top: 28px; --title-gap: 20px; }
@media screen and (max-width: 767px) { :root { --title-top: 4px; } }
.page-head { margin-top: 0 !important; padding-top: var(--title-top) !important; }
.page-head .div-block---header:has(> .page-title), .page-head .div-block---header:has(> .page-title) .page-title { margin-top: 0 !important; padding-top: 0 !important; }
.page-head .page-title { margin-bottom: 0 !important; }
.page-head .text-header.mp.page-title { line-height: 1.2em; }
@media screen and (max-width: 767px) { .page-head .text-header.mp.page-title { line-height: 1em; } }
@media screen and (max-width: 479px) { .page-head .text-header.mp.page-title { line-height: 1.2em; } }
.page-head.cv .columns-2, .page-head.cv .columns-2 > .w-col { margin-top: 0 !important; padding-top: 0 !important; }

/* odstęp tytuł → opis (strony list i projektów; strony pojedynczych dzieł/wystaw/publikacji mają własny układ) */
.page-head:not(.dinamic-pajes):not(.section-_text_up) .div-block---header:has(> .page-title) { margin-bottom: var(--title-gap) !important; }
.page-head .div-block---header:has(> .page-title) + :not(.div-block---header),
.page-head .div-block---header:has(> .page-title) + .w-row > .w-col,
.page-head .div-block---header:has(> .page-title) + .w-row > .w-col > :first-child { margin-top: 0 !important; padding-top: 0 !important; }
/* tytuł sam w swojej sekcji (Press, Collaborations, Amber River, CV) — następna sekcja zaczyna się zaraz pod nim */
.page-head:not(.dinamic-pajes):not(.section-_text_up):has(> .div-block---header:only-child),
.page-head.cv { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.page-head:not(.dinamic-pajes):not(.section-_text_up):has(> .div-block---header:only-child) + *,
.page-head:not(.dinamic-pajes):not(.section-_text_up):has(> .div-block---header:only-child) + * > :first-child,
.page-head.cv + *, .page-head.cv + * > :first-child { margin-top: 0 !important; padding-top: 0 !important; }
/* Support Ukraine: jak Contact — w Webflow sekcja była „przyklejona” (position: fixed): stopka nachodziła na tytuł,
   a strona się nie przewijała (dolne zdjęcie ucięte). Na telefonie sekcja „flex” dokładała też 16 px pod tytułem. */
.section-main.test.ukr { position: static; inset: auto; min-height: 0; }
.page-head.ukr { row-gap: 0; }
/* strona wystawy na wąskim telefonie: tytuł na górze, „← back to Exhibitions” pod nim (jak na innych szerokościach) */
@media screen and (max-width: 479px) { .page-head .div-block---header.first:has(> .page-title) { flex-direction: column; } }

/* MP Project — dolny wiersz tekstu na całą szerokość (w Webflow miał stałe 665 px, więc był węższy od kolumn wyżej);
   odstęp między kolumnami jak na innych stronach projektów (.column-11) */
.section-main-text .columns_main_aw { width: auto; min-width: 0; max-width: none; }
@media screen and (min-width: 768px) {
  .section-main-text > .w-row > .column_text_mp:first-child { padding-right: 20px; }
}
@media screen and (min-width: 1280px) {
  .section-main-text > .w-row > .column_text_mp:first-child { padding-right: 15px; }
}
@media screen and (min-width: 1920px) { .section-main-text { margin-right: 17%; } } /* jak inne sekcje; tekst nie dochodzi do krawędzi */

/* Amber River na telefonie: najpierw tekst w jednej kolumnie, pod nim zdjęcie (w Webflow do 767 px stały obok siebie) */
@media screen and (max-width: 767px) {
  .column_taxt-image { display: block; }
  .column_text_cloudone { padding-left: 0; padding-right: 0; }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
  .section-main-text { padding-left: 24px; padding-right: 24px; } /* tekst MP/Amber w tej samej linii co tytuł i teksty innych stron */
}

/* Menu: pierwszy link (Artworks) w tej samej linii co pierwszy wiersz tekstu strony (opis pod tytułem), a nie wyżej/niżej.
   Liczone do jednolitych tytułów (.page-title): góra tytułu + 1 linia tytułu + 20 px odstępu. */
.nav-menu .div-block-3 > :first-child { margin-top: 25px; }
@media screen and (min-width: 992px) { .logo-text { white-space: nowrap; } } /* logo zawsze w 2 linijkach (przy 992–1100 px łamało się na 3–4) */
@media screen and (max-width: 991px) { .nav-menu .div-block-3 > :first-child { margin-top: 92px; } }
@media screen and (max-width: 767px) { .nav-menu .div-block-3 > :first-child { margin-top: 50px; } }
@media screen and (max-width: 479px) {
  .nav-menu .div-block-3 > :first-child { margin-top: 55px; }
  .nav-menu, .nav-menu.black { padding-left: 12px; } /* linki w jednej linii z tekstem (było 15 px, tekst ma 12 px) */
}
@media screen and (min-width: 480px) and (max-width: 767px) { .logo-text { margin-left: 24px; } } /* logo w jednej linii z menu i tekstem (było 27 px) */

/* Lata na stronie Artworks (np. „2025 – 2022”): w Webflow miały „cursor: none”, więc kursor znikał po najechaniu myszką */
.text-cv.year, .text-sub-header.year { cursor: auto; }