/* sections/footer.php — stopka serwisu. Pełna szerokość (tło + linia górna),
   treść w .container-ms. Jeden markup, dwa układy: akordeon <details> na
   telefonie, cztery statyczne kolumny od 1024px.

   Stopnie pisma: linki, motto i pola kontaktu biorą --ds-text-title (15px),
   nie --ds-text-body — body rośnie do 16px od 1024px, a stopka ma zostać
   na 15px na obu szerokościach (projekt 1:1). Przypisy i pasek prawny na
   --ds-text-caption (13px), etykiety kolumn na --ds-text-eyebrow (13px;
   projekt miał 12px, ale w treści nie schodzimy poniżej 13px). */

.ft {
  background-color: var(--ds-color-canvas);
  border-top: 1px solid var(--ds-color-hairline);
  padding: 28px 0 20px;
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-title);
  color: var(--ds-color-ink-secondary);
}
.ft-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ft ul { list-style: none; margin: 0; padding: 0; }
.ft p { margin: 0; }
:where(.ft a) { color: inherit; } /* :where() zeruje specyficzność — inaczej ten reset bije .ft-link-strong i .ft-contact-item */

/* ── Marka ─────────────────────────────────────────────────────────────── */
.ft-logo { display: inline-flex; align-items: center; gap: 8px; }
.ft-logo img { height: 28px; width: auto; }
.ft-wordmark {
  font-family: var(--ds-font-display);
  font-weight: var(--ds-weight-semi);
  font-size: 20px; /* wordmark stoi poza skalą — jak .hdr-wordmark w nagłówku */
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ds-color-ink);
  white-space: nowrap;
}
.ft-wordmark i { font-style: normal; color: var(--ds-color-primary); }

.ft-motto {
  margin-top: 8px;
  max-width: 280px;
  margin-bottom: 10px!important;
  font-size: var(--ds-text-title);
  line-height: 1.55;
  color: var(--ds-color-ink-secondary);
}

.ft-social { display: flex; gap: 10px; margin-top: 16px; }
.ft-social a {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--ds-color-hairline);
  border-radius: var(--ds-radius-md);
  color: var(--ds-color-primary-ink);
  background-color: var(--ds-color-canvas);
  box-shadow: var(--ds-shadow-xs);
  transition: transform var(--ds-duration-link) var(--ds-ease-out-soft),
              box-shadow var(--ds-duration-link) var(--ds-ease-out-soft);
}
.ft-social a:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-sm); }
.ft-ic { width: 22px; height: 22px; }
.ft-ic-sm { width: 20px; height: 20px; flex: none; }

/* ── Grupy (mobile: akordeon) ──────────────────────────────────────────── */
.ft-inner > .ft-group:first-of-type { margin-top: 22px; border-top: 1px solid var(--ds-color-hairline); }
.ft-group { border-bottom: 1px solid var(--ds-color-hairline); }
.ft-trigger {
  min-height: 52px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  cursor: pointer;
  list-style: none;
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-title);
  font-weight: var(--ds-weight-semi);
  letter-spacing: -0.005em;
  color: var(--ds-color-ink);
}
.ft-trigger::-webkit-details-marker { display: none; }
.ft-trigger-end { display: flex; align-items: center; gap: 8px; color: var(--ds-color-primary); }
.ft-chev {
  width: 18px; height: 18px;
  transition: transform var(--ds-duration-link) var(--ds-ease-out-soft);
}
.ft-group[open] .ft-chev { transform: rotate(180deg); }
/* Licznik kursów — atom .badge-count z design-system.css; tracking wersalikowy
   przy samej liczbie tylko rozpycha prawą krawędź. */
.ft-count { letter-spacing: 0; padding-right: 10px; }

.ft-panel { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 16px; }

/* ── Linki ─────────────────────────────────────────────────────────────── */
.ft-link {
  display: flex; align-items: flex-start; gap: 10px;
  /* 11px zamiast projektowych 9px — z line-height 1.45 daje 44px celu
     dotykowego (CLAUDE.md → cele dotykowe). Na desktopie wraca do 7px. */
  padding: 11px 0;
  font-size: var(--ds-text-title);
  line-height: 1.45;
  color: var(--ds-color-ink-secondary);
  transition: color var(--ds-duration-link) var(--ds-ease-out-soft);
}
/* Hover na --ds-color-primary-hover, nie na --ds-color-primary: przy 15px
   czysty primary daje Lc 76 przy progu 80, ciemniejszy wariant 85. */
.ft-link:hover { color: var(--ds-color-primary-hover); }
.ft-link-strong {
  align-items: center;
  font-weight: var(--ds-weight-semi);
  color: var(--ds-color-primary-ink);
}
.ft-arrow { width: 16px; height: 16px; flex: none; }
.ft-link-course { gap: 10px; }
.ft-dot { width: 7px; height: 7px; flex: none; margin-top: 7px; }

/* ── Kontakt i dane firmy ──────────────────────────────────────────────────
   Mail i telefon to linki tekstowe, nie pola w ramce — bez obwódki cel
   dotykowy niesie sam min-height, nie wysokość pola. Kolor bazowy
   primary-ink (Lc 90), nie primary (Lc 76 przy progu 80 dla 15px);
   ikona dziedziczy currentColor, żeby nie robić dwutonu przy 20px. */
.ft-contact { display: flex; flex-direction: column; gap: 2px; }
.ft-contact-item {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-size: var(--ds-text-title);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-color-primary-ink);
  transition: color var(--ds-duration-link) var(--ds-ease-out-soft);
}
.ft-contact-item:hover { color: var(--ds-color-primary-hover); }

.ft-company { margin-top: 14px; }
.ft-eyebrow {
  margin-bottom: 8px;
  font-size: var(--ds-text-eyebrow);
  font-weight: var(--ds-weight-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-color-ink-muted);
}
.ft-address {
  margin: 0;
  font-style: normal;
  font-size: var(--ds-text-caption);
  line-height: 1.65;
  color: var(--ds-color-ink-secondary);
}

/* ── Pasek prawny ──────────────────────────────────────────────────────── */
.ft-legal {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 18px;
  padding-top: 6px;
}
.ft-legal-links { display: flex; gap: 18px; order: -1; }
.ft-legal a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--ds-text-caption);
  color: var(--ds-color-ink-secondary);
  transition: color var(--ds-duration-link) var(--ds-ease-out-soft);
}
.ft-legal a:hover { color: var(--ds-color-primary-ink); } /* 13px wymaga Lc 90 — primary-hover daje 85 */
.ft-copy {
  width: 100%;
  margin-top: 4px;
  font-size: var(--ds-text-caption);
  color: var(--ds-color-ink-muted);
}

/* ══ DESKTOP ≥1024px — cztery kolumny, bez akordeonu ═══════════════════════ */
@media (min-width: 1024px) {
  .ft { padding: 56px 0 24px; }
  .ft-inner {
    display: grid;
    grid-template-columns: 1.1fr 0.85fr 2.9fr 1.1fr;
    gap: 40px;
  }
  .ft-logo img { height: 32px; }
  .ft-wordmark { font-size: 24px; } /* patrz komentarz przy stopniu mobilnym */
  .ft-motto { margin-top: 12px; }
  .ft-social { margin-top: 20px; }

  /* Akordeon zamienia się w statyczną kolumnę: nagłówek staje się eyebrow,
     chevron znika, panel jest rozwinięty (assets/js/footer.js ustawia `open`). */
  .ft-inner > .ft-group:first-of-type { margin-top: 0; border-top: none; }
  .ft-group { border-bottom: none; }
  .ft-trigger {
    min-height: 0;
    /* Nagłówek kolumny, nie przełącznik: licznik wraca pod etykietę zamiast
       odjeżdżać na prawą krawędź kolumny (space-between z wariantu mobilnego). */
    justify-content: flex-start;
    gap: 8px;
    cursor: default;
    pointer-events: none;
    font-family: var(--ds-font-body);
    font-size: var(--ds-text-eyebrow);
    font-weight: var(--ds-weight-semi);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-color-ink-muted);
  }
  .ft-chev { display: none; }
  .ft-panel { padding: 14px 0 0; }
  .ft-link { padding: 7px 0; }
  .ft-contact-item { min-height: 0; padding: 7px 0; }

  /* Kolumna kursów: dwie połówki po 6 pozycji, czytane w dół. */
  .ft-panel-courses {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(6, auto);
    gap: 2px 32px;
  }
  .ft-company { margin-top: 20px; }
  .ft-address { margin-top: 10px; line-height: 1.7; }

  .ft-legal {
    margin-top: 40px;
    padding-top: 8px;
    border-top: 1px solid var(--ds-color-hairline);
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .ft-legal-links { order: 0; gap: 24px; }
  .ft-legal a { min-height: 40px; }
  .ft-copy { width: auto; margin-top: 0; }
}