/* ============================================================
   03 — komponenty wielokrotnego użytku: przyciski, karty, noty
   ============================================================ */

/* --- przycisk ----------------------------------------------- */

.ai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  font-family: var(--ai-font-body);
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1.2;
  color: var(--ai-on-accent);
  background: var(--ai-rose);
  border: 0;
  border-radius: var(--ai-r-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ai-fast) var(--ai-ease),
              transform var(--ai-fast) var(--ai-ease);
}
.ai-btn:hover {
  color: var(--ai-on-accent);
  background: var(--ai-rose-hover);
  transform: translateY(-1px);
}
.ai-btn:active { transform: translateY(0); }
.ai-btn--maly { padding: 11px 20px; font-size: var(--ai-size-small); }

/* --- karta treści ------------------------------------------- */

.ai-karta {
  padding: var(--ai-s4);
  background: var(--ai-card);
  border: 1px solid var(--ai-line);
  border-radius: var(--ai-r-lg);
}

/* --- nota w ramce ------------------------------------------- */
/* Ramka przerywana niesie znaczenie („tego jeszcze nie ma"), więc bierze
   magentę jako element graficzny — nie jako kolor tekstu. */

.ai-nota {
  margin: var(--ai-s5) 0 0;
  padding: 20px 24px;
  border: 1px dashed var(--ai-magenta);
  border-radius: var(--ai-r-lg);
  font-size: var(--ai-size-body);
  line-height: 1.65;
  color: var(--ai-heading);
  max-width: var(--ai-miara);
}

/* --- wyróżnienie z lewą krawędzią --------------------------- */

.ai-wyroznienie {
  padding: 16px 20px;
  background: var(--ai-tint);
  border-left: 3px solid var(--ai-rose);
  font-size: var(--ai-size-body);
  line-height: 1.65;
  color: var(--ai-rose);
  max-width: var(--ai-miara);
}

/* --- liczba w treści ---------------------------------------- */
/* Zasada redakcyjna konferencji: każda prelekcja ma liczbę. Liczby w treści
   zaznaczamy różem, żeby było widać, że obietnica jest dotrzymana. */

.ai-liczba { color: var(--ai-rose); font-weight: 700; }