/* ============ Nav ============ */
/* AR1: transition transform globalnie — nav animuje show/hide na desktop i mobile */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);display:flex;align-items:center;transition:transform .35s var(--ease-out),color .3s ease,background-color .3s ease,border-color .3s ease,height .25s var(--ease-out)}
.nav.nav--hidden{transform:translateY(-100%)}
/* E3: 3-kolumnowa siatka — brand (start), links (center), CTA (end). Burger zajmie miejsce CTA na mobile. */
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;padding-inline:var(--gutter);gap:24px;max-width:var(--max-width);margin:0 auto}
.nav-inner > .brand{justify-self:start;grid-column:1}
.nav-inner > .nav-links{justify-self:center;grid-column:2}
.nav-inner > .nav-cta{justify-self:end;grid-column:3}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:15px;letter-spacing:-.01em;color:inherit}
.nav-links{display:flex;align-items:center;gap:28px;font-size:14px}
.nav-links a{opacity:.95;color:inherit}
.nav-links a.active{font-weight:500}

/* Dark variant — over hero. No mix-blend-mode (mieszało logo z wideo do losowych kolorów). Pure white. */
.nav.nav--dark{color:#fff;background:transparent}
.nav.nav--dark .brand{color:#fff}
/* Logo na ciemnym tle: jeśli image-logo to bez filtra (logo główne już jasne); jeśli text mark to dziedziczy kolor białej nawigacji. */

/* Light variant — on white pages */
.nav.nav--light{color:var(--text);background:rgba(255,255,255,.85);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--hairline)}

/* Scroll-based switch: gdy hero zniknie z viewportu, dark variant zmienia się w light (JS dokleja klasę .nav--passed-hero). */
.nav.nav--dark.nav--passed-hero{color:var(--text);background:rgba(255,255,255,.85);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--hairline)}
.nav.nav--dark.nav--passed-hero .brand{color:var(--text)}

/* Y1: logo zawsze w kolorze nav text. Variable --logo-filter ustawiana per nav variant,
   jedna reguła obsługuje upload (.mn-mark--img), built-in (.mn-mark--lockup) i overlay. */
.nav.nav--dark:not(.nav--passed-hero){--logo-filter:invert(1)}   /* dark nav → invert czarny PNG na biały */
.nav.nav--light,
.nav.nav--dark.nav--passed-hero{--logo-filter:none}              /* light surface → bez filtra (logo zostaje ciemne) */
.nav-overlay{--logo-filter:invert(1)}                            /* mobile menu overlay → zawsze ciemne tło → invert */

/* ============ E3: CTA w prawym górnym rogu (desktop) ============ */
.nav-cta{justify-self:end;grid-column:3;display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 18px;border-radius:999px;font-family:var(--font-mono);font-weight:500;font-size:13px;letter-spacing:-.005em;line-height:1;text-decoration:none;border:1px solid currentColor;transition:opacity .18s var(--ease-out),background .25s var(--ease-out),color .25s var(--ease-out)}
.nav-cta .nav-cta-ico{display:inline-grid;place-items:center;transition:transform .25s var(--ease-out)}
.nav-cta:hover{opacity:1;transform:none}
.nav-cta:hover .nav-cta-ico{transform:translateX(3px)}
/* Dark nav → CTA biały kontur, hover wypełnia */
.nav.nav--dark:not(.nav--passed-hero) .nav-cta{color:#fff;border-color:rgba(255,255,255,.55)}
.nav.nav--dark:not(.nav--passed-hero) .nav-cta:hover{background:#fff;color:var(--text)}
/* Light nav → CTA czarny */
.nav.nav--light .nav-cta,
.nav.nav--dark.nav--passed-hero .nav-cta{color:var(--text);border-color:var(--text)}
.nav.nav--light .nav-cta:hover,
.nav.nav--dark.nav--passed-hero .nav-cta:hover{background:var(--text);color:#fff}

/* ============ Hamburger button (mobile) ============ */
/* G1: button bigger (40→52), lines wider (26→32) + +25% thickness (1.8→2.25), gap też większy 6→8 */
.nav-burger{display:none;width:52px;height:52px;flex-direction:column;align-items:flex-end;justify-content:center;gap:8px;background:transparent;border:0;cursor:pointer;padding:0;color:inherit;justify-self:end;grid-column:3}
.nav-burger span{display:block;width:32px;height:2.25px;background:currentColor;border-radius:1px;transition:transform .3s var(--ease-out),opacity .2s var(--ease-out)}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(10.25px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-10.25px) rotate(-45deg)}

/* ============ G2 + H3 + J2: Fullscreen menu mobile — links centered, contact at bottom ============ */
/* J2: tło 95% czarne (5% przez — bardziej szczelne, ale wciąż minimalnie widać co pod) + blur */
.nav-overlay{position:fixed;inset:0;z-index:60;background:rgba(15,15,15,.95);-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%);color:#fff;display:none;overflow:hidden}
.nav-overlay[data-open="1"]{display:block;animation:nav-fade .24s ease-out}
@keyframes nav-fade{from{opacity:0}to{opacity:1}}

/* Logo wycentrowane na górze (mobile menu overlay) */
.nav-overlay__logo{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;color:#fff}
/* AE2: usunięte explicit filter:none/invert(1) — overlay variable --logo-filter:invert(1) z .nav-overlay
   teraz prawidłowo kaskadowo aplikuje się przez bazową regułę w base.css. Logo zawsze białe na czarnym tle overlay. */
.nav-overlay__logo .mn-mark--img,
.nav-overlay__logo .mn-mark--lockup{height:80px}

/* Close button top-right */
.nav-overlay__close{position:absolute;top:14px;right:var(--gutter);z-index:3;width:48px;height:48px;border-radius:999px;background:transparent;border:0;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .16s,opacity .16s}
.nav-overlay__close:hover{opacity:.7}

/* H3: body = grid 3 wiersze rozciągnięty na pełną wysokość.
       Row 1 = pusty (auto) na logo top. Row 2 (1fr) = nav, centered.
       Row 3 (auto) = kontakt+adres+social na samym dole. */
.nav-overlay__body{display:grid;grid-template-rows:auto 1fr auto;padding:88px var(--gutter) 36px;width:100%;max-width:600px;margin:0 auto;height:100vh;height:100dvh;box-sizing:border-box}

/* H3: nav wycentrowany w X i Y — zajmuje 1fr, sam się centruje */
.nav-overlay__nav{grid-row:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;width:100%}
.nav-overlay__link{font-family:var(--font-mono);font-weight:500;font-size:clamp(20px,5vw,28px);line-height:1.1;letter-spacing:.01em;color:#fff;background:transparent;border:0;padding:6px 0;cursor:pointer;transition:opacity .16s var(--ease-out);text-decoration:none;text-align:center}
.nav-overlay__link:hover{opacity:.6}

/* H3: kontakt + adres + social wszystkie na DOLE (grid-row 3) */
.nav-overlay__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,6vw,40px);width:100%;text-align:center;margin-bottom:24px}
.nav-overlay__block{margin:0}
.nav-overlay__label{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:10px}
.nav-overlay__text{font-size:13px;line-height:1.55;color:rgba(255,255,255,.85)}
.nav-overlay__text a{color:inherit;border-bottom:1px solid rgba(255,255,255,.18)}

.nav-overlay__block--social{width:100%;text-align:center}
.nav-overlay__socials{display:flex;gap:10px;justify-content:center}
/* AI1: socials z SVG ikonkami */
.nav-overlay__socials a{width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.22);display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.9);transition:color .16s,border-color .16s;text-decoration:none}
.nav-overlay__socials a svg{width:20px;height:20px;display:block}
.nav-overlay__socials a:hover{color:#fff;border-color:rgba(255,255,255,.5)}

/* Wrapper grupujący cols + social w 1 wierszu grida (row 3) */
.nav-overlay__footer-group{grid-row:3;display:flex;flex-direction:column;gap:20px;width:100%}

body[data-nav-open="1"]{overflow:hidden}

/* Mobile breakpoint */
@media (max-width:760px){
  :root{--nav-h:104px}  /* AJ1: -20% z 128. 90px logo + 7px padding każda strona. */
  .nav-links{display:none}
  /* AJ1: logo do LEWEJ — brand col 1 (start), środek pusty, burger col 3 (end) */
  .nav-inner{grid-template-columns:auto 1fr auto;align-items:center}
  .nav-inner > .brand{justify-self:start;grid-column:1}
  .brand span:last-child{display:none}
  .nav-burger{display:flex}
  /* AE3 BUGFIX: usunięta stara reguła `.mn-mark--nav.mn-mark--img img{height:32px}` z G1 — ona NADPISYWAŁA
     wszystkie powiększenia kontenera bo była bardziej specyficzna. Teraz img bierze height:100% z base.css = pełen kontener. */
  .mn-mark--nav .ring{width:30px;height:30px;font-size:14px}
  .mn-mark--nav .dash{width:11px;height:1.5px}
  /* E3: CTA tylko desktop */
  .nav-cta{display:none}
  /* H3: padding fine-tune */
  .nav-overlay__body{padding:84px 20px 28px}

  /* AP1: Mobile compact mode po hero — estetyczny niski bar.
     (.nav-hidden + transition transform są już globalne, na początku pliku.) */
  .nav.nav--light,
  .nav.nav--dark.nav--passed-hero{
    height:64px;
    background:rgba(255,255,255,.88);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    backdrop-filter:blur(16px) saturate(140%);
    border-bottom:1px solid var(--hairline)
  }

  /* Logo i hamburger mniejsze w compact mode — proporcjonalnie do thin bar */
  .nav.nav--light .mn-mark--nav.mn-mark--img,
  .nav.nav--dark.nav--passed-hero .mn-mark--nav.mn-mark--img{height:48px!important;max-width:140px!important}
  .nav.nav--light .mn-mark--nav.mn-mark--lockup,
  .nav.nav--dark.nav--passed-hero .mn-mark--nav.mn-mark--lockup{height:48px!important;max-width:120px!important}
  .nav.nav--light .nav-burger,
  .nav.nav--dark.nav--passed-hero .nav-burger{width:44px;height:44px}
}
@media (max-width:380px){
  .nav-overlay__cols{grid-template-columns:1fr;gap:14px;margin-bottom:18px}
}
/* Niskie ekrany — landscape kompakt */
@media (max-height:600px){
  .nav-overlay__body{padding-top:72px;padding-bottom:20px}
  .nav-overlay__link{font-size:clamp(16px,3.8vw,20px);padding:4px 0}
  .nav-overlay__nav{gap:10px}
  .nav-overlay__text{font-size:12px;line-height:1.4}
  .nav-overlay__footer-group{gap:14px}
}