/* ============ Reset + base ============ */
*,*::before,*::after{box-sizing:border-box}
/* AW1: overflow-x:clip globalnie — bezpieczne dla position:sticky (w przeciwieństwie do hidden)
   i zapobiega poziomemu scrollbarowi od full-bleed 100vw elementów (np. czarna baza footera). */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 24px);overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.5 var(--font-sans);letter-spacing:-.005em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
/* AM1: mobile blokuje horizontal swipe gesty. */
@media (max-width:760px){
  html,body{max-width:100vw;touch-action:pan-y}
}
/* AS2: jedna grubość fontu wszędzie. Rozmiar może się różnić, weight = 400 zawsze. */
*,*::before,*::after{font-weight:400!important}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none;transition:opacity .18s var(--ease-out)}
a:hover{opacity:.65}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
ul{margin:0;padding:0;list-style:none}
/* E8: globalne nagłówki — sans → mono (styl jak "Chcesz zobaczyć więcej?") */
h1,h2,h3,h4{margin:0;font-family:var(--font-mono);font-weight:500;letter-spacing:-.02em;line-height:1.1}
p{margin:0}
::selection{background:var(--text);color:#fff}

main.page{padding-top:var(--nav-h)}
.fade-up{opacity:1;transform:translateY(12px);transition:transform .6s var(--ease-out)}
.fade-up.in{transform:none}
.arrow{display:inline-block;transition:transform .25s var(--ease-out)}
.btn:hover .arrow,a:hover .arrow{transform:translate(2px,-2px)}
@media (prefers-reduced-motion:reduce){.fade-up{transition:none;transform:none}}

/* ============ Reusable: M·N logo mark ============ */
.mn-mark{display:inline-flex;align-items:center;gap:0}
.mn-mark .ring{border:1.2px solid currentColor;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-weight:500;letter-spacing:-.01em;line-height:1}
.mn-mark .dash{background:currentColor;display:inline-block}
.mn-mark--nav .ring{width:22px;height:22px;font-size:11px}
.mn-mark--nav .dash{width:8px;height:1.2px}
.mn-mark--footer .ring{width:64px;height:64px;font-size:28px;border-width:1.4px}
.mn-mark--footer .dash{width:24px;height:1.4px}
.mn-mark--ring .ring{width:clamp(36px,8cqi,52px);height:clamp(36px,8cqi,52px);font-size:clamp(16px,3.2cqi,22px);border-width:1.6px}
.mn-mark--ring .dash{width:clamp(14px,3cqi,22px);height:1.6px}

/* ============ U1: Image-based logo (Content Center upload) — fixed sizing ============ */
/* Kontener: sztywny height + max-width. Img wypełnia height:100% z container'a,
   width:auto zachowuje aspect ratio, max-width:100% nie przekracza kontenera. */
.mn-mark--img{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}
.mn-mark--img img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain}

/* X1: header logo ×2 — 46→92 desktop, 39→78 mobile.
   X3: ring -20% — clamp 193-298 → 154-238. */
.mn-mark--nav.mn-mark--img{height:92px;max-width:380px}
.mn-mark--footer.mn-mark--img{height:98px;max-width:360px}
.mn-mark--ring.mn-mark--img{height:clamp(154px,38.4cqi,238px);max-width:clamp(280px,76cqi,480px)}

/* Invert filter — used when dark logo not provided and we're on light surface */
.mn-mark--invert img{filter:invert(1)}

@media (max-width:760px){
  /* AJ1: -20% (112→90). */
  .mn-mark--nav.mn-mark--img{height:90px!important;max-width:200px!important}
}

/* ============ U1: Built-in mark MN — fixed sizing (parallel do .mn-mark--img) ============ */
.mn-mark--lockup{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}
.mn-mark--lockup .mn-mark__mark{display:block;height:100%;width:auto;max-width:100%;object-fit:contain}

/* X1: nav ×2 — 49→98. X3: ring -20% — 210-332 → 168-266. */
.mn-mark--nav.mn-mark--lockup{height:98px;max-width:380px}
.mn-mark--footer.mn-mark--lockup{height:98px;max-width:300px}
.mn-mark--ring.mn-mark--lockup{height:clamp(168px,41.6cqi,266px);max-width:clamp(304px,80cqi,520px)}

/* Y1: jednolita reguła filtra — zarówno upload (.mn-mark--img) jak built-in (.mn-mark--lockup).
   Variable --logo-filter ustawiana w kontekście rodzica (nav.css per nav variant; default none).
   Default dla footera/ringa = none (jasne tło → ciemne logo OK). */
.footer, .ring-core, .approach-side{--logo-filter:none}
.mn-mark--img img,
.mn-mark--lockup img{filter:var(--logo-filter,none)}

/* AJ1: mobile lockup -20% (112→90). */
@media (max-width:760px){
  .mn-mark--nav.mn-mark--lockup{height:90px!important;max-width:180px!important}
}

/* V5: ukrywamy TYLKO tekstowy span "Media Nation" obok logo — z wyłączeniem samego logo.
       Logo też jest <span> (.mn-mark) dziećmi .brand, więc selektor :not(.mn-mark) zachowuje go. */
.brand > span:not(.mn-mark),
.footer-logo > .footer-wordmark{display:none}