/* Plik: /css/sciana.css — układ „Ściana”: strona główna, indeks dzieł, strony cykli, karta dzieła.
   Ładowany PO /css/site.css; używa tych samych nazw tokenów co reszta serwisu. */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* „Ściana” — dzieła wiszą na jasnej ścianie pracowni, czerń zostaje dla szyldu i Apokalipsy */
:root {
    --bg-color: #E3E4E6;
    --card-bg: #F4F4F5;
    --border-color: #C3C5C9;
    --text-main: #17181A;
    --text-body: #2B2D31;
    --text-muted: #55585F;
    --sadza: #000000;
    --na-sadzy: #FFFFFF;
    --na-sadzy-muted: #A9ABB1;

    --font-main: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --gutter: clamp(16px, 4vw, 56px);
    --measure: 62ch;
}

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-main);
    font-variation-settings: "wdth" 100;
    font-size: 1.0625rem;
    line-height: 1.6;
    background-color: var(--bg-color);
    color: var(--text-body);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }
img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--accent-red); outline-offset: 3px; }

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* Pismo tytułowe: wąska, ciężka odmiana tej samej rodziny */
.display {
    font-stretch: 75%;
    font-variation-settings: "wdth" 75;
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.01em;
    color: var(--text-main);
    text-wrap: balance;
}
h1.display { font-size: clamp(3rem, 10vw, 8rem); }
h2.display { font-size: clamp(2rem, 4.5vw, 3.5rem); }
h3.display { font-size: 1.5rem; line-height: 1.05; }

.muted { color: var(--text-muted); }
.small { font-size: 0.9375rem; }

.text-link { text-decoration: underline; text-decoration-color: var(--accent-red); text-decoration-thickness: 2px; text-underline-offset: 4px; font-weight: 600; color: var(--text-main); }
.text-link:hover { text-decoration-thickness: 4px; }

/* ---------- Szyld (nagłówek) ---------- */
.szyld { background-color: var(--sadza); color: var(--na-sadzy); }
.szyld .wrap { display: flex; align-items: center; gap: 12px 32px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }

/* Odręczny napis artysty wycięty z /img/PlanetaPanaMisia_footer.webp (800×280) */
.szyld-logo {
    width: 228px; height: 44px; flex: none;
    background: url(/img/PlanetaPanaMisia_footer.webp) no-repeat -27px -30px / 280px auto;
}
.szyld-nav { display: flex; gap: 4px 28px; flex-wrap: wrap; margin-left: auto; }
.szyld-nav a { color: var(--na-sadzy); text-decoration: none; font-weight: 600; padding: 10px 0; border-bottom: 3px solid transparent; }
.szyld-nav a:hover { border-bottom-color: var(--na-sadzy-muted); }
.szyld-nav a[aria-current="page"] { border-bottom-color: var(--accent-red); }

/* Przełącznik języków wstrzykuje /translate.js — tu tylko osadzamy go w szyldzie */
.szyld-nav { margin-right: 190px; }
.szyld ~ #custom_lang_switcher { position: absolute; top: 12px; right: var(--gutter); gap: 2px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; font-family: var(--font-main); }
.szyld ~ #custom_lang_switcher .lang-btn { font-size: 0.875rem; font-weight: 600; letter-spacing: 0; color: var(--na-sadzy-muted); background: none; border: 0; border-radius: 0; box-shadow: none; padding: 10px 8px; min-height: 44px; transition: none; }
.szyld ~ #custom_lang_switcher .lang-btn:hover { color: var(--na-sadzy); }
.szyld ~ #custom_lang_switcher .lang-btn.active { color: var(--na-sadzy); box-shadow: inset 0 -3px 0 var(--accent-red); }

/* ---------- Okruszki ---------- */
.okruszki { padding-top: 20px; font-size: 0.9375rem; color: var(--text-muted); }
.okruszki ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.okruszki li + li::before { content: "/"; margin-right: 10px; }
.okruszki a { color: var(--text-muted); }
.okruszki a:hover { color: var(--text-main); }

/* ---------- Strona główna ---------- */
.portret { background-color: var(--sadza); }
.portret img { width: 100%; height: min(80vh, 56.25vw); min-height: 260px; object-fit: cover; object-position: center 100%; }

.wstep { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px 64px; padding-top: clamp(32px, 6vw, 72px); padding-bottom: clamp(40px, 7vw, 96px); align-items: end; }
.wstep p { max-width: var(--measure); margin-top: 24px; font-size: 1.1875rem; }
.wstep-linki { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 24px; }

.cytat { font-family: var(--font-quote); font-style: italic; color: var(--text-main); }
.cytat p { font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.05; margin: 0; }
.cytat footer { font-family: var(--font-main); font-style: normal; font-weight: 600; margin-top: 12px; font-size: 1rem; }

.sekcja { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); border-top: 1px solid var(--border-color); }
.sekcja-glowa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: 8px; }

.grupa { margin-top: 40px; }
.grupa > h3 { font-size: 1.0625rem; font-weight: 600; color: var(--text-muted); margin-bottom: 16px; }

.cykle { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 36px 24px; list-style: none; }
.cykle a { display: block; text-decoration: none; color: var(--text-main); }
.cykle img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background-color: var(--lipa); border-radius: 2px; }
.cykle .display { margin-top: 12px; }
.cykle a:hover .display { text-decoration: underline; text-decoration-color: var(--accent-red); text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* Apokalipsa: jedyny cykl dwupoziomowy i jedyny czarny kafel */
.cykle .apokalipsa { grid-column: span 2; }
.cykle .apokalipsa .tablica { background-color: var(--sadza); aspect-ratio: 8 / 3; display: flex; align-items: center; justify-content: center; padding: 6%; border-radius: 2px; height: calc(100% - 1.5rem * 1.05 - 12px); min-height: 180px; }
.cykle .apokalipsa .tablica img { aspect-ratio: auto; width: 100%; height: 100%; object-fit: contain; background: none; }

.dzialy { list-style: none; margin-top: 24px; }
.dzialy li { border-top: 1px solid var(--border-color); }
.dzialy a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 4px 32px; align-items: baseline; padding: 20px 0; text-decoration: none; }
.dzialy a:hover .display { text-decoration: underline; text-decoration-color: var(--accent-red); text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* ---------- Strona cyklu ---------- */
.cykl-glowa { padding-top: 20px; padding-bottom: clamp(28px, 4vw, 48px); }
.cykl-glowa .podtytul { margin-top: 16px; font-size: 1.1875rem; color: var(--text-muted); max-width: var(--measure); }
.cykl-opis { font-size: 1.125rem; line-height: 1.65; }
.cykl-opis p { max-width: var(--measure); }
.cykl-opis p + p { margin-top: 1em; }

/* Rozbudowane opisy (monografie) w cyklach: Bitwa Polaków, Sojusznicy Króla Wilków */
.cykl-opis .desc-card + .desc-card, .cykl-opis .desc-card + details, .cykl-opis details + details { margin-top: 20px; }
.cykl-opis .desc-title { font-weight: 700; color: var(--text-main); margin-bottom: 6px; }
.cykl-opis details { max-width: var(--measure); border-top: 1px solid var(--border-color); }
.cykl-opis details:last-child { border-bottom: 1px solid var(--border-color); }
.cykl-opis summary { font-weight: 700; color: var(--text-main); padding: 14px 0; cursor: pointer; }
.cykl-opis .tier-content { padding-bottom: 20px; }
.cykl-opis .tier-content p + p, .cykl-opis .tier-content ul { margin-top: 1em; }
.cykl-opis .tier-content ul { padding-left: 1.2em; }
.cykl-opis .podpis { font-weight: 600; color: var(--text-main); }
.cykl-opis .video-container { margin-top: 12px; aspect-ratio: 16 / 9; background-color: var(--sadza); }
.cykl-opis .video-container iframe { width: 100%; height: 100%; border: 0; display: block; }
.cykl-opis .source-link { display: inline-block; margin: 8px 0 12px; font-size: 0.9375rem; font-weight: 600; color: var(--text-main); text-decoration: underline; text-decoration-color: var(--accent-red); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.seria { position: relative; margin-top: clamp(28px, 4vw, 48px); }
.seria-tor { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 0 var(--gutter) 14px; scrollbar-color: var(--text-muted) transparent; }
.seria-tor img { height: clamp(240px, 58vh, 600px); width: auto; max-width: none; flex: none; scroll-snap-align: center; background-color: var(--lipa); border-radius: 2px; }
.seria-pasek { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
.seria-przyciski { display: flex; gap: 8px; }

.przycisk { font: inherit; font-weight: 600; color: var(--text-main); background-color: transparent; border: 2px solid var(--text-main); border-radius: 2px; padding: 9px 18px; min-height: 44px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.przycisk:hover { background-color: var(--text-main); color: var(--bg-color); }
.przycisk[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }

/* Dzieła w prawdziwych proporcjach — bez kadrowania do kwadratu */
.sciana { columns: 4 240px; column-gap: 24px; list-style: none; margin-top: 28px; }
.sciana li { break-inside: avoid; margin-bottom: 32px; }
.sciana a { display: block; text-decoration: none; color: var(--text-main); }
.sciana img { width: 100%; height: auto; background-color: var(--lipa); border-radius: 2px; }
.sciana .tytul { display: block; margin-top: 10px; font-weight: 600; line-height: 1.3; }
.sciana a:hover .tytul { text-decoration: underline; text-decoration-color: var(--accent-red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sciana .metryczka { display: block; font-size: 0.9375rem; color: var(--text-muted); }

.komunikat { padding: 32px 0; max-width: var(--measure); }
.komunikat strong { color: var(--text-main); }

.sasiedzi { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sasiedzi a { text-decoration: none; }
.sasiedzi a:last-child { text-align: right; margin-left: auto; }
.sasiedzi a:hover .display { text-decoration: underline; text-decoration-color: var(--accent-red); text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* ---------- Karta dzieła ---------- */
.dzielo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 32px 56px; padding-top: 20px; padding-bottom: clamp(40px, 6vw, 80px); align-items: start; }
.dzielo-opis { position: sticky; top: 24px; }
.dzielo-opis h1.display { font-size: clamp(2.25rem, 4.2vw, 4rem); }

.dzielo-zdjecia { display: flex; flex-direction: column; gap: 24px; list-style: none; }
.dzielo-zdjecia img { width: 100%; height: auto; max-height: 92vh; object-fit: contain; object-position: left top; background-color: transparent; }
.dzielo-zdjecia figcaption { font-size: 0.9375rem; color: var(--text-muted); margin-top: 6px; }

.metryka { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.metryka dt { color: var(--text-muted); }
.metryka dd { color: var(--text-main); font-weight: 600; }

/* Słowa artysty — jedyne miejsce na szeryf */
.opowiesc { margin-top: 32px; }
.opowiesc h2 { font-size: 1.0625rem; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.opowiesc p { font-family: var(--font-quote); font-size: 1.375rem; line-height: 1.5; color: var(--text-main); white-space: pre-line; max-width: 34em; }

.materialy { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.materialy iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }

.pager { display: flex; align-items: center; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border-color); }
.pager .licznik { margin: 0 auto; color: var(--text-muted); font-size: 0.9375rem; }

/* ---------- Stopka ---------- */
.stopka { background-color: var(--sadza); color: var(--na-sadzy-muted); margin-top: clamp(40px, 6vw, 80px); }
.stopka .wrap { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; justify-content: space-between; padding-top: 28px; padding-bottom: 28px; font-size: 0.9375rem; }
.stopka nav { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.stopka a { color: var(--na-sadzy); }

/* ---------- Wąskie ekrany ---------- */
@media (max-width: 860px) {
    .szyld .wrap { gap: 4px 12px; }
    .szyld-logo { width: 170px; height: 34px; background-position: -20px -22px; background-size: 209px auto; }
    .szyld ~ #custom_lang_switcher { top: 7px; }
    .szyld-nav { order: 3; width: 100%; margin-left: 0; margin-right: 0; flex-wrap: nowrap; overflow-x: auto; gap: 24px; scrollbar-width: none; }
    .szyld-nav a { white-space: nowrap; }
    .wstep { grid-template-columns: 1fr; align-items: start; }
    .cykle .apokalipsa { grid-column: auto; }
    .cykle .apokalipsa .tablica { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
    .dzialy a { grid-template-columns: 1fr; }
    .dzielo { grid-template-columns: 1fr; }
    .dzielo-opis { position: static; }
    .sciana { columns: 2 140px; column-gap: 14px; }
    .sciana li { margin-bottom: 22px; }
}

@media (prefers-reduced-motion: no-preference) {
    .seria-tor { scroll-behavior: smooth; }
}

.dzial-nazwa { font-size: 1.75rem; }
.sekcja-dziela { margin-top: clamp(32px, 5vw, 64px); }

/* Wypowiedź artysty w opisie cyklu lub terenu */
.cykl-opis .quote-box { font-family: var(--font-quote); font-style: italic; font-size: 1.3125rem; line-height: 1.45; color: var(--text-main); margin: 1em 0; padding-left: 16px; border-left: 3px solid var(--accent-red); }

/* Apokalipsa: czarna tablica z odręcznym czerwonym napisem zamiast tytułu składanego krojem */
.tablica-apokalipsa { background-color: var(--sadza); margin-top: 20px; }
.tablica-apokalipsa h1 { padding: clamp(28px, 6vw, 72px) var(--gutter); max-width: 1100px; margin: 0 auto; }
.tablica-apokalipsa img { width: 100%; height: auto; }
.cykl-kadr { margin-top: clamp(28px, 4vw, 48px); }
.cykl-kadr img { width: 100%; height: auto; max-height: 80vh; object-fit: cover; border-radius: 2px; }

/* Strony przemalowane ze starego układu: własny <style> strony + wspólny szyld i stopka */
.tresc { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; padding: clamp(20px, 4vw, 40px) var(--gutter) 0; }