@charset "UTF-8";
:root {
  --surface-surface: #fff;
  --surface-surface-dim: #fbfcff;
  --surface-surface-container-lowest: #fff;
  --surface-surface-container-low: #F7F9FF;
  --surface-surface-container: #F1F3F9;
  --surface-surface-container-high: #ECEEF4;
  --surface-surface-container-highest: #E0E2E8;
  --surface-on-surface: #191c1e;
  --surface-on-surface-variant: #44474a;
  --surface-on-surface-muted: #8e9194;
  --add-on-scrim: #2d3133;
  --add-on-shadow: rgba(62, 72, 78, 0.25);
  --add-on-shadow-2: rgba(62, 72, 78, 0.4);
  --inverse-inverse-surface: #191c1e;
  --inverse-inverse-on-surface: #fff;
  --inverse-inverse-on-surface-variant: #e9ebee;
  --inverse-inverse-on-surface-muted: #8e9194;
  --inverse-inverse-primary: #76d1ff;
  --primary-primary: #001e2b;
  --primary-on-primary: #fff;
  --primary-primary-container: #e2f3ff;
  --primary-on-primary-container: #003548;
  --primary-graphic-primary: #d5efff;
  --primary-graphic-primary-variant: #389ac6;
  --secondary-secondary: #556edf;
  --secondary-secondary-hover: #1c3aac;
  --secondary-secondary-active: #001257;
  --secondary-on-secondary: #fff;
  --secondary-secondary-container: #dde1ff;
  --secondary-on-secondary-container: #001257;
  --secondary-graphic-secondary: #b9c3ff;
  --secondary-graphic-secondary-variant: #7088fb;
  --tertiary-tertiary: #389ac6;
  --tertiary-on-tertiary: #fff;
  --tertiary-tertiary-container: #c2e8ff;
  --tertiary-on-tertiary-container: #003548;
  --tertiary-graphic-tertiary: #c2e8ff;
  --tertiary-graphic-tertiary-variant: #389ac6;
  --outline-outline: #A9ABB1;
  --outline-outline-subtle: #E0E2E8;
  --outline-outline-strong: #74777C;
  --error-error: #ae3029;
  --error-on-error: #fff;
  --error-error-container: #ffdad6;
  --error-on-error-container: #690005;
  --success-success: #006c4b;
  --success-on-success: #fff;
  --success-success-container: #bdffdd;
  --success-on-success-container: #003826;
  --warning-warning: #82781f;
  --warning-on-warning: #fff;
  --warning-warning-container: #fff39b;
  --warning-on-warning-container: #363100;
  --info-info: #556edf;
  --surface-section-tint: #F7F9FF;
  --info-on-info: #fff;
  --info-info-container: #f0efff;
  --info-on-info-container: #001257;
  --utilities: #556edf;
}

[data-theme=default] {
  --surface-surface: #fff;
  --surface-surface-dim: #fbfcff;
  --surface-surface-container-lowest: #fff;
  --surface-surface-container-low: #F7F9FF;
  --surface-surface-container: #F1F3F9;
  --surface-surface-container-high: #ECEEF4;
  --surface-surface-container-highest: #E0E2E8;
  --surface-on-surface: #191c1e;
  --surface-on-surface-variant: #44474a;
  --surface-on-surface-muted: #8e9194;
  --add-on-scrim: #2d3133;
  --add-on-shadow: rgba(62, 72, 78, 0.25);
  --add-on-shadow-2: rgba(62, 72, 78, 0.4);
  --inverse-inverse-surface: #191c1e;
  --inverse-inverse-on-surface: #fff;
  --inverse-inverse-on-surface-variant: #e9ebee;
  --inverse-inverse-on-surface-muted: #8e9194;
  --inverse-inverse-primary: #76d1ff;
  --primary-primary: #001e2b;
  --primary-on-primary: #fff;
  --primary-primary-container: #e2f3ff;
  --primary-on-primary-container: #003548;
  --primary-graphic-primary: #d5efff;
  --primary-graphic-primary-variant: #389ac6;
  --secondary-secondary: #556edf;
  --secondary-secondary-hover: #1c3aac;
  --secondary-secondary-active: #001257;
  --secondary-on-secondary: #fff;
  --secondary-secondary-container: #dde1ff;
  --secondary-on-secondary-container: #001257;
  --secondary-graphic-secondary: #b9c3ff;
  --secondary-graphic-secondary-variant: #7088fb;
  --tertiary-tertiary: #389ac6;
  --tertiary-on-tertiary: #fff;
  --tertiary-tertiary-container: #c2e8ff;
  --tertiary-on-tertiary-container: #003548;
  --tertiary-graphic-tertiary: #c2e8ff;
  --tertiary-graphic-tertiary-variant: #389ac6;
  --outline-outline: #A9ABB1;
  --outline-outline-subtle: #E0E2E8;
  --outline-outline-strong: #74777C;
  --error-error: #ae3029;
  --error-on-error: #fff;
  --error-error-container: #ffdad6;
  --error-on-error-container: #690005;
  --success-success: #006c4b;
  --success-on-success: #fff;
  --success-success-container: #bdffdd;
  --success-on-success-container: #003826;
  --warning-warning: #82781f;
  --warning-on-warning: #fff;
  --warning-warning-container: #fff39b;
  --warning-on-warning-container: #363100;
  --info-info: #556edf;
  --surface-section-tint: #F7F9FF;
  --info-on-info: #fff;
  --info-info-container: #f0efff;
  --info-on-info-container: #001257;
  --utilities: #556edf;
}

[data-theme=cyan] {
  --add-on-shadow: #2d3133;
  --add-on-shadow-2: #2d3133;
  --surface-surface-dim: #fbfcff;
  --surface-section-tint: #e8f5ff;
  --surface-surface-container-low: #f5faff;
  --surface-surface-container: #e8f5ff;
  --surface-surface-container-high: #d5efff;
  --surface-surface-container-highest: #c2e8ff;
  --inverse-inverse-surface: #003548;
  --inverse-inverse-on-surface-variant: #d5efff;
  --primary-primary: #004d67;
  --primary-on-primary-container: #004d67;
  --primary-graphic-primary: #c2e8ff;
}

[data-theme=jade] {
  --add-on-shadow: #2d3133;
  --add-on-shadow-2: #2d3133;
  --surface-surface-dim: #f3fffa;
  --surface-section-tint: #E4F8F6;
  --surface-surface-container-low: #e5fff7;
  --surface-surface-container: #c7fff0;
  --surface-surface-container-high: #abfae7;
  --surface-surface-container-highest: #a3f2de;
  --inverse-inverse-surface: #00201a;
  --inverse-inverse-primary: #87d5c2;
  --primary-primary: #106a5b;
  --primary-primary-container: #a3f2de;
  --primary-on-primary-container: #005144;
  --primary-graphic-primary: #a3f2de;
  --primary-graphic-primary-variant: #509e8d;
}

[data-theme=indigo] {
  --add-on-shadow: #2d3133;
  --add-on-shadow-2: #2d3133;
  --surface-surface-dim: #fffbff;
  --surface-section-tint: #F2EFFF;
  --surface-surface-container-low: #fcf8ff;
  --surface-surface-container: #f2efff;
  --surface-surface-container-high: #ebe9ff;
  --surface-surface-container-highest: #e1dfff;
  --inverse-inverse-surface: #6a6bd5;
  --inverse-inverse-primary: #c1c1ff;
  --primary-primary: #201c8a;
  --primary-primary-container: #e1dfff;
  --primary-on-primary-container: #3838a1;
  --primary-graphic-primary: #e1dfff;
  --primary-graphic-primary-variant: #8485f1;
}

[data-theme=yellow] {
  --add-on-shadow: #2d3133;
  --add-on-shadow-2: #2d3133;
  --surface-surface-dim: #fffbff;
  --surface-section-tint: #FAFAF4;
  --surface-surface-container-low: #fff9e7;
  --surface-surface-container: #fff5b6;
  --surface-surface-container-high: #fff39b;
  --surface-surface-container-highest: #fbed88;
  --inverse-inverse-surface: #1f1c00;
  --inverse-inverse-on-surface-muted: #000;
  --inverse-inverse-primary: #f2e580;
  --primary-primary: #1f1c00;
  --primary-primary-container: #f2e580;
  --primary-on-primary-container: #4f4800;
  --primary-graphic-primary: #f2e580;
  --primary-graphic-primary-variant: #9d9238;
}

[data-theme=sopot] {
  --surface-surface-dim: #fafaf4;
  --surface-surface-container-low: #fafaf4;
  --surface-surface-container: #f4f4ee;
  --surface-surface-container-high: #ebebe5;
  --surface-surface-container-highest: #e3e3dd;
  --surface-on-surface-muted: #74777a;
  --inverse-inverse-surface: #c2e8ff;
  --inverse-inverse-on-surface: #001e2b;
  --inverse-inverse-on-surface-variant: #004d67;
  --inverse-inverse-on-surface-muted: #000;
  --inverse-inverse-primary: #3a54c4;
  --primary-primary: #006688;
  --primary-primary-container: #c2e8ff;
  --primary-on-primary-container: #004d67;
  --primary-graphic-primary: #76d1ff;
}

:root {
  /* Kolory podstawowe */
  --color-primary: #199ACC;
  --color-primary-hover: #1580b0;
  --color-primary-light: #22B3E8;
  --color-primary-dark: #125F81;
  --color-white: #FFFFFF;
  --color-background: #F9F8F7;
  --color-text: #505050;
  --color-link-default: #167FAA;
  --cool-gray-700: #1F2937;
  /* Tekst */
  --color-heading: #050709;
  --color-body: #374151;
  --color-muted: #626573;
  /* Cienie */
  --shadow-primary: rgba(25, 154, 204, 0.3);
  /* Kurs — schematy kolorów (5 wariantów) */
  /* 1 — Niebieski */
  --kurs-1-surface-light: #e8f4fa;
  --kurs-1-surface-dim: #dcedf5;
  --kurs-1-surface-base: #f0f7fb;
  --kurs-1-dot: #3b82f6;
  /* 2 — Zielony */
  --kurs-2-surface-light: #e5f5f0;
  --kurs-2-surface-dim: #d8ede8;
  --kurs-2-surface-base: #eef7f4;
  --kurs-2-dot: #22c55e;
  /* 3 — Indygo */
  --kurs-3-surface-light: #eae6f4;
  --kurs-3-surface-dim: #ddd8ed;
  --kurs-3-surface-base: #f0edf6;
  --kurs-3-dot: #8b5cf6;
  /* 4 — Żółty */
  --kurs-4-surface-light: #faf5e4;
  --kurs-4-surface-dim: #f0ead6;
  --kurs-4-surface-base: #f8f5eb;
  --kurs-4-dot: #eab308;
  /* 5 — Domyślny (neutralny) */
  --kurs-5-surface-light: #f9fafc;
  --kurs-5-surface-dim: #f2f4fa;
  --kurs-5-surface-base: #ffffff;
  --kurs-5-dot: #374151;
  /* akcent (eyebrow, linki) per schemat */
  --kurs-1-accent: #199acc;
  --kurs-2-accent: #188d78;
  --kurs-3-accent: #4338ca;
  --kurs-4-accent: #a16207;
  --kurs-5-accent: #626573;
  /* surface-inverse (ciemna karta) per schemat */
  --kurs-1-surface-inverse: #0d405a;
  --kurs-2-surface-inverse: #093627;
  --kurs-3-surface-inverse: #2a2768;
  --kurs-4-surface-inverse: #422a0f;
  --kurs-5-surface-inverse: #0A0E14;
  /* tekst na ciemnej karcie per schemat */
  --kurs-1-text-secondary-inverse: #d6f3fc;
  --kurs-2-text-secondary-inverse: #e0f7f4;
  --kurs-3-text-secondary-inverse: #e0e7ff;
  --kurs-4-text-secondary-inverse: #e4e7f0;
  --kurs-5-text-secondary-inverse: #cbd5e1;
  --m3-secondary-seconadry: var(--cool-gray-700) ;
}

:root {
  --layout-spacing-section-padding-48-32: 4.8rem 0;
  --spacing-layout-padding-container-32-24: 3.2rem 2.4rem;
}
@media (max-width: 767.98px) {
  :root {
    --layout-spacing-section-padding-48-32: 3.2rem 1.6rem;
  }
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Poppins", sans-serif;
}

.heading--x-small {
  /* Heading/xsmall — 16px */
  font-family: "Poppins", sans-serif;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em;
  font-style: normal;
}
.heading--small {
  /* Heading/small — 18px */
  font-family: "Poppins", sans-serif;
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  font-style: normal;
}
.heading--medium {
  /* Heading/medium — 20px */
  font-family: "Poppins", sans-serif;
  font-size: 2rem !important;
  font-style: normal;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.4px;
}
.heading--large {
  /* Heading/large — 24px */
  font-family: "Poppins", sans-serif;
  font-size: 2.4rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  font-style: normal;
}
.heading--x-large {
  /* Heading/xlarge — 28px */
  font-family: "Poppins", sans-serif;
  font-size: 2.8rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  font-style: normal;
}

.body--xs, .body--x-small {
  /* Body/xsmall — 12px */
  font-family: "Poppins", sans-serif;
  font-size: 1.2rem !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.24px;
}
.body--small {
  /* Body/small — 14px */
  font-family: "Poppins", sans-serif;
  font-size: 1.4rem !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
.body--small-emphasis {
  /* Body/small — 14px, weight-emphasis */
  font-family: "Poppins", sans-serif;
  font-size: 1.4rem !important;
  font-style: normal;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}
.body--base {
  /* Body/base — 16px */
  font-family: "Poppins", sans-serif;
  font-size: 1.6rem !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
.body--base-emphasis {
  /* Body/base — 16px, weight-emphasis */
  font-family: "Poppins", sans-serif;
  font-size: 1.6rem !important;
  font-style: normal;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}
.body--large {
  /* Body/large — 18px */
  font-family: "Poppins", sans-serif;
  font-size: 1.8rem !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
.body--large-emphasis {
  /* Body/large — 18px, weight-emphasis */
  font-family: "Poppins", sans-serif;
  font-size: 1.8rem !important;
  font-style: normal;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

.label--xsmall {
  /* Label/xsmall — 12px */
  font-family: "Poppins", sans-serif;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}
.label--xsmall-emphasis {
  /* Label/xsmall — 12px, weight-emphasis */
  font-family: "Poppins", sans-serif;
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}
.label--small {
  /* Label/small — 14px */
  font-family: "Poppins", sans-serif;
  font-size: 1.4rem !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}
.label--small-emphasis {
  /* Label/small — 14px, weight-emphasis */
  font-family: "Poppins", sans-serif;
  font-size: 1.4rem !important;
  font-style: normal;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}
.label--base {
  /* Label/base — 16px */
  font-family: "Poppins", sans-serif;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  line-height: 120% !important; /* 19.2px */
}
.label--base-emphasis {
  /* Label/base — 16px, weight-emphasis */
  font-family: "Poppins", sans-serif;
  font-size: 1.6rem !important;
  font-weight: 500 !important;
  line-height: 120% !important; /* 19.2px */
}
.label--large {
  /* Label/large — 18px */
  font-family: "Poppins", sans-serif;
  font-size: 1.8rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}
.label--large-emphasis {
  /* Label/large — 18px, weight-emphasis */
  font-family: "Poppins", sans-serif;
  font-size: 1.8rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.quote--small {
  /* Quote/small — 16px, identyczne desktop/mobile */
  font-family: "Poppins", sans-serif;
  font-size: 1.6rem;
  font-style: italic;
}
.quote--medium {
  /* Quote/medium */
  font-size: 2rem;
  font-style: italic;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.4px;
}
.quote--large {
  /* Quote/large — 28px desktop / 20px mobile */
  font-family: "Poppins", sans-serif;
  font-size: clamp(2rem, 1.73rem + 0.83vw, 2.8rem);
  font-style: italic;
  letter-spacing: -0.4px;
}

.display--small {
  /* Display/small — 24px, identyczne desktop/mobile */
  font-family: "Poppins", sans-serif;
  font-size: 2.4rem !important;
  font-style: normal;
  font-weight: 600 !important;
}
.display--medium {
  /* Display/medium — 32px desktop / 28px mobile */
  font-family: "Poppins", sans-serif;
  font-size: clamp(2.8rem, 2.67rem + 0.42vw, 3.2rem) !important;
  font-style: normal;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}
.display--large {
  /* Display/large — 40px desktop / 32px mobile */
  font-family: "Poppins", sans-serif;
  font-size: clamp(3.2rem, 2.93rem + 0.83vw, 4rem) !important;
  font-style: normal;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.8px;
}
.display--x-large {
  /* Display/x-large — 56px desktop / 40px mobile  */
  font-family: "Poppins", sans-serif;
  font-size: clamp(4rem, 3.47rem + 1.67vw, 5.6rem) !important;
  font-style: normal;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: -1.12px;
}

:root {
  --spacing-max-width-full: 128rem;
}

.column--container {
  width: 100%;
  max-width: 128rem;
  margin-inline: auto;
  padding: var(--layout-spacing-section-padding-48-32);
  box-sizing: border-box;
}

.column--width-12 {
  max-width: 128rem;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .column--width-10 {
    max-width: 106rem !important;
    gap: 3.2rem;
    margin-inline: auto !important;
  }
}
.column--full-bleed {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  background-color: var(--column-background-color, transparent);
}
.column--background-content {
  background-color: var(--column-background-color, transparent);
}
.column--center {
  justify-content: center;
}
.column--v-center, .column--v-center.wp-block-columns {
  align-items: center !important;
}

.wp-block-columns-is-layout-flex {
  padding: var(--layout-spacing-section-padding-48-32);
}

@media (max-width: 767.98px) {
  .wp-block-column .wp-block-image {
    padding: 0 1.6rem;
    aspect-ratio: 34/45;
  }
}

/**
 * a-filter-tabs.scss
 * ------------------------------------------------------------------
 * Atom: pasek zakładek/filtrów (pill buttons).
 *
 * Wydzielone z mp-carousel.scss — dotychczas żyło tam jako "panel
 * filtrów karuzeli", ale marku/style nie mają nic wspólnego z samą
 * karuzelą. Ten sam komponent obsługuje teraz:
 *   - filtr miast nad karuzelą specjalistów (mp-carousel-filters-for)
 *   - zwykłe zakładki niepowiązane z żadną karuzelą (np. "Dorośli" /
 *     "Dzieci i młodzież")
 *
 * Nazwy klas i atrybutów CELOWO zostają bez zmian (.mp-carousel-filters,
 * [data-filter-value], .is-active) — mp-carousel.js czyta je po tych
 * selektorach. Zmiana nazw wymagałaby równoległej zmiany w JS.
 */
:root {
  --filter-gap: 12px;
  --filter-btn-padding: 10px 20px;
  --filter-btn-radius: 30px;
  --filter-font-size: 14px;
  --filter-font-weight: 500;
  --filter-bg-active: var(--primary-primary);
  --filter-text-active: var(--primary-on-primary);
  --filter-bg-hover: transparent;
  --filter-text-hover: var(--surface-on-surface-variant);
  --filter-bg-default: transparent;
  --filter-text-default: var(--surface-on-surface-variant);
  --filter-border-color: transparent;
}

.mp-carousel-filters {
  display: flex;
  align-items: center;
  border: 0.1rem solid #969899;
  border-radius: 2.4rem;
  height: 5rem;
  padding: 0.3rem 0.4rem;
  overflow: hidden;
  width: fit-content;
  scrollbar-width: none;
}
.mp-carousel-filters::-webkit-scrollbar {
  display: none;
}
.mp-carousel-filters--wrap {
  max-width: 100%;
  overflow-x: auto;
}
.mp-carousel-filters--wrap::after {
  content: "…";
  position: sticky;
  right: -5px;
  flex-shrink: 0;
  align-self: stretch;
  width: 5.5rem;
  background: linear-gradient(to right, transparent, var(--surface-surface) 20%);
  pointer-events: none;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 4.8rem;
  padding-left: 2rem;
}
.mp-carousel-filters.mp-carousel-filters--at-end::after {
  opacity: 0;
}
@media (max-width: 768px) {
  .mp-carousel-filters {
    /* Na urządzeniach mobilnych filtry zamieniają się w przewijany poziomo pasek */
  }
  .mp-carousel-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .mp-carousel-filters--wrap {
    overflow-x: auto;
    padding: 5px;
    width: 100%;
  }
  .mp-carousel-filters {
    /* Ukrywanie paska przewijania (Scrollbara) przy zachowaniu funkcjonalności */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  .mp-carousel-filters::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
}
.mp-carousel-filters [data-filter-value] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.4rem;
  padding: 0 1.6rem;
  border: none;
  border-radius: 2rem;
  background: transparent;
  color: #374151;
  font-family: "Poppins", sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
  /* Stan: Hover (najechanie myszką) */
}
.mp-carousel-filters [data-filter-value]:hover {
  color: var(--filter-text-hover);
  background-color: var(--filter-bg-hover);
}
.mp-carousel-filters [data-filter-value]:focus {
  background: inherit !important;
}
.mp-carousel-filters [data-filter-value] {
  /* Stan: Aktywny / Wybrany filtr */
}
.mp-carousel-filters [data-filter-value].is-active {
  color: var(--filter-text-active);
  background-color: var(--filter-bg-active) !important;
  pointer-events: none; /* Blokuje ponowne kliknięcie aktywnego */
  z-index: 1;
}
.mp-carousel-filters [data-filter-value] {
  /* Stan: Focus (dostępność dla klawiatury) */
}
.mp-carousel-filters [data-filter-value]:focus-visible {
  outline: 2px solid var(--filter-bg-active);
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .mp-carousel-filters [data-filter-value] {
    padding: 8px 16px;
    font-size: 13px;
  }
}

/**
 * mp-carousel.css
 * ------------------------------------------------------------------
 * Style bazowe dla uniwersalnej karuzeli (mp-carousel.js).
 * Liczba kolumn per breakpoint jest sterowana zmiennymi CSS, które
 * mogą być nadpisane:
 *   a) inline w HTML: style="--mp-carousel-cols-desktop:5"
 *   b) automatycznie przez JS na podstawie atrybutów
 *      data-carousel-cols-desktop / -tablet / -mobile / -mobile-xs
 *
 * Domyślne wartości (4 / 3 / 2 / 1) można więc zmieniać
 * per-instancja, per blok ACF, bez dotykania tego pliku.
 */
.mp-carousel {
  --mp-carousel-gap: 20px;
  --mp-carousel-cols-desktop: 4;
  --mp-carousel-cols-tablet: 3;
  --mp-carousel-cols-mobile: 2;
  --mp-carousel-cols-mobile-xs: 1;
  --padding-sides-mobile: 1.6rem;
  --mp-carousel-peek: clamp(22px, 7.7vw, 34px);
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  justify-content: flex-start;
}

.mp-carousel__viewport {
  overflow: visible;
  max-width: var(--spacing-max-width-full, 128rem);
  margin-inline: auto;
}
.mp-carousel__viewport:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
@media (max-width: 767.98px) {
  .mp-carousel__viewport {
    padding-bottom: 6.4rem;
  }
}

.mp-carousel__track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--mp-carousel-gap);
}
@media (max-width: 767.98px) {
  .mp-carousel__track {
    /*padding: 0 var(--padding-sides-mobile);*/
    padding-left: var(--padding-sides-mobile);
  }
}

.mp-carousel__item {
  flex: 0 0 calc((100% - (var(--mp-carousel-cols-desktop) - 1) * var(--mp-carousel-gap)) / var(--mp-carousel-cols-desktop));
  min-width: 0;
}
@media (max-width: 767.98px) {
  .mp-carousel__item {
    width: 29.6rem !important;
    max-width: 29.6rem !important;
  }
}
.mp-carousel__item img {
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
}

.mp-carousel__item[hidden] {
  display: none !important;
}

/* ------------------------------------------------------------------
 * Tryb aktywny (slider) — nadawany przez JS, gdy liczba widocznych
 * elementów przekracza próg (data-carousel-threshold / -mobile).
 * ------------------------------------------------------------------ */
.mp-carousel.is-active {
  overflow: hidden;
}
.mp-carousel.is-active .mp-carousel__viewport {
  cursor: grab;
}
.mp-carousel.is-active .mp-carousel__viewport:active {
  cursor: grabbing;
}
.mp-carousel.is-active .mp-carousel__track {
  will-change: transform;
}
.mp-carousel.is-active .mp-carousel__item {
  user-select: none;
}

/* ------------------------------------------------------------------
 * "Fan" (desktop/tablet) — elementy poza aktywnym oknem są przygaszone;
 * JS oznacza aktywne klasą --in-view (patrz _updateActiveWindow()).
 * Na mobile (centerMode) JS nie dodaje/usuwa tej klasy w ogóle, więc ta
 * reguła jest tam martwa — peek ma zostać pełnokolorowy (patrz sekcja
 * RESPONSYWNOŚĆ niżej, gdzie i tak nadpisujemy na max-width:768px).
 * ------------------------------------------------------------------ */
.mp-carousel.is-active .mp-carousel__item {
  opacity: 0.2;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.mp-carousel.is-active .mp-carousel__item.mp-carousel__item--in-view {
  opacity: 1;
  cursor: default;
}

/* ------------------------------------------------------------------
 * Strzałki
 * ------------------------------------------------------------------ */
button.mp-carousel__arrow {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  aspect-ratio: 1/1;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  padding: 0;
}
@media (min-width: 768px) {
  button.mp-carousel__arrow {
    top: 50%;
    transform: translateY(-50%);
  }
}
@media (max-width: 767.98px) {
  button.mp-carousel__arrow {
    bottom: 0;
    transform: translateX(-50%);
  }
  button.mp-carousel__arrow.mp-carousel__arrow--prev {
    left: calc(50% - 2.8rem);
  }
  button.mp-carousel__arrow.mp-carousel__arrow--next {
    left: calc(50% + 2.8rem);
  }
}
button.mp-carousel__arrow:hover {
  background: none !important;
  opacity: 0.7;
}
button.mp-carousel__arrow:focus {
  background: none !important;
}
button.mp-carousel__arrow:disabled {
  display: none;
}
button.mp-carousel__arrow:before {
  content: "";
  display: block;
  width: 4rem;
  height: 4rem;
  background-color: var(--primary-primary);
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PG1hc2sgaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgeD0iMCIgeT0iMCIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSI+PHBhdGggZD0iTTAgMGg0MHY0MEgweiIvPjwvbWFzaz48ZyBtYXNrPSJ1cmwoI2EpIj48cGF0aCBkPSJNMTguMTcyIDIxLjA0N0gyNUExLjAxNiAxLjAxNiAwIDAgMCAyNi4wNDcgMjAgMS4wMTUgMS4wMTUgMCAwIDAgMjUgMTguOTUzaC02LjgyOGwyLjU2NS0yLjU2NWEuOTguOTggMCAwIDAgLjMwMS0uNzI2cTAtLjQzLS4zMDEtLjczMmExIDEgMCAwIDAtLjczMi0uMzAxLjk4Ljk4IDAgMCAwLS43MjYuM2wtNC4xNTggNC4xNThxLS4zOS4zOS0uMzkuOTEzIDAgLjUyNC4zOS45MTRsNC4xNTggNC4xNTdxLjMuMy43MjkuMjkzLjQyNy0uMDA3LjcyOS0uMzEuMy0uMy4zMDEtLjczMSAwLS40MzEtLjMwMS0uNzI2em0xLjgzIDE0Ljc4N3EtMy4yNjcgMC02LjE1Mi0xLjI0N2ExNi4xIDE2LjEgMCAwIDEtNS4wMzctMy4zOTggMTYuMSAxNi4xIDAgMCAxLTMuNC01LjAzNXEtMS4yNDYtMi44ODMtMS4yNDctNi4xNSAwLTMuMjg2IDEuMjQ3LTYuMTc2dDMuMzk4LTUuMDI5YTE2LjIgMTYuMiAwIDAgMSA1LjAzNS0zLjM4NXEyLjg4NC0xLjI0NyA2LjE1LTEuMjQ3IDMuMjg2IDAgNi4xNzYgMS4yNDcgMi44OSAxLjI0NiA1LjAyOSAzLjM4MyAyLjEzNyAyLjEzNyAzLjM4NSA1LjAyN3QxLjI0NyA2LjE3M3EwIDMuMjY4LTEuMjQ2IDYuMTUzYTE2LjIgMTYuMiAwIDAgMS0zLjM4NCA1LjAzN3EtMi4xMzcgMi4xNTItNS4wMjYgMy40LTIuODkgMS4yNDctNi4xNzQgMS4yNDciLz48L2c+PC9zdmc+");
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PG1hc2sgaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgeD0iMCIgeT0iMCIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSI+PHBhdGggZD0iTTAgMGg0MHY0MEgweiIvPjwvbWFzaz48ZyBtYXNrPSJ1cmwoI2EpIj48cGF0aCBkPSJNMTguMTcyIDIxLjA0N0gyNUExLjAxNiAxLjAxNiAwIDAgMCAyNi4wNDcgMjAgMS4wMTUgMS4wMTUgMCAwIDAgMjUgMTguOTUzaC02LjgyOGwyLjU2NS0yLjU2NWEuOTguOTggMCAwIDAgLjMwMS0uNzI2cTAtLjQzLS4zMDEtLjczMmExIDEgMCAwIDAtLjczMi0uMzAxLjk4Ljk4IDAgMCAwLS43MjYuM2wtNC4xNTggNC4xNThxLS4zOS4zOS0uMzkuOTEzIDAgLjUyNC4zOS45MTRsNC4xNTggNC4xNTdxLjMuMy43MjkuMjkzLjQyNy0uMDA3LjcyOS0uMzEuMy0uMy4zMDEtLjczMSAwLS40MzEtLjMwMS0uNzI2em0xLjgzIDE0Ljc4N3EtMy4yNjcgMC02LjE1Mi0xLjI0N2ExNi4xIDE2LjEgMCAwIDEtNS4wMzctMy4zOTggMTYuMSAxNi4xIDAgMCAxLTMuNC01LjAzNXEtMS4yNDYtMi44ODMtMS4yNDctNi4xNSAwLTMuMjg2IDEuMjQ3LTYuMTc2dDMuMzk4LTUuMDI5YTE2LjIgMTYuMiAwIDAgMSA1LjAzNS0zLjM4NXEyLjg4NC0xLjI0NyA2LjE1LTEuMjQ3IDMuMjg2IDAgNi4xNzYgMS4yNDcgMi44OSAxLjI0NiA1LjAyOSAzLjM4MyAyLjEzNyAyLjEzNyAzLjM4NSA1LjAyN3QxLjI0NyA2LjE3M3EwIDMuMjY4LTEuMjQ2IDYuMTUzYTE2LjIgMTYuMiAwIDAgMS0zLjM4NCA1LjAzN3EtMi4xMzcgMi4xNTItNS4wMjYgMy40LTIuODkgMS4yNDctNi4xNzQgMS4yNDciLz48L2c+PC9zdmc+");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}

.mp-carousel__arrow[hidden] {
  /*display: none;*/
}

.mp-carousel__arrow--prev {
  left: calc(max(0px, (100vw - var(--spacing-max-width-full, 128rem)) / 2) - 6.4rem);
}
.mp-carousel__arrow--next {
  right: calc(max(0px, (100vw - var(--spacing-max-width-full, 128rem)) / 2) - 6.4rem);
}
.mp-carousel__arrow--next:before {
  transform: rotate(180deg);
}

/* ==========================================================================
   RESPONSYWNOŚĆ (Mobile friendly)
   ========================================================================== */
@media (max-width: 1024px) {
  .mp-carousel__item {
    flex-basis: calc((100% - (var(--mp-carousel-cols-tablet) - 1) * var(--mp-carousel-gap)) / var(--mp-carousel-cols-tablet));
  }
}
@media (max-width: 768px) {
  .mp-carousel__viewport {
    max-width: none;
    margin-inline: 0;
  }
  .mp-carousel__item {
    flex-basis: calc((100% - var(--mp-carousel-peek) * 2 - (var(--mp-carousel-cols-mobile) - 1) * var(--mp-carousel-gap)) / var(--mp-carousel-cols-mobile));
  }
  .mp-carousel.is-active .mp-carousel__item {
    opacity: 1;
    cursor: default;
  }
  .mp-carousel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 1.6rem;
    column-gap: 1.6rem;
  }
  .mp-carousel__viewport {
    flex: 1 1 100%;
    min-width: 0;
  }
  .mp-carousel__arrow {
    position: static;
    transform: none;
    width: 36px;
    height: 36px;
  }
  .mp-carousel__arrow[hidden] {
    display: inline-flex !important;
    opacity: 0.35;
    pointer-events: none;
  }
}
@media (max-width: 480px) {
  .mp-carousel__item {
    flex-basis: calc((100% - var(--mp-carousel-peek) * 2 - (var(--mp-carousel-cols-mobile-xs) - 1) * var(--mp-carousel-gap)) / var(--mp-carousel-cols-mobile-xs));
  }
}
/* Uszanowanie preferencji ograniczenia animacji */
@media (prefers-reduced-motion: reduce) {
  .mp-carousel__track {
    transition: none !important;
  }
}