/* kontakt_office — sections/kontakt_office.php
   Siedziba i dane rejestrowe. Mobile: biała karta z podniesionym cieniem.
   Desktop: kremowa płyta, adres po lewej, trzy kafle danych po prawej.

   ── 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:
     • promienie ciaśniejsze: karta 14px (--ds-radius-lg) zamiast 20px, płyta
       24px (--ds-radius-xxl) zamiast 40px, kafle 10/12px zamiast 8/16px;
     • stopnie z aktualnej skali: nazwa 17px na mobile (.text-heading-3)
       i 31px na desktopie (--ds-text-h1) zamiast 18/34px, adres 14/17px
       zamiast 15/19px, wartości kafli 14/15px zamiast 15/17px;
     • etykiety kafli 13px zamiast 12px (eyebrow podniesiono w aktualnym DS
       z powodu kontrastu);
     • kafle na telefonie stoją na `canvas-soft` (#F6F3EE), nie na
       `canvas-warm` — powód niżej, przy .kof-datum;
     • padding boczny z .container-ms (16/20px), nie 20/60px.
   Kompozycja, kolejność i podział na kafle — bez zmian, za projektem. */

.kof { padding: var(--ds-space-5) 0 var(--ds-space-8); }

/* Panel to atom .card (ramka + promień + tło) z jedną zmianą: cień idzie o dwa
   stopnie wyżej. Karta jest tu ostatnim blokiem podstrony i ma się odkleić od
   bieli, a nie leżeć w niej płasko. */
.kof-panel {
  padding: var(--ds-space-5);
  box-shadow: var(--ds-shadow-lg);
}

/* .text-eyebrow nadaje własny kolor (ink) — tu etykieta bloku jest błękitna.
   Lc 90 na bieli przy progu 80 dla 13px w wadze 600. */
.kof-eyebrow { margin: 0; color: var(--ds-color-primary-ink); }

.kof-name { margin: var(--ds-space-2) 0 var(--ds-space-1); color: var(--ds-color-ink); }

.kof-addr {
  margin: 0;
  font-style: normal;                     /* <address> renderuje się kursywą */
  color: var(--ds-color-ink-secondary);
}

.kof-data {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-3);
  margin: var(--ds-space-4) 0 0;
}

/* Kafel na `canvas-soft`, nie na `canvas-warm` jak w paczce. W DS 1.2 krem
   miał #FBF8F3 i odcinał się od białej karty; w aktualnym systemie krem
   podjaśniał do #FCFAF7 i na bieli przestał być widoczny — kafel rozpływał się
   w tle, a to on niesie podział na trzy dane. `canvas-soft` to systemowy token
   „zagnieżdżonej powierzchni" (design-system.css, sekcja Canvases) i dokładnie
   po to tu jest. Etykieta w `ink-muted` trzyma na nim Lc 91 przy progu 80
   (13px/600), wartość w `ink` — Lc 102 przy progu 85 (14px). */
.kof-datum {
  background-color: var(--ds-color-canvas-soft);
  border-radius: var(--ds-radius-sm);
  padding: var(--ds-space-2) var(--ds-space-3);
}
.kof-datum-wide { grid-column: 1 / -1; }
.kof-datum dt { color: var(--ds-color-ink-muted); }
.kof-value { margin: var(--ds-space-1) 0 0; color: var(--ds-color-ink); }

/* ── Reveal na wejściu w kadr ─────────────────────────────────────────────
   Klasę .kof-reveal dopina JS (assets/js/kontakt_office.js) — w markupie jest
   tylko atrybut data-kof-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. */
.kof-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);
}
.kof-reveal.is-in { opacity: 1; transform: none; }

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

/* ── Tablet (768–1023px) ─────────────────────────────────────────────────
   Układ zostaje mobilny (karta), ale kafle wchodzą w trzy kolumny — w dwóch
   przy szerokości ~700px zostawały puste pasy po prawej stronie wartości. */
@media (min-width: 768px) {
  .kof-panel { padding: var(--ds-space-6); }
  .kof-data { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kof-datum-wide { grid-column: auto; }
}

/* ── Desktop (≥1024px) ─────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .kof { padding: var(--ds-space-6) 0 var(--ds-section-y); }

  /* Karta zamienia się w kremową płytę: bez ramki, bez cienia — na tej
     szerokości blok trzyma się samym tłem, a cień pod płytą na pół strony
     czytałby się jak błąd. */
  .kof-panel {
    background-color: var(--ds-color-canvas-warm);
    border: 0;
    box-shadow: none;
    border-radius: var(--ds-radius-xxl);
    padding: var(--ds-slab-y) var(--ds-space-10);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: var(--ds-space-12);
    align-items: center;
  }

  /* Nazwa wchodzi o dwa stopnie wyżej (--ds-text-h1 = 31px): na płycie
     szerokiej na 1320px `heading-3` nie prowadzi już wzroku. Stopień z tokenu,
     nie z liczby — zmiana skali dociera tutaj sama. */
  .kof-name {
    margin: var(--ds-space-3) 0;
    font-size: var(--ds-text-h1);
    line-height: 1.2;
    letter-spacing: -0.025em;
  }
  .kof-addr { font-size: var(--ds-text-body-lg); line-height: 1.55; }

  .kof-data { margin: 0; }
  /* Na kremie kafle wracają na biel z ramką — tu „zagnieżdżona powierzchnia"
     jest jaśniejsza od tła, nie ciemniejsza. */
  .kof-datum {
    background-color: var(--ds-color-surface);
    border: 1px solid var(--ds-color-hairline);
    border-radius: var(--ds-radius-md);
    padding: var(--ds-space-4);
  }
  /* Wartość w piśmie nagłówkowym i wadze 600 — kafel jest tu na tyle duży, że
     wartość przestaje być metadaną i staje się treścią kafla. */
  .kof-value {
    margin-top: var(--ds-space-2);
    font-family: var(--ds-font-display);
    font-weight: var(--ds-weight-semi);
    font-size: var(--ds-text-title);
    line-height: 1.4;
  }
}