/**
 * [mn_hero_slider] — bazowy styl niskiego HERO slidera.
 * Neutralny start do dostrojenia wg WYTYCZNE-DESIGN-PROJEKTU.md.
 * Steruj przez zmienne --mn-hero-* (atrybut height ustawia --mn-hero-h).
 */
.mn-hero {
  --mn-hero-h: 400px;         /* „niski" slider */
  --mn-hero-max: 640px;
  --mn-hero-min: 300px;
  --mn-hero-radius: 0;      /* ostre rogi kontenera hero */
  --mn-accent: var(--bde-brand-primary-color, #1f6f78);

  position: relative;
  overflow: hidden;
  border-radius: var(--mn-hero-radius);
  outline: none;
}

/* Ostre rogi także na wrapperach Breakdance opakowujących hero
   (gdyby sekcja/kontener miały border-radius ustawiony w builderze). */
.breakdance [class*="bde-"]:has(.mn-hero) { border-radius: 0; }

.mn-hero__viewport { overflow: hidden; width: 100%; }

/* cały slajd klikalny -> wpis (nakładka-link pod treścią) */
.mn-hero__link { position: absolute; inset: 0; z-index: 1; }

.mn-hero__track {
  display: flex;
  will-change: transform;
  transition: transform 1s cubic-bezier(.4, 0, .2, 1);   /* wolniejsze przejście slajdu */
}

.mn-hero__slide {
  position: relative;
  flex: 0 0 100%;
  height: min(var(--mn-hero-h), var(--mn-hero-max, 100vh));
  min-height: var(--mn-hero-min);
}

.mn-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;   /* kadr wyśrodkowany */
  display: block;
}
.mn-hero__img--placeholder { background: #dfe4ea; }

.mn-hero__overlay {
  position: absolute;
  inset: 0;
  /* czarny gradient: 0 na górze -> 0.8 na dole; ciemność sięga trochę wyżej (hold do 18%) */
  background: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .8) 18%, rgba(0, 0, 0, 0) 100%);
}

.mn-hero__content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0;
  /* poziomy padding > szerokość pasów strzałek (64px), żeby treść ich nie dotykała */
  padding: clamp(20px, 4vw, 48px) 80px;
  max-width: 760px;
  color: #fff;
  z-index: 2;
  pointer-events: none;      /* klik przechodzi do nakładki-linku; interaktywne elementy re-włączają pointer-events */
}

/* .mn-hero ... — podniesiona specyficzność, by biały napis wygrał z globalnym kolorem linków Breakdance */
/* Kategoria = sam napis (lekki wariant, bez pilla), biały, do lewej */
.mn-hero .mn-hero__cat {
  display: inline-block;
  pointer-events: auto;      /* kategoria klikalna mimo pointer-events:none na treści */
  margin-bottom: 16px;       /* ~8px odstępu między kategorią a górą kreski (kreska wystaje 8px w górę) */
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: opacity .2s ease;
}
.mn-hero .mn-hero__cat:hover { color: #fff; opacity: .85; }

.mn-hero__title {
  position: relative;
  margin: 0 0 14px;          /* odstęp do zajawki */
  padding-left: 16px;        /* 16px odstępu od linii do nagłówka */
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.15;
}
/* pionowa linia 1px po lewej — wystaje trochę nad i pod nagłówek */
.mn-hero__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: -8px;
  bottom: -8px;
  width: 1px;
  background: #fff;
}
/* Nagłówek „heading light" — dynamiczny biały z palety Breakdance.
   Podniesiona specyficzność (.mn-hero ...), by wygrać z globalną regułą Breakdance
   (.breakdance h2 / .breakdance a), która ma tę samą specyficzność, ale ładuje się później. */
.mn-hero .mn-hero__title,
.mn-hero .mn-hero__title a { color: var(--bde-palette-color-12, #fff); text-decoration: none; }
/* hover nagłówka: bez efektu — zostaje biały (blokuje zielony hover linku z Breakdance).
   Kursor „pointer" pozostaje domyślnie (element to link), więc widać, że klikalne. */
.mn-hero .mn-hero__title a:hover { color: var(--bde-palette-color-12, #fff); }

.mn-hero__excerpt { margin: 0; padding-left: 16px; max-width: 560px; font-size: 15px; line-height: 1.55; opacity: .9; }

/* Przycisk SECONDARY z Global Settings Breakdance.
   Specyficzność .mn-hero a.mn-hero__more = (0,2,1) — bije globalne .breakdance .button-atom (0,2,0),
   które inaczej kasuje ramkę/tło. Styl w 100% z Twoich zmiennych --bde-button-secondary-*. */
.mn-hero a.mn-hero__more {
  margin-top: 0;           /* odstęp 24px nad przyciskiem daje margin-bottom nagłówka */
  padding: var(--bde-button-padding-base, 12px 24px);
  border-radius: var(--bde-button-border-radius, 3px);
  border: var(--bde-button-border-width, 1px) solid var(--bde-button-secondary-border-color, #fff);
  background: var(--bde-button-secondary-background-color, transparent);
  color: var(--bde-button-secondary-text-color, #fff);
  font-weight: var(--bde-button-font-weight, 500);
  text-decoration: none;
}
.mn-hero a.mn-hero__more:hover {
  background: var(--bde-button-secondary-background-color-hover, #367a3e);
  color: var(--bde-button-secondary-text-color-hover, #fff);
}

/* Strzałki — ukryte, pojawiają się po najechaniu na slider:
   pełnowysokie białe półprzezroczyste (0.8) pionowe pasy, chevron z ostrymi rogami na środku. */
.mn-hero__nav {
  position: absolute;
  top: 0;
  bottom: 0;               /* pełna wysokość kontenera */
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .6);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font-size: 0;            /* chowa tekstowe ‹ › */
  color: transparent;
  opacity: 0;              /* widoczne dopiero na hover slidera */
  z-index: 4;              /* nad nakładką-linkiem i treścią -> strzałki klikalne */
  transition: opacity .25s ease, background .2s ease;
}
.mn-hero:hover .mn-hero__nav { opacity: 1; }
.mn-hero__nav:hover { background: rgba(255, 255, 255, .8); }
.mn-hero__nav--prev { left: 0; }   /* przy lewej krawędzi */
.mn-hero__nav--next { right: 0; }  /* przy prawej krawędzi */

/* chevron z ostrymi (mitrowanymi) rogami — technika border */
.mn-hero__nav::before {
  content: "";
  width: 18px; height: 18px;
  border: solid var(--bde-headings-color, #1f2a44);
  border-width: 0;
}
.mn-hero__nav--next::before { border-top-width: 3px; border-right-width: 3px; transform: rotate(45deg); margin-right: 6px; }
.mn-hero__nav--prev::before { border-top-width: 3px; border-left-width: 3px; transform: rotate(-45deg); margin-left: 6px; }

/* Kropki */
.mn-hero__dots {
  position: absolute;
  left: 0; right: 0; bottom: 18px;       /* +2px odstępu od paska ładowania */
  display: flex; justify-content: center; gap: 9px;
  z-index: 4;                            /* nad nakładką-linkiem -> kropki klikalne */
}
.mn-hero__dot {
  width: 7px; height: 7px; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.mn-hero__dot.is-active { background: #fff; transform: scale(1.25); }

/* Pasek „odliczania" przy dolnej krawędzi: zielony wypełniacz kurczy się do zmiany slajdu,
   tor pod nim biały 0.4. */
.mn-hero__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;                           /* pasek ładowania */
  background: rgba(255, 255, 255, .4);   /* tło toru — biały 0.4 */
  z-index: 3;
  pointer-events: none;                  /* nie blokuje kliknięcia slajdu */
}
.mn-hero__progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--bde-brand-primary-color, #367a3e);  /* zielony */
  transform: scaleX(1);
  transform-origin: left;
  will-change: transform;
}

/* Responsywność — breakpointy Breakdance (1119 / 767 / 479) */
@media (max-width: 767px) { .mn-hero { --mn-hero-h: 360px; } }       /* tablet pionowo */
@media (max-width: 479px) {                                          /* telefon */
  .mn-hero { --mn-hero-h: 320px; }
  .mn-hero__nav { display: none; }
  /* paski ukryte -> nie potrzeba dużego poziomego paddingu */
  .mn-hero__content { padding-left: 24px; padding-right: 24px; }
}