/* ============================================================
   07 — agenda: dwa dni, godziny jako oś
   Godzina po lewej w monospace tworzy pionową oś czasu — kolejność
   jest tu realną informacją, więc rytm godzin prowadzi wzrok.
   ============================================================ */

.ai-agenda .ai-nota,
.ai-agenda__nota {
  margin-top: var(--ai-s5);
  font-size: var(--ai-size-small);
}

/* --- nagłówek dnia ------------------------------------------ */

/* „Dzień 1" i temat dnia to dwa osobne pola i tak też mają wyglądać: numer dnia
   jako etykieta nad tematem, temat jako nagłówek. Żadnego znaku pomiędzy —
   ani kreski, ani kropki. Separator interpunkcyjny między dwiema odrębnymi
   informacjami zawsze wygląda jak przypadek, bo nim jest. */
.ai-dzien__naglowek {
  margin: 0 0 var(--ai-s4);
  font-family: var(--ai-font-body);
  font-weight: 700;
}

.ai-dzien__numer {
  display: block;
  margin-bottom: var(--ai-s1);
  font-size: var(--ai-size-label);
  letter-spacing: var(--ai-ls-label);
  text-transform: uppercase;
  color: var(--ai-rose);
}

.ai-dzien__temat {
  display: block;
  font-size: var(--ai-size-h3);
  color: var(--ai-heading);
  text-transform: none;
  letter-spacing: 0;
}

/* --- pozycje --- */
/* <dl> z parami dt/dd: godzina + tytuł w dt, opis w dd. Wspólna kolumna
   godziny buduje oś, po której czyta się dzień z góry na dół. */

.ai-dzien__lista { margin: 0; }

.ai-dzien__lista dt {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--ai-s4);
  padding-top: var(--ai-s3);
  border-top: 1px solid var(--ai-line);
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--ai-heading);
}
.ai-dzien__lista dt:first-of-type { border-top: 0; padding-top: 0; }

/* Godziny idą krojem tekstowym, nie maszynowym (decyzja Romana, 2026-08-10).
   `tabular-nums` zostaje i to ono wykonuje tu całą robotę: cyfry mają jednakową
   szerokość, więc kolumna czasu równa się w pionie bez pomocy monospace'u. */
.ai-dzien__godzina {
  font-family: var(--ai-font-body);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--ai-rose);
  font-variant-numeric: tabular-nums;
}

/* Przerwa nie jest treścią konferencji, tylko punktem orientacyjnym w dniu:
   ten sam rytm, mniejsza waga. Godzina zostaje różowa, żeby kolumna czasu
   czytała się w pionie bez dziur w kolorze.

   Selektor musi być tak samo szczegółowy jak `.ai-dzien__lista dt`, inaczej przegrywa
   i przerwa zostaje w kroju nagłówkowym. Dolny odstęp też jest konieczny: po przerwie
   nie ma wiersza opisu, więc kreska następnego punktu kleiłaby się do tekstu. */
.ai-dzien__lista dt.ai-dzien__punkt--przerwa {
  font-family: var(--ai-font-body);
  font-size: var(--ai-size-small);
  font-weight: 600;
  color: var(--ai-text);
  padding-bottom: var(--ai-s3);
}

.ai-dzien__lista dd {
  margin: var(--ai-s1) 0 var(--ai-s3);
  padding-left: calc(100px + var(--ai-s4));
  font-size: .9375rem;
}
.ai-dzien__lista dd p { margin: 0; }

@media (max-width: 600px) {
  .ai-dzien__lista dt { grid-template-columns: 68px 1fr; gap: var(--ai-s3); }
  .ai-dzien__godzina { font-size: 1rem; }
  /* Przerwa nie jest treścią konferencji, tylko punktem orientacyjnym w dniu:
   ten sam rytm, mniejsza waga. Godzina zostaje różowa, żeby kolumna czasu
   czytała się w pionie bez dziur w kolorze.

   Selektor musi być tak samo szczegółowy jak `.ai-dzien__lista dt`, inaczej przegrywa
   i przerwa zostaje w kroju nagłówkowym. Dolny odstęp też jest konieczny: po przerwie
   nie ma wiersza opisu, więc kreska następnego punktu kleiłaby się do tekstu. */
.ai-dzien__lista dt.ai-dzien__punkt--przerwa {
  font-family: var(--ai-font-body);
  font-size: var(--ai-size-small);
  font-weight: 600;
  color: var(--ai-text);
  padding-bottom: var(--ai-s3);
}

.ai-dzien__lista dd { padding-left: calc(68px + var(--ai-s3)); }
}