/* =========================================================================
   utilities.css — drobne klasy pomocnicze
   Zasada projektu: powtarzalny UI (przyciski, karty, nagłówki) → KOMPONENT
   (components.css). Jednorazowy układ / odstęp / widoczność → UTILITY (tutaj).
   Zestaw celowo wąski — tylko to, czego realnie używa strona.
   Breakpointy: md = 768px, lg = 1024px.
   ========================================================================= */

/* --- Kontener treści (dawne max-w-[1420px] mx-auto px-6) --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* --- Odstępy sekcji 
   Użycie: class="container u-mt-12 lg-mt-16" == Tailwind "mt-12 lg:mt-16". */
.u-mt-12 { margin-top: var(--space-12); }   /* 3rem  */
.u-mt-16 { margin-top: var(--space-16); }   /* 4rem  */
.u-mb-16 { margin-bottom: var(--space-16); }/* 4rem  */

@media (min-width: 1024px) {
  .lg-mt-16 { margin-top: var(--space-16); } /* 4rem  */
  .lg-mt-24 { margin-top: var(--space-24); } /* 6rem  */
  .lg-mb-24 { margin-bottom: var(--space-24); }
}

/* --- Widoczność responsywna (reużywalne; dawne hidden / md:block / lg:*) --- */
.u-hidden { display: none; }

@media (min-width: 768px) {
  .md-block { display: block; }
}
@media (min-width: 1024px) {
  .lg-hidden { display: none; }
  .lg-block  { display: block; }
  .lg-flex   { display: flex; }
}

/* --- Tekst (drobne, reużywalne) --- */
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }