/* ==========================================================================
   lek. dent. Beata Mateja-Kuncman – wspólny arkusz stylów
   Kolory i kroje pisma odczytane z CSS strony live (Wix).
   ========================================================================== */

/* ---------- Fonty (hostowane lokalnie, licencja SIL OFL): Lora (nagłówki), Nunito Sans (tekst) ---------- */
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/lora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/lora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/nunito-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/nunito-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Zmienne ---------- */
:root {
  /* Paleta: ciepły krem + klasyczny granat */
  --tlo: #F5F2EF;              /* tło główne */
  --tlo-wyroznione: #E7DFD7;   /* sekcje wyróżnione, pas na stronie Choroby przyzębia */
  --tlo-piaskowe: #E7DFD7;
  --tlo-stopka: #DDD3CB;       /* stopka: nieco ciemniejsza od pasów */
  --linia: #CBC4BC;
  --linia-jasna: #CBC4BC;
  --linia-ostra: #12263A;
  --tekst: #1A1A1A;
  --tekst-drugi: #4D4D4D;
  --granat: #12263A;           /* przyciski, logo, nagłówki wyróżnione */
  --granat-jasny: #24405E;     /* przycisk po najechaniu */
  --logo: #12263A;
  --akcent: #5F7C99;           /* numery 01, 02, 03 (tylko duże elementy) */

  --szeryf: "Lora", Georgia, "Times New Roman", serif;
  --bezszeryf: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;

  --h1: calc(clamp(2.25rem, 1.2rem + 3.6vw, 3.75rem) * 0.94);
  --h2: calc(clamp(1.9rem, 1.2rem + 2.3vw, 2.75rem) * 0.94);
  --h3: calc(clamp(1.6rem, 1.25rem + 1.2vw, 2rem) * 0.94);
  --h4: calc(clamp(1.35rem, 1.2rem + 0.6vw, 1.625rem) * 0.94);
  --h5: calc(1.25rem * 0.94);
  --h6: calc(1rem * 0.94);
  --p1: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --p2: 1rem;
  --p3: 1rem;

  --margines: clamp(1.25rem, 5vw, 4rem);
  --sekcja: clamp(3.5rem, 8vw, 7rem);
}

/* ---------- Podstawy ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; font-size: 102%; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--bezszeryf);
  font-size: var(--p2);
  line-height: 1.45;
  text-align: left;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--szeryf);
  font-weight: 500;
  color: var(--tekst);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--h1); line-height: 1; }
h2, .h2 { font-size: var(--h2); line-height: 1.05; }
h3, .h3 { font-size: var(--h3); line-height: 1.05; }
h4, .h4 { font-size: var(--h4); line-height: 1.1; }
h5, .h5 { font-size: var(--h5); line-height: 1.2; }
h6, .h6 { font-size: var(--h6); line-height: 1.2; }

p { margin: 0; }
p + p { margin-top: 1em; }
p, li, dd, blockquote { text-wrap: pretty; }
.pytania li, .opinia__autor { font-weight: 500; }
ul { margin: 0; padding: 0; }

a { color: inherit; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--granat);
  outline-offset: 3px;
}

.tylko-czytnik {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pomin {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--granat);
  color: var(--tlo);
}
.pomin:focus { top: 1rem; }

.kontener {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--margines);
}
.kontener--waski { max-width: 860px; }

.sekcja { padding-block: var(--sekcja); }
.sekcja--bez-gory { padding-top: 0; }
.sekcja--wyrozniona { background: var(--tlo-wyroznione); }
.srodek { text-align: center; }
.duzy { font-size: var(--p1); line-height: 1.35; }
.granat, .granat h1, .granat h2, .granat h3, .granat h4, .granat h5 { color: var(--granat); }

.nadtytul {
  margin: 0 0 0.9rem;
  font-family: var(--bezszeryf);
  font-size: var(--p2);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
}
.nadtytul--szeryf { font-family: var(--szeryf); }
.bez-lamania { white-space: nowrap; }

/* ---------- Przyciski ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.55rem 1.6rem;
  border: 1px solid var(--granat);
  border-radius: 0;
  background: var(--granat);
  color: var(--tlo);
  font: inherit;
  font-size: var(--p2);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.btn:hover { background: var(--granat-jasny); border-color: var(--granat-jasny); }
.btn--obrys {
  background: var(--tlo);
  color: var(--granat);
}
.btn--obrys:hover { background: var(--granat); border-color: var(--granat); color: var(--tlo); }
.btn--szeroki { width: 100%; }

/* ---------- Nagłówek ---------- */
.naglowek {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-block: 1.25rem;
  background: var(--tlo);
  border-bottom: 1px solid var(--linia);
  view-transition-name: naglowek;
}
.naglowek__wnetrze {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

.logo {
  display: inline-block;
  flex: none;
  font-family: var(--szeryf);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  color: var(--logo);
}
.logo span { display: block; }

.menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(1.25rem, 3vw, 3.5rem);
  list-style: none;
}
.menu a {
  display: inline-block;
  padding-block: 0.65rem;
  text-decoration: none;
  color: var(--tekst);
}
.menu a:hover,
.menu a[aria-current="page"] { text-decoration: underline; }
@media (min-width: 1180px) {
  .menu a {
    background: linear-gradient(currentColor, currentColor) left calc(100% - 0.55rem) / 0 1px no-repeat;
    transition: background-size 0.25s ease;
  }
  .menu a:hover,
  .menu a:focus-visible,
  .menu a[aria-current="page"] { text-decoration: none; background-size: 100% 1px; }
}

.menu-przycisk {
  display: none;
  margin-left: auto;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--granat);
  cursor: pointer;
}
.menu-przycisk svg { display: block; margin: auto; }
.menu-przycisk .ikona-zamknij { display: none; }
.menu-przycisk[aria-expanded="true"] .ikona-otworz { display: none; }
.menu-przycisk[aria-expanded="true"] .ikona-zamknij { display: block; }

@media (max-width: 1179px) {
  .naglowek { padding-block: 1rem; }
  .naglowek__wnetrze { flex-wrap: wrap; }
  .js .menu-przycisk { display: block; }
  .menu { flex-basis: 100%; }
  .js .menu { display: none; }
  .js .menu.jest-otwarte { display: block; max-height: calc(100vh - 5.5rem); max-height: calc(100dvh - 5.5rem); overflow-y: auto; }
  .menu ul {
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--linia);
  }
  .menu a {
    display: block;
    padding: 0.9rem 0.25rem;
    border-bottom: 1px solid var(--linia);
    font-size: 1.0625rem;
  }
}

/* ---------- Stopka ---------- */
.stopka {
  padding-block: clamp(2.5rem, 5vw, 3.75rem) 2.5rem;
  background: var(--tlo-stopka);
}
.stopka__siatka {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
}
.stopka__logo { justify-self: start; }
.stopka__srodek {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
  font-size: var(--p1);
}
.stopka__srodek p { margin: 0; }
.stopka__srodek .btn { margin-top: 0.6rem; min-width: 12.5rem; font-size: var(--p1); }
.stopka__zl { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--p3); color: var(--granat); }
.stopka__prawa {
  margin-top: 2.75rem;
  text-align: center;
  font-size: var(--p3);
}
@media (max-width: 719px) {
  .stopka__siatka { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .stopka__logo { justify-self: center; }
}

/* ---------- Siatki ogólne ---------- */
.siatka-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 5vw, 5rem);
}
.siatka-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem clamp(1.25rem, 3vw, 3rem);
}
@media (max-width: 899px) {
  .siatka-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .siatka-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 519px) {
  .siatka-4 { grid-template-columns: minmax(0, 1fr); }
}

.naglowek-sekcji { max-width: 46rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.naglowek-sekcji p { margin-top: 1rem; font-size: var(--p1); line-height: 1.35; }

.blok { position: relative; }
.blok h3, .blok h4 { margin-bottom: 0.9rem; }
.blok h3 a { text-decoration: none; }
.blok h3 a::before { content: ""; position: absolute; inset: -0.5rem; }
.blok h3 a::after { content: "\00a0→"; color: var(--akcent); }
.blok:hover h3 a { text-decoration: underline; text-underline-offset: 0.2em; }
.blok p { font-size: var(--p3); line-height: 1.4; }
.blok--wiekszy p { font-size: var(--p2); }

/* ---------- HOME: Masz problem z dziąsłami? ---------- */
.pytania {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem clamp(1.5rem, 6vw, 4.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.pytania li {
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--linia-ostra);
  font-family: var(--szeryf);
  font-size: var(--h5);
  line-height: 1.2;
}
.pytania a { display: block; padding-block: 0.65rem; text-decoration: none; }
.pytania a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.pytania-podsumowanie { max-width: 34rem; margin: 0 auto 1.75rem; text-align: center; font-size: var(--p3); }
@media (max-width: 719px) {
  .pytania { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

/* ---------- HOME: etapy 01–03 ---------- */
.etapy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.etap { padding: 0.5rem clamp(1.25rem, 3vw, 2.5rem) 1rem; border-left: 1px solid var(--linia-ostra); }
.etap:first-child { border-left: 0; padding-left: 0; }
.etap__numer { display: block; font-family: var(--szeryf); font-size: var(--h2); line-height: 1; margin-bottom: 2rem; color: var(--akcent); }
.etap h3 { font-size: var(--h5); margin-bottom: 0.9rem; }
.etap p { font-size: var(--p3); line-height: 1.4; }
@media (max-width: 719px) {
  .etapy { grid-template-columns: minmax(0, 1fr); }
  .etap, .etap:first-child { border-left: 0; border-top: 1px solid var(--linia); padding: 1.5rem 0; }
  .etap:first-child { border-top: 0; padding-top: 0; }
  .etap__numer { margin-bottom: 0.75rem; }
}

/* ---------- HOME: O mnie ---------- */
.o-mnie-skrot {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 34rem);
  justify-content: center;
  align-items: center;
  gap: clamp(2rem, 8vw, 8rem);
}
.o-mnie-skrot h2 { margin-bottom: 1.5rem; }
.o-mnie-skrot .btn { margin-top: 1.75rem; }
@media (max-width: 719px) {
  .o-mnie-skrot { grid-template-columns: minmax(0, 1fr); }
  .o-mnie-skrot img { max-width: 18rem; margin-inline: auto; }
}

/* ---------- HOME: Pierwsza konsultacja ---------- */
.karta-konsultacja {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 5vw, 3rem);
  border: 1px solid var(--tekst);
  background: var(--tlo-wyroznione);
  text-align: center;
}
.karta-konsultacja h2 { margin-bottom: 2rem; }
.karta-konsultacja ul { list-style: none; margin-bottom: 1.25rem; }
.karta-konsultacja li { padding-block: 0.15rem; }
.karta-konsultacja li::before { content: "•"; margin-right: 0.6em; }
.karta-konsultacja .uwaga { font-size: var(--p3); }
.karta-konsultacja .btn { margin-top: 1.75rem; }

/* ---------- HOME: Gdzie przyjmuję ---------- */
.gabinety {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}
.gabinet {
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 1.75rem;
  background: var(--tlo-wyroznione);
}
.gabinet img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #fff; }
.gabinet__miasto {
  margin-top: 1.25rem;
  font-size: var(--h5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.gabinet__nazwa { margin-top: 0.35rem; font-size: var(--p3); color: var(--tekst-drugi); }
.gabinet__adres { margin-top: 0.15rem; font-style: normal; font-size: var(--p3); color: var(--tekst-drugi); }
.gabinet__telefon { display: inline-flex; align-items: center; align-self: flex-start; min-height: 2.75rem; margin: 0.5rem 0 0.5rem; color: var(--granat); }
.gabinet .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 799px) {
  .gabinety { grid-template-columns: minmax(0, 1fr); max-width: 30rem; }
}

/* ---------- HOME: Opinie ---------- */
.opinia { margin: 0 auto; max-width: 52rem; text-align: center; }
.opinia blockquote { margin: 0; font-family: var(--szeryf); font-size: var(--h5); line-height: 1.5; }
.opinia figcaption { margin-top: 1.25rem; font-size: var(--p3); }
.opinia__autor {
  display: block;
  font-family: var(--szeryf);
  font-size: var(--h6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.opinie-zrodlo {
  max-width: 44rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 1.75rem;
  font-size: var(--p3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--tekst-drugi);
}

/* ---------- HOME: FAQ ---------- */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2rem clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.faq__lista { margin: 0; }
.faq__lista dt {
  padding-top: 1.5rem;
  border-top: 1px solid var(--linia);
  font-family: var(--szeryf);
  font-size: var(--h6);
  line-height: 1.25;
}
.faq__lista dt:first-child { padding-top: 0; border-top: 0; }
.faq__lista dd { margin: 0.9rem 0 1.5rem; font-size: var(--p3); line-height: 1.45; color: var(--tekst-drugi); }
.faq__lista dd:last-child { margin-bottom: 0; }
@media (max-width: 799px) {
  .faq { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- HOME: hero (góra strony) ---------- */
.sekcja--hero { padding-top: clamp(1.5rem, 4vw, 3rem); }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}
.hero__tekst .nadtytul { margin-bottom: 1.25rem; }
.hero .duzy { max-width: 32rem; margin-top: 1.5rem; }
.hero__miasta { margin-top: 1.25rem; letter-spacing: 0.06em; color: var(--tekst-drugi); }
.hero__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.75rem; margin-top: 2rem; }
.hero__link { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--granat); text-underline-offset: 0.2em; }
.hero img { width: 100%; }
@media (max-width: 799px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero img { max-width: 22rem; }
}

/* ---------- O MNIE ---------- */
.profil {
  display: grid;
  grid-template-columns: max-content minmax(0, 14rem) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.profil .nadtytul { margin: 0; }
.profil__tekst { font-size: var(--p1); line-height: 1.35; max-width: 38rem; }
@media (max-width: 899px) {
  .profil { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }
  .profil .nadtytul { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .profil { grid-template-columns: minmax(0, 1fr); }
  .profil img { max-width: 16rem; }
}
.umiejetnosci-tytul { margin-bottom: clamp(3rem, 8vw, 6.5rem); }

/* ---------- CHOROBY PRZYZĘBIA / RECESJE ---------- */
.sekcja--piaskowa {
  background: var(--tlo-piaskowe);
}
.dwie-kolumny {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5.5rem);
}
.dwie-kolumny h1 { font-size: var(--h2); line-height: 1.1; margin-bottom: 1.75rem; }
.dwie-kolumny h2 { font-size: var(--h5); margin: 2.75rem 0 1rem; }
.dwie-kolumny .btn { margin-top: clamp(2.5rem, 5vw, 4rem); }
.dwie-kolumny__tekst > p { max-width: 36rem; }
.dwie-kolumny__obraz img { width: 100%; }
@media (max-width: 799px) {
  .dwie-kolumny { grid-template-columns: minmax(0, 1fr); }
  .dwie-kolumny__obraz img { max-width: 24rem; margin-inline: auto; }
}

.objawy {
  margin-top: 2.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--tlo);
}
.objawy h2 { margin: 0 0 1rem; font-size: var(--h5); }
.objawy ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1.5rem;
}
.objawy li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: var(--p3); }
.objawy img { flex: none; width: 1.6rem; height: 1.6rem; }
.objawy span { padding-top: 0.2rem; }
@media (max-width: 519px) {
  .objawy ul { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- LECZENIE ---------- */
.leczenie-wstep { max-width: 44rem; margin: 0 auto clamp(3rem, 7vw, 5.5rem); text-align: center; }
.leczenie-wstep h1 { margin-bottom: 1.25rem; }
.krok__numer { display: block; margin-bottom: 1.25rem; color: var(--tekst-drugi); }
.krok h2 { font-size: var(--h3); margin-bottom: 0.9rem; }
.krok p { color: var(--tekst-drugi); }
.leczenie-indywidualne { max-width: 44rem; margin: clamp(3rem, 7vw, 5rem) auto 0; padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--linia-ostra); text-align: center; }
.leczenie-indywidualne h2 { font-size: var(--h3); margin-bottom: 1.25rem; }

/* ---------- PRZED WIZYTĄ ---------- */
.przed-wizyta h1 { font-size: var(--h2); text-transform: uppercase; margin-bottom: 1rem; }
.przed-wizyta__blok { max-width: 47rem; padding-block: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--linia-ostra); }
.przed-wizyta__blok--szeroki { max-width: none; border-bottom: 0; padding-bottom: 0; }
.przed-wizyta__blok--szeroki::after {
  content: "";
  display: block;
  max-width: 47rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--linia-ostra);
}
.przed-wizyta__blok:last-child { border-bottom: 0; padding-bottom: 0; }
.przed-wizyta__blok h2 { font-size: var(--h5); margin-bottom: 1rem; }
.przed-wizyta__blok ul { padding-left: 1.5rem; }
.przed-wizyta__wstep { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.przed-wizyta__wstep-tekst { max-width: 40rem; margin-top: 1rem; }
.karty-krokow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.75rem; }
.karta-kroku { padding: 1rem 1.1rem 1.25rem; border: 1px solid var(--linia); }
.karta-kroku__numer { display: block; font-family: var(--szeryf); font-size: var(--h3); line-height: 1.1; color: var(--akcent); }
.karta-kroku h3 { font-size: var(--h6); margin: 0.2rem 0 0.25rem; }
.karta-kroku p { font-size: var(--p3); }
@media (max-width: 899px) { .karty-krokow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519px) { .karty-krokow { grid-template-columns: minmax(0, 1fr); } }

/* ---------- KONTAKT ---------- */
.kontakt-karty {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.25rem);
}
.kontakt-karta {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.25rem clamp(1.25rem, 3vw, 2.4rem) 2.4rem;
  border: 1px solid var(--linia);
  text-align: center;
}
.kontakt-karta__miasto {
  font-family: var(--szeryf);
  font-size: var(--h6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--granat);
}
.kontakt-karta h2 { margin: 0.5rem 0 1rem; font-size: var(--h5); color: var(--granat); }
.kontakt-karta address { font-style: normal; }
.kontakt-karta__telefon { margin-top: 1rem; }
.kontakt-karta__telefon a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.4rem; }
.kontakt-karta__cennik { list-style: none; margin: 1.25rem 0 2rem; font-size: var(--p3); text-wrap: balance; }
.kontakt-karta__cennik li + li { margin-top: 0.7rem; }
.kontakt-karta .btn { margin-top: auto; }

.mapa-karta { padding: clamp(1.25rem, 2.4vw, 1.75rem); border: 1px solid var(--linia); }
.mapa-karta h3 { font-size: var(--h5); color: var(--granat); min-height: 2.4em; margin-bottom: 1.25rem; }
.mapa-karta__pole {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--tlo-wyroznione);
  color: var(--granat);
  text-decoration: none;
}
.mapa-karta__pole img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; transition: transform 0.4s; }
.mapa-karta__pole:hover img { transform: scale(1.04); }
.mapa-karta__etykieta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.7rem 1rem;
  background: rgba(245, 242, 239, 0.94);
  font-size: var(--p3);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.mapa-karta__pole:hover .mapa-karta__etykieta { background: var(--tlo); text-decoration-thickness: 2px; }
.mapy-zrodlo { margin-top: 1.25rem; font-size: var(--p3); text-align: center; color: var(--tekst-drugi); }
@media (max-width: 859px) {
  .kontakt-karty { grid-template-columns: minmax(0, 1fr); max-width: 30rem; margin-inline: auto; }
  .mapa-karta h3 { min-height: 0; margin-bottom: 1.25rem; }
}

/* ---------- Okno „Umów wizytę” ---------- */
.okno {
  width: min(26rem, calc(100vw - 2rem));
  padding: 2rem 1.75rem 2.25rem;
  border: 1px solid var(--linia);
  background: var(--tlo);
  color: var(--tekst);
}
.okno::backdrop { background: rgba(11, 22, 38, 0.55); }
.okno h2 { font-size: var(--h4); margin-bottom: 1rem; padding-right: 2rem; }
.okno__gabinet { font-weight: 600; }
.okno__cennik { list-style: none; margin: 1rem 0; font-size: var(--p3); }
.okno__telefon {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--szeryf);
  font-size: var(--h3);
  color: var(--granat);
}
.okno__podpowiedz { margin-top: 0.5rem; font-size: var(--p3); color: var(--tekst-drugi); }
.okno__wybor { list-style: none; margin: 0.5rem 0 0; }
.okno__wybor li { padding: 0.9rem 0; border-top: 1px solid var(--linia); }
.okno__wybor strong { display: block; font-weight: 600; font-size: var(--p3); }
.okno__wybor a { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--szeryf); font-size: var(--h4); color: var(--granat); }
.okno__zamknij {
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  width: 2.5rem; height: 2.5rem;
  border: 0;
  background: none;
  color: var(--tekst);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Przycisk „Zadzwoń” (tylko telefon) ---------- */
.zadzwon { display: none; }
@media (max-width: 799px) {
  .zadzwon {
    position: fixed;
    z-index: 40;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    translate: -50% 0;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 3rem;
    padding: 0.6rem 1.6rem;
    background: var(--granat);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(11, 22, 38, 0.28);
  }
  .zadzwon:hover { background: var(--granat-jasny); }
  .zadzwon:focus-visible { outline: 2px solid var(--granat); outline-offset: 3px; }
  .zadzwon__ikona { flex: none; }
  /* z JavaScriptem przycisk jest ukryty, dopóki pacjent nie minie pierwszego ekranu */
  .js .zadzwon { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(1rem); }
  .js .zadzwon.jest-widoczny { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .menu-otwarte .zadzwon { display: none; }
  .stopka { padding-bottom: 5.5rem; }
}

/* ---------- 404 ---------- */
.blad { text-align: center; padding-block: clamp(5rem, 12vw, 9rem); }
.blad p { margin: 1.25rem auto 2rem; max-width: 30rem; font-size: var(--p1); }

/* ---------- Ruch (tylko gdy użytkownik nie wyłączył animacji w systemie) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* płynne przejście między podstronami (Chrome, Edge, Safari; reszta ładuje stronę jak dotąd) */
  @view-transition { navigation: auto; }
  ::view-transition-group(root) { animation-duration: 0.25s; }

  /* okno „Umów wizytę”: krótkie wejście (przezroczystość + skala), bez animacji zamykania */
  .okno { transition: opacity 0.2s ease, transform 0.2s ease; }
  .okno::backdrop { transition: opacity 0.2s ease; }
  @starting-style {
    .okno[open] { opacity: 0; transform: scale(0.98); }
    .okno[open]::backdrop { opacity: 0; }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .zadzwon { transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s; }
  .zadzwon.jest-widoczny { transition-delay: 0s; }

}

/* Delikatne pojawianie się treści przy przewijaniu. Klasy dodaje main.js tylko elementom,
   które na starcie są poniżej widocznego ekranu; bez JavaScriptu lub przy wyłączonych animacjach
   w systemie treść jest po prostu widoczna. Tylko przezroczystość i przesunięcie (translate). */
.js .pojawia { opacity: 0; translate: 0 18px; }
.js .pojawia.pojawione { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .pojawia {
    transition: opacity 0.6s ease var(--op, 0s), translate 0.6s ease var(--op, 0s), transform 0.25s ease;
  }
}

/* mikroreakcje na najechanie (tylko urządzenia z myszą; tylko przezroczystość i przesunięcie) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gabinet, .kontakt-karta, .mapa-karta { position: relative; transition: transform 0.25s ease; }
  .gabinet::after, .kontakt-karta::after, .mapa-karta::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: 0 10px 28px rgba(18, 38, 58, 0.12);
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .gabinet:hover, .kontakt-karta:hover, .mapa-karta:hover { transform: translateY(-3px); }
  .gabinet:hover::after, .kontakt-karta:hover::after, .mapa-karta:hover::after { opacity: 1; }
  .blok h3 a::after { transition: color 0.2s ease; }
  .blok:hover h3 a::after { color: var(--granat); }
  .pytania a { transition: transform 0.2s ease; }
  .pytania a:hover, .pytania a:focus-visible { transform: translateX(4px); }
  .objawy img { transition: transform 0.2s ease; }
  .objawy li:hover img { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .mapa-karta__pole img, .menu a { transition: none; }
  .mapa-karta__pole:hover img { transform: none; }
}