/* ==========================================================================
   Chiropraktyka Poznan — Centrum Trzy Diamenty
   main.css — 1:1 z projektem HTML. Wartosci przepisane z makiety, nie zmieniac
   bez uzgodnienia. Kolejnosc sekcji: tokeny, baza, layout, naglowek, bloki,
   stopka, tresc wpisu, mobile, animacje.
   ========================================================================== */

:root {
  --ink: #15191f;
  --ink-2: #3f4854;
  --ink-3: #59636f;
  --ink-4: #6b7480;
  --line: #dfe3e8;
  --line-2: #c9d1da;
  --tint: #eef2f8;
  --bg: #f6f7f9;
  --white: #ffffff;
  --primary: #1a4fa0;
  --primary-dark: #143c7c;
  --primary-soft: #8fb0e6;
  --primary-pale: #d3e0f2;
  --dark: #101720;
  --dark-ink: #e6eaee;
  --dark-ink-2: #aab4c0;
  --warn-bg: #fdf3f1;
  --warn-line: #e8cdc7;
  --warn-ink: #9c2b1e;
  --radius: 4px;
  --wrap: 1180px;
  --gut: 32px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------- baza --- */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primary-dark); }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: Archivo, system-ui, sans-serif; letter-spacing: -0.02em; }
img { max-width: 100%; }
table { border-collapse: collapse; }
figure { margin: 0; }

h1 { font-weight: 700; font-size: clamp(31px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -0.03em; }
.h1-sub { font-weight: 700; font-size: clamp(28px, 3.25vw, 41px); line-height: 1.08; letter-spacing: -0.03em; }
h2 { font-weight: 700; font-size: clamp(23px, 2.35vw, 31px); line-height: 1.15; }
.h2-doc { font-weight: 700; font-size: 26px; line-height: 1.18; }
h3 { font-weight: 600; font-size: 18px; line-height: 1.25; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
.eyebrow-dark { color: var(--primary-soft); }
.lead { font-size: 19px; line-height: 1.65; color: var(--ink-3); text-wrap: pretty; }
.body { font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.meta { font-size: 15px; color: var(--ink-4); }
.note { font-size: 14px; color: var(--ink-4); }

/* ------------------------------------------------------------- layout --- */
.gut { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.sec { padding: 76px 0; }
.sec-sm { padding: 64px 0; }
.sec-tint { background: var(--tint); }
.sec-white { background: var(--white); }
.sec-dark { background: var(--dark); color: var(--dark-ink); }
.sec-dark h2, .sec-dark h3 { color: var(--white); }
.sec-dark p { color: var(--dark-ink-2); }

.g-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.g-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.g-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.g-doc { display: grid; grid-template-columns: 1fr 320px; gap: 64px; align-items: start; padding: 56px var(--gut) 80px; max-width: var(--wrap); margin: 0 auto; }
.g-doc > article { min-width: 0; }
.a-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
.a-side.a-side-luzna { position: static; }
.stack { display: flex; flex-direction: column; gap: 22px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; }
.push { margin-left: auto; }
.note.push { white-space: nowrap; }
.g-2 > *, .g-3 > *, .g-4 > * { min-width: 0; }

.cards { display: grid; gap: 16px; }
.cards > * { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); padding: 24px 22px; }

/* ------------------------------------------------------------ naglowek -- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); }
.hdr { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); display: flex; align-items: center; gap: 20px; height: 68px; }
.brand { flex: none; display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand img { width: 34px; height: 34px; flex: none; }
.brand-name { font-family: Archivo; font-weight: 700; font-size: 16px; letter-spacing: -0.02em; white-space: nowrap; }
.brand-sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.nav-main { flex: 1 1 auto; align-self: stretch; display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.nav-main > a, .nav-item > span, .nav-item > a { padding: 8px 12px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav-main > a:hover, .nav-item:hover > span { color: var(--primary); }
.nav-item { position: static; align-self: stretch; display: flex; align-items: center; }
.nav-item > span { cursor: default; }
/* Panel kotwiczymy do lewej krawedzi zakladki, nie do jej srodka: przy
   pierwszej pozycji menu wysrodkowany panel wychodzil poza okno. */
.mega { position: absolute; top: 100%; left: auto; right: var(--gut); transform: none; width: 820px; max-width: calc(100vw - 48px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(16, 23, 32, 0.14); padding: 22px; display: none; z-index: 60; }
.nav-item.otwarty .mega { display: block; }
/* Panel otwiera skrypt (main.js), dodajac klase "otwarty" dokladnie jednej
   pozycji menu. Sam :hover nie wystarczal: panele sa szersze od zakladek. */
.mega-grid { display: grid; grid-template-columns: 1fr 1fr minmax(210px, 0.85fr); gap: 4px 32px; align-items: start; }
.mega a { display: block; padding: 10px 12px; font-size: 15px; color: var(--ink); text-decoration: none; border-radius: var(--radius); }
.mega a:hover { background: var(--tint); color: var(--primary); }
.mega-cta { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hdr-book { flex: none; border: 1px solid var(--line-2); color: var(--ink); padding: 10px 16px; border-radius: var(--radius); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.hdr-book:hover { border-color: var(--primary); color: var(--primary); }
.hdr-tel { flex: none; background: var(--primary); color: var(--white); padding: 11px 18px; border-radius: var(--radius); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.hdr-tel:hover { background: var(--primary-dark); color: var(--white); }
.m-burger { display: none; flex: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.m-panel { position: fixed; inset: 60px 0 0; background: var(--white); overflow-y: auto; padding: 8px 20px 104px; z-index: 55; }
.m-panel a, .m-panel button { display: block; width: 100%; text-align: left; padding: 14px 4px; font-size: 17px; color: var(--ink); text-decoration: none; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }

/* --------------------------------------------------------------- hero --- */
.hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: end; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.hero-copy { min-width: 0; padding: 80px 0 88px; }
.hero-media { position: relative; min-width: 0; align-self: stretch; min-height: 460px; }
.hero-media img { position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }
.trust { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 30px; }
.trust-stat { display: flex; flex-direction: column; }
.trust-num { font-family: Archivo; font-weight: 700; font-size: 22px; line-height: 1.1; }
.trust-lab { font-size: 14px; color: var(--ink-4); }

/* ------------------------------------------------------------ przyciski - */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius); font-size: 16px; font-weight: 600; text-decoration: none; padding: 16px 24px; white-space: nowrap; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--primary); color: var(--white); }
.btn-primary:hover { background: var(--primary-dark); color: var(--white); }
.btn-ghost { background: var(--white); border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-white { background: var(--white); color: var(--primary-dark); padding: 15px 26px; }
.btn-white:hover { background: var(--tint); color: var(--primary-dark); }
.btn-outline-white { border-color: rgba(255, 255, 255, 0.55); color: var(--white); padding: 15px 22px; }
.btn-outline-white:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); }
.btn-block { display: block; width: 100%; text-align: center; padding: 14px 18px; }

/* --------------------------------------------------------------- bloki -- */
.card-h { font-weight: 600; font-size: 20px; line-height: 1.25; }
.card-p { font-size: 16px; line-height: 1.7; color: var(--ink-3); margin-top: 8px; }
.card-media { position: relative; height: 150px; margin: -22px -22px 8px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--tint); }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kat { font-family: Archivo; font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-4); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.split > div { background: var(--white); padding: 28px 26px; }
.list-dot { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.list-dot > li { position: relative; padding-left: 18px; }
.list-dot > li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }

.step { padding-left: 24px; border-left: 2px solid var(--primary); }
.step h3 { font-weight: 600; font-size: 17px; line-height: 1.3; }
.step p { font-size: 16px; line-height: 1.7; color: var(--ink-3); margin-top: 8px; }

.box { border-radius: var(--radius); padding: 28px 30px; }
.box-info { background: var(--tint); border: 1px solid var(--line); }
.box-warn { background: var(--warn-bg); border: 1px solid var(--warn-line); }
.box-warn h3 { color: var(--warn-ink); }
.box-warn .box-emph { color: var(--warn-ink); font-weight: 600; }

.cta-lg { margin-top: 44px; background: var(--primary); color: var(--white); border-radius: var(--radius); padding: 38px 36px; }
.cta-lg h2 { color: var(--white); font-size: 23px; line-height: 1.15; }
.cta-lg p { font-size: 17px; line-height: 1.7; color: var(--primary-pale); margin-top: 12px; max-width: 42em; }
.cta-lg a { color: var(--white); }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex-shrink: 0; margin-top: 22px; }

.t-wrap { overflow-x: auto; margin-top: 20px; -webkit-overflow-scrolling: touch; }
.t-wrap > table { margin-top: 0 !important; width: 100%; font-size: 16px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.t-wrap.t-wide > table { min-width: 620px; }
.t-wrap th { text-align: left; background: var(--tint); padding: 13px 16px; font-family: Archivo; font-weight: 600; font-size: 15px; }
.t-wrap td { padding: 15px 16px; color: var(--ink-2); }
.t-wrap tbody tr { background: var(--white); }
.t-wrap tbody tr:nth-child(even) { background: #fafbfc; }
.t-wrap td:first-child { color: var(--ink); font-weight: 600; }

.kv { display: grid; grid-template-columns: 132px 1fr; gap: 10px 16px; }
.kv2 { display: grid; grid-template-columns: 1fr 1.3fr; }
.badge-num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--tint); color: var(--primary); font-family: Archivo; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.side-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; }
.side-links { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.side-links > div { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; font-size: 16px; }
.ratio-16-9 { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; }
.wideo-zaslepka { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--dark-ink-2); background: rgba(255, 255, 255, 0.06); }
.wideo-siatka figcaption div:first-child { font-size: 17px; }
.ratio-16-9 > iframe, .ratio-16-9 > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.figure-cover { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint); }
.figure-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------------------- stopka -- */
.site-footer { background: var(--dark); color: var(--dark-ink); padding: 60px 0 32px; }
.site-footer a { color: var(--dark-ink); text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.g-foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.foot-h { font-family: Archivo; font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: #8b95a1; margin-bottom: 14px; }
.foot-list { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.foot-bottom { margin-top: 44px; padding-top: 24px; border-top: 1px solid #26303c; display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font-size: 14px; color: #8b95a1; }
.social { display: flex; gap: 10px; }
.social a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #26303c; border-radius: var(--radius); }
.social a:hover { border-color: #48566a; }

/* --------------------------------------------------------- tresc wpisu -- */
.wpis-tresc > * + * { margin-top: 16px; }
.wpis-tresc p { font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.wpis-tresc h2 { font-weight: 700; font-size: 26px; line-height: 1.18; color: var(--ink); margin-top: 44px; }
.wpis-tresc h3 { font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--ink); margin-top: 30px; }
.wpis-tresc ul { display: flex; flex-direction: column; gap: 9px; }
.wpis-tresc ul > li { position: relative; padding-left: 20px; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.wpis-tresc ul > li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.wpis-tresc ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.wpis-tresc ol > li { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.wpis-tresc blockquote { margin: 0; padding: 22px 26px; background: var(--tint); border-left: 3px solid var(--primary); border-radius: 0 var(--radius) var(--radius) 0; font-size: 18px; line-height: 1.65; color: var(--ink-2); }
.wpis-tresc table { width: 100%; font-size: 16px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.wpis-tresc th { text-align: left; background: var(--tint); padding: 13px 16px; font-family: Archivo; font-weight: 600; font-size: 15px; }
.wpis-tresc td { padding: 15px 16px; color: var(--ink-2); }
.wpis-tresc img { border-radius: var(--radius); }

/* ------------------------------------------------------- pasek mobilny -- */
.m-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(16, 23, 32, 0.08); }
.m-cta > a { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 0 8px; min-height: 52px; border-radius: var(--radius); font-size: 16px; font-weight: 600; text-decoration: none; }
.m-cta .book { background: var(--primary); color: var(--white); }
.m-cta .tel { background: var(--white); border: 1px solid var(--primary); color: var(--primary-dark); }

/* -------------------------------------------------------------- mobile -- */
@media (max-width: 1180px) {
  .hdr { gap: 12px; }
  .brand-sub { display: none; }
  .nav-main > a, .nav-item > span, .nav-item > a { padding-left: 6px; padding-right: 6px; font-size: 14px; }
  .hdr-tel { padding-left: 14px; padding-right: 14px; }
  .hdr-book { padding-left: 12px; padding-right: 12px; font-size: 14px; }
}
@media (max-width: 1080px) {
  .g-doc { grid-template-columns: 1fr; gap: 40px; }
  .a-side { position: static; top: auto; }
}
@media (max-width: 1040px) { .hdr-book { display: none; } }
@media (max-width: 1000px) { .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) { .hero { grid-template-columns: 1fr; } .hero-media { height: 380px; } .hero-portret { inset: 0; aspect-ratio: auto; } }
@media (max-width: 900px) {
  .hdr { padding-left: 20px; padding-right: 20px; height: 60px; }
  .nav-main, .hdr-tel { display: none; }
  .m-burger { display: flex; margin-left: auto; }
  .m-cta { display: grid; }
  .site-footer { padding-bottom: 116px; }
  .gut, .g-doc { padding-left: 20px; padding-right: 20px; }
  .g-3, .g-foot { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: clamp(26px, 7.2vw, 33px); }
  .mega { position: static; transform: none; min-width: 0; box-shadow: none; border: 0; padding: 0; }
}
@media (max-width: 760px) {
  .g-2, .g-3, .g-4, .g-foot, .split, .mega-grid { grid-template-columns: 1fr; }
  .g-doc { gap: 32px; }
}
@media (max-width: 700px) {
  .kv, .kv2 { grid-template-columns: 1fr; gap: 6px; }
  .hero-media { height: 300px; }
  .hero-copy { padding: 44px 0 32px; text-align: center; }
  .hero-copy h1, .hero-copy .lead, .hero-copy .eyebrow { margin-left: auto; margin-right: auto; }
  .hero-copy .row, .trust, .hero-staty { justify-content: center; }
  .trust-stat { align-items: center; text-align: center; }
  .pasek-zaufania .gut { justify-content: center; text-align: center; }
  .pasek-zaufania .gut > * { justify-content: center; }
  .push { margin-left: 0; }
  .note.push { white-space: normal; margin-left: auto; text-align: right; }
  .cta-actions { flex-shrink: 1; min-width: 0; width: 100%; }
  .cta-actions .btn { flex: 1 1 auto; }
  .cta-pas-inner { flex-direction: column; align-items: stretch; }
  .sec, .sec-sm { padding-top: 46px; padding-bottom: 46px; }
  .cta-lg { padding: 26px 22px; margin-top: 32px; }
  .box { padding: 22px 20px; }
  h1 { letter-spacing: -0.02em; }
}
@media (max-width: 420px) { .m-cta > a { font-size: 15px; gap: 6px; } }

/* ----------------------------------------------------------- animacje --- */
@media (prefers-reduced-motion: no-preference) {
  .e1, .e2, .e3, .e4, .e5 { animation: enter 0.62s var(--ease) both; }
  .e1 { animation-delay: 0.04s; } .e2 { animation-delay: 0.13s; } .e3 { animation-delay: 0.22s; }
  .e4 { animation-delay: 0.31s; } .e5 { animation-delay: 0.4s; }
  @keyframes enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .hero-media img { animation: heroIn 0.9s var(--ease) both; animation-delay: 0.1s; }
  @keyframes heroIn { from { opacity: 0; transform: translateY(24px) scale(0.985); } to { opacity: 1; transform: none; } }
  @keyframes rvIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes hdrSh { from { box-shadow: 0 2px 14px rgba(16, 23, 32, 0); } to { box-shadow: 0 2px 14px rgba(16, 23, 32, 0.09); } }
  @supports (animation-timeline: view()) {
    .rv { animation: rvIn 0.62s var(--ease) both; animation-timeline: view(); animation-range: entry 0% entry 46%; }
    .site-header { animation: hdrSh 1ms linear both; animation-timeline: scroll(); animation-range: 8px 48px; }
  }
  .cards > *, .lift { transition: transform 0.22s var(--ease), box-shadow 0.22s ease, border-color 0.22s ease; }
  .cards > *:hover, .lift:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(16, 23, 32, 0.09); }
  .nav-main > a, .nav-item > span { transition: color 0.18s ease; }
  a[href^="tel:"], .m-cta > a { transition: transform 0.16s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
  a[href^="tel:"]:active, .m-cta > a:active { transform: scale(0.97); }
  figure img, .cards img { transition: transform 0.5s var(--ease); }
  .cards > *:hover img, figure:hover img { transform: scale(1.035); }
}

/* ------------------------------------------------------------- edytor --- */
.acf-block-preview .sec { padding: 32px 0; }

/* Bloki pisane pod uklad "dokument" (kroki, tabela, box, dwie listy, mapa)
   zebrane w jedna kolumne na stronach pelnoszerokosciowych: bez tego linia
   tekstu ciagnelaby sie przez cale 1180 px, a kazdy blok mialby wlasna sekcje. */
.kolumna-doc { max-width: 860px; }
.kolumna-doc > *:first-child { margin-top: 0; }
.kolumna-doc > h2.h2-doc:first-child { margin-top: 0; }

/* Plansza mapy bolu musi przylegac do zdjecia, inaczej punkty liczone
   w procentach rozjezdzaja sie po wyzszej komorce siatki. */
.strefa-plansza { align-self: start; }

/* Pasek zaufania w hero: ocena i statystyki w jednym rzedzie, a gdy sie nie
   miesci, statystyki schodza pod ocene i zostaja przy lewej krawedzi.
   Wczesniej margin-left:auto spychal je w prawo i po zawinieciu wisialy same. */
.hero-staty { display: flex; flex-wrap: wrap; gap: 10px 28px; }

/* Ocena w hero: gwiazdki obok liczby, jak w projekcie. */
.gwiazdki { display: inline-flex; gap: 2px; align-items: center; }
.gwiazdki svg { display: block; }

/* Kafelki, odmiana z wizualizacji: bez ramki, kreska u gory i ikona. */
.cards.styl-kreska > * { border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: none; padding: 18px 0 0; }
.card-ikona { display: block; color: var(--primary); margin-bottom: 14px; }
.card-link { color: var(--primary); font-weight: 500; }
.cards.styl-kafelek .card-link, .cards:not(.styl-kreska) .card-link { display: inline-block; margin-top: 14px; font-size: 15px; }
.cards.styl-kreska .card-link { text-decoration: underline; text-underline-offset: 3px; }

/* Kroki w odmianie z projektu: wprowadzenie po lewej, etapy po prawej. */
.kroki-2kol { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.kroki-linki { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.kroki-linki a { font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.wideo-link { color: var(--white); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
@media (max-width: 900px) { .kroki-2kol { grid-template-columns: 1fr; gap: 32px; } }

/* W niebieskiej ramce CTA regula ".cta-lg a" nadpisywala kolor przycisku
   i telefon stawal sie bialy na bialym tle. */
.cta-lg .btn-white { color: var(--primary-dark); }
.cta-lg .btn-outline-white { color: var(--white); }

/* Tabelka danych gabinetu w sekcji "media i tekst": etykieta w lewej kolumnie,
   wartosc w prawej, wiersze rozdzielone wloskowata linia. */
.dane-lista { display: grid; grid-template-columns: 132px 1fr; margin-top: 22px; border-top: 1px solid var(--line); }
.dane-lista dt { padding: 14px 0; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); border-bottom: 1px solid var(--line); }
.dane-lista dd { margin: 0; padding: 14px 0; color: var(--ink-2); border-bottom: 1px solid var(--line); }
@media (max-width: 620px) { .dane-lista { grid-template-columns: 1fr; } .dane-lista dt { border-bottom: 0; padding-bottom: 2px; } }

/* CTA jako pas przez cala szerokosc okna: tekst po lewej, przyciski po prawej. */
.cta-pas { background: var(--primary); color: var(--white); padding: 44px 0; }
.cta-pas-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.cta-pas h2 { color: var(--white); font-size: 25px; line-height: 1.2; max-width: 18em; }
.cta-pas p { font-size: 17px; line-height: 1.7; color: var(--primary-pale); margin-top: 12px; max-width: 42em; }
.cta-pas .cta-actions { margin-top: 0; }

/* Megamenu w odmianie z projektu: nazwane kolumny i kafelek kontaktu. */
.mega-kol-tytul { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 14px; }
.mega-karta { background: var(--tint); border-radius: var(--radius); padding: 22px 24px; align-self: start; }
.mega-karta strong { display: block; font-family: Archivo; font-weight: 700; font-size: 17px; color: var(--ink); }
.mega-karta p { font-size: 15px; line-height: 1.6; color: var(--ink-3); margin-top: 10px; }
.mega-karta .tel { display: inline-block; margin-top: 14px; font-family: Archivo; font-weight: 700; font-size: 19px; color: var(--primary); text-decoration: none; }

/* Kolumna boczna zlozona z blokow: odstepy jak w karcie kontaktu. */
.kolumna-boczna { display: flex; flex-direction: column; gap: 20px; }
.kolumna-boczna > *:first-child { margin-top: 0; }
.kolumna-boczna .box, .kolumna-boczna .cta-lg { margin-top: 0; }


/* Naglowek podstrony ze zdjeciem po prawej (Turnusy, O mnie). */
.naglowek-2kol { display: grid; grid-template-columns: 1fr 0.8fr; gap: 56px; align-items: center; }
.naglowek-foto { aspect-ratio: 4 / 3; border: 0; border-radius: 0; background: none; }
.naglowek-foto img { object-position: center top; }
.opinia-doc { margin: 20px 0 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; }
.opinia-doc p { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.opinia-doc footer { font-size: 15px; color: var(--ink-3); margin-top: 14px; }
.opinia-doc footer span { font-weight: 600; color: var(--ink); }
@media (max-width: 900px) { .naglowek-2kol { grid-template-columns: 1fr; gap: 28px; } }

/* Przyciski w CTA maja miec te sama wysokosc i te same odstepy. */
.btn-outline-white { padding: 15px 26px; }

/* Telefon w tabelce danych kontaktowych: wyrozniony, jak w projekcie. */
.dane-tel { font-family: Archivo; font-weight: 700; font-size: 24px; color: var(--primary); text-decoration: none; }

/* Galeria justowana: kafle rosna proporcjonalnie, skany widac w calosci.
   Ostatni wiersz nie rozciaga sie na sile, stad duzy flex-grow na wypelniaczu. */
.galeria-just { display: flex; flex-wrap: wrap; gap: 10px; }
.gal-kafel { flex: 1 1 auto; max-height: calc(var(--wys) * 1.6); padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); cursor: zoom-in; overflow: hidden; }
.gal-kafel img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gal-kafel:hover { border-color: var(--primary-soft); }

.gal-podglad { position: fixed; inset: 0; z-index: 200; background: rgba(16, 23, 32, 0.92); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px; }
.gal-podglad[hidden] { display: none; }
.gal-podglad figure { max-width: min(92vw, 1100px); max-height: 88vh; display: flex; flex-direction: column; gap: 10px; }
.gal-podglad img { max-width: 100%; max-height: 82vh; object-fit: contain; background: var(--white); border-radius: var(--radius); }
.gal-podglad figcaption { color: var(--dark-ink-2); font-size: 14px; text-align: center; }
.gal-zamknij, .gal-poprz, .gal-nast { border: 0; background: rgba(255, 255, 255, 0.12); color: var(--white); width: 44px; height: 44px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.gal-zamknij { position: absolute; top: 20px; right: 24px; font-size: 22px; }
.gal-zamknij:hover, .gal-poprz:hover, .gal-nast:hover { background: rgba(255, 255, 255, 0.22); }
@media (max-width: 700px) { .gal-poprz, .gal-nast { position: absolute; bottom: 24px; } .gal-poprz { left: 24px; } .gal-nast { right: 24px; } }

/* Kolumna panelu z wlasnym naglowkiem; odnosniki bez wciecia, jak w projekcie. */
.mega-kol { min-width: 0; }
.mega-kol > a { padding: 10px 14px; margin: 0 -14px 2px; }
.m-grupa-lista a { padding-left: 4px !important; color: var(--ink-2) !important; }
.m-grupa-lista a:last-child { border-bottom: 0; }
.m-grupa-tytul { display: block; padding: 12px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); }

/* Odnosniki prawne w stopce: zwykly rzad tekstu. Wczesniej dziedziczyly klase
   ikon spolecznosciowych i wchodzily w kwadraty 38 px, wiec napisy na siebie nachodzily. */
.foot-prawne { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }
.foot-prawne li { list-style: none; }
.foot-prawne a { white-space: nowrap; }

/* CTA w kolumnie bocznej: zwarte, przyciski obok siebie. Dwa przyciski jeden
   pod drugim robily z sidebara slup wyzszy niz okno i "Powiazane tematy"
   znikaly pod krawedzia przy przewijaniu. */
.a-side .cta-lg { padding: 22px 22px 20px; }
.a-side .cta-lg h2 { font-size: 18px; }
.a-side .cta-lg p { font-size: 15px; line-height: 1.6; margin-top: 8px; }
.a-side .cta-actions { margin-top: 16px; gap: 8px; }
.a-side .cta-actions .btn { padding: 11px 14px; font-size: 14px; flex: 1 1 auto; }
.a-side .box { padding: 20px 22px; }
.a-side .box h3 { font-size: 17px; }
.a-side .list-dot { gap: 7px; font-size: 15px; }

/* =====================================================================
   2.3.0, poprawki klienta z 18.09.2026: wiekszy tekst i mocniejszy kontrast
   (wielu pacjentow slabo widzi), pasek z telefonem nad menu, plakietka
   w hero, okienko rejestracji online, widoczne zrodla.
   ===================================================================== */
:root { --ink-3: #454f5b; --ink-4: #56606c; --wrap: 1240px; }
body { font-size: 18px; }
.lead { font-size: 20px; }
.meta { font-size: 16px; }
.note { font-size: 15px; }
.eyebrow { font-size: 14px; }
.card-p, .step p, .list-dot, .t-wrap > table, .side-links > div { font-size: 17px; }
.wpis-tresc p, .wpis-tresc ul > li, .wpis-tresc ol > li { font-size: 18px; }
.card-h { font-size: 21px; }
.trust-lab { font-size: 16px; color: var(--ink-3); }
.trust-num { font-size: 26px; }
.foot-list { font-size: 16px; }
.foot-bottom, .foot-prawne { font-size: 15px; }
.site-footer p[style] { font-size: 16px !important; color: #c3cbd4 !important; }
.btn { font-size: 17px; }

/* Naglowek: pasek z godzinami, "Umow online" i telefonem, pod nim logo i menu. */
.hdr-top { background: var(--dark); color: var(--dark-ink); }
.hdr-top-in { max-width: var(--wrap); margin: 0 auto; padding: 6px var(--gut); display: flex; align-items: center; justify-content: flex-end; gap: 12px 18px; }
.hdr-godziny { margin-right: auto; font-size: 15px; color: var(--dark-ink-2); }
.hdr-top .hdr-book { border-color: rgba(255, 255, 255, 0.45); color: var(--white); padding: 7px 16px; font-size: 16px; }
.hdr-top .hdr-book:hover { border-color: var(--white); color: var(--white); background: rgba(255, 255, 255, 0.1); }
.hdr-top .hdr-tel { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; font-size: 18px; font-weight: 700; }
.hdr { height: 84px; }
.brand img { width: 60px; height: 60px; }
.brand-name { font-size: 19px; }
.brand-sub { font-size: 14px; }
.nav-main > a, .nav-item > span, .nav-item > a { font-size: 16px; padding: 8px 11px; font-weight: 600; }
.mega a { font-size: 16px; }
.a-side { top: 150px; }
@media (max-width: 1180px) {
  .nav-main > a, .nav-item > span, .nav-item > a { padding-left: 7px; padding-right: 7px; font-size: 15px; }
  .brand-name { font-size: 17px; }
}
@media (max-width: 1040px) { .hdr-top .hdr-book { display: inline-flex; } .brand-sub { display: none; } }
@media (max-width: 900px) {
  .hdr-top { display: none; }
  .hdr { height: 68px; }
  .brand img { width: 48px; height: 48px; }
  .m-panel { inset: 68px 0 0; }
}

/* Hero: etykieta z nazwa z wizytowki Google, obracana plakietka i pasek
   z haslem. Tla (owalu) pod portretem nie ma: odbiegalo od projektu. */
.hero-etykieta { display: inline-block; margin-top: 14px; padding: 10px 16px; background: var(--tint); border: 1px solid var(--line-2); border-radius: var(--radius); font-family: Archivo; font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--ink); }
/* Portret jest wpasowany (contain) i stoi przy dolnej krawedzi, wiec nad glowa
   zostaje pusty pas rosnacy z wysokoscia sekcji. Pudelko o proporcjach zdjecia
   trzyma plakietke przy glowie zamiast przy rogu kolumny. */
.hero-portret { position: absolute; inset: auto 0 0 0; aspect-ratio: 950 / 1154; }
.hero-portret > img:first-child { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }
/* .hero-media img (pelne tlo zdjecia) ma wyzsza specyficznosc, stad podwojna klasa. */
.hero-media .hero-plakietka { position: absolute; z-index: 2; inset: 2% 1% auto auto; width: 140px; height: 140px; object-fit: cover; border-radius: 50%; box-shadow: 0 10px 28px rgba(16, 23, 32, 0.22); }
.hero-pasek { background: var(--primary); color: var(--white); text-align: center; font-family: Archivo; font-weight: 700; font-size: clamp(20px, 2.4vw, 30px); letter-spacing: 0.03em; text-transform: uppercase; padding: 18px 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero-media .hero-plakietka { animation: ctdObrot 24s linear infinite; }
  @keyframes ctdObrot { to { transform: rotate(360deg); } }
}
@media (max-width: 700px) { .hero-media .hero-plakietka { width: 96px; height: 96px; top: 16px; } .hero-etykieta { font-size: 15px; } }

/* Pasek zaufania: wieksze logotypy i haslo zamiast drobnego druku. */
.pasek-zaufania .push { font-family: Archivo; font-weight: 700; font-size: 20px !important; color: var(--ink) !important; letter-spacing: 0.02em; text-transform: uppercase; }

/* Linki pod krokami ("Informacje dla pacjenta", "Artykuly i porady"): duze. */
.kroki-linki { gap: 14px; }
.kroki-linki a { font-family: Archivo; font-size: 21px; font-weight: 700; }

/* Statystyki w naglowku podstrony (O mnie): klient prosil o wieksze. */
.naglowek-2kol .trust-num, .sec-white .hero-staty .trust-num { font-size: 36px; }
.naglowek-2kol .trust-lab { font-size: 17px; }

/* CTA: tylko telefon, z podpisem zamiast przycisku "Umow online". */
.cta-tel-opis { font-family: Archivo; font-weight: 600; font-size: 17px; color: var(--white); }

/* Zrodla: rozwiniete i czytelne. */
.zrodla { margin-top: 44px; border-top: 1px solid var(--line); padding-top: 22px; }
.zrodla summary { font-family: Archivo; font-weight: 700; font-size: 22px; color: var(--ink); cursor: pointer; list-style: none; }
.zrodla ol { margin: 14px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.zrodla li { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.wpis-tresc .lista-zrodel a { word-break: break-word; }

/* Filmy: 5 sztuk, trzy w pierwszym rzedzie i dwa w drugim. */
.wideo-siatka { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* Okienko rejestracji online. */
.rej-okno { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 0; border-radius: 8px; padding: 32px 32px 26px; box-shadow: 0 24px 60px rgba(16, 23, 32, 0.35); color: var(--ink); }
.rej-okno::backdrop { background: rgba(16, 23, 32, 0.6); }
.rej-okno h2 { font-size: 25px; padding-right: 36px; }
.rej-lead { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin-top: 10px; }
.rej-zamknij { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--tint); font-size: 26px; line-height: 1; cursor: pointer; }
.rej-form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.rej-pole { display: flex; flex-direction: column; gap: 6px; }
.rej-pole label { font-weight: 600; font-size: 17px; }
.rej-pole input, .rej-pole textarea { font: inherit; font-size: 18px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--white); color: var(--ink); }
.rej-pole input:focus, .rej-pole textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.rej-info { font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.rej-zgoda { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.rej-zgoda input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.rej-form .btn { align-self: flex-start; }
.rej-ukryte { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rej-ok, .rej-blad { padding: 14px 16px; border-radius: var(--radius); font-weight: 600; }
.rej-ok { background: #e8f4ec; color: #1d5a33; }
.rej-blad { background: var(--warn-bg); color: var(--warn-ink); }
.rej-alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 16px; color: var(--ink-3); }
.rej-alt a { font-weight: 700; }
.rej-osadzony { max-width: 560px; margin-top: 20px; padding: 26px 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.rej-osadzony .rej-form { margin-top: 0; }

/* Zdjecia ze starej strony wstawione w tresc podstron. */
.wpis-tresc figure.foto { margin: 28px 0; }
.wpis-tresc figure.foto img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.wpis-tresc figure.foto figcaption { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.wpis-tresc figure.foto-pol { float: right; width: 44%; margin: 4px 0 16px 28px; }
@media (max-width: 700px) { .wpis-tresc figure.foto-pol { float: none; width: 100%; margin: 20px 0; } }
.wpis-tresc::after { content: ""; display: table; clear: both; }

/* Link do wizytowki Google pod kazdym blokiem opinii (klient: "link do Google opinie"). */
.opinie-google { margin-top: 24px; }
.opinie-google a { font-family: Archivo; font-weight: 700; font-size: 19px; }
.opinie-google a::after { content: " \2192"; }

/* 2.3.6, uwagi klienta 28.09: wieksze logo, mniejsze odstepy pod menu i miedzy sekcjami. */
.hdr { height: 96px; }
.brand img { width: 76px; height: 76px; }
.a-side { top: 162px; }
.hero-copy { padding: 36px 0 64px; }
.sec { padding: 60px 0; }
.sec-sm { padding: 52px 0; }
.stow-logo img { display: block; width: 100%; max-width: 360px; height: auto; }
.stow-link a { font-weight: 700; }
@media (max-width: 900px) {
  .hdr { height: 72px; }
  .brand img { width: 56px; height: 56px; }
  .m-panel { inset: 72px 0 0; }
}
@media (max-width: 700px) {
  .hero-copy { padding: 32px 0 28px; }
  .sec, .sec-sm { padding-top: 40px; padding-bottom: 40px; }
}
/* Referencje pacjentow (strona /referencje/, 314 wpisow ze starej strony). */
.referencje-lista { display: grid; gap: 20px; max-width: 52em; }
.referencje-lista .referencja { margin: 0; overflow-wrap: anywhere; }
.referencja footer { margin-top: 12px; font-size: 16px; color: var(--ink-3); }
.referencja footer strong { color: var(--ink); font-weight: 600; }
.referencja-nr { font-family: Archivo; font-weight: 700; color: var(--primary); margin-right: 4px; }

/* ----------------------------------------- zdjecia artykulow w calosci -- */
/* Klient 10.2026: zdjecia pokazuja, co robi i jak, wiec nic nie przycinamy. */
.wpis-foto { display: flex; justify-content: center; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint); }
.wpis-foto img { display: block; width: auto; max-width: 100%; height: auto; max-height: 640px; }
/* Karty wpisow: zdjecie w naturalnych proporcjach, bez kadrowania (nadpisuje wysokosc z atrybutu style). */
.card-media.card-media--cale { height: auto !important; }
.card-media--cale img { position: static; display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; }

/* Tabele w tresci wpisow na telefonie: nie rozpychaja strony (klient 10.2026, zrzut "Krazek miedzykregowy"). */
@media (max-width: 700px) {
  .wpis-tresc table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wpis-tresc th, .wpis-tresc td { overflow-wrap: break-word; }
  /* main.js dopisuje .tabela-karty i podpisy kolumn: wiersz = karta, bez przewijania w bok. */
  .wpis-tresc table.tabela-karty, .tabela-karty tbody, .tabela-karty thead, .tabela-karty tr, .tabela-karty td, .tabela-karty th { display: block; width: auto; }
  .tabela-karty .tabela-naglowek { display: none; }
  .tabela-karty tr { padding: 14px 16px; border-top: 1px solid var(--line); }
  .tabela-karty .tabela-naglowek + tr { border-top: 0; }
  .tabela-karty tr:empty { display: none; }
  .wpis-tresc .tabela-karty td, .wpis-tresc .tabela-karty th { padding: 4px 0; border: 0; background: none; }
  .tabela-karty td:first-child { font-weight: 600; color: var(--ink); font-size: 18px; }
  .tabela-karty td[data-etykieta]:not(:first-child)::before { content: attr(data-etykieta); display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-4); margin-top: 6px; }
}

/* -------------------------------------------------- dostepnosc: skip -- */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; background: var(--ink, #101720); color: #fff; border-radius: var(--radius); font-weight: 600; }
.skip-link:focus { top: 12px; }

/* ------------------------------------------- baner Cox Technic (USA) -- */
.baner-cox { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 26px 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint); text-decoration: none; color: inherit; }
.baner-cox:hover { border-color: currentColor; }
.baner-cox-tekst { max-width: 40em; }
.baner-cox-tytul { font-family: Archivo; font-weight: 700; font-size: 21px; line-height: 1.3; }
.baner-cox-opis { font-size: 17px; line-height: 1.6; color: var(--ink-3); margin-top: 6px; }
.baner-cox-btn { white-space: nowrap; }

/* Siatka zdjec w tresci (np. zdjecia RTG na stronie metody dr. Pierce'a).
   Zdjecia w calosci, bez przycinania; klik otwiera pelny plik. */
.wpis-tresc .foto-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 24px 0 8px; align-items: start; }
.wpis-tresc .foto-siatka figure.foto { margin: 0; }
.wpis-tresc .foto-siatka a { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: zoom-in; }
.wpis-tresc .foto-siatka img { display: block; width: 100%; height: 220px; object-fit: contain; border: 0; background: #fff; }
.wpis-tresc .foto-siatka figcaption { margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--ink-3); }
.wpis-tresc .foto-siatka-podpis { margin-top: 0; font-size: 15px; color: var(--ink-3); }
@media (max-width: 520px) { .wpis-tresc .foto-siatka { grid-template-columns: 1fr 1fr; gap: 10px; } .wpis-tresc .foto-siatka img { height: 160px; } }

/* Mniejsza przerwa miedzy naglowkiem podstrony a trescia (uwaga klienta 09.10):
   pierwszy srodtytul kolumny dokumentu bez gornego marginesu, kolumna blizej naglowka. */
.g-doc { padding-top: 40px; }
.g-doc > article > :first-child { margin-top: 0 !important; }

/* Trzy zdjecia technik manualnych na stronie glownej (uwaga klienta 09.10). */
.wpis-tresc .foto-trojka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wpis-tresc .foto-trojka figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); }
.wpis-tresc .foto-trojka img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
@media (max-width: 700px) { .wpis-tresc .foto-trojka { grid-template-columns: 1fr; } }

/* Stopka: ikony serwisow z podpisem pelnym slowem. */
.site-footer .social { flex-direction: column; align-items: flex-start; gap: 8px; }
.site-footer .social a { width: auto; height: auto; border: 0; gap: 10px; justify-content: flex-start; color: #d5dce4; text-decoration: none; font-size: 15px; }
.site-footer .social .social-ikona { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #26303c; border-radius: var(--radius); flex-shrink: 0; }
.site-footer .social a:hover .social-ikona { border-color: #48566a; }
.site-footer .social a:hover .social-podpis { color: #ffffff; text-decoration: underline; }

/* Telefon: bez pustego pasa miedzy ocena a portretem (uwaga 12.10). Pudelko ma
   wysokosc zdjecia, a nie stale min. 460 px z widoku desktopowego. */
@media (max-width: 700px) {
  .hero { gap: 0; }
  .hero-copy { padding-bottom: 8px; }
  .hero-media { min-height: 0; height: auto; }
  .hero-portret { position: relative; inset: auto; aspect-ratio: 950 / 1154; width: min(80%, 340px); margin: 0 auto; }
}

/* --------------------------------------------------------------------------
   CookieYes - baner zgod w stylu strony (12.10.2026). Wtyczka wpisuje kolory
   inline (style="" przez data-cky-tag), stad !important; prefiks html body
   dla specyficznosci ponad CSS wtyczki. "Akceptuj" i "Odrzuc" tej samej
   wielkosci (rownorzedny wybor, wymog RODO), "Dostosuj" jako link.
   -------------------------------------------------------------------------- */
html body .cky-consent-container,
html body .cky-modal,
html body .cky-preference-center { font-family: "Public Sans", system-ui, sans-serif; }

html body .cky-consent-container { width: 440px; max-width: calc(100vw - 32px); }
html body .cky-box-bottom-left { left: 24px; bottom: 24px; }
html body .cky-consent-container .cky-consent-bar {
  position: relative; overflow: hidden;
  background-color: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(16, 23, 32, 0.18);
  padding: 26px 26px 20px;
}
html body .cky-consent-container .cky-consent-bar::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--primary); }
html body .cky-consent-container .cky-title {
  font-family: Archivo, system-ui, sans-serif;
  color: var(--ink) !important; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 10px;
}
html body .cky-consent-container .cky-notice-des,
html body .cky-consent-container .cky-notice-des p { color: var(--ink-2) !important; font-size: 15px; line-height: 1.6; }
html body .cky-notice-des a,
html body .cky-preference-content-wrapper a { color: var(--primary) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

html body .cky-notice-btn-wrapper { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 18px; }
html body .cky-notice-btn-wrapper .cky-btn { margin: 0; }
html body .cky-notice-btn-wrapper .cky-btn-reject { order: 1; flex: 1 1 150px; }
html body .cky-notice-btn-wrapper .cky-btn-accept { order: 2; flex: 1 1 150px; }
html body .cky-notice-btn-wrapper .cky-btn-customize { order: 3; flex: 1 1 100%; }
html body .cky-btn {
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  min-height: 48px; padding: 12px 18px; border-radius: var(--radius);
  border: 1px solid transparent; opacity: 1;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
html body .cky-btn:hover { opacity: 1; }
html body .cky-btn-accept { color: #ffffff !important; background-color: var(--primary) !important; border-color: var(--primary) !important; }
html body .cky-btn-accept:hover { background-color: var(--primary-dark) !important; border-color: var(--primary-dark) !important; }
html body .cky-btn-reject,
html body .cky-btn-preferences { color: var(--primary-dark) !important; background-color: #ffffff !important; border-color: var(--primary) !important; }
html body .cky-btn-reject:hover,
html body .cky-btn-preferences:hover { color: #ffffff !important; background-color: var(--primary) !important; }
html body .cky-notice-btn-wrapper .cky-btn-customize {
  min-height: 32px; padding: 4px 6px;
  color: var(--primary) !important; background-color: transparent !important; border-color: transparent !important;
  text-decoration: underline; text-underline-offset: 4px;
}
html body .cky-notice-btn-wrapper .cky-btn-customize:hover { color: var(--primary-dark) !important; }
html body .cky-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Plakietka "ustawienia cookies" w rogu */
html body .cky-btn-revisit-wrapper { background-color: var(--primary) !important; width: 44px; height: 44px; box-shadow: 0 6px 18px rgba(16, 23, 32, 0.22); transition: transform 0.15s; }
html body .cky-btn-revisit-wrapper:hover { transform: scale(1.06); }
html body .cky-btn-revisit-wrapper .cky-btn-revisit img { width: 24px; height: 24px; }
html body .cky-revisit-bottom-left { left: 20px; bottom: 20px; }

/* Panel ustawien szczegolowych */
html body .cky-overlay { background: rgba(16, 23, 32, 0.5); }
html body .cky-preference-center { background-color: #ffffff !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: 0 24px 64px rgba(16, 23, 32, 0.25); }
html body .cky-preference-header { border-bottom: 1px solid var(--line) !important; }
html body .cky-preference-title { font-family: Archivo, system-ui, sans-serif; color: var(--ink) !important; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
html body .cky-preference-header .cky-btn-close:hover { background: var(--tint); }
html body .cky-preference-content-wrapper,
html body .cky-preference-content-wrapper p,
html body .cky-accordion-header-des,
html body .cky-accordion-header-des p,
html body .cky-gpc-wrapper .cky-gpc-desc { color: var(--ink-2) !important; font-size: 15px; line-height: 1.6; }
html body .cky-show-desc-btn { color: var(--primary) !important; font-weight: 600; text-decoration: underline; }
html body .cky-accordion { border-bottom: 1px solid var(--line) !important; }
html body .cky-accordion-btn { font-family: Archivo, system-ui, sans-serif; color: var(--ink) !important; font-size: 16px; font-weight: 700; }
html body .cky-always-active { color: #1e7a45 !important; font-weight: 600; }
html body .cky-accordion-chevron i,
html body .cky-accordion-chevron i::before { border-color: var(--ink) !important; }
html body .cky-switch input[type="checkbox"] { background: var(--line-2) !important; }
html body .cky-switch input[type="checkbox"]:checked { background: var(--primary) !important; }
html body .cky-audit-table,
html body .cky-audit-table .cky-cookie-des-table { background: var(--tint) !important; color: var(--ink-2) !important; border-radius: var(--radius); }
html body .cky-footer-wrapper { border-top: 1px solid var(--line) !important; }
html body .cky-prefrence-btn-wrapper { gap: 10px; flex-wrap: wrap; }
html body .cky-prefrence-btn-wrapper .cky-btn { flex: 1 1 140px; margin: 0; }
html body .cky-footer-shadow { display: none; }
html body .cky-footer-wrapper span { background: transparent; }

/* do 900 px jest dolny pasek .m-cta (ok. 72 px) - baner i plakietka nad nim */
@media (max-width: 900px) {
  html body .cky-consent-container { bottom: calc(84px + env(safe-area-inset-bottom)); }
  html body .cky-revisit-bottom-left { bottom: calc(86px + env(safe-area-inset-bottom)); left: 12px; }
}
@media (max-width: 560px) {
  html body .cky-consent-container { width: auto; max-width: none; left: 12px; right: 12px; }
  html body .cky-consent-container .cky-consent-bar { padding: 22px 18px 16px; }
  html body .cky-consent-container .cky-notice-des { max-height: 30vh; overflow-y: auto; }
  html body .cky-notice-btn-wrapper .cky-btn-reject,
  html body .cky-notice-btn-wrapper .cky-btn-accept { flex: 1 1 calc(50% - 5px); }
}
/* wtyczka do 440 px: przyciski w kolumnie + 24 px wciecia tekstu - nadpisane */
@media (max-width: 440px) {
  html body .cky-consent-container .cky-notice .cky-title,
  html body .cky-consent-container .cky-notice-des,
  html body .cky-consent-container .cky-notice-btn-wrapper { padding-left: 0; padding-right: 0; }
  html body .cky-consent-container .cky-notice-btn-wrapper { flex-direction: row; padding-top: 14px; }
  html body .cky-notice-btn-wrapper .cky-btn-reject { order: 1; }
  html body .cky-notice-btn-wrapper .cky-btn-accept { order: 2; margin-top: 0; }
  html body .cky-notice-btn-wrapper .cky-btn-customize { order: 3; }
  html body .cky-consent-container .cky-title { font-size: 17px; margin-bottom: 8px; }
  html body .cky-consent-container .cky-notice-des,
  html body .cky-consent-container .cky-notice-des p { font-size: 14px; line-height: 1.55; }
  html body .cky-consent-container .cky-notice-des { max-height: 24vh; overflow-y: auto; }
  html body .cky-btn { font-size: 14px; min-height: 46px; padding: 10px 12px; }
}
/* panel ustawien na telefonie: wtyczka ustawia przyciski w kolumnie, wiec bez flex-basis (inaczej rosna w pionie) */
@media (max-width: 576px) {
  html body .cky-prefrence-btn-wrapper .cky-btn { flex: 0 0 auto; width: 100%; min-height: 46px; }
}