/* ============================================================
   Utility-klasy motywu bos2026
   ============================================================ */

/* ============ Display ============ */
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-none { display: none; }

/* ============ Pozycja ============ */
.pos-relative { position: relative; }
.pos-absolute { position: absolute; }

/* ============ Flexbox ============ */
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.flex-none { flex: none; }
.self-start { align-self: flex-start; }

/* ============ Gap ============ */
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-9 { gap: 9px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-17 { gap: 17px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-30 { gap: 30px; }
.gap-32 { gap: 32px; }
.gap-40 { gap: 40px; }
.gap-48 { gap: 48px; }
.gap-50 { gap: 50px; }
.gap-60 { gap: 60px; }
.gap-64 { gap: 64px; }
.gap-80 { gap: 80px; }
.gap-100 { gap: 100px; }
.gap-120 { gap: 120px; }

/* ============ Margines ============ */
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-48 { margin-top: 48px; }
.mt-60 { margin-top: 60px; }
.mt-64 { margin-top: 64px; }
.mt-80 { margin-top: 80px; }
.mt-100 { margin-top: 100px; }
.mt-120 { margin-top: 120px; }
.mt-172 { margin-top: 172px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-18 { margin-bottom: 18px; }
.mb-24 { margin-bottom: 24px; }
.mb-30 { margin-bottom: 30px; }
.mb-32 { margin-bottom: 32px; }
.mb-64 { margin-bottom: 64px; }
.mb-40 { margin-bottom: 40px; }
.mb-56 { margin-bottom: 56px; }
.mb-60 { margin-bottom: 60px; }
.mb-80 { margin-bottom: 80px; }
.mb-100 { margin-bottom: 100px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ============ Padding ============ */
.p-10 { padding: 10px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }
.p-30 { padding: 30px; }
.px-4 { padding-left: 4px; padding-right: 4px; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.px-30 { padding-left: 30px; padding-right: 30px; }
.pl-32 { padding-left: 32px; }
.pr-44 { padding-right: 44px; }
.pt-8 { padding-top: 8px; }
.pt-24 { padding-top: 24px; }
.pt-32 { padding-top: 32px; }
.pt-40 { padding-top: 40px; }
.pt-60 { padding-top: 60px; }
.pt-64 { padding-top: 64px; }
.pt-80 { padding-top: 80px; }
.pt-100 { padding-top: 100px; }
.pt-112 { padding-top: 112px; }
.pt-120 { padding-top: 120px; }
.pt-140 { padding-top: 140px; }
.pt-142 { padding-top: 142px; }
.pt-148 { padding-top: 148px; }
.pt-152 { padding-top: 152px; }
.pt-160 { padding-top: 160px; }
.pt-192 { padding-top: 192px; }
.pt-228 { padding-top: 228px; }
.pt-230 { padding-top: 230px; }
.pb-8 { padding-bottom: 8px; }
.pb-16 { padding-bottom: 16px; }
.pb-24 { padding-bottom: 24px; }
.pb-30 { padding-bottom: 30px; }
.pb-60 { padding-bottom: 60px; }
.pb-64 { padding-bottom: 64px; }
.pb-80 { padding-bottom: 80px; }
.pb-100 { padding-bottom: 100px; }
.pb-112 { padding-bottom: 112px; }
.pb-160 { padding-bottom: 160px; }
.pb-192 { padding-bottom: 192px; }
.pb-228 { padding-bottom: 228px; }
.pb-230 { padding-bottom: 230px; }
.pb-240 { padding-bottom: 240px; }

/* ============ Wymiary ============ */
.w-full { width: 100%; }
.w-fit { width: fit-content; }
.w-auto { width: auto; }
.w-48 { width: 48px; }
.w-min-600 { width: min(600px, 100%); }
.h-auto { height: auto; }
.h-47 { height: 47px; }
.h-56 { height: 56px; }
.w-212 { width: 212px; }
.mw-400 { max-width: 400px; }
.mw-560 { max-width: 560px; }
.mw-700 { max-width: 700px; }
.mw-750 { max-width: 750px; }
.mw-768 { max-width: 768px; }
.mw-1010 { max-width: 1010px; }
.mh-26 { min-height: 26px; }
.mh-286 { min-height: 286px; }
.mh-400 { min-height: 400px; }
.mh-410 { min-height: 410px; }

/* ============ Rozmiar czcionki ============ */
.fs-12 { font-size: 0.75rem; }
.fs-14 { font-size: 0.875rem; }
.fs-16 { font-size: 1rem; }
.fs-18 { font-size: 1.125rem; }
.fs-20 { font-size: 1.25rem; }
.fs-24 { font-size: 1.5rem; }
.fs-28 { font-size: 1.75rem; }
.fs-36 { font-size: 2.25rem; }
.fs-48 { font-size: 3rem; }
.fs-64 { font-size: 4rem; }
.fs-78 { font-size: 4.875rem; }
.fs-80 { font-size: 5rem; }

/* ============ Interlinia ============ */
.lh-17 { line-height: 17px; }
.lh-18 { line-height: 18px; }
.lh-19 { line-height: 19px; }
.lh-20 { line-height: 20px; }
.lh-21 { line-height: 21px; }
.lh-22 { line-height: 22px; }
.lh-24 { line-height: 24px; }
.lh-25 { line-height: 25px; }
.lh-26 { line-height: 26px; }
.lh-27 { line-height: 27px; }
.lh-28 { line-height: 28px; }
.lh-31 { line-height: 31px; }
.lh-34 { line-height: 34px; }
.lh-40 { line-height: 40px; }
.lh-45 { line-height: 45px; }
.lh-53 { line-height: 53px; }
.lh-70 { line-height: 70px; }
.lh-88 { line-height: 88px; }

/* ============ Grubość / rodzina czcionki ============ */
.fw-400 { font-weight: 400; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-900 { font-weight: 900; }
.ff-main { font-family: var(--font-main); }
.ff-alt { font-family: var(--font-alt); }

/* ============ Kolor tekstu ============ */
.c-black { color: #000; }
.c-white { color: #fff; }
.c-teal { color: var(--teal); }
.c-gray { color: #444; }
.c-555 { color: #555; }

/* ============ Tło ============ */
.bg-white { background: #fff; }
.bg-transparent { background: transparent; }
.bg-green { background: var(--green); }
.bg-blue { background: var(--blue); }
.bg-yellow { background: var(--yellow); }
.bg-teal { background: var(--teal); }
.bg-darkest { background: var(--darkest); }
.bg-dark-green { background: var(--dark-green); }

/* ============ Inne ============ */
.radius-10 { border-radius: 10px; }
.radius-20 { border-radius: 20px; }
.radius-30 { border-radius: 30px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-uppercase { text-transform: uppercase; }
.text-underline { text-decoration: underline; }
.nowrap { white-space: nowrap; }
.overflow-hidden { overflow: hidden; }
.clamp-2, .clamp-3, .clamp-4 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }
.clamp-4 { -webkit-line-clamp: 4; }

/* ============================================================
   Warianty responsywne
   ============================================================ */

/* --- ≤1024px --- */
@media (max-width: 1024px) {
  .flex-col-md { flex-direction: column; }
  .items-start-md { align-items: flex-start; }
  .gap-30-md { gap: 30px; }
  .gap-40-md { gap: 40px; }
  .gap-48-md { gap: 48px; }
  .pt-64-md { padding-top: 64px; }
  .pb-64-md { padding-bottom: 64px; }
}

/* --- ≤767px --- */
@media (max-width: 767px) {
  .fs-14-sm { font-size: 0.875rem; }
  .fs-16-sm { font-size: 1rem; }
  .fs-18-sm { font-size: 1.125rem; }
  .fs-24-sm { font-size: 1.5rem; }
  .fs-28-sm { font-size: 1.75rem; }
  .fs-36-sm { font-size: 2.25rem; }
  .fs-48-sm { font-size: 3rem; }
  .lh-110p-sm { line-height: 110%; }
  .lh-140p-sm { line-height: 140%; }
  .lh-21-sm { line-height: 21px; }
  .lh-31-sm { line-height: 31px; }
  .lh-32-sm { line-height: 32px; }
  .lh-34-sm { line-height: 34px; }
  .lh-38-sm { line-height: 38px; }
  .lh-40-sm { line-height: 40px; }
  .lh-53-sm { line-height: 53px; }

  .d-none-sm { display: none; }
  .d-inline-sm { display: inline; }

  .mt-12-sm { margin-top: 12px; }
  .mt-20-sm { margin-top: 20px; }
  .mt-24-sm { margin-top: 24px; }
  .mt-35-sm { margin-top: 35px; }
  .mt-48-sm { margin-top: 48px; }
  .mt-64-sm { margin-top: 64px; }
  .mb-8-sm { margin-bottom: 8px; }
  .mb-12-sm { margin-bottom: 12px; }
  .mb-20-sm { margin-bottom: 20px; }
  .mb-40-sm { margin-bottom: 40px; }
  .mb-48-sm { margin-bottom: 48px; }

  .order-2-sm { order: 2; }
  .order-3-sm { order: 3; }
  .order-4-sm { order: 4; }

  .ff-alt-sm { font-family: var(--font-alt); }

  .gap-12-sm { gap: 12px; }
  .gap-16-sm { gap: 16px; }
  .gap-30-sm { gap: 30px; }
  .gap-20-sm { gap: 20px; }
  .gap-24-sm { gap: 24px; }
  .gap-32-sm { gap: 32px; }
  .gap-40-sm { gap: 40px; }
  .gap-48-sm { gap: 48px; }

  .flex-col-sm { flex-direction: column; }
  .items-start-sm { align-items: flex-start; }
  .items-stretch-sm { align-items: stretch; }
  .self-start-sm { align-self: flex-start; }
  .text-left-sm { text-align: left; }
  .text-center-sm { text-align: center; }

  .mh-400-sm { min-height: 400px; }
  .mh-700-sm { min-height: 700px; }
  .w-auto-sm { width: auto; }
  .w-full-sm { width: 100%; }

  .pt-20-sm { padding-top: 20px; }
  .pt-32-sm { padding-top: 32px; }
  .pt-48-sm { padding-top: 48px; }
  .pt-64-sm { padding-top: 64px; }
  .pt-90-sm { padding-top: 90px; }
  .pt-111-sm { padding-top: 111px; }
  .pt-200-sm { padding-top: 200px; }
  .pb-0-sm { padding-bottom: 0; }
  .pb-32-sm { padding-bottom: 32px; }
  .pb-48-sm { padding-bottom: 48px; }
  .pb-64-sm { padding-bottom: 64px; }
  .pb-111-sm { padding-bottom: 111px; }
  .pb-128-sm { padding-bottom: 128px; }
  .pb-200-sm { padding-bottom: 200px; }
}