/* ==========================================================================
   utilities.css — minimalny zestaw klas utility (zastepuje Tailwind CDN)
   --------------------------------------------------------------------------
   Pokrywa WYLACZNIE klasy faktycznie uzyte w szablonach sklepu (storefront +
   admin). Skala odwzorowana wiernie wg domyslnej skali Tailwind
   (1 unit = 0.25rem = 4px, font-sizy Tailwind).

   WAZNE: NIE definiujemy `.grid` ani `.gap` na grid produktowy — `.grid` jest
   wlasnoscia shop.css (siatka produktow auto-fill). Ten plik MUSI byc ladowany
   PO shop.css, aby `.md:grid-cols-2` / `.md:col-span-2` mogly nadpisac
   auto-fill na stronie zamowienia (order.php).

   Inwentarz pokrytych klas (unikalne, z grep po szablonach .php):
   flex flex-wrap items-center justify-between
   gap-2 gap-3 gap-4 gap-x-4 gap-y-1
   mb-1 mb-3 mb-4 mb-5 mt-5
   font-bold text-base text-lg text-xl
   md:grid-cols-2 md:col-span-2
   (`.grid` celowo pominiete — patrz wyzej; `table-wrap`/`row-actions` to klasy
    semantyczne shop.css, nie Tailwind.)
   ========================================================================== */

/* --- Flexbox --- */
.flex            { display: flex; }
.flex-wrap       { flex-wrap: wrap; }
.items-center    { align-items: center; }
.justify-between { justify-content: space-between; }

/* --- Gap (1 unit = 0.25rem = 4px) --- */
.gap-2   { gap: 0.5rem; }   /* 8px  */
.gap-3   { gap: 0.75rem; }  /* 12px */
.gap-4   { gap: 1rem; }     /* 16px */
.gap-x-4 { column-gap: 1rem; }    /* 16px */
.gap-y-1 { row-gap: 0.25rem; }    /* 4px  */

/* --- Margin --- */
.mb-1 { margin-bottom: 0.25rem; }  /* 4px  */
.mb-3 { margin-bottom: 0.75rem; }  /* 12px */
.mb-4 { margin-bottom: 1rem; }     /* 16px */
.mb-5 { margin-bottom: 1.25rem; }  /* 20px */
.mt-5 { margin-top: 1.25rem; }     /* 20px */

/* --- Typografia (font-size / line-height wg skali Tailwind) --- */
.font-bold { font-weight: 700; }
.text-base { font-size: 1rem;    line-height: 1.5rem; }   /* 16px / 24px */
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; } /* 18px / 28px */
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; } /* 20px / 28px */

/* --- Responsywne warianty (Tailwind md: breakpoint = 768px) ---
   Uzyte tylko na order.php: dwukolumnowy uklad kart, sekcja uczestnikow
   przez 2 kolumny. Laduje sie PO shop.css, wiec nadpisuje `.grid` auto-fill. */
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:col-span-2  { grid-column: span 2 / span 2; }
}