/* ==========================================================================
   Stopka (ciemna sekcja Dialogu). Źródło: parts/footer.php + style.css (.rh-foot).
   - Kolory z aliasów .is-dark (tokens.css). Pomarańcz tylko na CTA.
   - Nagłówki kolumn: Inter 500, szare (na teście serif w bursztynie; w Dialogu bez koloru).
   - Kolejność w DOM jak w footer.php: marka (+ social + akapit lokalny), nawigacja,
     kontakt, godziny. Telefon: jedna kolumna; 768–1023 px: 2 × 2; od 1024 px 4 kolumny.
   - Cele dotyku linków ≥ 44 px poniżej 1024 px (jak MOB-13 na teście).
   ========================================================================== */

.footer {
  position: relative;
  padding-block: var(--section-gap) 32px;
  background-color: var(--bg);
  color: var(--ink-2);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  letter-spacing: var(--tracking-small);
}

.footer p { margin: 0; }
.footer a { color: inherit; text-decoration: none; transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.footer a:hover { color: var(--ink-strong); }

/* ---- Hasło + CTA ---- */
.footer__top {
  display: grid;
  gap: 32px;
  padding-bottom: clamp(48px, 7vw, 80px);
  border-bottom: 1px solid var(--line);
}

.footer__claim { max-width: 20ch; }

.footer__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.footer__cta .btn--ghost { gap: 8px; }
.footer .btn--primary, .footer .btn--primary:hover { color: var(--on-accent); }
.footer .btn--ghost:hover { color: var(--ink); }

/* ---- Siatka kolumn ---- */
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding-block: clamp(48px, 6vw, 64px);
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}

.footer__mark { width: 26px; height: 26px; flex: 0 0 auto; }

.footer .footer__h {
  margin-bottom: 16px;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--ink-3);
}

.footer__col p + p { margin-top: 12px; }
.footer__col p:not(.footer__h) { color: var(--ink-2); }
.footer__col p.footer__note { font-size: 13px; color: var(--ink-3); }

/* social: okrągłe ikony FB/IG + pigułka ZnanyLekarz (jak na teście, P1-05) */
.footer .footer__social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }

.footer__soc,
.footer__zl {
  border: 1px solid var(--line-strong);
  color: var(--ink);
}

.footer__soc { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.footer__zl {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: var(--radius-badges); font-size: 13px; font-weight: var(--font-weight-medium);
}
.footer .footer__soc:hover,
.footer .footer__zl:hover { border-color: var(--ink-3); color: var(--ink-strong); }

/* akapit lokalny (SEO) pod marką */
.footer__area { display: grid; gap: 8px; max-width: 42ch; margin-top: 32px; }
.footer__area p { font-size: 13px; line-height: 1.55; color: var(--ink-3); }

/* nawigacja: 10 pozycji z produkcji, bez łamania wewnątrz pozycji */
.footer__nav ul {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 0 clamp(24px, 8vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__nav a { white-space: nowrap; }

/* ---- Pasek prawny ---- */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: var(--text-caption);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--ink-3);
}

.footer__company { flex-basis: 100%; }

/* ---- Progi ---- */
@media (max-width: 1023px) {
  /* cele dotyku 44 px; ujemne marginesy trzymają rytm tekstu (jak na teście) */
  .footer__nav ul { margin-block: -11px; }
  .footer__nav a,
  .footer__reach a { display: inline-block; padding-block: 11px; }
  .footer__reach a { margin-block: -11px; }
}

@media (max-width: 767px) {
  .footer__cta .btn { flex: 1 1 auto; }
  .footer__legal { flex-direction: column; align-items: flex-start; }
  .footer__company { flex-basis: auto; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
}

@media (min-width: 900px) {
  .footer__top { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 48px; }
  .footer__claim { max-width: 16ch; }
}

@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 1.5fr 1fr 1.1fr 1fr; gap: 48px; align-items: start; }
  .footer__nav ul { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}