@charset "UTF-8";
/* =====================================================================
   Personalizacje QR (spec 43) - strony klienta, szablon page-personalizacja.php.
   Kolory klienta: --p-* z personalizacje/<klient>.json (edumovly_p13n_style()).
   Mobile-first; marginesy boczne 16 px; treść max 1100 px.
   Selektory z klasą (.p13n ...) - wygrywają z globalnym style.css (h1-h6, a) i Kadence (button).
   ===================================================================== */

:root {
  --p-primary: #0056a4;
  --p-accent: #1dbadf;
  --p-dark: #003d65;
  --p-deep: #04253c;
  --p-light: #5ec9df;
  --p-bg: #ffffff;
  --p-radius: 20px;
  --p-max: 1100px;
  --p-gut: 16px;
  --p-tint: color-mix(in srgb, var(--p-light) 14%, #ffffff);
  --p-shadow: 0 6px 18px rgba(4, 37, 60, .08);
  /* fala: pełna szerokość, dół/góra sekcji (maska, kolor bierze z tła elementu) */
  --p-fala: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v26c-120 22-240 34-360 22S840 8 720 14 480 46 360 50 120 40 0 26z'/%3E%3C/svg%3E");
}

body.p13n-body {
  margin: 0;
  background: var(--p-bg);
  color: var(--p-deep);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}
.p13n-body *, .p13n-body *::before, .p13n-body *::after { box-sizing: border-box; }

.p13n { display: block; padding-bottom: 8px; }
.p13n img { max-width: 100%; height: auto; }
.p13n p { margin: 0 0 .8em; }
.p13n p:last-child { margin-bottom: 0; }
.p13n h1, .p13n h2, .p13n h3 {
  font-family: 'Oswald', 'Montserrat', sans-serif;
  letter-spacing: .01em;
  line-height: 1.15;
  margin: 0;
}
.p13n h3 { font-size: 22px; font-weight: 600; color: var(--p-dark); margin-bottom: 8px; }
.p13n a { color: var(--p-primary); }
.p13n a:hover { color: var(--p-dark); }

/* ---------- nagłówek: logo zawsze na białym, z polem ochronnym ---------- */
.p13n-head {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  max-width: var(--p-max);
  margin: 0 auto;
  padding: 8px var(--p-gut);
}
.p13n-logo {
  display: block;
  background: #fff;
  padding: 16px;            /* pole ochronne ≈ wysokość „P” w logotypie */
  margin-left: -16px;
  line-height: 0;
}
.p13n-logo img { display: block; height: auto; max-height: 56px; width: auto; }
.p13n .p13n-wroc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--p-primary);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  line-height: 1.2;
}
.p13n .p13n-wroc::before { content: "←"; font-size: 18px; line-height: 1; }
.p13n .p13n-wroc:hover { background: var(--p-dark); color: #fff; }

/* ---------- hero: gradient + falisty dół ---------- */
.p13n-hero {
  position: relative;
  color: #fff;
  text-align: center;
  padding: 40px var(--p-gut) 88px;
  background:
    radial-gradient(circle at 12% 30%, rgba(255,255,255,.16) 0 18px, transparent 19px),
    radial-gradient(circle at 18% 62%, rgba(255,255,255,.10) 0 9px, transparent 10px),
    radial-gradient(circle at 86% 26%, rgba(255,255,255,.14) 0 26px, transparent 27px),
    radial-gradient(circle at 92% 64%, rgba(255,255,255,.10) 0 11px, transparent 12px),
    linear-gradient(160deg, var(--p-primary) 0%, var(--p-dark) 100%);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 44px) no-repeat,
                var(--p-fala) bottom / 100% 46px no-repeat;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 44px) no-repeat,
                var(--p-fala) bottom / 100% 46px no-repeat;
}
.p13n-eyebrow {
  display: inline-block;
  margin: 0 0 14px !important;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 2px solid rgba(255,255,255,.45);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.p13n .p13n-hero h1 {
  color: #fff;
  font-size: clamp(32px, 7vw, 56px);
  font-weight: 700;
  max-width: 820px;
  margin: 0 auto;
  text-wrap: balance;
}

/* ---------- wizualizacja urządzenia (pod hero, nachodzi na falę) ----------
   max 720 px: plik ma 1600 px, więc obraz jest ostry do DPR 2,2 (przy 1100 px był rozciągany i rozmazany).
   Z zakładkami na komputerze stoi w pierwszym panelu pod paskiem menu - tam bez nachodzenia (niżej). */
.p13n figure.p13n-wiz {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: -40px auto 0;
  padding: 0;
  width: calc(100% - 2 * var(--p-gut));
}
.p13n img.p13n-wiz-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  border: 3px solid var(--p-accent);
  box-shadow: var(--p-shadow);
  background: #fff;
}

/* ---------- bloki ---------- */
.p13n-blok {
  max-width: var(--p-max);
  margin: 40px auto 0;
  padding: 0 var(--p-gut);
}
.p13n .p13n-h2 {
  color: var(--p-dark);
  font-size: clamp(26px, 4.6vw, 36px);
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 10'%3E%3Cpath d='M2 5c6-5 11-5 17 0s11 5 17 0 11-5 17 0 11 5 17 0' fill='none' stroke='%231dbadf' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 72px 10px no-repeat;
}
.p13n-instr { font-size: 18px; margin-bottom: 20px; }

/* karta - wspólna rama */
.p13n-kafel, .p13n-dymek, .p13n-etap, .p13n-zagadki > li, .p13n-wysz > li,
.p13n-nawyk, .p13n-cieka > li, .p13n-lista > li, .p13n-intro-in {
  background: #fff;
  border: 3px solid var(--p-accent);
  border-radius: var(--p-radius);
}

/* powitanie: postacie + dymek */
.p13n-powitanie { margin-top: 24px; }
.p13n-powitanie-in { display: grid; gap: 8px; align-items: center; }
.p13n-postacie { display: block; width: 100%; max-width: 440px; margin: 0 auto; }
.p13n-dymek {
  position: relative;
  padding: 22px 22px;
  font-size: 19px;
  font-weight: 500;
  box-shadow: var(--p-shadow);
}
.p13n-dymek::before {               /* ogonek dymka - w górę, do postaci */
  content: "";
  position: absolute;
  left: 50%; top: -14px;
  width: 24px; height: 24px;
  background: #fff;
  border-left: 3px solid var(--p-accent);
  border-top: 3px solid var(--p-accent);
  border-top-left-radius: 6px;
  transform: translateX(-50%) rotate(45deg);
}

/* kafle urządzeń */
div.p13n-kafle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.p13n .p13n-kafel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 18px;
  overflow: hidden;
  color: var(--p-deep);
  text-decoration: none;
  box-shadow: var(--p-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.p13n .p13n-kafel:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(4, 37, 60, .14); color: var(--p-deep); }
.p13n-kafel-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--p-tint);
  padding: 12px;
  margin-bottom: 8px;
}
.p13n-kafel--foto > .p13n-kafel-img { object-fit: cover; padding: 0; }
.p13n-kafel-tytul {
  font-family: 'Oswald', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--p-dark);
  padding: 0 18px;
  line-height: 1.2;
}
.p13n-kafel-opis { padding: 0 18px; font-size: 16px; }
.p13n-kafel-cta {
  align-self: flex-start;
  margin: auto 18px 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--p-primary);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}
.p13n-kafel-cta::after { content: "→"; margin-left: 8px; }
.p13n-kafel:hover .p13n-kafel-cta { background: var(--p-dark); }
.p13n-kafel > .p13n-kafel-opis { margin-bottom: 12px; }

/* intro */
.p13n-intro-in { display: grid; gap: 16px; padding: 20px; align-items: center; background: var(--p-tint); }
.p13n-intro-img { display: block; width: 100%; max-width: 420px; margin: 0 auto; }
.p13n-intro-in > div { font-size: 18px; }

/* etapy - numer w kropli */
ol.p13n-etapy { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.p13n-etap { display: grid; gap: 14px; padding: 18px; align-items: center; box-shadow: var(--p-shadow); }
.p13n-etap-img { display: block; width: 100%; max-width: 420px; margin: 0 auto; border-radius: 14px; }
.p13n .p13n-etap-nr {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 48px;
  height: 58px;
  margin: 0 0 10px;
  padding-bottom: 8px;
  background: var(--p-primary);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  clip-path: path('M24 0C30 12 48 26 48 38A24 20 0 0 1 0 38C0 26 18 12 24 0Z');
}
.p13n-etap-pod {
  color: var(--p-primary);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* zagadki + odpowiedzi w <details> */
ol.p13n-zagadki { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; counter-reset: zag; }
.p13n-zagadki > li { padding: 18px 18px 18px 64px; position: relative; counter-increment: zag; }
.p13n-zagadki > li::before {
  content: counter(zag);
  position: absolute;
  left: 16px; top: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--p-tint);
  color: var(--p-dark);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 20px;
  display: grid;
  place-items: center;
}
.p13n-pyt { font-weight: 700; font-size: 18px; }
.p13n-odp { margin-top: 10px; }
.p13n-odp summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--p-light);
  color: var(--p-deep);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.p13n-odp summary::-webkit-details-marker { display: none; }
.p13n-odp summary::before { content: "▸"; transition: transform .15s ease; }
.p13n-odp[open] summary::before { transform: rotate(90deg); }
.p13n-odp summary:hover { background: var(--p-accent); }
.p13n .p13n-odp[open] p {
  font-weight: 700;
  color: var(--p-dark);
  margin-top: 10px;
  padding: 10px 14px;
  border-left: 4px solid var(--p-accent);
  background: var(--p-tint);
  border-radius: 0 12px 12px 0;
}

/* wyszukiwanka */
ul.p13n-wysz {
  margin: 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.p13n-wysz > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 14px 10px;
}
.p13n-wysz-img { display: block; width: 96px; height: 96px; object-fit: contain; }
.p13n-wysz-brak { display: block; width: 96px; height: 96px; border-radius: 50%; background: #e3e7ea; }
.p13n-wysz-nazwa { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.p13n-wysz .p13n-odp { margin-top: auto; }
.p13n-wysz .p13n-odp summary { font-size: 14px; padding: 8px 14px; white-space: nowrap; }
.p13n .p13n-wysz .p13n-odp[open] p {
  border: 0;
  border-radius: 999px;
  padding: 4px 0;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-size: 28px;
  line-height: 1.2;
}

/* nawyki: zły / dobry / zysk */
ol.p13n-nawyki { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.p13n-nawyk { display: grid; gap: 10px; padding: 12px; }
.p13n .p13n-nawyk > p { margin: 0; padding: 14px 16px; border-radius: 14px; border-left: 6px solid; }
.p13n-nawyk > p > span {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.p13n-zly { background: #fdecec; border-color: #c62828 !important; }
.p13n-zly > span { color: #c62828; }
.p13n-zly > span::before { content: "✗ "; }
.p13n-dobry { background: #e8f5e9; border-color: #2e7d32 !important; }
.p13n-dobry > span { color: #2e7d32; }
.p13n-dobry > span::before { content: "✓ "; }
.p13n-zysk { background: color-mix(in srgb, var(--p-light) 20%, #ffffff); border-color: var(--p-primary) !important; }
.p13n-zysk > span { color: var(--p-primary); }
.p13n-zysk > span::before { content: "★ "; }

/* ciekawostki / lista */
ul.p13n-cieka, ul.p13n-lista {
  margin: 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.p13n-cieka > li, .p13n-lista > li { padding: 18px; position: relative; }
.p13n-cieka > li { background: var(--p-tint); padding-top: 54px; }
.p13n-cieka > li::before {
  content: "!";
  position: absolute;
  left: 18px; top: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--p-primary);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 20px;
  display: grid;
  place-items: center;
}
.p13n-lista > li { padding-left: 58px; }
.p13n-lista > li::before {
  content: "✓";
  position: absolute;
  left: 16px; top: 18px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--p-accent);
  color: #fff;
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* pobierz */
ul.p13n-pobierz { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 12px; }
.p13n .p13n-pobierz a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 3px solid var(--p-accent);
  background: #fff;
  color: var(--p-dark);
  font-weight: 700;
  text-decoration: none;
}
.p13n .p13n-pobierz a::before { content: "⬇"; color: var(--p-primary); }
.p13n .p13n-pobierz a:hover { background: var(--p-primary); border-color: var(--p-primary); color: #fff; }
.p13n .p13n-pobierz a:hover::before { color: #fff; }
/* pobierz z podglądem (kolorowanki): siatka kart, miniatura + nazwa ze strzałką */
ul.p13n-pobierz--podglad { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
ul.p13n-pobierz--podglad > li { display: flex; }   /* równe karty w rzędzie */
.p13n .p13n-pobierz--podglad a {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 0; border-radius: 18px; overflow: hidden; min-height: 0; flex: 1 1 auto;
}
.p13n .p13n-pobierz--podglad a::before { content: none; }
.p13n .p13n-pobierz-img { display: block; width: 100%; height: auto; aspect-ratio: 297 / 210; object-fit: contain; background: #fff; border-bottom: 3px solid var(--p-accent); }
.p13n .p13n-pobierz--podglad .p13n-pobierz-nazwa { display: flex; align-items: center; gap: 8px; padding: 12px 16px; }
.p13n .p13n-pobierz--podglad .p13n-pobierz-nazwa::before { content: "⬇"; color: var(--p-primary); }
.p13n .p13n-pobierz--podglad a:hover .p13n-pobierz-nazwa::before { color: #fff; }
.p13n .p13n-pobierz--podglad a:hover .p13n-pobierz-img { border-bottom-color: var(--p-primary); }

/* opis + Odsłuchaj */
.p13n .p13n-czytaj {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  margin: 0 0 14px;
  padding: 8px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--p-primary);
  color: #fff;
  font: 700 15px/1.2 'Montserrat', sans-serif;
  box-shadow: none;
  cursor: pointer;
}
.p13n .p13n-czytaj[hidden] { display: none; }
.p13n .p13n-czytaj::before { content: "🔊" / ""; font-size: 18px; line-height: 1; }
.p13n .p13n-czytaj:hover { background: var(--p-dark); color: #fff; }
.p13n-opis-tekst { font-size: 18px; }

/* czeka (tylko staging) */
.p13n .p13n-czeka > p {
  margin: 0;
  padding: 16px 18px;
  border: 3px dashed #f9a825;
  border-radius: var(--p-radius);
  background: #fff8e1;
  color: var(--p-deep);
}

/* ---------- zakładki stron urządzeń (Task 10) ----------
   Bez JS: nav[hidden], wszystkie panele widoczne. Telefon: menu przyklejone na dole (ikona nad nazwą),
   komputer (≥ 768): pasek pod hero, przyklejony u góry. Aktywna: kolor + pogrubienie + belka. */
.p13n nav.p13n-tabs[hidden] { display: none; }
.p13n nav.p13n-tabs:not([hidden]) {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: #fff;
  border-top: 3px solid var(--p-accent);
  box-shadow: 0 -6px 18px rgba(4, 37, 60, .10);
  padding: 4px 4px env(safe-area-inset-bottom, 0px);
}
.p13n div.p13n-tablist {
  display: flex;
  justify-content: center;
  max-width: var(--p-max);
  margin: 0 auto;
}
.p13n nav.p13n-tabs button.p13n-tab {
  flex: 1 1 0;
  min-width: 0;
  max-width: 120px;
  min-height: 56px;
  margin: 0;
  padding: 6px 2px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  position: relative;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  color: var(--p-dark);
  font: 600 12px/1.15 'Montserrat', system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  cursor: pointer;
}
.p13n nav.p13n-tabs button.p13n-tab:hover { background: var(--p-tint); color: var(--p-dark); }
.p13n nav.p13n-tabs span.p13n-tab-ikona {
  display: grid;
  place-items: center;
  width: 34px; height: 30px;
  border-radius: 999px;
  font-size: 19px;
  line-height: 1;
}
.p13n nav.p13n-tabs span.p13n-tab-nazwa { overflow-wrap: anywhere; }
/* 4+ zakładek (memory: „Wyszukiwanka”) - mniejsza czcionka zamiast łamania słowa w środku (2026-10-12) */
.p13n nav.p13n-tabs:has(button.p13n-tab:nth-of-type(4)) span.p13n-tab-nazwa { overflow-wrap: normal; word-break: keep-all; font-size: 11px; letter-spacing: -.01em; }
@media (max-width: 340px) {
  .p13n nav.p13n-tabs:has(button.p13n-tab:nth-of-type(4)) span.p13n-tab-nazwa { font-size: 10px; }
}
.p13n nav.p13n-tabs button.p13n-tab[aria-selected="true"] { color: var(--p-primary); font-weight: 800; }
.p13n nav.p13n-tabs button.p13n-tab[aria-selected="true"] span.p13n-tab-ikona { background: color-mix(in srgb, var(--p-light) 35%, #ffffff); }
.p13n nav.p13n-tabs button.p13n-tab[aria-selected="true"]::before {   /* belka nad aktywną (telefon) */
  content: "";
  position: absolute;
  top: -7px; left: 22%; right: 22%;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--p-primary);
}
/* stopka nie chowa się pod dolnym menu */
body.p13n-body.p13n-ma-zakladki { padding-bottom: var(--p13n-nav-h, calc(80px + env(safe-area-inset-bottom, 0px))); }
section.p13n-panel[hidden] { display: none; }
@media (max-width: 359px) {
  .p13n nav.p13n-tabs button.p13n-tab { font-size: 11px; }
}

/* ---------- stopka: granat + fala u góry ---------- */
.p13n-foot {
  position: relative;
  margin-top: 72px;
  padding: 24px var(--p-gut) 32px;
  background: var(--p-deep);
  color: #fff;
  text-align: center;
  font-size: 15px;
}
.p13n-foot::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 34px;
  background: var(--p-deep);
  -webkit-mask: var(--p-fala) center / 100% 100% no-repeat;
          mask: var(--p-fala) center / 100% 100% no-repeat;
  transform: scaleY(-1);
}
.p13n-foot p { margin: 0 0 6px; }

/* ---------- znaki Funduszy Europejskich (klient.fe) - białe tło, pełna czytelność ---------- */
.p13n-fe {
  max-width: 960px;
  margin: 56px auto 0;
  padding: 20px var(--p-gut) 8px;
  background: #fff;
  text-align: center;
}
.p13n-fe-tekst { margin: 0 0 14px; font-weight: 700; color: var(--p-deep); font-size: 16px; }
.p13n-fe-znaki { display: block; width: 100%; max-width: 800px; height: auto; margin: 0 auto; }
.p13n-foot a, .p13n-foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- fokus ---------- */
.p13n-body a:focus-visible,
.p13n-body button:focus-visible,
.p13n-body summary:focus-visible {
  outline: 3px solid var(--p-dark);   /* dark na białym 11,3:1 (accent miał 2,3:1 - za mało, WCAG 1.4.11) */
  outline-offset: 3px;
}
.p13n-foot a:focus-visible,
.p13n-foot button:focus-visible { outline-color: #fff; }   /* stopka ma tło deep - tam biały */

/* tekst tylko dla czytników ekranu */
.p13n-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- ≥ 768 px: obrazek | tekst ---------- */
@media (min-width: 768px) {
  .p13n-hero { padding: 56px var(--p-gut) 110px; }
  .p13n-blok { margin-top: 56px; }
  .p13n-powitanie-in,
  .p13n-intro-in,
  .p13n-etap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .p13n-intro-in, .p13n-etap { padding: 24px; }
  /* intro: kolumna obrazka dopasowana do treści, maskotka ograniczona wysokością */
  div.p13n-intro-in:has(> img) { grid-template-columns: auto minmax(0, 620px); justify-content: center; align-items: center; }
  div.p13n-intro-in > img.p13n-intro-img { width: auto; max-width: 100%; max-height: 220px; object-fit: contain; margin: 0; justify-self: center; }
  .p13n-dymek { padding: 28px 30px; font-size: 20px; }
  .p13n-dymek::before {             /* ogonek w lewo, do postaci */
    left: -14px; top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }
  .p13n-powitanie-in:not(:has(> img)),
  .p13n-intro-in:not(:has(> img)),
  .p13n-etap:not(:has(> img)) { grid-template-columns: minmax(0, 1fr); }
  .p13n-etap:nth-child(even) > .p13n-etap-img { order: 2; }
  .p13n-nawyk { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* zakładki: pasek pod hero, przyklejony u góry; nazwa obok ikony */
  body.p13n-body.p13n-ma-zakladki { padding-bottom: 0; }
  .p13n nav.p13n-tabs:not([hidden]) {
    position: sticky;
    top: 0;
    bottom: auto;
    border-top: 0;
    border-bottom: 3px solid var(--p-accent);
    box-shadow: 0 6px 14px rgba(4, 37, 60, .08);
    padding: 8px var(--p-gut);
  }
  .p13n div.p13n-tablist { gap: 6px; flex-wrap: wrap; }
  .p13n nav.p13n-tabs button.p13n-tab {
    flex: 0 1 auto;
    max-width: none;
    min-height: 48px;
    flex-direction: row;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 16px;
  }
  .p13n nav.p13n-tabs span.p13n-tab-ikona { width: auto; height: auto; background: none !important; font-size: 20px; }
  .p13n nav.p13n-tabs span.p13n-tab-nazwa { overflow-wrap: normal; white-space: nowrap; }
  .p13n nav.p13n-tabs button.p13n-tab[aria-selected="true"] { background: var(--p-primary); color: #fff; }
  .p13n nav.p13n-tabs button.p13n-tab[aria-selected="true"]::before {   /* podkreślenie pod nazwą (komputer) */
    top: auto; bottom: 7px; left: 50%; right: auto;
    width: 28px; height: 3px;
    border-radius: 3px;
    background: var(--p-light);
    transform: translateX(-50%);
  }
  /* wizualizacja w pierwszym panelu pod paskiem - bez nachodzenia na falę */
  section.p13n-panel > figure.p13n-wiz { margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .p13n .p13n-kafel, .p13n-odp summary::before { transition: none; }
}

/* Odsłuchaj całej wizytówki w nagłówku (render.php, 2026-10-15) - bez dolnego marginesu przycisku z opisu */
.p13n .p13n-czytaj--strona { margin: 0; }
/* Telefon: sama ikona obok logo (jak Odsłuchaj na stronach urządzeń), napis ukryty tylko wizualnie - czytnik ekranu go słyszy.
   Z napisem przycisk (177 px) nie mieścił się obok logo przy 375 px i spadał do drugiego rzędu. */
@media (max-width: 479px) {
  .p13n .p13n-czytaj--strona { padding: 8px 13px; }
  .p13n .p13n-czytaj--strona .label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}