/* ---------- SKIP LINK (dostepnosc: pierwszy TAB na stronie) ---------- */
.skip-link{
  position:fixed; left:16px; top:16px; z-index:60;
  transform:translateY(-300%);
  background:var(--ink,#14161A); color:#fff;
  padding:.75rem 1.2rem; border-radius:10px;
  font-size:.95rem; font-weight:600; text-decoration:none; white-space:nowrap;
  outline:2px solid #0468C9; outline-offset:2px;
  transition:transform .15s ease;
}
.skip-link:focus{transform:none}
@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}



/* ---------- NAGŁÓWEK (ciemny pasek, gradientowa krawędź) ---------- */
header[data-header]{
  position:sticky; top:0; z-index:50;
  width:100%; max-width:none; margin:0; padding:0;   /* reset ewentualnych reguł ze styles.css/oferta.css */
  transition:transform .28s ease; will-change:transform;
  background:rgba(18,20,24,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

header[data-header]::after{
  content:""; display:block; height:3px;
  background:linear-gradient(90deg,#0586FE 0%,#48F983 50%,#8058FD 100%);
}

header[data-header] .wrap{max-width:1180px; margin:0 auto; padding:0 24px}

header[data-header] .nav{display:flex; align-items:center; justify-content:space-between; height:64px; gap:24px}

header[data-header] .logo{display:inline-flex; align-items:center; line-height:0; text-decoration:none}

header[data-header] .logo .brand-logo{height:30px; width:auto; display:block}

header[data-header] nav{display:block}

header[data-header] .nav-links{display:flex; gap:1.35rem; list-style:none; align-items:center; margin:0; padding:0}


header[data-header] .nav-links a{
  text-decoration:none; font-size:.95rem; font-weight:500; color:#EDEEF0;
  font-family:var(--body);
}

header[data-header] .nav-links a:hover{color:#4FA0FF}

header[data-header] .nav-links a[aria-current="page"]{color:#4FA0FF}

header[data-header] .nav-links a.btn{display:inline-block; padding:.8rem 1.5rem; border-radius:999px; font-weight:600; font-size:.95rem; border:1px solid transparent}

header[data-header] .nav-links a.btn-rec{background:#0468C9; color:#fff}  /* #0586FE dawal 3,6:1 z bialym; ten sam blekit o stopien ciemniej spelnia AA (5,5:1) */

header[data-header] .nav-links a.btn-rec:hover{background:#035AA6}

header[data-header].hdr-hidden{transform:translateY(-100%)}


/* ---------- HAMBURGER (mobile / tablet) ---------- */
header[data-header] .nav-toggle{display:none}
@media(max-width:1024px) {
  header[data-header] .nav-links{gap:1.15rem}

  header[data-header] .nav-links a{font-size:.95rem}}
@media(max-width:960px) {
  header[data-header] .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:44px; height:44px; flex:0 0 auto; padding:0; cursor:pointer;
    background:transparent; border:1px solid rgba(255,255,255,.18); border-radius:11px;
    -webkit-tap-highlight-color:transparent;
  }

  header[data-header] .nav-toggle:hover{border-color:rgba(255,255,255,.34)}

  header[data-header] .nav-toggle:focus-visible{outline:2px solid #4FA0FF; outline-offset:2px}

  header[data-header] .nav-toggle span{
    display:block; width:21px; height:2px; background:#EDEEF0; border-radius:2px;
    transition:transform .22s ease, opacity .16s ease;
  }

  header[data-header] .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}

  header[data-header] .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}

  header[data-header] .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}


  header[data-header] nav{
    position:absolute; left:0; right:0; top:100%;
    background:#101216; box-shadow:0 18px 40px rgba(0,0,0,.45);
    border-bottom:1px solid rgba(255,255,255,.08);
    max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height .26s ease, visibility 0s linear .26s;
  }

  header[data-header] nav.is-open{max-height:82vh; overflow-y:auto; visibility:visible; transition:max-height .26s ease, visibility 0s}

  header[data-header] .nav-links{
    flex-direction:column; align-items:stretch; gap:0;
    max-width:1180px; margin:0 auto; padding:.4rem 24px 1.5rem;
  }

  header[data-header] .nav-links li + li{border-top:1px solid rgba(255,255,255,.075)}

  header[data-header] .nav-links a{display:block; padding:1rem 0; font-size:.95rem}

  header[data-header] .nav-links li:last-child{border-top:0; margin-top:1rem}

  header[data-header] .nav-links a.btn{display:block; text-align:center; padding:.95rem 1.5rem}}
@media(max-width:520px) { header[data-header] .logo .brand-logo{height:26px}}


/* ---------- STOPKA (ciemna, 3 kolumny) ---------- */
footer[data-footer]{
  display:block; width:100%; max-width:none; margin:0;   /* reset ewentualnych reguł footer{} ze styles.css/oferta.css */
  background:#0E1013; color:#9BA0AA; padding:3.2rem 0 2.4rem; font-size:.95rem;
}

footer[data-footer] .wrap{max-width:1180px; margin:0 auto; padding:0 24px}

footer[data-footer] .cols{display:grid; grid-template-columns:1.5fr .9fr .9fr 1.1fr; gap:2rem; margin-bottom:2.2rem}

footer[data-footer] h3{
  font-family:var(--body); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; margin:0 0 .9rem; font-weight:500; line-height:1.6;
}

footer[data-footer] p{margin:0}

footer[data-footer] ul{list-style:none; display:grid; gap:.5rem; margin:0; padding:0}

footer[data-footer] a{color:#9BA0AA; text-decoration:none}

footer[data-footer] a:hover{color:#fff}

footer[data-footer] .legal{
  border-top:1px solid #2E323A; padding-top:1.6rem; display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; font-family:var(--body); font-size:.72rem;
}
@media(max-width:820px) { footer[data-footer] .cols{grid-template-columns:1fr 1fr; gap:1.6rem}}
@media(max-width:560px) { footer[data-footer] .cols{grid-template-columns:1fr}}
/* Linki w kolumnach stopki mialy 13-17 px wysokosci pola kliku */
footer[data-footer] li a{display:inline-block;padding:.14rem 0}

/* Mapa Google wczytuje sie dopiero po kliknieciu - zadnych cookies Google przed zgoda */
.map-lazy{position:relative}
.map-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;min-height:inherit;height:100%;padding:1.6rem;text-align:center}
.map-placeholder p{margin:0;max-width:34ch}
.map-placeholder small{opacity:.72;font-size:.8rem}

/* --- Baner cookies (cookies.js) i linki prawne w stopce --- */
.ck{position:fixed;left:1rem;bottom:1rem;z-index:1200;max-width:34rem;font-family:var(--body)}
.ck[hidden]{display:none}
.ck-card{background:var(--ink);color:#fff;border:1px solid var(--line-dark);border-radius:16px;padding:1.2rem 1.3rem;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.ck h2{font-size:1rem;margin:0 0 .5rem;color:#fff}
.ck p{font-size:.85rem;line-height:1.55;color:var(--muted-light);margin:0 0 .9rem;max-width:none}
.ck p a{color:#fff;text-decoration:underline}
.ck-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.ck .btn{display:inline-block;padding:.65rem 1.2rem;border-radius:999px;font-weight:600;font-size:.9rem;border:1px solid transparent;cursor:pointer;font-family:inherit;line-height:1.2}
.ck .btn-rec{background:#0468C9;color:#fff}
.ck .btn-rec:hover{background:#035AA6}
.ck .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.ck .btn-ghost:hover{border-color:#fff}
.ck-link{background:none;border:0;color:#fff;text-decoration:underline;cursor:pointer;font:inherit;font-size:.85rem;padding:.4rem .2rem}
.ck-panel{margin-top:.9rem;border-top:1px solid var(--line-dark);padding-top:.9rem}
.ck-panel[hidden]{display:none}
.ck-opt{display:flex;gap:.7rem;align-items:flex-start;margin:0 0 .6rem;font-size:.85rem;color:#fff;cursor:pointer}
.ck-opt input{margin-top:.2rem;accent-color:#0468C9;flex:none}
.ck-opt small{display:block;color:var(--muted-light);font-size:.78rem}
.ck-info{font-size:.78rem}
/* Na telefonie baner ma byc paskiem, nie polowa ekranu: tresc od radcy zostaje w calosci,
   tylko jest przewijana w obrebie paska, a przyciski stoja w jednym rzedzie. */
@media(max-width:640px){
  .ck{left:0;right:0;bottom:0;max-width:none}
  .ck-card{border-radius:16px 16px 0 0;padding:.9rem 1rem .95rem}
  .ck h2{font-size:.92rem;margin:0 0 .35rem}
  .ck p{font-size:.8rem;line-height:1.45;margin:0 0 .7rem;max-height:5.1em;overflow-y:auto;overscroll-behavior:contain}
  .ck-actions{gap:.45rem}
  .ck .btn{flex:1 1 8rem;text-align:center;padding:.55rem 1rem;font-size:.85rem}
  .ck-link{flex:1 1 100%;text-align:center;padding:.3rem 0 0}
  .ck-panel{max-height:46vh;overflow-y:auto}
}
@media(prefers-reduced-motion:no-preference){.ck-card{animation:ck-in .25s ease-out}}
@keyframes ck-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
footer[data-footer] .legal a,footer[data-footer] .legal .link-btn{color:inherit;text-decoration:underline}
footer[data-footer] .legal .link-btn{background:none;border:0;padding:0;font:inherit;cursor:pointer}

/* ---------- POZYCJA „FOTO I VIDEO” W MENU (od v144): odnośnik do storymakers.pl ---------- */
header[data-header] .nav-links a.nav-marka{color:#AEB3BD}
header[data-header] .nav-links a.nav-marka:hover{color:#fff}
/* między progiem menu rozwijanego a 1180 px menu jest odrobinę ciaśniejsze, żeby sześć pozycji zmieściło się w jednej linii */
@media(min-width:961px) and (max-width:1180px){
  header[data-header] .nav{gap:16px}
  header[data-header] .nav-links{gap:.95rem}
  header[data-header] .nav-links a{font-size:.9rem}
  header[data-header] .nav-links a.btn{padding:.7rem 1.1rem; font-size:.9rem}
  header[data-header] .nav-dl{display:none}   /* od v147 siedem pozycji: tu „Poradnik” i „Umów wizytę”, pełne napisy szerzej i w menu rozwijanym */
}
@media(min-width:961px){ header[data-header] .nav-links a{white-space:nowrap} }

/* ---------- BLOK „TRZY FILARY” NAD STOPKĄ (od v144) ----------
   Stoi poza <main>, na stronach z różnymi arkuszami (styles.css albo oferta.css), więc niczego nie dziedziczy:
   szerokość, pismo i odstępy ma własne. Barwy kafli wg Księgi znaku 2026: foto zieleń, video fiolet, podcast błękit. */
.marka-filary{display:block; margin:0; padding:3.4rem 0 3.6rem; background:#F1F0EC; border-top:1px solid #DDDBD4;
  color:#14161A; font-family:var(--body); font-size:17px; line-height:1.6; text-align:left}
.marka-filary .mf-wrap{max-width:1180px; margin:0 auto; padding:0 24px}
.marka-filary .mf-tc{display:flex; align-items:center; gap:.7rem; margin:0 0 1.1rem; max-width:none;
  font-size:.8rem; font-weight:400; letter-spacing:.14em; line-height:1.4; text-transform:uppercase; color:#63666E}
.marka-filary .mf-tc::before{content:""; width:34px; height:1px; background:currentColor; opacity:.5}
.marka-filary .mf-tc b{color:#0468C9; font-weight:500}
.marka-filary .mf-h{margin:0 0 .4em; max-width:none; font-family:var(--display); font-stretch:var(--naglowek-szerokosc);
  font-weight:var(--naglowek-waga-2); font-size:clamp(1.5rem,3.4vw,2.5rem); line-height:1.12; letter-spacing:-.01em;
  text-transform:none; color:#14161A}
.marka-filary .mf-p{margin:0; max-width:none; font-size:17px; line-height:1.6; color:#14161A}
.marka-filary .filary{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.7rem}
.marka-filary .filar{display:flex; flex-direction:column; gap:.4rem; min-height:11.5rem; padding:1.4rem 1.4rem 1.3rem;
  border-radius:14px; text-decoration:none; box-sizing:border-box}
.marka-filary .filar span{display:block}
.marka-filary .filar .yr{font-size:.72rem; letter-spacing:.14em; line-height:1.4; text-transform:uppercase; opacity:.9}
.marka-filary .filar .nazwa{font-family:var(--display); font-stretch:var(--naglowek-szerokosc); font-weight:700;
  font-size:1.375rem; letter-spacing:-.01em; line-height:1.2}
.marka-filary .filar .op{font-size:.95rem; line-height:1.45}
.marka-filary .filar .go{margin-top:auto; padding-top:.9rem; font-weight:700; font-size:.95rem}
.marka-filary .f-foto,.marka-filary .f-foto:visited,.marka-filary .f-foto:hover{background:#48F983; color:#14161A}
.marka-filary .f-video,.marka-filary .f-video:visited,.marka-filary .f-video:hover{background:#6B46E5; color:#fff}
.marka-filary .f-pod{background:#fff; color:#14161A; border:1px solid #DDDBD4; box-shadow:inset 0 4px 0 #0586FE}
.marka-filary .f-pod .yr{color:#0468C9; opacity:1}
.marka-filary .f-pod .go{color:#63666E}
.marka-filary a.filar{transition:transform .18s ease}
.marka-filary a.filar:hover{transform:translateY(-3px)}
.marka-filary a.filar:focus-visible{outline:3px solid #0468C9; outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .marka-filary a.filar{transition:none}
  .marka-filary a.filar:hover{transform:none}
}
/* tablet i telefon: kafle jeden pod drugim, bez opisów, a „tu jesteś” w jednej linii, żeby blok nie zajmował całego ekranu */
@media(max-width:820px){
  .marka-filary .filary{grid-template-columns:minmax(0,1fr); gap:.7rem; margin-top:1.3rem}
  .marka-filary .filar{min-height:0; padding:1.05rem 1.15rem; gap:.25rem}
  .marka-filary .filar .op{display:none}
  .marka-filary .filar .go{margin-top:0; padding-top:.35rem}
  .marka-filary .f-pod{flex-direction:row; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.1rem .8rem; padding:.85rem 1.15rem}
  .marka-filary .f-pod .yr{display:none}
  .marka-filary .f-pod .nazwa{font-size:1.0625rem}
  .marka-filary .f-pod .go{padding-top:0}
}
@media(max-width:640px){
  .marka-filary{padding:2.6rem 0 2.8rem}
}
@media print{.marka-filary{display:none !important}}