/*
  Mini Bootstrap‑like Layout CSS (bez Bootstrap)
  Funkcjonalność: Breakpoints, Containers, Grid, Columns, Gutters, Utilities, Z‑index, CSS Grid
  Autor: You + ChatGPT
  Uwaga: Nazwy klas inspirowane Bootstrapem, ale kod jest autorski i lekki.
*/

/* =======================================
   ZMIENNE BAZOWE
======================================= */
:root {
  /* skala odstępów (jak w Bootstrap 0..5) */
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 3rem;

  /* gutter domyślny */
  --gutter-x: 1rem;
  --gutter-y: 0;

  /* kontenery – szerokości maksymalne */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1320px;

  /* z-index scale */
  --z-n1: -1;
  --z-0: 0;
  --z-1: 10;
  --z-2: 100;
  --z-3: 1000;
  --z-4: 10000;
  --z-5: 100000;
}

/* =======================================
   BREAKPOINTS
   (zg. z Bootstrap 5)
======================================= */
@media (min-width: 576px) { :root { --bp: 576px; } } /* sm */
@media (min-width: 768px) { :root { --bp: 768px; } } /* md */
@media (min-width: 992px) { :root { --bp: 992px; } } /* lg */
@media (min-width: 1200px){ :root { --bp:1200px; } } /* xl */
@media (min-width: 1400px){ :root { --bp:1400px; } } /* xxl */

/* =======================================
   CONTAINERS
======================================= */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  margin-right: auto;
  margin-left:  auto;
  padding-right: calc(var(--gutter-x) * .5);
  padding-left:  calc(var(--gutter-x) * .5);
}
.container { max-width: 100%; }
.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }
.container-xl { max-width: var(--container-xl); }
.container-xxl{ max-width: var(--container-xxl);} 
/* container-fluid zostaje 100% */

/* =======================================
   GRID (Flex‑based)
======================================= */
.row {
  --_gx: var(--gutter-x);
  --_gy: var(--gutter-y);
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--_gx) * -.5);
  margin-left:  calc(var(--_gx) * -.5);
  margin-top:   calc(var(--_gy) * -1);
}
.row > * {
  box-sizing: border-box;
  padding-right: calc(var(--_gx) * .5);
  padding-left:  calc(var(--_gx) * .5);
  margin-top: var(--_gy);
}

.col { flex: 1 0 0%; max-width: 100%; }
.col-auto { flex: 0 0 auto; width: auto; }

/* kolumny 1..12 */
[class^="col-"], [class*=" col-"] { flex: 0 0 auto; }
.col-1  { width: 8.333333%; }
.col-2  { width: 16.666667%; }
.col-3  { width: 25%; }
.col-4  { width: 33.333333%; }
.col-5  { width: 41.666667%; }
.col-6  { width: 50%; }
.col-7  { width: 58.333333%; }
.col-8  { width: 66.666667%; }
.col-9  { width: 75%; }
.col-10 { width: 83.333333%; }
.col-11 { width: 91.666667%; }
.col-12 { width: 100%; }

/* offsety 1..11 */
.offset-1  { margin-left: 8.333333%; }
.offset-2  { margin-left: 16.666667%; }
.offset-3  { margin-left: 25%; }
.offset-4  { margin-left: 33.333333%; }
.offset-5  { margin-left: 41.666667%; }
.offset-6  { margin-left: 50%; }
.offset-7  { margin-left: 58.333333%; }
.offset-8  { margin-left: 66.666667%; }
.offset-9  { margin-left: 75%; }
.offset-10 { margin-left: 83.333333%; }
.offset-11 { margin-left: 91.666667%; }

/* Responsive kolumny */
@media (min-width: 576px) {
  .col-sm   { flex: 1 0 0%; max-width: 100%; }
  .col-sm-auto { flex: 0 0 auto; width: auto; }
  .col-sm-1  { width: 8.333333%; }
  .col-sm-2  { width: 16.666667%; }
  .col-sm-3  { width: 25%; }
  .col-sm-4  { width: 33.333333%; }
  .col-sm-5  { width: 41.666667%; }
  .col-sm-6  { width: 50%; }
  .col-sm-7  { width: 58.333333%; }
  .col-sm-8  { width: 66.666667%; }
  .col-sm-9  { width: 75%; }
  .col-sm-10 { width: 83.333333%; }
  .col-sm-11 { width: 91.666667%; }
  .col-sm-12 { width: 100%; }
  .offset-sm-1  { margin-left: 8.333333%; }
  .offset-sm-2  { margin-left: 16.666667%; }
  .offset-sm-3  { margin-left: 25%; }
  .offset-sm-4  { margin-left: 33.333333%; }
  .offset-sm-5  { margin-left: 41.666667%; }
  .offset-sm-6  { margin-left: 50%; }
  .offset-sm-7  { margin-left: 58.333333%; }
  .offset-sm-8  { margin-left: 66.666667%; }
  .offset-sm-9  { margin-left: 75%; }
  .offset-sm-10 { margin-left: 83.333333%; }
  .offset-sm-11 { margin-left: 91.666667%; }
}
@media (min-width: 768px) {
  .col-md, .col-md-auto { all: unset; }
  .col-md   { display:block; flex: 1 0 0%; max-width: 100%; }
  .col-md-auto { display:block; flex: 0 0 auto; width: auto; }
  .col-md-1  { width: 8.333333%; }
  .col-md-2  { width: 16.666667%; }
  .col-md-3  { width: 25%; }
  .col-md-4  { width: 33.333333%; }
  .col-md-5  { width: 41.666667%; }
  .col-md-6  { width: 50%; }
  .col-md-7  { width: 58.333333%; }
  .col-md-8  { width: 66.666667%; }
  .col-md-9  { width: 75%; }
  .col-md-10 { width: 83.333333%; }
  .col-md-11 { width: 91.666667%; }
  .col-md-12 { width: 100%; }
}
@media (min-width: 992px) {
  .col-lg, .col-lg-auto { all: unset; }
  .col-lg   { display:block; flex: 1 0 0%; max-width: 100%; }
  .col-lg-auto { display:block; flex: 0 0 auto; width: auto; }
  .col-lg-1  { width: 8.333333%; }
  .col-lg-2  { width: 16.666667%; }
  .col-lg-3  { width: 25%; }
  .col-lg-4  { width: 33.333333%; }
  .col-lg-5  { width: 41.666667%; }
  .col-lg-6  { width: 50%; }
  .col-lg-7  { width: 58.333333%; }
  .col-lg-8  { width: 66.666667%; }
  .col-lg-9  { width: 75%; }
  .col-lg-10 { width: 83.333333%; }
  .col-lg-11 { width: 91.666667%; }
  .col-lg-12 { width: 100%; }
}
@media (min-width: 1200px) {
  .col-xl, .col-xl-auto { all: unset; }
  .col-xl   { display:block; flex: 1 0 0%; max-width: 100%; }
  .col-xl-auto { display:block; flex: 0 0 auto; width: auto; }
  .col-xl-1  { width: 8.333333%; }
  .col-xl-2  { width: 16.666667%; }
  .col-xl-3  { width: 25%; }
  .col-xl-4  { width: 33.333333%; }
  .col-xl-5  { width: 41.666667%; }
  .col-xl-6  { width: 50%; }
  .col-xl-7  { width: 58.333333%; }
  .col-xl-8  { width: 66.666667%; }
  .col-xl-9  { width: 75%; }
  .col-xl-10 { width: 83.333333%; }
  .col-xl-11 { width: 91.666667%; }
  .col-xl-12 { width: 100%; }
}
@media (min-width: 1400px) {
  .col-xxl, .col-xxl-auto { all: unset; }
  .col-xxl   { display:block; flex: 1 0 0%; max-width: 100%; }
  .col-xxl-auto { display:block; flex: 0 0 auto; width: auto; }
  .col-xxl-1  { width: 8.333333%; }
  .col-xxl-2  { width: 16.666667%; }
  .col-xxl-3  { width: 25%; }
  .col-xxl-4  { width: 33.333333%; }
  .col-xxl-5  { width: 41.666667%; }
  .col-xxl-6  { width: 50%; }
  .col-xxl-7  { width: 58.333333%; }
  .col-xxl-8  { width: 66.666667%; }
  .col-xxl-9  { width: 75%; }
  .col-xxl-10 { width: 83.333333%; }
  .col-xxl-11 { width: 91.666667%; }
  .col-xxl-12 { width: 100%; }
}

/* =======================================
   GUTTERS (ustawiają zmienne dla .row)
======================================= */
.g-0  { --gutter-x: var(--sp-0); --gutter-y: var(--sp-0); }
.g-1  { --gutter-x: var(--sp-1); --gutter-y: var(--sp-1); }
.g-2  { --gutter-x: var(--sp-2); --gutter-y: var(--sp-2); }
.g-3  { --gutter-x: var(--sp-3); --gutter-y: var(--sp-3); }
.g-4  { --gutter-x: var(--sp-4); --gutter-y: var(--sp-4); }
.g-5  { --gutter-x: var(--sp-5); --gutter-y: var(--sp-5); }
.gx-0 { --gutter-x: var(--sp-0); }
.gx-1 { --gutter-x: var(--sp-1); }
.gx-2 { --gutter-x: var(--sp-2); }
.gx-3 { --gutter-x: var(--sp-3); }
.gx-4 { --gutter-x: var(--sp-4); }
.gx-5 { --gutter-x: var(--sp-5); }
.gy-0 { --gutter-y: var(--sp-0); }
.gy-1 { --gutter-y: var(--sp-1); }
.gy-2 { --gutter-y: var(--sp-2); }
.gy-3 { --gutter-y: var(--sp-3); }
.gy-4 { --gutter-y: var(--sp-4); }
.gy-5 { --gutter-y: var(--sp-5); }

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

/* Responsive display */
@media (min-width: 576px){ .d-sm-none{display:none!important} .d-sm-block{display:block!important} .d-sm-flex{display:flex!important} .d-sm-grid{display:grid!important} }
@media (min-width: 768px){ .d-md-none{display:none!important} .d-md-block{display:block!important} .d-md-flex{display:flex!important} .d-md-grid{display:grid!important} }
@media (min-width: 992px){ .d-lg-none{display:none!important} .d-lg-block{display:block!important} .d-lg-flex{display:flex!important} .d-lg-grid{display:grid!important} }
@media (min-width:1200px){ .d-xl-none{display:none!important} .d-xl-block{display:block!important} .d-xl-flex{display:flex!important} .d-xl-grid{display:grid!important} }
@media (min-width:1400px){ .d-xxl-none{display:none!important} .d-xxl-block{display:block!important} .d-xxl-flex{display:flex!important} .d-xxl-grid{display:grid!important} }

/* Flex helpers */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.align-start { align-items: flex-start !important; }
.align-center { align-items: center !important; }
.align-end { align-items: flex-end !important; }
.gap-0 { gap: var(--sp-0) !important; }
.gap-1 { gap: var(--sp-1) !important; }
.gap-2 { gap: var(--sp-2) !important; }
.gap-3 { gap: var(--sp-3) !important; }
.gap-4 { gap: var(--sp-4) !important; }
.gap-5 { gap: var(--sp-5) !important; }

/* Typography */
.text-start { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Order */
.order-first { order: -1 !important; }
.order-last  { order: 9999 !important; }
.order-0 { order: 0 !important; }
.order-1 { order: 1 !important; }
.order-2 { order: 2 !important; }
.order-3 { order: 3 !important; }
.order-4 { order: 4 !important; }
.order-5 { order: 5 !important; }
.order-6 { order: 6 !important; }
.order-7 { order: 7 !important; }
.order-8 { order: 8 !important; }
.order-9 { order: 9 !important; }
.order-10 { order: 10 !important; }
.order-11 { order: 11 !important; }
.order-12 { order: 12 !important; }

/* Z-index */
.z-n1 { z-index: var(--z-n1) !important; }
.z-0  { z-index: var(--z-0) !important; }
.z-1  { z-index: var(--z-1) !important; }
.z-2  { z-index: var(--z-2) !important; }
.z-3  { z-index: var(--z-3) !important; }
.z-4  { z-index: var(--z-4) !important; }
.z-5  { z-index: var(--z-5) !important; }

/* Spacing utilities (margin/padding) */
.m-0  { margin: var(--sp-0) !important; }
.m-1  { margin: var(--sp-1) !important; }
.m-2  { margin: var(--sp-2) !important; }
.m-3  { margin: var(--sp-3) !important; }
.m-4  { margin: var(--sp-4) !important; }
.m-5  { margin: var(--sp-5) !important; }
.mt-0 { margin-top: var(--sp-0) !important; }
.me-0 { margin-inline-end: var(--sp-0) !important; }
.mb-0 { margin-bottom: var(--sp-0) !important; }
.ms-0 { margin-inline-start: var(--sp-0) !important; }
.mx-0 { margin-left: var(--sp-0) !important; margin-right: var(--sp-0) !important; }
.my-0 { margin-top: var(--sp-0) !important; margin-bottom: var(--sp-0) !important; }
.mt-1 { margin-top: var(--sp-1) !important; }
.me-1 { margin-inline-end: var(--sp-1) !important; }
.mb-1 { margin-bottom: var(--sp-1) !important; }
.ms-1 { margin-inline-start: var(--sp-1) !important; }
.mx-1 { margin-left: var(--sp-1) !important; margin-right: var(--sp-1) !important; }
.my-1 { margin-top: var(--sp-1) !important; margin-bottom: var(--sp-1) !important; }
.mt-2 { margin-top: var(--sp-2) !important; }
.me-2 { margin-inline-end: var(--sp-2) !important; }
.mb-2 { margin-bottom: var(--sp-2) !important; }
.ms-2 { margin-inline-start: var(--sp-2) !important; }
.mx-2 { margin-left: var(--sp-2) !important; margin-right: var(--sp-2) !important; }
.my-2 { margin-top: var(--sp-2) !important; margin-bottom: var(--sp-2) !important; }
.mt-3 { margin-top: var(--sp-3) !important; }
.me-3 { margin-inline-end: var(--sp-3) !important; }
.mb-3 { margin-bottom: var(--sp-3) !important; }
.ms-3 { margin-inline-start: var(--sp-3) !important; }
.mx-3 { margin-left: var(--sp-3) !important; margin-right: var(--sp-3) !important; }
.my-3 { margin-top: var(--sp-3) !important; margin-bottom: var(--sp-3) !important; }
.mt-4 { margin-top: var(--sp-4) !important; }
.me-4 { margin-inline-end: var(--sp-4) !important; }
.mb-4 { margin-bottom: var(--sp-4) !important; }
.ms-4 { margin-inline-start: var(--sp-4) !important; }
.mx-4 { margin-left: var(--sp-4) !important; margin-right: var(--sp-4) !important; }
.my-4 { margin-top: var(--sp-4) !important; margin-bottom: var(--sp-4) !important; }
.mt-5 { margin-top: var(--sp-5) !important; }
.me-5 { margin-inline-end: var(--sp-5) !important; }
.mb-5 { margin-bottom: var(--sp-5) !important; }
.ms-5 { margin-inline-start: var(--sp-5) !important; }
.mx-5 { margin-left: var(--sp-5) !important; margin-right: var(--sp-5) !important; }
.my-5 { margin-top: var(--sp-5) !important; margin-bottom: var(--sp-5) !important; }

.p-0  { padding: var(--sp-0) !important; }
.p-1  { padding: var(--sp-1) !important; }
.p-2  { padding: var(--sp-2) !important; }
.p-3  { padding: var(--sp-3) !important; }
.p-4  { padding: var(--sp-4) !important; }
.p-5  { padding: var(--sp-5) !important; }
.pt-0 { padding-top: var(--sp-0) !important; }
.pe-0 { padding-inline-end: var(--sp-0) !important; }
.pb-0 { padding-bottom: var(--sp-0) !important; }
.ps-0 { padding-inline-start: var(--sp-0) !important; }
.px-0 { padding-left: var(--sp-0) !important; padding-right: var(--sp-0) !important; }
.py-0 { padding-top: var(--sp-0) !important; padding-bottom: var(--sp-0) !important; }
.pt-1 { padding-top: var(--sp-1) !important; }
.pe-1 { padding-inline-end: var(--sp-1) !important; }
.pb-1 { padding-bottom: var(--sp-1) !important; }
.ps-1 { padding-inline-start: var(--sp-1) !important; }
.px-1 { padding-left: var(--sp-1) !important; padding-right: var(--sp-1) !important; }
.py-1 { padding-top: var(--sp-1) !important; padding-bottom: var(--sp-1) !important; }
.pt-2 { padding-top: var(--sp-2) !important; }
.pe-2 { padding-inline-end: var(--sp-2) !important; }
.pb-2 { padding-bottom: var(--sp-2) !important; }
.ps-2 { padding-inline-start: var(--sp-2) !important; }
.px-2 { padding-left: var(--sp-2) !important; padding-right: var(--sp-2) !important; }
.py-2 { padding-top: var(--sp-2) !important; padding-bottom: var(--sp-2) !important; }
.pt-3 { padding-top: var(--sp-3) !important; }
.pe-3 { padding-inline-end: var(--sp-3) !important; }
.pb-3 { padding-bottom: var(--sp-3) !important; }
.ps-3 { padding-inline-start: var(--sp-3) !important; }
.px-3 { padding-left: var(--sp-3) !important; padding-right: var(--sp-3) !important; }
.py-3 { padding-top: var(--sp-3) !important; padding-bottom: var(--sp-3) !important; }
.pt-4 { padding-top: var(--sp-4) !important; }
.pe-4 { padding-inline-end: var(--sp-4) !important; }
.pb-4 { padding-bottom: var(--sp-4) !important; }
.ps-4 { padding-inline-start: var(--sp-4) !important; }
.px-4 { padding-left: var(--sp-4) !important; padding-right: var(--sp-4) !important; }
.py-4 { padding-top: var(--sp-4) !important; padding-bottom: var(--sp-4) !important; }
.pt-5 { padding-top: var(--sp-5) !important; }
.pe-5 { padding-inline-end: var(--sp-5) !important; }
.pb-5 { padding-bottom: var(--sp-5) !important; }
.ps-5 { padding-inline-start: var(--sp-5) !important; }
.px-5 { padding-left: var(--sp-5) !important; padding-right: var(--sp-5) !important; }
.py-5 { padding-top: var(--sp-5) !important; padding-bottom: var(--sp-5) !important; }

/* =======================================
   CSS GRID – lekkie helpery
======================================= */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter-y) var(--gutter-x);
}
.grid-1  { grid-template-columns: repeat(1, 1fr); }
.grid-2  { grid-template-columns: repeat(2, 1fr); }
.grid-3  { grid-template-columns: repeat(3, 1fr); }
.grid-4  { grid-template-columns: repeat(4, 1fr); }
.grid-5  { grid-template-columns: repeat(5, 1fr); }
.grid-6  { grid-template-columns: repeat(6, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }

.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

.row-span-1  { grid-row: span 1; }
.row-span-2  { grid-row: span 2; }
.row-span-3  { grid-row: span 3; }
.row-span-4  { grid-row: span 4; }
.row-span-5  { grid-row: span 5; }

/* Responsive CSS Grid pomocniczo */
@media (min-width: 576px){
  .grid-sm-2  { grid-template-columns: repeat(2,1fr); }
  .grid-sm-3  { grid-template-columns: repeat(3,1fr); }
  .grid-sm-4  { grid-template-columns: repeat(4,1fr); }
}
@media (min-width: 768px){
  .grid-md-2  { grid-template-columns: repeat(2,1fr); }
  .grid-md-3  { grid-template-columns: repeat(3,1fr); }
  .grid-md-4  { grid-template-columns: repeat(4,1fr); }
}
@media (min-width: 992px){
  .grid-lg-3  { grid-template-columns: repeat(3,1fr); }
  .grid-lg-4  { grid-template-columns: repeat(4,1fr); }
  .grid-lg-6  { grid-template-columns: repeat(6,1fr); }
}

/* =======================================
   DROBNE DODATKI
======================================= */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.min-vh-100 { min-height: 100vh !important; }

/* clearfix */
.clearfix::after { content: ""; display: block; clear: both; }

/* kontener do centrów */
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* przykładowe kolory tła/tekstu – minimalistyczne */
.bg-light { background-color: #f8f9fa !important; }
.bg-dark  { background-color: #212529 !important; color: #fff; }
.text-muted { color: #6c757d !important; }
.text-body  { color: #212529 !important; }

/* =======================================
   KONIEC
======================================= */


.accordion {
  border: 1px solid #e7e7e7;
  border-radius: 0.25rem;
}

.accordion-flush .accordion-item {
  border: 0;
}

.accordion-item {
  border-bottom: 1px solid #e7e7e7 !important;
}

.accordion-button {
  background-color: none !important;
  border: 0;
  width: 100%;
  text-align: left;
  padding: 1rem;
  font-size: 1rem;
  cursor: pointer;
  outline: none;
  transition: background-color 0.2s ease;
}

.accordion-button:hover {
  background-color: #f8f9fa;
}

.accordion-button::after {
  content: '';
  float: right;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
  transform: rotate(-135deg); /* strzałka w górę */
  transition: transform 0.2s ease;
  margin-left: auto;
  margin-right: 0rem;
}

.accordion-button.collapsed::after {
  transform: rotate(45deg); /* strzałka w dół */
}

.accordion-button:not(.collapsed)
{
	background: #fff;
}

.accordion-collapse {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease-out;
}

.accordion-collapse.show {
  max-height: 1000px; /* lub dynamiczne JS */
}

.accordion-body {
  padding: 1rem;
  background-color: #fff;
}