/* kontakt_channels — sections/kontakt_channels.php
   Trzy kanały kontaktu: mobile jako lista wierszy-celów dotykowych,
   desktop jako trzy kolumny rozdzielone liniami.

   ── Czym to się różni od paczki „Kontakt z nami — mobile" ──────────────────
   Paczka jest na DS 1.2; obowiązuje aktualny design system (--ds-*), więc:
     • wartość kanału to .text-heading-2 z dzisiejszej skali (19/23px zamiast
       21/26px), etykieta 13px zamiast 12px (w aktualnym DS eyebrow podniesiono
       z powodu kontrastu);
     • padding boczny z .container-ms (16/20px), nie 20/60px — sekcja stoi
       w jednej linii z nagłówkiem i stopką serwisu;
     • wewnętrzny padding kolumn na desktopie to 32px, nie 40px: przy kontenerze
       o bocznym oddechu 20px (a nie 60px) czterdziestka rozjeżdżała rytm
       między linią działową a wartością;
     • ruch i promienie z tokenów (180 ms, --ds-radius-sm na pierścieniu focusa).
   Kompozycja, kolejność, linie działowe i brak podpisów pod wartościami —
   bez zmian, za projektem. */

.kch-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.kch { padding: var(--ds-space-5) 0 var(--ds-space-2); }
.kch-grid { display: grid; }

/* Wiersz jest jednocześnie celem dotykowym: 16px + etykieta + 8px + wartość
   + 16px daje ~79px na 360px, przy podłodze 44px (CLAUDE.md, reguła 15).
   Reset <button>/<a> w jednym miejscu, bo trzy pozycje mogą być trzema różnymi
   znacznikami (link / przycisk czatu / tekst — patrz nagłówek sekcji PHP). */
.kch-item {
  display: block;
  width: 100%;
  padding: var(--ds-space-4) 0;
  border: 0;
  border-top: 1px solid var(--ds-color-hairline);
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
}
.kch-item-action { cursor: pointer; }

.kch-label {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  color: var(--ds-color-primary-ink);
}
/* .text-eyebrow nadaje własny kolor (ink) — tutaj etykieta ma być błękitna
   razem z ikoną, więc wracamy do dziedziczenia. Lc 90 na bieli przy progu 80
   dla 13px w wadze 600. */
.kch-label .text-eyebrow { color: inherit; }

.kch-ico { width: 17px; height: 17px; flex: none; }

.kch-value {
  display: block;
  margin-top: var(--ds-space-2);
  color: var(--ds-color-ink);
  transition: color var(--ds-duration-base) var(--ds-ease-out-soft);
}
.kch-value-wrap { word-break: break-word; }

.kch-item-action:hover .kch-value { color: var(--ds-color-primary-ink); }
.kch-item-action:focus-visible {
  outline: 2px solid var(--ds-color-primary);
  outline-offset: 3px;
  border-radius: var(--ds-radius-sm);
}

/* ── Reveal na wejściu w kadr ─────────────────────────────────────────────
   Klasę .kch-reveal dopina JS (assets/js/kontakt_channels.js) — w markupie
   jest tylko atrybut data-kch-reveal, więc bez JS, bez IntersectionObserver
   albo przy prefers-reduced-motion treść jest po prostu widoczna. Ten sam
   wzorzec co w course_teacher.css. Animacja wyłącznie na opacity/transform
   (CLAUDE.md → Stabilność, punkt 2). */
.kch-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--ds-duration-slow) var(--ds-ease-out-soft),
    transform var(--ds-duration-slow) var(--ds-ease-out-soft);
}
.kch-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .kch-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Desktop (≥1024px) ─────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .kch { padding: var(--ds-space-12) 0 var(--ds-space-3); }

  .kch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Linia górna biegnie nad CAŁĄ siatką, a nie nad każdą kolumną osobno —
     pseudoelement jest tu pierwszym elementem siatki i zajmuje cały wiersz. */
  .kch-grid::before {
    content: "";
    grid-column: 1 / -1;
    border-top: 1px solid var(--ds-color-hairline);
  }

  .kch-item { padding: var(--ds-space-8); border-top: 0; }
  /* Linia działowa TYLKO między kolumnami — nigdy przed pierwszą z lewej. */
  .kch-item + .kch-item { border-left: 1px solid var(--ds-color-hairline); }
  .kch-grid > .kch-item:first-child { padding-left: 0; }
  .kch-grid > .kch-item:last-child { padding-right: 0; }

  .kch-ico { width: 18px; height: 18px; }
  .kch-value { margin-top: var(--ds-space-3); }
}