/**
 * utilities.css
 * Zbiór klas pomocniczych (utility classes) do szybkiego stylowania.
 * Zgodne z metodologią atomowego CSS.
 */

/* =========================================
   1. LAYOUT & CONTAINER
   ========================================= */

.container {
  width: 100%;
  max-width: var(--container-width-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container-narrow {
  max-width: var(--container-width-md);
}

.container-fluid {
  max-width: 100%;
}

.bg-map-image {
  background-image: url('../images/page-bg.svg');
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  width: 100%;
  height: 100%;
}

/* =========================================
   2. FLEXBOX & GRID UTILS
   ========================================= */

.d-flex { display: flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-none { display: none; }

.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }

.gap-2 { gap: var(--spacing-2); }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }
.gap-10 { gap: var(--spacing-10); }

/* Prosty Grid */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-1-2 { grid-template-columns: 1fr 2fr; }
.grid-cols-2-1 { grid-template-columns: 2fr 1fr; }

/* =========================================
   3. SPACING UTILS (Margins & Paddings)
   ========================================= */

/* Margins */
.m-0 { margin: 0 !important;}
.mt-0 { margin-top: 0 !important;}
.mb-0 { margin-bottom: 0 !important;}

.mt-2 { margin-top: var(--spacing-2) !important;}
.mb-2 { margin-bottom: var(--spacing-2) !important;}
.my-2 { margin-top: var(--spacing-2) !important; margin-bottom: var(--spacing-2) !important; }

.mt-4 { margin-top: var(--spacing-4); }
.mb-4 { margin-bottom: var(--spacing-4) !important;}
.my-4 { margin-top: var(--spacing-4) !important; margin-bottom: var(--spacing-4) !important; }

.mt-8 { margin-top: var(--spacing-8) !important;}
.mb-8 { margin-bottom: var(--spacing-8) !important;}
.my-8 { margin-top: var(--spacing-8) !important; margin-bottom: var(--spacing-8) !important; }

.ml-0 { margin-left: var(--spacing-0) !important;}
.ml-1 { margin-left: var(--spacing-1) !important;}
.ml-2 { margin-left: var(--spacing-2) !important;}
.ml-3 { margin-left: var(--spacing-3) !important;}
.ml-4 { margin-left: var(--spacing-4) !important;}
.ml-5 { margin-left: var(--spacing-5) !important;}
.ml-6 { margin-left: var(--spacing-6) !important;}
.ml-8 { margin-left: var(--spacing-8) !important;}

.mr-0 { margin-right: var(--spacing-0) !important;}
.mr-1 { margin-right: var(--spacing-1) !important;}
.mr-2 { margin-right: var(--spacing-2) !important;}
.mr-3 { margin-right: var(--spacing-3) !important;}
.mr-4 { margin-right: var(--spacing-4) !important;}
.mr-5 { margin-right: var(--spacing-5) !important;}
.mr-6 { margin-right: var(--spacing-6) !important;}
.mr-8 { margin-right: var(--spacing-8) !important;}

.pb-section { padding-bottom: var(--spacing-8) !important; }
.pt-section { padding-top: var(--spacing-8) !important; }


/* Paddings */
.p-0 { padding: 0 !important;}
.p-4 { padding: var(--spacing-4) !important;}
.p-8 { padding: var(--spacing-8) !important;}
.py-4 { padding-top: var(--spacing-4) !important; padding-bottom: var(--spacing-4) !important; }
.py-8 { padding-top: var(--spacing-8) !important; padding-bottom: var(--spacing-8) !important   ; }
.py-16 { padding-top: var(--spacing-16) !important; padding-bottom: var(--spacing-16) !important; }
.px-4 { padding-left: var(--spacing-4) !important; padding-right: var(--spacing-4) !important; }
.px-8 { padding-left: var(--spacing-8) !important; padding-right: var(--spacing-8) !important; }
.px-16 { padding-left: var(--spacing-16) !important; padding-right: var(--spacing-16) !important; }
/* Sekcje */

/* =========================================
   4. TEXT UTILS
   ========================================= */

.text-center { text-align: center !important;}
.text-left { text-align: left !important;}
.text-right { text-align: right !important;}

.text-uppercase { text-transform: uppercase !important;}
.text-capitalize { text-transform: capitalize !important;}


.font-bold { font-weight: var(--font-weight-bold) !important;}
.font-semibold { font-weight: var(--font-weight-semibold) !important;}
.font-regular { font-weight: var(--font-weight-regular) !important;}

/* Colors */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-white { color: var(--color-white); }
.text-light { color: var(--color-text-light); }

.page-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  text-transform: none;
}

/* =========================================
   5. BACKGROUND UTILS
   ========================================= */

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-light { background-color: var(--color-bg-light); }
.bg-white { background-color: var(--color-white); }

/* =========================================
   6. RESPONSIVE UTILS
   ========================================= */

@media (min-width: 768px) {
    .md-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .md-grid-cols-1-2 { grid-template-columns: 1fr 2fr; }
    .md-grid-cols-2-1 { grid-template-columns: 2fr 1fr; }
    .md-text-left { text-align: left; }
    .pt-section { padding-top: var(--spacing-12) !important; }
    .pb-section { padding-bottom: var(--spacing-12) !important; }
}

@media (min-width: 1024px) {
    .lg-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .lg-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .lg-grid-cols-1-2 { grid-template-columns: 1fr 2fr; }
    .lg-grid-cols-2-1 { grid-template-columns: 2fr 1fr; }
    .pt-section { padding-top: var(--spacing-16) !important; }
    .pb-section { padding-bottom: var(--spacing-16) !important; }
}

@media (min-width: 1200px) {
    .xl-grid-cols-1-2 { grid-template-columns: 1fr 2fr; }
    .xl-grid-cols-2-1 { grid-template-columns: 2fr 1fr; }
}

.copy-protection-content {
   -webkit-user-select: none;  /* Chrome, Safari */
   -moz-user-select: none;     /* Firefox */
   -ms-user-select: none;      /* IE10+ */
   user-select: none;          /* Standardowa składnia */
}

body {
   -webkit-user-select: none;  /* Chrome, Safari */
   -moz-user-select: none;     /* Firefox */
   -ms-user-select: none;      /* IE10+ */
   user-select: none;          /* Standardowa składnia */
}