/* ══════════════════════════════════════════════════════════════════════
   Wspólny system stylów dla stron publicznych serwisu Kompanii Twórczej
   (Wykonane prace, O Kompanii, Cennik usług, Historia działalności).

   Szkieletowy, czarno-biały styl: dużo bieli, cienkie linie, wyraźna
   typografia (Fraunces w nagłówkach, Inter w treści), zero dekoracji
   poza treścią. Mobile-first — reguły bazowe dla telefonu, breakpointy
   dokładają szerszy układ.

   Zmiana tutaj działa na wszystkie strony publiczne naraz — dlatego
   szablony trzymają w swoim <style> tylko to, co jest specyficzne dla
   danego typu strony (np. oś lat w portfolio, tabela w cenniku).
   ══════════════════════════════════════════════════════════════════════ */

:root {
    --pub-czern: #141414;
    --pub-tekst: #2b2b2b;
    --pub-szary: #6e6e6e;
    --pub-jasny: #9a9a9a;
    --pub-linia: #e2e2e2;
    --pub-tlo: #ffffff;
    --pub-tlo-cien: #fafafa;
}

body.pub-body {
    background: var(--pub-tlo);
    color: var(--pub-tekst);
    font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
    font-size: .95rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    margin: 0;
}
body.pub-body h1,
body.pub-body h2,
body.pub-body h3 {
    font-family: 'Fraunces', Georgia, serif;
    color: var(--pub-czern);
    letter-spacing: -.01em;
    text-wrap: balance;
}

/* Kontener — nigdy od krawędzi do krawędzi */
.pub-wrap {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 1.1rem;
}

/* ── Belka górna ── */
.pub-topbar {
    border-bottom: 1px solid var(--pub-linia);
    padding: .9rem 0;
    margin-bottom: 2.2rem;
}
.pub-topbar-in {
    width: 100%; max-width: 640px; margin: 0 auto; padding: 0 1.1rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.pub-marka {
    font-family: 'Fraunces', Georgia, serif;
    font-size: .92rem; font-weight: 600; letter-spacing: .01em;
    color: var(--pub-czern); text-decoration: none; white-space: nowrap;
}
.pub-marka:hover { color: var(--pub-czern); }
.pub-menu { display: flex; gap: .9rem; flex-wrap: wrap; }
.pub-menu a {
    font-size: .78rem; color: var(--pub-szary); text-decoration: none;
    letter-spacing: .02em; white-space: nowrap;
}
.pub-menu a:hover { color: var(--pub-czern); }
.pub-menu a.aktywna { color: var(--pub-czern); font-weight: 600; }
.pub-crm {
    font-size: .74rem; color: var(--pub-jasny); text-decoration: none;
    display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
}
.pub-crm:hover { color: var(--pub-czern); }

/* ── Drugi rząd belki: narzędzia wewnętrzne (tylko zalogowany) ──
   Wyraźnie odcięty od menu publicznego — inne tło i drobniejszy tekst,
   żeby od razu było widać, że klient tego nie widzi. */
.pub-wewnetrzne {
    border-top: 1px solid var(--pub-linia);
    margin-top: .85rem; padding-top: .7rem;
    align-items: flex-start; gap: .7rem;
}
.pub-wewn-etyk {
    font-size: .62rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--pub-jasny);
    display: inline-flex; align-items: center; gap: .3rem;
    white-space: nowrap; padding-top: .15rem; flex: 0 0 auto;
}
.pub-menu-wewn { gap: .2rem .75rem; }
.pub-menu-wewn a {
    font-size: .74rem; color: var(--pub-szary);
    display: inline-flex; align-items: center; gap: .28rem;
}
.pub-menu-wewn a i { color: var(--pub-jasny); font-size: .8rem; }
.pub-menu-wewn a:hover, .pub-menu-wewn a:hover i { color: var(--pub-czern); }
.pub-menu-wewn a.aktywna { color: var(--pub-czern); font-weight: 600; }
.pub-menu-wewn a.aktywna i { color: var(--pub-czern); }

/* ── Nagłówek strony ── */
.pub-naglowek { margin-bottom: 2.4rem; }
.pub-eyebrow {
    font-size: .68rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--pub-jasny); margin-bottom: .5rem;
}
.pub-naglowek h1 {
    font-size: clamp(1.55rem, 5vw, 2.05rem); font-weight: 600;
    line-height: 1.15; margin: 0 0 .6rem;
}
.pub-wstep { color: var(--pub-szary); font-size: .95rem; max-width: 50ch; }

/* ── Powrót / nawigacja pomocnicza ── */
.pub-wroc {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--pub-szary); text-decoration: none; font-size: .82rem;
    margin-bottom: 1.6rem;
}
.pub-wroc:hover { color: var(--pub-czern); }

/* ── Przyciski i pasek narzędzi redaktora ── */
.pub-toolbar { display: flex; justify-content: flex-end; margin-bottom: 1.6rem; }
.pub-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1px solid var(--pub-czern); background: var(--pub-czern); color: #fff;
    border-radius: 2px; padding: .48rem 1rem; font-size: .8rem;
    text-decoration: none; letter-spacing: .02em;
}
.pub-btn:hover { background: #000; color: #fff; }
.pub-edycja {
    display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
    margin-top: 2.2rem; padding-top: 1.2rem;
    border-top: 1px solid var(--pub-linia);
}
.pub-edytuj {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--pub-szary); text-decoration: none; font-size: .78rem;
}
.pub-edytuj:hover { color: var(--pub-czern); }

.pub-puste {
    text-align: center; color: var(--pub-jasny); font-style: italic;
    padding: 3.5rem 0; border-bottom: 1px solid var(--pub-linia);
}

/* ── Paginacja: cienkie, bez pigułek ── */
.pub-paginacja {
    display: flex; align-items: center; justify-content: center;
    gap: .25rem; margin: 2.4rem 0 1rem; flex-wrap: wrap;
}
.pub-pg {
    min-width: 2rem; height: 2rem; display: inline-flex;
    align-items: center; justify-content: center;
    font-size: .85rem; color: var(--pub-szary); text-decoration: none;
    border-radius: 2px; font-variant-numeric: tabular-nums;
}
.pub-pg:hover { background: var(--pub-tlo-cien); color: var(--pub-czern); }
.pub-pg.current { color: var(--pub-tlo); background: var(--pub-czern); font-weight: 600; }
.pub-pg.kropki { color: var(--pub-jasny); pointer-events: none; }
.pub-pg-strzalka { font-size: 1rem; }
.pub-paginacja-info {
    text-align: center; font-size: .74rem; color: var(--pub-jasny);
    margin-bottom: .3rem; letter-spacing: .02em;
}

/* ── Stopka ── */
.pub-stopka {
    border-top: 1px solid var(--pub-linia); margin-top: 3rem;
    padding: 1.6rem 0 3rem;
    font-size: .78rem; color: var(--pub-jasny);
}
.pub-stopka-in {
    width: 100%; max-width: 640px; margin: 0 auto; padding: 0 1.1rem;
    display: flex; flex-wrap: wrap; gap: 1.6rem 2rem;
}
/* Kolumny nie mogą być węższe niż najdłuższa nazwa strony w menu —
   inaczej „Historia działalności Kompanii" łamie się w środku wyrazu. */
.pub-stopka-kol { flex: 1 1 12rem; min-width: 11rem; }
.pub-stopka-kol > div { line-height: 1.75; }
.pub-stopka-kol .tyt {
    font-size: .68rem; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--pub-szary); margin-bottom: .4rem;
    display: flex; align-items: center; gap: .3rem;
}
.pub-stopka a { color: var(--pub-szary); text-decoration: none; }
.pub-stopka a:hover { color: var(--pub-czern); text-decoration: underline; }
/* Dolny wiersz zawsze na pełną szerokość, pod kolumnami */
.pub-stopka-dol {
    flex: 1 1 100%; order: 99;
    border-top: 1px solid var(--pub-linia); padding-top: 1rem;
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ── Breakpointy ── */
@media (min-width: 768px) {
    .pub-wrap, .pub-topbar-in, .pub-stopka-in { max-width: 700px; }
    .pub-naglowek h1 { font-size: 2.3rem; }
}

/* ── Wydruk ── */
@media print {
    .pub-topbar, .pub-toolbar, .pub-edycja, .pub-paginacja,
    .pub-wroc, #admin_belka { display: none !important; }
    body.pub-body { font-size: 11pt; }
    .pub-wrap { max-width: none; }
}