/* ==========================================================================
   Klinika MS: warstwa bazowa zbudowana na tokens.css
   Typografia, przyciski, karty, animacje wejścia.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Hind:wght@400;500;600;700&display=swap");

/* ------------------------------------------------------------------- Reset */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-prose);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

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

/* --------------------------------------------------------------- Typografia */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading);
  color: var(--c-brand);
  /* Hind ma mniejszy kontrast optyczny niż Archivo, więc luźniejszy tracking */
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.005em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); }
h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); }

.display {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-heading);
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-5);
}

p { margin: 0 0 var(--sp-4); max-width: 68ch; }

a { color: var(--c-brand); text-decoration: none; transition: color var(--t-base) var(--ease); }
a:hover { color: var(--c-brand-dark); }

.lead { font-size: 1.125rem; color: var(--c-muted); line-height: var(--lh-prose); }
.small { font-size: var(--fs-small); }

/* Nadtytuł sekcji: wersaliki w ciepłym akcencie ze zdjęć sesyjnych.
   Kropka z kitu RoxCare usunięta na prośbę klienta. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-roz-tekst);
  margin-bottom: var(--sp-3);
}

/* Wyróżnienie słowa w nagłówku. Domyślnie na jasnym tle; warianty
   na ciemnych sekcjach nadpisuje layout.css. */
.hl { color: var(--c-roz-tekst); }

/* ------------------------------------------------------------------ Układ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-py); }
.section--alt { background: var(--c-surface-alt); }
.section--dark { background: var(--c-navy); color: var(--c-on-dark-muted); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6 { color: var(--c-on-dark); }

.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.stack > * + * { margin-top: var(--sp-4); }

/* --------------------------------------------------------------- Przyciski */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  padding: 13px 26px;                    /* wartość z kitu */
  border-radius: var(--r-pill);
  /* Biała etykieta na --c-brand ma 11,70:1, więc wypełniamy wprost
     kolorem marki. Poprzednia paleta wymagała tu ciemniejszego wariantu. */
  border: 1px solid var(--c-brand);
  background: var(--c-brand);
  color: var(--c-on-dark);
  cursor: pointer;
  text-align: center;
  transition:
    background var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    transform var(--t-slow) var(--ease);
}

.btn:hover {
  background: var(--c-brand-dark);
  border-color: var(--c-brand-dark);
  color: var(--c-on-dark);
  box-shadow: var(--sh-brand);
  transform: translateY(-2px);
}

.btn:focus-visible {
  outline: 3px solid var(--c-brand-dark);
  outline-offset: 3px;
}

/* Wariant na ciemne tło. Etykieta biała, bo --c-brand-light dawał
   na granatowym hero 2,67:1. */
.btn--ghost {
  background: transparent;
  color: var(--c-on-dark);
  border-color: rgba(255, 255, 255, .42);
}
.btn--ghost:hover {
  background: var(--c-on-dark);
  border-color: var(--c-on-dark);
  color: var(--c-ink);
  box-shadow: none;
}

/* Wariant obrysowy na jasnym tle. Byl uzywany w index.njk, ale nigdy
   zdefiniowany, wiec renderowal sie jako zwykly przycisk wypelniony. */
.btn--outline {
  background: transparent;
  color: var(--c-brand);
  border-color: var(--c-brand);
}
.btn--outline:hover {
  background: var(--c-brand);
  color: var(--c-on-dark);
}

.btn--on-dark {
  background: var(--c-on-dark);
  border-color: var(--c-on-dark);
  color: var(--c-ink);
}
.btn--on-dark:hover {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-on-dark);
}

.btn--lg { padding: 16px 34px; font-size: 1.0625rem; }

/* ------------------------------------------------------------------ Karty */

.card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  padding: var(--sp-6);
  transition:
    box-shadow var(--t-base) var(--ease),
    transform var(--t-slow) var(--ease);
}

.card:hover {
  box-shadow: var(--sh-lift);
  transform: translateY(-6px);
}

.card__icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--c-surface-alt);
  color: var(--c-brand);
  margin-bottom: var(--sp-4);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.card:hover .card__icon { background: var(--c-brand); color: var(--c-on-dark); }

.card__title { font-size: var(--fs-h5); line-height: var(--lh-h5); margin-bottom: var(--sp-2); }
.card__text  { color: var(--c-muted); margin: 0; }

/* Karta specjalisty: zdjęcie z zaokrągleniem 20px, przybliżenie na hover */
.person { padding: 0; overflow: hidden; }
.person__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-surface-alt); }
.person__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.person:hover .person__photo img { transform: scale(1.06); }  /* wartość z kitu */
.person__body { padding: var(--sp-5); }
.person__name { font-size: var(--fs-h6); margin-bottom: var(--sp-1); }
.person__role { color: var(--c-brand); font-size: var(--fs-small); font-weight: var(--fw-medium); margin: 0; }

/* Etykieta ceny w cenniku */
.price {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}
.price small { font-family: var(--font-body); font-size: var(--fs-small); color: var(--c-muted); font-weight: var(--fw-regular); }

/* ------------------------------------------------------------- Animacje */

/* Kit używa fadeInUp, fadeInLeft, fadeInRight i fadeIn, z opóźnieniami
   100 i 200 ms. Odtwarzamy to na IntersectionObserver, patrz src/js/reveal.js */

@keyframes fadeInUp    { from { opacity: 0; transform: translateY(var(--anim-distance)); } to { opacity: 1; transform: none; } }
@keyframes fadeInDown  { from { opacity: 0; transform: translateY(calc(var(--anim-distance) * -1)); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft  { from { opacity: 0; transform: translateX(calc(var(--anim-distance) * -1)); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(var(--anim-distance)); } to { opacity: 1; transform: none; } }
@keyframes fadeIn      { from { opacity: 0; } to { opacity: 1; } }

/* Ukrywamy element do animacji WYLACZNIE wtedy, gdy JavaScript dziala.
   Klase .js-anim ustawia skrypt inline w <head>, jeszcze przed renderem.
   Bez tego awaria lub blokada JS zostawialaby pusta strone, co przy stronie
   medycznej jest niedopuszczalne. */
.js-anim [data-anim] { opacity: 0; }

.js-anim [data-anim].is-visible {
  animation-duration: var(--anim-duration);
  animation-timing-function: var(--ease);
  animation-fill-mode: both;
}

.js-anim [data-anim="fadeInUp"].is-visible    { animation-name: fadeInUp; }
.js-anim [data-anim="fadeInDown"].is-visible  { animation-name: fadeInDown; }
.js-anim [data-anim="fadeInLeft"].is-visible  { animation-name: fadeInLeft; }
.js-anim [data-anim="fadeInRight"].is-visible { animation-name: fadeInRight; }
.js-anim [data-anim="fadeIn"].is-visible      { animation-name: fadeIn; }

.js-anim [data-anim-delay="100"].is-visible { animation-delay: 100ms; }
.js-anim [data-anim-delay="200"].is-visible { animation-delay: 200ms; }
.js-anim [data-anim-delay="300"].is-visible { animation-delay: 300ms; }
.js-anim [data-anim-delay="400"].is-visible { animation-delay: 400ms; }

/* Dostępność: użytkownik z ograniczonym ruchem widzi treść od razu */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-anim [data-anim] { opacity: 1; }
  .js-anim [data-anim].is-visible { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .card:hover, .btn:hover { transform: none; }
}

/* Warianty i elementy uzywane w szablonach, ktorych brakowalo w CSS.
   Wykryte przegladem klas z szablonow wobec arkuszy stylow. */

.btn--sm { padding: 9px 18px; font-size: .875rem; }

.person__initials {
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: var(--fw-heading);
  color: var(--c-brand);
  opacity: .45;
  letter-spacing: .02em;
}

.person__note {
  color: var(--c-muted);
  font-size: .875rem;
  margin: 0;
}