/* Dietlo — KOMPONENT: karta tresci.
   Jedyny wlasciciel klasy .dietlo-card i jej typografii bazowej.

   Splaszczono dwie warstwy z base-pages.css (V1: --dietlo-shadow-md,
   V2: miekki cien dwuwarstwowy) do jednej definicji — wynik obliczony
   z kaskady, zero zmiany wizualnej. Ruch hoverowy kart tematycznych
   (.dietlo-problem/.dietlo-feature/.dietlo-help) zostal w base-pages.css
   — to karty stron, nie komponent bazowy. */

.dietlo-card {
  /* szerokosc/styl z V1, kolor obrysu z V2 */
  border: 1px solid rgba(231, 236, 232, 0.9);
  border-radius: var(--dietlo-radius-card);
  background: var(--dietlo-card);
  /* V2: cien dwuwarstwowy (kontaktowy + ambientowy) — swiadoma technika,
     celowo poza skala --dietlo-shadow-* (patrz komentarz w tokens.css) */
  box-shadow:
    0 1px 2px rgba(24, 27, 34, 0.04),
    0 14px 34px rgba(24, 27, 34, 0.06);
}

.dietlo-card h3 {
  margin: 0 0 10px;
  font-family: var(--dietlo-font-display);
  font-size: 21px; /* poza skala --dietlo-text-* — udokumentowany dlug */
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.dietlo-card p {
  margin: 0;
  color: var(--dietlo-muted);
  line-height: var(--dietlo-line-body);
}