/**
 * Nadpisania motywu portalu — ładowane po site.css.
 * Sekcja pogody: normalny układ (bez nakładania na zamknięte szlaki).
 */

/*
 * Bootstrap reboot: `:root { scroll-behavior: smooth }` przy prefers-reduced-motion.
 * Po soft-nav Next/ScrollRestoration woła scrollTo(0) bez `behavior`, więc CSS
 * animuje dojazd do góry i walczy ze scrollem użytkownika („czasami skacze do góry”).
 * Jawne behavior:'smooth' w JS (akordeon, kotwice) nadal działa.
 */
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: auto;
  }
}

/* Po zdjęciu overflow z .gp-hero (fixed hamburger) szeroka treść
   potrafi wypchnąć dokument w bok — tnij tylko oś X na poziomie html. */
html {
  overflow-x: clip;
}

.gp-wx.gp-wx--stacked {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.gp-wx.gp-wx--stacked .gp-wx__viewport {
  position: relative;
  height: auto;
  min-height: 0;
  overflow: visible;
  margin-top: 20px;
  margin-bottom: 30px;
}

.gp-wx.gp-wx--stacked .gp-wx__slider {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  overflow: visible;
  overflow-y: visible;
}

.gp-wx.gp-wx--stacked .gp-wx__heading {
  position: relative;
  z-index: 2;
}

/* Filtr pasm — rezerwuj miejsce pod nagłówkiem */
.gp-wx.gp-wx--stacked .gp-wx__heading header {
  padding-bottom: 3.5rem;
}

/* Lista pasm bliżej tytułu „warunki pogodowe" (bez ruszania strzałek) */
.gp-wx.gp-wx--stacked .gp-wx__range {
  margin-top: -1.75rem;
}

/* Stabilny układ slajdów — bez animacji szerokości przy doładowaniu kamery */
.gp-wx.gp-wx--stacked .gp-wx__container {
  transition: opacity 0.5s, transform 0.5s;
}

.gp-wx.gp-wx--stacked .gp-wx__image--placeholder {
  aspect-ratio: 4 / 3;
  min-height: 120px;
  background: #f0f0f0;
}

.gp-trail {
  padding-top: 0;
  margin-top: 2rem;
  position: relative;
  z-index: 0;
}

/* Kafelki — zwykły tekst; skrócenie z „...” robi JS, bez ucinania wiersza w połowie */
.gp-trail__describtion {
  height: auto !important;
  max-height: 190px;
  overflow: hidden;
}

.gp-trail__valid-until {
  flex: 0 0 auto;
  margin: 0 0 0.35em;
}

.gp-trail__excerpt {
  margin: 0;
  flex: 0 1 auto;
  overflow: visible;
  font-size: inherit;
  font-weight: 500;
  text-align: left;
  word-break: break-word;
}

@media (max-width: 991.98px) {
  .gp-trail__describtion {
    max-height: 100px;
  }
}

@media (max-width: 1024px) {
  .gp-wx.gp-wx--stacked .gp-wx__viewport {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .gp-wx.gp-wx--stacked .gp-wx__viewport {
    margin-top: 30px;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .gp-wx.gp-wx--stacked .gp-wx__viewport {
    margin-top: 35px;
    margin-bottom: 20px;
  }

  .gp-wx.gp-wx--stacked .gp-wx__heading header {
    padding-bottom: 2.5rem;
  }
}

/*
 * Strona główna — hero w flow dokumentu.
 * min-height:100vh trzyma pierwszy ekran, gdy mapa / pogoda / numery się mieszczą.
 * Bez max-height: gdy pionowo brakuje miejsca, zdjęcie w tle rośnie z treścią
 * i reszta jest widoczna po scrollu (zamiast nachodzić na Aktualności).
 */
.gp-hero:not(.gp-hero--subpage) {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  padding-bottom: 0;
}

.gp-hero:not(.gp-hero--subpage) > .min-vh-100 {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'menu'
    'content'
    'social';
  min-height: 100vh;
  max-height: none;
  height: auto;
  /* Pas na nagłówek Aktualności na dole zdjęcia (news ma ujemny margin). */
  padding-bottom: 8rem;
}

.gp-hero--no-news:not(.gp-hero--subpage) > .min-vh-100 {
  padding-bottom: 0;
  grid-template-rows: auto 1fr;
}

@media (max-width: 1024px) {
  .gp-hero:not(.gp-hero--subpage):not(.gp-hero--no-news) > .min-vh-100 {
    padding-bottom: 100px;
  }
}

@media (max-width: 480px) {
  .gp-hero:not(.gp-hero--subpage):not(.gp-hero--no-news) > .min-vh-100 {
    padding-bottom: 72px;
  }
}

/*
 * Media pokrywa całe .min-vh-100 (także wyższe niż 100vh).
 * brightness(0.7) jak w site.css (video / .gp-hero__bcg), żeby jasny śnieg
 * nie wyglądał jak osobny pasek pod scrimem.
 */
.gp-hero:not(.gp-hero--subpage) > .min-vh-100 > .gp-hero__media,
.gp-hero:not(.gp-hero--subpage) > .min-vh-100 > .gp-hero__video,
.gp-hero:not(.gp-hero--subpage) > .min-vh-100 > .gp-hero__video-poster {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center;
  filter: brightness(0.7);
}

/* Homepage: lekki scrim tylko u góry pod menu — bez dolnego pasa. */
.gp-hero:not(.gp-hero--subpage) > .min-vh-100::before {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.12) 12%,
    transparent 28%
  );
}

#newsSection.gp-news {
  position: relative;
  z-index: 1;
  /* Nagłówek na dole zdjęcia — hero jest w flow, więc ujemny margin zamiast padding-top:100vh. */
  margin-top: -8rem !important;
  padding-top: 0;
  margin-bottom: 20px;
  color: #fff;
  pointer-events: none;
}

/* Brak aktualności: hero sam zajmuje wysokość, bez dodatkowego spaceru. */
#newsSection.gp-news:empty {
  padding-top: 0;
  margin-top: 0 !important;
  margin-bottom: 0;
}

#newsSection.gp-news > * {
  pointer-events: auto;
}

@media (max-width: 1024px) {
  #newsSection.gp-news {
    margin-top: -100px !important;
    margin-bottom: 0;
  }

  #newsSection.gp-news:empty {
    margin-top: 0 !important;
  }
}

/* Phone: mniejszy pas pod Aktualnościami. */
@media (max-width: 480px) {
  #newsSection.gp-news {
    margin-top: -72px !important;
  }

  #newsSection.gp-news .gp-news__heading .h2,
  #newsSection.gp-news .gp-news__heading h2 {
    font-size: clamp(2.2rem, 9vw, 3.2rem);
  }
}

/*
 * site.css przy ≤1280 ustawia .gp-news .gp-tile { width:100% }, ale później
 * .half-width { width: calc(50% - 4.5px) } wygrywa tą samą specyficznością —
 * stąd „kwadraty” 2×2 na phone (min-height:50vw + wąska kolumna).
 */
@media (max-width: 1280px) {
  .gp-news .gp-tile.half-width {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .gp-news .gp-tile .h3,
  .gp-news .gp-tile h3 {
    font-size: 1.35rem;
    line-height: 1.2;
  }
}

/*
 * site.css: .gp-news { margin-top:-8rem / -100px } — na homepage Aktualności
 * nakładają nagłówek na zdjęcie; /poradnik i inne .gp-news — bez ujemnego marginesu.
 */
.gp-news:not(#newsSection) {
  margin-top: 0;
}

/* #guideSection na /poradnik ma hideTitle (tytuł jest w hero). */
#guideSection.gp-news {
  position: relative;
  z-index: 1;
  color: #fff;
}

/*
 * Homepage: Poradnik zaraz po „GOPR w liczbach” — nagłówek na zdjęciu metrics
 * (jak Aktualności na filmie). Nie dotyczy /poradnik.
 * margin-bottom:20px jak site.css / legacy — odstęp przed banerem fundacji.
 */
.gp-metrics + #guideSection.gp-news {
  margin-top: -8rem;
  margin-bottom: 20px;
}

@media (max-width: 1280px) {
  .gp-metrics + #guideSection.gp-news {
    margin-top: -100px;
    margin-bottom: 0;
  }
}

/* Baner fundacji — tylko warstwa tła; NIE ruszamy .logo (absolute w site.css). */
.gp-metrics + #guideSection.gp-news + .gp-promo {
  position: relative;
  z-index: 0;
  isolation: isolate;
  margin-top: 0;
}

.gp-metrics + #guideSection.gp-news + .gp-promo .background-image {
  z-index: 0;
}

/* Nagłówek + kafelki — homepage Poradnik jak Aktualności; /poradnik osobno. */
#newsSection.gp-news .gp-tile-grid {
  margin-top: 4rem;
}

#newsSection.gp-news .gp-tile-grid.no-title {
  margin-top: 20px;
}

.gp-news:not(#newsSection) .gp-tile-grid {
  margin-top: 2rem;
}

/* Bez osobnego tytułu sekcji (Działalność, projekty…) — jak site.css */
.gp-news:not(#newsSection) .gp-tile-grid.no-title {
  margin-top: 40px;
}

/* Homepage Poradnik — nadpisuje ogólne reguły .gp-news:not(#newsSection) */
.gp-metrics + #guideSection.gp-news .gp-tile-grid {
  margin-top: 4rem;
}

.gp-metrics + #guideSection.gp-news .gp-tile-grid.no-title {
  margin-top: 20px;
}

@media (max-width: 1280px) {
  #newsSection.gp-news .gp-tile-grid,
  .gp-metrics + #guideSection.gp-news .gp-tile-grid {
    margin-top: -20px;
  }

  #newsSection.gp-news .gp-tile-grid.no-title,
  .gp-metrics + #guideSection.gp-news .gp-tile-grid.no-title {
    margin-top: 0;
  }

  .gp-news:not(#newsSection) .gp-tile-grid {
    margin-top: 1.25rem;
  }

  .gp-news:not(#newsSection) .gp-tile-grid.no-title {
    margin-top: 0;
  }

  .gp-metrics + #guideSection.gp-news .gp-tile-grid {
    margin-top: -20px;
  }
}

@media (max-width: 1024px) {
  #newsSection.gp-news .gp-tile-grid,
  .gp-metrics + #guideSection.gp-news .gp-tile-grid {
    margin-top: -25px;
  }
}

/* Hero — wspólne menu (strona główna + podstrony) */
.gp-hero > .min-vh-100,
.gp-hero > .min-vh-50 {
  position: relative;
}


/* Wspólny nagłówek hero — logo i menu nad czarnym paskiem na każdej stronie */
.gp-hero .gp-hero__logo {
  z-index: 3000;
}

.gp-hero .gp-hero__menu {
  grid-area: menu;
  position: relative;
  z-index: 3000;
}

/* Czarny pasek ma z-index 2000, menu hero 3000 — przezroczysta kolumna nawigacji
   przykrywała „Wybierz Grupę”, kontrast, rozmiar czcionki i BIP. */
.gp-hero .gp-hero__menu,
.gp-hero .gp-hero__menu-top,
.gp-hero .gp-hero__menu-top--nav,
.gp-hero .gp-hero__nav {
  pointer-events: none;
}

.gp-hero .gp-hero__menu-top--logo,
.gp-hero .gp-menu-toggle,
.gp-hero .gp-hero__nav ul a {
  pointer-events: auto;
}

/* Aktywna pozycja menu głównego — legacy site.css ustawia font-weight: 600. */
.gp-hero__nav ul li a.active,
#desktop-mobile-nav ul li a.active {
  font-weight: 600;
}

#hero-primary-nav.mobile-active,
#hero-primary-nav.mobile-active ul,
#hero-primary-nav.mobile-active ul a {
  pointer-events: auto;
}

#desktop-mobile-nav[data-open='true'],
#desktop-mobile-nav[data-open='true'] a {
  pointer-events: auto;
}

@media (min-width: 1281px) {
  #desktop-mobile-nav {
    width: 100%;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 0 0 20px 20px;
  }

  #desktop-mobile-nav:not([data-open='true']) {
    display: none !important;
  }

  #desktop-mobile-nav ul {
    flex-direction: column;
    text-align: center;
    padding: 20px 0 0;
    margin-top: 0;
    gap: 0;
    flex-wrap: nowrap;
  }

  #desktop-mobile-nav ul li {
    margin: 10px 0;
    line-height: 1.5;
  }
}

@media (max-width: 1280px) {
  #desktop-mobile-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Otwarty select „Wybierz Grupę” — rozpuszczamy kontekst menu hero (3000) i obniżamy
   tylko kolumnę nawigacji pod czarny pasek (2000), żeby lista z paska była nad linkami.
   Logo zostaje na z-index 3000, więc pasek go nie zasłania. */
body.gp-group-menu-open .gp-hero .gp-hero__menu {
  z-index: auto !important;
}

body.gp-group-menu-open .gp-hero .gp-hero__menu-top--nav {
  position: relative;
  z-index: 1500 !important;
}

/*
 * Hamburger i logo są position:fixed wewnątrz .gp-hero.overflow-hidden.
 * Po zescrollowaniu poniżej hero fixed potomkowie bywają przycinani / przykrywani.
 * Zdejmujemy overflow z kontenerów hero (media przycinają się same) i trzymamy
 * menu nad treścią. Overlay jest na document.body (#gp-mobile-nav-overlay).
 */
.gp-hero,
.gp-hero.overflow-hidden,
.gp-hero > .min-vh-100,
.gp-hero > .min-vh-50 {
  overflow: visible !important;
}

.gp-hero .gp-hero__media,
.gp-hero .gp-hero__video,
.gp-hero .gp-hero__video-poster,
.gp-hero .gp-hero__bcg {
  overflow: hidden;
}

.gp-hero .gp-hero__menu {
  z-index: 7000;
}

.gp-hero .gp-menu-toggle {
  z-index: 7100;
}

.gp-hero .gp-hero__logo {
  z-index: 7100;
}

/* Overlay portowany do body — poza stacking/overflow hero, na każdej szerokości */
#gp-mobile-nav-overlay {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 7050 !important;
  transform: none !important;
  background: rgba(0, 0, 0, 0.92);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

#gp-mobile-nav-overlay .gp-mobile-nav-overlay__close {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transform: translate(-50%, -110%);
}

#gp-mobile-nav-overlay .gp-mobile-nav-overlay__close-line {
  position: absolute;
  width: 28px;
  height: 3px;
  border-radius: 5px;
  background: #fff;
}

#gp-mobile-nav-overlay .gp-mobile-nav-overlay__close-line:first-child {
  transform: rotate(45deg);
}

#gp-mobile-nav-overlay .gp-mobile-nav-overlay__close-line:last-child {
  transform: rotate(-45deg);
}

#gp-mobile-nav-overlay .gp-mobile-nav-overlay__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#gp-mobile-nav-overlay ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  width: auto;
  gap: 0;
  list-style: none;
  text-align: center;
}

#gp-mobile-nav-overlay ul li {
  margin: 20px 0;
  line-height: 1.5;
  list-style: none;
}

#gp-mobile-nav-overlay ul a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 2.2rem;
  pointer-events: auto;
}

body.gp-mobile-nav-open {
  overflow: hidden;
}

/* Hamburger zostaje pod X / nie dubluje się wizualnie przy otwartym menu */
body.gp-mobile-nav-open .gp-menu-toggle {
  visibility: hidden;
  pointer-events: none;
}

.gp-hero > .min-vh-100 > video,
.gp-hero > .min-vh-100 > .gp-hero__video,
.gp-hero > .min-vh-100 > .gp-hero__video-poster,
.gp-hero > .min-vh-100 > .gp-hero__media,
.gp-hero > .min-vh-50 > video,
.gp-hero > .min-vh-50 > .gp-hero__video,
.gp-hero > .min-vh-50 > .gp-hero__video-poster,
.gp-hero > .min-vh-50 > .gp-hero__media {
  object-fit: cover;
  inset: 0;
  z-index: 0;
}

.gp-hero:not(.gp-hero--subpage) .gp-hero__content {
  grid-area: content;
  position: relative;
  z-index: 2;
  align-self: start;
  align-items: flex-start !important;
}

/* Bootstrap .row ma ujemne marginesy ±7.5px — na phone wypycha scrollWidth > 100vw. */
@media (max-width: 768px) {
  .gp-hero:not(.gp-hero--subpage) .gp-hero__content.row {
    --bs-gutter-x: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Na phone site.css daje margin-top:250px — za dużo w 100vh z tabelą pogody. */
@media (max-width: 480px) {
  .gp-hero:not(.gp-hero--subpage) .gp-hero__content {
    margin-top: 160px !important;
  }
}

/*
 * Duże / wysokie ekrany: wyśrodkuj mapę + GOPR/pogodę w wolnej przestrzeni 1fr.
 * Na niższych oknach treść zostaje u góry; gdy nie mieści się w 100vh,
 * .min-vh-100 rośnie (zdjęcie wyższe) zamiast nachodzić na Aktualności.
 */
@media (min-width: 1281px) and (min-height: 1000px) {
  .gp-hero:not(.gp-hero--subpage) .gp-hero__content {
    align-self: stretch;
    height: 100%;
    min-height: 0;
    margin-top: 0 !important;
    align-items: center !important;
  }
}

/* Brak aktualności: rozciągnij wiersz, żeby wyśrodkować mapę w obszarze treści. */
.gp-hero--no-news:not(.gp-hero--subpage) .gp-hero__content {
  align-self: stretch;
  height: 100%;
  min-height: 0;
  margin-top: 0 !important;
}

/* Brak warunków pogodowych: GOPR + numery względem wysokości mapy (nie całego hero). */
.gp-hero--no-weather:not(.gp-hero--subpage) .gp-hero__content {
  align-items: center !important;
}

/* Brak aktualności: stos mapa + social pod nią, wyśrodkowany w pionie. */
@media (min-width: 1025px) {
  .gp-hero--no-news:not(.gp-hero--subpage) .gp-hero__map-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    height: 100%;
  }

  .gp-hero--no-news:not(.gp-hero--subpage) .gp-hero__map-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }

  .gp-hero--no-news:not(.gp-hero--subpage) .gp-hero__map-stack .gp-hero__content-map-box {
    width: 100%;
    margin-bottom: 1.25rem;
  }

  /* Social w flow pod mapą — bez absolute / top:50%. */
  .gp-hero--no-news:not(.gp-hero--subpage) .gp-hero__map-stack .gp-hero__social-icons {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none;
    grid-area: auto;
    padding: 0;
  }
}

/*
 * ≤1024px mapa jest display:none, ale kolumna z height:100% (no-news) zostawała
 * i wypychała „GOPR / numery” pod fold — hero wyglądał na pusty.
 */
@media (max-width: 1024px) {
  .gp-hero__content > .col-lg-6:has(.gp-hero__content-map-box) {
    display: none !important;
  }
}

.gp-hero:not(.gp-hero--subpage):not(.gp-hero--no-news) > .min-vh-100 > .gp-hero__social-icons {
  grid-area: social;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  margin: 0 0 1.5rem 129px;
  z-index: 2;
  padding: 0;
  pointer-events: auto;
}

@media (max-width: 1024px) {
  .gp-hero:not(.gp-hero--subpage):not(.gp-hero--no-news) > .min-vh-100 > .gp-hero__social-icons {
    margin-left: 50px;
    margin-bottom: 1rem;
  }
}

@media (min-width: 1281px) {
  .gp-hero #hero-primary-nav {
    display: block !important;
  }

  /* Nigdy nie zrzucaj „Kontakt” do drugiej linii — to rozpycha wiersz menu w hero 100vh. */
  .gp-hero #hero-primary-nav ul {
    flex-wrap: nowrap !important;
    overflow: hidden;
  }

  .gp-hero #hero-primary-nav ul li {
    flex-shrink: 0 !important;
  }

  .gp-hero #hero-primary-nav ul a {
    white-space: nowrap;
  }

  .gp-hero__menu.gp-hero__menu--scrolled #hero-primary-nav,
  .gp-hero__menu.gp-hero__menu--overflow #hero-primary-nav {
    visibility: hidden;
    pointer-events: none;
  }

  /* Jak przy scrollu: hamburger na środku czarnego paska, nie w wierszu linków. */
  .gp-hero__menu--overflow .gp-menu-toggle {
    position: fixed;
    right: 50%;
    top: 18px;
    transform: translateX(-50%);
  }
}

/* Hero podstron — układ jak gopr.pl (site.css ładuje się przed tym plikiem) */
.gp-hero.gp-hero--subpage {
  padding-bottom: 0 !important;
  /* Gdy media nie pokryje krawędzi, widać ciemne tło zamiast białego paska. */
  background: #0d1520;
}

.gp-hero.gp-hero--subpage > .min-vh-50 {
  display: grid;
  /*
   * minmax(0,1fr) — wiersz tytułu może się ścisnąć; bez tego min-height:auto
   * na itemach grida wypycha treść PONIŻEJ stałej wysokości hero, a absolutne
   * zdjęcie zostaje krótsze → jasny pasek pod kadrem.
   */
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'menu'
    'title'
    'back';
  min-height: clamp(540px, 65vh, 760px);
  /* Rosnij z treścią zamiast sztywnego height — media (inset:0) zawsze wypełnia cały hero. */
  height: auto;
  background: #0d1520;
}

/*
 * Menu hero ma fixed logo/hamburger — wiersz grida miał height:0, więc jumbotron
 * startował pod czarnym paskiem i logo grupy było niewidoczne. Rezerwuj wysokość paska.
 */
.gp-hero.gp-hero--subpage > .min-vh-50 > .gp-hero__menu {
  min-height: 80px;
}

/* Media zawsze edge-to-edge względem kontenera hero (nie tylko „pierwotnej” wysokości). */
.gp-hero.gp-hero--subpage > .min-vh-50 > .gp-hero__media,
.gp-hero.gp-hero--subpage > .min-vh-50 > .gp-hero__video,
.gp-hero.gp-hero--subpage > .min-vh-50 > .gp-hero__video-poster {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center;
  display: block;
}

.gp-hero.gp-hero--subpage .gp-hero__jumbotron {
  grid-area: title;
  position: relative !important;
  z-index: 2;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: stretch;
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  margin: 0 !important;
  padding: 0 129px 0 180px !important;
  box-sizing: border-box;
}

.gp-hero.gp-hero--subpage .gp-hero__jumbotron h1,
.gp-hero.gp-hero--subpage .gp-hero__jumbotron .h1 {
  margin: 0 !important;
  padding: 0;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

/* Jedno słowo: nie łam — HeroTitle zmniejsza font na mobile. */
.gp-hero.gp-hero--subpage .gp-hero__jumbotron h1.gp-hero__title--single-word,
.gp-hero.gp-hero--subpage .gp-hero__jumbotron .h1.gp-hero__title--single-word {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

/* Accordion: treść expanded zawsze w DOM (dla crawlerów); ukryta wizualnie gdy [hidden]. */
.gp-accordion__more[hidden] {
  display: none !important;
}

.gp-hero.gp-hero--subpage .gp-hero__back-btn {
  grid-area: back;
  position: relative;
  z-index: 2;
  min-height: 48px;
}

.gp-hero.gp-hero--subpage + .articles {
  margin-top: 0;
}

.gp-hero.gp-hero--subpage + .articles .title__align-center {
  margin-top: 30px;
}

@media (max-width: 1280px) {
  .gp-hero.gp-hero--subpage .gp-hero__jumbotron {
    flex-direction: column !important;
    /* Kolumna + flex-start spychało logo pod pasek — centruj logo z nagłówkiem. */
    justify-content: center !important;
    align-items: center !important;
    gap: 1.25rem;
    margin: 0 !important;
    padding: 0 50px !important;
  }

  .gp-hero.gp-hero--subpage .gp-hero__jumbotron .logo {
    margin-right: 0;
    max-width: min(220px, 58vw);
    flex-shrink: 0;
  }

  .gp-hero.gp-hero--subpage .gp-hero__jumbotron .title {
    width: 100%;
    flex-grow: 0;
  }

  /* site.css chowa Powrót ≤1280 — przywracamy w układzie grid (obszar „back”). */
  .gp-hero.gp-hero--subpage .gp-hero__back-btn {
    display: flex !important;
    align-items: center;
    padding: 0 50px 1.25rem;
    box-sizing: border-box;
  }

  .gp-hero.gp-hero--subpage .gp-hero__back-btn a {
    position: relative;
    left: auto;
    bottom: auto;
  }
}

@media (max-width: 480px) {
  .gp-hero.gp-hero--subpage > .min-vh-50 {
    min-height: clamp(300px, 48vh, 420px);
  }

  .gp-hero.gp-hero--subpage .gp-hero__jumbotron {
    padding: 0 24px !important;
    gap: 1rem;
  }

  .gp-hero.gp-hero--subpage .gp-hero__jumbotron .logo {
    max-width: min(160px, 50vw);
  }

  .gp-hero.gp-hero--subpage .gp-hero__back-btn {
    padding: 0 24px 1rem;
  }

  .gp-hero.gp-hero--subpage .gp-hero__jumbotron h1,
  .gp-hero.gp-hero--subpage .gp-hero__jumbotron .h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }
}

/* Treść aktualności — nadpisuje .news a / .news blockquote z site.css */
.news .gp-article-content a {
  color: #c00;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
  opacity: 1;
}

.news .gp-article-content a:hover,
.news .gp-article-content a:focus-visible {
  color: #900;
  opacity: 1;
}

.news .gp-article-content blockquote {
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem 1rem 1.5rem;
  border-left: 4px solid #c00;
  background: #f5f5f5;
  color: #222;
  font-style: italic;
  text-align: left;
}

.news .gp-article-content blockquote :is(p, ul, ol, h2, h3, h4) {
  margin: 0;
}

.news .gp-article-content blockquote :last-child {
  margin-bottom: 0;
}

/* Załączone pliki — na dole treści wewnątrz szarej ramki .news */
.news .gp-article-files {
  margin: 0;
  padding: 3rem 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
}

.news .gp-article-content > p:empty:last-child {
  display: none;
}

.news .gp-article-files .gp-files__items {
  padding: 0 !important;
  gap: 1rem;
}

.news .gp-article-files .gp-files__item a {
  margin-top: 0;
}

.news .gp-article-files .gp-files__content {
  padding-right: 0;
}

body.high-contrast .news .gp-article-files {
  border-top-color: rgba(255, 255, 255, 0.25);
}

/* Nawigacja poprzednia / następna aktualność */
.gp-article-pager {
  margin: 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.gp-article-pager__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  column-gap: 2rem;
}

.gp-article-pager__cell--next {
  grid-column: 1;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
}

.gp-article-pager__cell--prev {
  grid-column: 2;
  justify-self: end;
  min-width: 0;
  max-width: 100%;
}

.gp-article-pager__link {
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 100%;
  min-width: 0;
  color: #c00;
  text-decoration: none;
  opacity: 1;
}

.gp-article-pager__cell--prev .gp-article-pager__link {
  align-items: flex-end;
  text-align: right;
}

.gp-article-pager__link:hover,
.gp-article-pager__link:focus-visible {
  color: #900;
}

.gp-article-pager__link:hover .gp-article-pager__title,
.gp-article-pager__link:focus-visible .gp-article-pager__title {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.gp-article-pager__heading {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.4rem;
  font-size: clamp(13px, 1.5rem, 17px);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.gp-article-pager__heading img {
  width: 9px;
  height: auto;
  flex-shrink: 0;
}

.gp-article-pager__cell--next .gp-article-pager__heading img {
  transform: rotate(-90deg);
}

.gp-article-pager__cell--prev .gp-article-pager__heading img {
  transform: rotate(90deg);
}

.gp-article-pager__title {
  display: block;
  max-width: min(36ch, 100%);
  font-size: clamp(12px, 1.4rem, 16px);
  font-weight: 400;
  line-height: 1.4;
  color: #222;
}

@media (max-width: 768px) {
  .gp-article-pager__grid {
    column-gap: 1rem;
  }

  .gp-article-pager__cell--next,
  .gp-article-pager__cell--prev {
    justify-self: stretch;
  }

  .gp-article-pager__link {
    width: 100%;
  }

  .gp-article-pager__title {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* Hero — tabela pogody i link „Zobacz więcej” */
#wx-conditions {
  scroll-margin-top: 120px;
}

/* Numery tel. — klikalne, wygląd jak zwykły tekst (bez niebieskiego linku). */
a.gp-tel,
a.gp-tel:link,
a.gp-tel:visited,
a.gp-tel:hover,
a.gp-tel:active,
a.gp-tel:focus,
a.gp-tel:focus-visible {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}

.gp-hero__content-detail-box .gp-hero__moreInfo {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.75rem;
  text-align: center;
  cursor: pointer;
  text-decoration: none !important;
  color: #fff;
  border: none !important;
  box-shadow: none !important;
  outline: none;
  background: transparent;
  font-size: 2rem;
  font-weight: 100;
  text-transform: uppercase;
  padding: 0;
  position: relative;
  z-index: 2;
}

@media (max-width: 480px) {
  .gp-hero__content-detail-box .gp-hero__moreInfo {
    font-size: 1.5rem;
    margin-top: 0.5rem;
  }
}

/* Tabela pogody w hero — nagłówek + viewport na dokładnie 3 wiersze.
   Wysokość wiersza w rem, żeby powiększanie tekstu (html font-size) nie ścinało treści. */
:root {
  --gp-snow-row-h: 6rem;
}

.gp-hero__snowslide--table {
  height: auto !important;
  overflow: hidden;
  display: block;
}

.gp-hero__snowslide--table-head,
.gp-hero__snowslide--tbody-table {
  width: 100%;
  max-width: 630px;
  margin: 0 auto;
  border-collapse: collapse;
}

.gp-hero__snowslide--table-head #table-head {
  display: block;
  margin-bottom: 0 !important;
}

.gp-hero__snowslide--table-head #table-head tr,
.gp-hero__snowslide--tbody-table tr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.gp-hero__snowslide--table-head th,
.gp-hero__snowslide--tbody-table td,
.gp-hero__snowslide--tbody-table th {
  color: #fff;
  padding: 0.8rem 1.5rem;
  font-family: 'Roboto Condensed', sans-serif;
  line-height: 1.2;
}

.gp-hero__snowslide--table-head th {
  font-weight: 200;
}

.gp-hero__snowslide--table-head th:last-child,
.gp-hero__snowslide--tbody-table td:last-child {
  text-align: right;
}

.gp-hero__snowslide--tbody-viewport {
  height: calc(var(--gp-snow-row-h) * 3);
  max-height: calc(var(--gp-snow-row-h) * 3);
  overflow: hidden;
  width: 100%;
  max-width: 630px;
  margin: 0 auto;
  /* Przycięcie góry o 1px ukrywa linię, gdy dokładnie mija górną krawędź
     (przy pełnym przesunięciu o wiersz), a dołu o 2px — linię ostatniego wiersza. */
  clip-path: inset(1px 0 2px 0);
}

.gp-hero__snowslide--table #snow-table-body,
.gp-hero__snowslide--tbody-table #snow-table-body {
  display: block;
  position: relative;
  /* Linie separatorów jako powtarzalny gradient co wiersz — wzór jest okresowy,
     więc wygląda identycznie przy przesunięciu 0 i -1 wiersz. */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--gp-snow-row-h) - 1px),
    #fff calc(var(--gp-snow-row-h) - 1px),
    #fff var(--gp-snow-row-h)
  );
  background-position: 0 0;
}

.gp-hero__snowslide--table #snow-table-body tr,
.gp-hero__snowslide--tbody-table #snow-table-body tr {
  height: var(--gp-snow-row-h);
  min-height: var(--gp-snow-row-h);
  line-height: normal;
  border: none !important;
  box-shadow: none !important;
}

.gp-hero__snowslide--table #snow-table-body tr:nth-of-type(4),
.gp-hero__snowslide--tbody-table #snow-table-body tr:nth-of-type(4) {
  margin-top: 0 !important;
}

.gp-hero__snowslide--table #snow-table-body,
.gp-hero__snowslide--tbody-table #snow-table-body {
  will-change: transform;
}

/*
 * Stopka / logotypy partnerów — na ultrawide (1920+) trzy col-lg-4
 * i sloty karuzeli rosną z viewportem, więc bloki „rozjeżdżają się”.
 * Trzymamy treść w zakresie zbliżonym do container-xxl.
 */
.gp-foot__section--main,
.gp-foot__bottom {
  max-width: 1320px;
  width: 100%;
  margin-inline: auto;
}

.gp-sponsor .gp-section-title__align-center {
  max-width: 1320px;
  width: 100%;
  margin-inline: auto;
}

.gp-sponsor .gp-section-title__align-center + .gp-sponsor__group--category {
  padding-top: 0.75rem;
}

.gp-sponsor__category-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1320px;
  width: 100%;
  margin: 0.35rem auto 0.75rem;
}

.gp-sponsor__category-title-line {
  flex: 1;
  flex-shrink: 1;
  width: auto;
  max-width: 22%;
  height: 1px;
  margin: 0;
  border: 0;
  opacity: 0.28;
  background-color: currentColor;
  color: #000;
}

.gp-sponsor__category-title--h3 {
  flex-shrink: 0;
  font-size: clamp(16px, 1.55rem, 22px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0 18px;
  margin: 0;
  color: #000;
  text-align: center;
}

.gp-sponsor__group--category + .gp-sponsor__group--category {
  margin-top: 1.5rem;
}

@media (max-width: 480px) {
  .gp-sponsor__category-title--h3 {
    font-size: 1.15rem;
  }
}

.gp-sponsor__logo-wrapper {
  max-width: 1320px;
}

/*
 * Waga optyczna logotypów: slot o stałej wysokości, potem JS przycina padding
 * i skaluje treść do tej samej powierzchni (niezależnie od px pliku z panelu).
 * Nadpisuje site.css: width 90% + max-width 90px !important (to skalowało plik, nie znak).
 */
.gp-sponsor__logo-card {
  min-height: 88px;
  height: 88px;
}

.gp-sponsor .gp-sponsor__logo-img {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
}

.gp-sponsor .gp-sponsor__logo-img img {
  width: auto !important;
  height: auto !important;
  max-width: 88% !important;
  max-height: 72px !important;
  object-fit: contain;
}

.gp-sponsor__logo-img--optical {
  width: calc(var(--logo-dw) * 1px);
  height: calc(var(--logo-dh) * 1px);
  overflow: hidden;
}

.gp-sponsor__logo-img--optical > a,
.gp-sponsor__logo-img--optical picture {
  position: absolute;
  inset: 0;
  display: block;
}

.gp-sponsor .gp-sponsor__logo-img--optical img {
  position: absolute;
  max-width: none !important;
  max-height: none !important;
  width: calc(var(--logo-nw) * var(--logo-dw) / var(--logo-cw) * 1px) !important;
  height: calc(var(--logo-nh) * var(--logo-dh) / var(--logo-ch) * 1px) !important;
  left: calc(-1 * var(--logo-cx) * var(--logo-dw) / var(--logo-cw) * 1px);
  top: calc(-1 * var(--logo-cy) * var(--logo-dh) / var(--logo-ch) * 1px);
  object-fit: fill;
}

.gp-sponsor__caption {
  max-width: 1100px;
  width: 90%;
  margin: 0.18rem auto 0;
  text-align: center;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.4;
  color: #000;
}

.gp-sponsor__caption a {
  color: inherit;
  text-decoration: none;
}

.gp-sponsor__caption a:hover,
.gp-sponsor__caption a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 991px) {
  .gp-sponsor__caption {
    font-size: 1.25rem;
    margin-top: 0.12rem;
  }
}

/* Stopka — wspólna linia bazowa logo / tel. alarmowy / dane biurowe */
@media (min-width: 992px) {
  .gp-foot__section--main > .col-lg-4 {
    min-height: 100%;
  }

  /* Jak na prod: kolumna z adresem dokuje do dołu rzędu, nie rozciąga się z RODO. */
  .gp-foot div:has(.gp-foot__adress) {
    align-self: flex-end !important;
  }

  .gp-foot__brand {
    /* Wspólny dół logo i bloku nazwa+telefon (nie środkowanie w pionie). */
    align-items: flex-end !important;
  }

  .gp-foot__logo--official {
    /* Nadpisuje align-self-center z markupu. */
    align-self: flex-end !important;
  }

  .gp-foot__information {
    /* Nazwa u góry, tel. alarmowy przy dolnej krawędzi — równo z .gp-foot__adress. */
    justify-content: space-between !important;
    align-self: stretch;
    min-height: 100%;
  }

  /* Bez zawijania „300” na osobną linię — wtedy dół col1/col2 się rozjeżdża względem logo. */
  .gp-foot__contact p {
    white-space: nowrap;
  }

  .gp-foot__rodo {
    margin-top: 0 !important;
  }
}

/* Stopka — nazwa ZG / grup: maksymalnie 2 wiersze (łamanie z CMS / helpera) */
.gp-foot__heading {
  margin: 0;
  line-height: 1.15;
}

.gp-foot__heading p {
  margin: 0;
  /* Tylko jawne <br> łamią wiersz — bez dodatkowego zawijania CSS do 3+ linii. */
  white-space: nowrap;
}

@media (max-width: 480px) {
  .gp-foot__heading p {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 992px) {
  .gp-foot__logo--official {
    margin-bottom: 0;
  }

  .gp-foot__heading {
    padding-right: 0 !important;
  }
}

.gp-foot__adress a {
  color: inherit;
  text-decoration: none;
}

.gp-foot__adress a:hover,
.gp-foot__adress a:focus-visible {
  text-decoration: underline;
}

.gp-foot__adress a.gp-tel:hover,
.gp-foot__adress a.gp-tel:focus-visible {
  text-decoration: none;
}

/*
 * GOPR w liczbach — miejsce na nagłówek Poradnika na zdjęciu.
 * Bez z-index:-1 (site.css): psuje tło kolejnego .gp-promo (bg ma z-index:-2).
 * Desktop: padding jak legacy (~14rem), guide bierze margin-top:-8rem z site.css.
 * Mobile: jak prod / Aktualności — padding 60px + margin-top:-100px (site.css ≤1280).
 */
.gp-metrics {
  position: relative;
  z-index: 0;
  padding-bottom: 14rem;
}

/* Nagłówek jak Aktualności / Poradnik (nie 4.2rem / 500 z site.css). */
.gp-metrics__headline {
  font-size: clamp(30px, 3.3rem, 50px);
  font-weight: 700;
  line-height: 1.2;
}

.gp-metrics__update {
  padding: 0 1.25rem;
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

.gp-metrics__statistics {
  margin: 5rem 0 3rem;
}

@media (max-width: 1024px) {
  .gp-metrics {
    padding-bottom: 60px;
  }

  .gp-metrics__headline {
    font-size: clamp(20px, 2.5rem, 40px);
  }

  .gp-metrics__statistics {
    margin: 2.5rem 0 1.5rem;
  }
}

@media (max-width: 991px) {
  .gp-metrics__headline {
    font-size: 3rem;
  }
}

@media (max-width: 480px) {
  .gp-metrics__headline {
    font-size: 2.1rem; /* jak .gp-news .gp-section-title__align-left--h2 */
  }
}

/* ≤1280: site.css już daje #guideSection.gp-news { margin-top:-100px } — nie nadpisujemy. */

/* GOPR w liczbach — pionowe kreski tylko między sąsiednimi kolumnami (3 kolumny od md) */
@media (min-width: 768px) {
  .gp-metrics__statistic:nth-of-type(3n) {
    border-right: none;
  }

  .gp-metrics__statistic:nth-of-type(5n) {
    border-right: 0.1rem solid #fff;
  }
}

.gp-wx__manual-mark {
  font-size: 0.72em;
  font-weight: 700;
  line-height: 0;
  margin-left: 0.1em;
  color: #2163ad;
}

.gp-wx__legend {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.58);
  border-top: 0;
}

.gp-wx__legend-mark {
  flex: 0 0 auto;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  color: #2163ad;
}

.gp-wx__legend-text {
  min-width: 0;
}

.gp-wx__legend-time {
  /* ≥ 4.5:1 on white (WCAG AA) — was rgba(0,0,0,0.45) ≈ 3.4:1 */
  color: rgba(0, 0, 0, 0.62);
  white-space: nowrap;
}

/* Bootstrap .row negative gutters must not inflate document scrollWidth. */
.gp-hero .row,
.gp-modular-page .row {
  max-width: 100%;
}

#wx-conditions .gp-wx__informations {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  min-height: 100%;
  width: 100%;
  padding: 2.5rem 2rem 1rem !important;
}

@media (max-width: 768px) {
  #wx-conditions .gp-wx__informations {
    padding: 20px 15px 10px !important;
  }
}

#wx-conditions .gp-wx__informations-fill {
  flex: 1 1 auto;
  min-height: 0;
}

#wx-conditions .gp-wx__informations-bottom {
  flex: 0 0 auto;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

#wx-conditions .gp-wx__informations--expandable {
  padding-bottom: 1rem !important;
}

@media (max-width: 991px) {
  #wx-conditions .gp-wx__informations--expandable-mobile {
    padding-bottom: 1rem !important;
  }
}

/*
  site.css zdejmuje kreskę tylko z :nth-last-of-type(1). Ukryte extra wiersze
  nadal zajmują to miejsce, więc kreska zostaje pod ostatnim widocznym parametrem.
  Ma się pojawić dopiero po rozwinięciu, gdy pod spodem są kolejne wiersze.
*/
#wx-conditions .gp-wx__information:not([hidden]):has(+ .gp-wx__information[hidden]) {
  border-bottom: none;
}

#wx-conditions .gp-wx__container {
  display: flex;
  flex-direction: column;
  position: relative;
}

#wx-conditions .gp-wx__container > .row {
  flex: 1 1 auto;
  width: 100%;
  min-height: 100%;
  align-items: flex-start;
}

#wx-conditions .gp-wx__container > .row > .gp-wx__informations {
  align-self: stretch !important;
  min-height: 100%;
}

@media (min-width: 992px) {
  #wx-conditions .gp-wx__container > .row:has(.gp-wx__camera),
  #wx-conditions .gp-wx__container > .row:has(.gp-wx__image--placeholder) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  #wx-conditions .gp-wx__container > .row:has(.gp-wx__camera) > .gp-wx__informations,
  #wx-conditions .gp-wx__container > .row:has(.gp-wx__camera) > .gp-wx__camera,
  #wx-conditions .gp-wx__container > .row:has(.gp-wx__image--placeholder) > .gp-wx__informations,
  #wx-conditions .gp-wx__container > .row:has(.gp-wx__image--placeholder) > .gp-wx__image--placeholder {
    width: 100%;
    max-width: 100%;
  }

  #wx-conditions .gp-wx__container > .row:has(.gp-wx__camera) > .gp-wx__informations,
  #wx-conditions .gp-wx__container > .row:has(.gp-wx__image--placeholder) > .gp-wx__informations {
    align-self: stretch !important;
    min-height: 100%;
  }
}

.gp-wx__mountain-range {
  margin: 0 0 0.2rem;
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.58);
}

@media (max-width: 768px) {
  .gp-wx__mountain-range {
    font-size: 1.1rem;
    margin-bottom: 0.15rem;
  }
}

#wx-conditions .gp-wx__time {
  margin-bottom: 1.25rem;
}

@media (max-width: 768px) {
  #wx-conditions .gp-wx__time {
    margin-bottom: 0.5rem;
  }
}

#wx-conditions .gp-wx__camera {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: auto;
  padding: 0 !important;
}

#wx-conditions .gp-wx__camera-preview {
  position: relative;
  flex: 1 0 auto;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

#wx-conditions .gp-wx__camera .gp-wx__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  cursor: pointer;
}

#wx-conditions .gp-wx__image--placeholder {
  align-self: stretch;
  min-height: 100%;
}

#wx-conditions .gp-wx__camera-box {
  z-index: 2;
  pointer-events: none;
}

#wx-conditions .gp-wx__camera-box-spacer {
  flex: 1 1 auto;
}

#wx-conditions .gp-wx__camera .gp-gallery__fullScreen {
  position: static !important;
  bottom: auto !important;
  right: auto !important;
  pointer-events: auto;
  flex: 0 0 auto;
}

@media (max-width: 991px) {
  #wx-conditions .gp-wx__camera,
  #wx-conditions .gp-wx__image--placeholder {
    align-self: auto;
    height: auto;
  }

  #wx-conditions .gp-wx__camera-preview,
  #wx-conditions .gp-wx__image--placeholder {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  /*
    Na mobile obraz z kamery jest dodatkową treścią za strzałką — analogicznie
    do dodatkowych parametrów na desktopie. Dzięki temu kafelki bez kamery
    nie rozciągają się do wysokości zdjęcia.
  */
  #wx-conditions .gp-wx__container:not(.gp-wx__container--expanded) > .row > .gp-wx__camera,
  #wx-conditions .gp-wx__container:not(.gp-wx__container--expanded) > .row > .gp-wx__image--placeholder {
    display: none !important;
  }
}

.gp-wx__camera-lightbox {
  z-index: 10050 !important;
}

/* Rozwijane szczegóły — strzałka przyklejona do dolnej krawędzi ramki */
.gp-wx__circle--details {
  bottom: -13px !important;
  left: calc(50% - 13px) !important;
  margin-bottom: 0;
  z-index: 3;
}

.gp-wx__circle--details.gp-wx__circle--open {
  transform: rotate(90deg);
}

@media (max-width: 991px) {
  /*
   * Strzałka kamery ma siedzieć na dolnej krawędzi całego kafelka
   * (także gdy kafelek jest wyższy od treści przez wyrównanie wysokości,
   * i po rozwinięciu — pod zdjęciem). position-relative na .gp-wx__informations
   * trzymałby ją przy tekście.
   */
  #wx-conditions .gp-wx__informations--expandable-mobile {
    position: static !important;
  }

  #wx-conditions .gp-wx__circle--details.gp-wx__circle--mobile {
    display: flex !important;
  }

  #wx-conditions .gp-wx__circle--details:not(.gp-wx__circle--mobile) {
    display: none !important;
  }
}

@media (min-width: 992px) {
  #wx-conditions .gp-wx__circle--details.gp-wx__circle--desktop {
    display: flex !important;
  }

  #wx-conditions .gp-wx__circle--details:not(.gp-wx__circle--desktop) {
    display: none !important;
  }
}

/* —— Importowane podstrony CMS (grupy regionalne) ——
   Sekcje (.timeline, .textWithBG, .contact, .gp-projects, .gp-accordion…) mają
   komplet stylów w site.css (import z gopr.pl). Tu tylko naprawy braków wynikających
   z tego, że nie ładujemy oryginalnego JS-a CMS. Nie dotykamy nagłówka ani stopki. */
.gp-imported-page {
  width: 100%;
  color: #000;
}

/* main ma padding 20px z site.css — sekcje full-bleed wychodzą na krawędź. */
main:has(> .gp-imported-page) {
  padding-left: 0;
  padding-right: 0;
}

.gp-imported-page > .articles,
.gp-imported-page > section.articles {
  padding-left: 20px;
  padding-right: 20px;
}

/* Lekko większy odstęp między tekstem a kafelkami (np. O nas). */
.gp-imported-page .articles + .gp-news {
  margin-top: 1.25rem;
}

@media (max-width: 1280px) {
  .gp-imported-page .articles + .gp-news .gp-tile-grid {
    margin-top: 0.75rem;
  }
}

/* Akordeon importowany — sterowany przez ImportedPageAccordions (bez Bootstrap Collapse). */
.gp-imported-page .gp-accordion .collapse:not(.show) {
  display: none !important;
}

.gp-imported-page .gp-accordion .collapse.show {
  display: block !important;
  height: auto !important;
}

.gp-imported-page .gp-accordion .collapsing {
  display: none !important;
  height: auto !important;
  transition: none !important;
}

.gp-imported-page .gp-accordion__circle {
  transition: transform 0.2s ease;
}

.gp-imported-page .gp-accordion__circle--open {
  transform: rotate(-90deg) !important;
}

/* Przy zwijaniu scrollIntoView ląduje pod top-barem. */
.gp-imported-page .textWithBG {
  scroll-margin-top: 1.25rem;
}

/*
 * Sekcja tekstowa bez zdjęcia w tle (TextWithBgSection + textWithBG--plain).
 * site.css ustawia .textWithBG { color:#fff } — ładuje się PO globals.css,
 * więc reguły plain muszą być tu (po site.css) i z wyższą specyficznością.
 * Wygląd jak treść artykułów / zawodów bez tła: ciemny tekst na jasnym tle.
 */
.textWithBG.textWithBG--plain {
  color: #000;
  background: #fff;
  padding: 1.5rem 0 2.5rem;
}

.textWithBG.textWithBG--plain .gp-text-bg__header::before,
.textWithBG.textWithBG--plain .gp-text-bg__header::after {
  background: #000;
}

.textWithBG.textWithBG--plain .gp-text-bg__headline,
.textWithBG.textWithBG--plain :is(
  p,
  ul,
  ol,
  li,
  a,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  strong,
  b,
  em,
  i,
  u,
  s,
  del,
  blockquote,
  q
) {
  color: inherit;
}

.textWithBG.textWithBG--plain .gp-accordion__button {
  color: #000;
}

.textWithBG.textWithBG--plain .gp-accordion__circle--on-light,
.gp-accordion__circle--on-light {
  background: #000 !important;
  color: #fff !important;
  box-shadow: none !important;
}

/*
 * Listy w treści stron (poradnik, CMS): site.css ma list-style-position:inside
 * i li { left:30px }, a edytor owija każdy punkt w <p> z margin 15px —
 * marker ląduje na osobnej linii z dużą dziurą. Jak .gp-article-content.
 */
.articles .article ul,
.articles .article ol,
.gp-imported-page .article ul,
.gp-imported-page .article ol,
.gp-content-page .article ul,
.gp-content-page .article ol,
.gp-modular__richtext:not(:has(.gp-news, .gp-tile-grid)) ul,
.gp-modular__richtext:not(:has(.gp-news, .gp-tile-grid)) ol {
  list-style-position: outside;
  padding-left: 2.4rem;
  margin-left: 0;
  text-align: left;
}

.articles .article li,
.gp-imported-page .article li,
.gp-content-page .article li,
.gp-modular__richtext:not(:has(.gp-news, .gp-tile-grid)) li {
  position: static;
  left: auto;
  width: auto;
  text-align: left;
}

.articles .article li + li,
.gp-imported-page .article li + li,
.gp-content-page .article li + li,
.gp-modular__richtext:not(:has(.gp-news, .gp-tile-grid)) li + li {
  margin-top: 0.35em;
}

.articles .article li > p,
.gp-imported-page .article li > p,
.gp-content-page .article li > p,
.gp-modular__richtext:not(:has(.gp-news, .gp-tile-grid)) li > p {
  margin: 0;
  text-align: left;
}

/* SVG logotypów grup mają viewBox w tysiącach jednostek (width w mm).
   Bez twardego limitu przeglądarka potrafi rozciągnąć znak wodny na cały kafelek. */
.gp-news .tile-logo img,
.tile-logo img {
  height: 100% !important;
  width: auto !important;
  max-width: 180px !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.gp-gallery__preview-media,
.gp-gallery__image-media {
  position: relative;
  width: 100%;
  height: 100%;
  container-type: size;
}

/* Pojedyncze zdjęcie w galerii (artykuły, projekty, przetargi, zawody, moduły stron). */
.gallery.gp-gallery--single .gp-gallery__preview {
  aspect-ratio: auto !important;
  max-height: none !important;
  height: auto !important;
}

.gallery.gp-gallery--single .gp-gallery__preview-media {
  height: auto;
  container-type: inline-size;
}

.gallery.gp-gallery--single .gp-gallery__preview--photo {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block;
}

.gallery.gp-gallery--single .gp-gallery__preview--logo {
  height: min(10%, 10cqi) !important;
}

.gp-gallery__preview--logo,
.gp-gallery__image--logo {
  position: absolute !important;
  top: 3.5cqmin !important;
  right: 3.5cqmin !important;
  left: auto !important;
  bottom: auto !important;
  height: 10cqmin !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: top right !important;
  filter: drop-shadow(0 0 1.05cqmin rgba(0, 0, 0, 0.32))
    drop-shadow(0 0.42cqmin 0.83cqmin rgba(0, 0, 0, 0.2)) !important;
}

.gp-gallery__lightbox--box {
  position: relative;
}

.gp-gallery__lightbox--logo {
  display: block !important;
  position: absolute !important;
  top: 3.5% !important;
  right: 3.5% !important;
  height: 10% !important;
  width: auto !important;
  max-width: 30% !important;
  pointer-events: none;
  z-index: 2;
}

/* Bezpiecznik responsywności — tylko treść CMS (widget/innerHtml), nie kafelki,
   galeria ani timeline (te potrzebują height: 100% / sztywnych logo). */
.gp-imported-page .innerHtml img,
.gp-imported-page .widget-content img {
  max-width: 100%;
  height: auto;
}

/* Przywróć oryginalny layout kafelków na stronach importowanych (O nas, Działalność…).
   Szeroki selektor img wcześniej rozdmuchiwał znaki wodne i psuł object-fit zdjęć. */
.gp-imported-page .gp-tile-overlay picture,
.gp-imported-page .gp-news .gp-tile-overlay picture {
  display: contents;
}

.gp-imported-page .gp-tile-overlay img,
.gp-imported-page .gp-news .gp-tile-overlay img {
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.gp-imported-page .tile-logo,
.gp-imported-page .gp-news .tile-logo {
  height: 55px;
  width: auto;
}

@media (max-width: 1280px) {
  .gp-imported-page .tile-logo,
  .gp-imported-page .gp-news .tile-logo {
    height: 45px;
  }
}

@media (max-width: 480px) {
  .gp-imported-page .tile-logo,
  .gp-imported-page .gp-news .tile-logo {
    height: 35px;
  }
}

.gp-imported-page iframe {
  max-width: 100%;
}

/*
 * Tło osi czasu ma w site.css z-index: -2. Bez izolacji stacking context
 * obraz chowa się za tłem body/main (biały tekst na szarości).
 */
.gp-imported-page section.timeline {
  isolation: isolate;
  background-color: #1a1a1a;
}

.gp-imported-page .gp-timeline__bcg,
.gp-imported-page .timeline__bcg {
  z-index: 0;
  max-width: none;
  width: 101%;
  height: 101%;
  object-fit: cover;
}

.gp-imported-page .gp-timeline__title,
.gp-imported-page .gp-timeline__ul,
.gp-imported-page .timeline__title,
.gp-imported-page .timeline__ul {
  position: relative;
  z-index: 1;
}

/* Nagłówki osi czasu jak na gopr.pl — odstęp od linii (hr). */
.gp-imported-page .gp-timeline__title .title__align-center--h2,
.gp-imported-page .timeline__title .title__align-center--h2 {
  padding: 0 30px;
  flex-shrink: 1;
  min-width: 0;
}

/* Timeline / tabele CMS — gutter 129px z site.css rozjeżdża phone. */
@media (max-width: 768px) {
  .gp-imported-page .gp-timeline__ul,
  .gp-imported-page .timeline__ul,
  .gp-imported-page .gp-timeline__title,
  .gp-imported-page .timeline__title {
    width: calc(100% - 32px) !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .gp-imported-page .innerHtml,
  .gp-imported-page .widget-content,
  .gp-imported-page .articles {
    overflow-x: clip;
  }

  .gp-imported-page .innerHtml table,
  .gp-imported-page .widget-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .gp-imported-page .innerHtml pre,
  .gp-imported-page .widget-content pre {
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 480px) {
  .gp-imported-page > .articles,
  .gp-imported-page > section.articles {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Slider władz — programowy scrollLeft jak na gopr.pl (ukryty pasek). */
.gp-imported-page .slider-section-wrapper,
.slider-section-wrapper {
  overflow-x: auto !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.gp-imported-page .slider-section-wrapper::-webkit-scrollbar,
.slider-section-wrapper::-webkit-scrollbar {
  display: none;
}

.gp-imported-page .slider-section-wrapper:active,
.slider-section-wrapper:active {
  cursor: grabbing;
}

/* Władze — pełne zdjęcia + czytelne karty (bez przycinania do stałej wysokości). */
.managements .employye_group,
.managements .employee_group {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

.managements .gp-staff .img,
.managements .gp-staff-main .img {
  height: auto !important;
  max-height: none;
  overflow: visible;
  align-items: flex-start;
}

.managements .gp-staff img,
.managements .gp-staff-main img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  display: block;
}

.managements .gp-staff,
.managements .gp-staff-main {
  overflow: visible;
}

.managements .gp-staff h3,
.managements .gp-staff-main h3 {
  margin-top: 12px;
  line-height: 1.2;
  word-break: break-word;
}

.managements .gp-staff span,
.managements .gp-staff-main span {
  display: block;
  margin-top: 4px;
  line-height: 1.25;
  word-break: break-word;
}

/* Banner „Bądź bezpieczny w górach” — mniejsze przyciski sklepów */
.app__download--image {
  width: 45%;
  max-width: 200px;
}

@media (max-width: 1024px) {
  .app__download--image {
    width: 55%;
  }
}

@media (max-width: 768px) {
  .app__download--image {
    max-width: 140px;
  }
}

@media (max-width: 480px) {
  .app__download--image {
    max-width: 120px;
  }
}

/* --- Dostępność: narzędzia WCAG w nagłówku (desktop + mobile) --- */

.gp-hdr__contrast-btn,
.gp-hdr__font-size button {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}

.gp-hdr__font-size button {
  text-decoration: none;
  margin-left: 11px;
  color: #fff;
}

.gp-hdr__font-size button.is-active,
.gp-hdr__font-size button[aria-pressed='true'] {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  font-weight: 700;
}

.gp-hdr__contrast-btn {
  display: block;
  width: 100%;
  line-height: inherit;
}

.gp-hdr__contrast-btn:focus-visible,
.gp-hdr__font-size button:focus-visible,
.gp-hdr__logo-bip a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/*
 * Na wąskich ekranach site.css chowa .gp-hdr__wcag — przywracamy kompaktowy układ.
 * Hamburger (.gp-menu-toggle) ma right:35px + ~28px szerokości → WCAG musi kończyć
 * się przed ~left:327. Logo (~15–45) i group selector nie mogą się nachodzić.
 */
.gp-hdr__group-label--short {
  display: none;
}

@media (max-width: 1280px) {
  .gp-hdr__wcag {
    display: flex !important;
    align-items: center;
    top: 0;
    /* Miejsce na hamburger (right:35px, szer. 28px) + luz. */
    right: 68px;
    line-height: 80px;
    z-index: 2100;
    gap: 0;
  }

  /* Wyśrodkowany jak w site.css — krótki label + max-width chroni przed kolizją z logo. */
  .gp-hdr__group-selector {
    left: 50%;
    transform: translateX(-50%);
    max-width: min(42vw, 200px);
  }

  .gp-hdr__group-toogle {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gp-hdr__contrast {
    width: 24px;
    margin-right: 10px;
  }

  .gp-hdr__font-size {
    margin-right: 0;
  }

  .gp-hdr__font-size button {
    margin-left: 5px;
  }

  .gp-hdr__font-size .gp-hdr__font-size--small {
    font-size: 1.4rem;
  }

  .gp-hdr__font-size .gp-hdr__font-size--medium {
    font-size: 2rem;
  }

  .gp-hdr__font-size .gp-hdr__font-size--large {
    font-size: 2.6rem;
  }

  /* Hamburger zajmuje prawy róg — BIP nachodził na menu ≤1280. */
  .gp-hdr__logo-bip {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .gp-hdr__group-label--full {
    display: none;
  }

  .gp-hdr__group-label--short {
    display: inline;
  }

  .gp-hdr__group-selector {
    /* Środek przesunięty w lewo — 16px „Wybierz Grupę” nie nachodzi na WCAG. */
    left: calc(50% - 32px);
    transform: translateX(-50%);
    max-width: min(42vw, 160px);
  }

  /* site.css: clamp(8px, 1rem, 12px) — nieczytelne i trudne do trafienia palcem. */
  .gp-hdr__group-toogle {
    font-size: 1.6rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    line-height: 1.2;
    padding: 0 10px;
  }

  .gp-hdr__group-toogle .nav-arrow {
    width: 10px;
    margin-left: 8px;
    flex-shrink: 0;
  }

  .gp-hdr__wcag {
    right: 60px;
  }

  .gp-hdr__contrast {
    margin-right: 6px;
  }

  .gp-hdr__font-size {
    margin-right: 0;
  }

  .gp-hdr__font-size button {
    margin-left: 4px;
  }
}

/*
 * Lista grup — na dotyku pozycje miały font 1.3rem i padding-bottom: 3px (~16px wysokości).
 * WCAG 2.5.5 / Apple HIG: cel ≈ 44px.
 */
@media (max-width: 1280px) {
  .gp-hdr__group-menu {
    padding: 0.6rem 0 0.8rem;
  }

  .gp-hdr__group-menu a {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 4.4rem;
    padding: 1.2rem 1.6rem;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.3;
    white-space: normal;
  }

  .gp-hdr__group-menu a:hover,
  .gp-hdr__group-menu a:active {
    font-weight: 700;
  }
}

@media (max-width: 480px) {
  .gp-hdr__group-menu.dropdown-menu,
  .gp-hdr__group-menu.dropdown-menu.show {
    left: 50%;
    transform: translateX(-50%);
    width: min(28rem, calc(100vw - 2.4rem));
    max-width: calc(100vw - 2.4rem);
    margin-top: 1.2rem;
  }
}

/* ==========================================================================
   Dostępność: powiększanie tekstu (html[data-font-size])
   Root font-size: small=10px, medium=15px, large=20px — większość UI jest w rem.
   Poniżej: chrome w px (przyciski A), elastyczne kontenery, mniej kolizji.
   ========================================================================== */

/* Przyciski A — stałe px, żeby same kontrolki nie rosły z trybem i nie nachodziły. */
.gp-hdr__font-size {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.gp-hdr__font-size button,
.gp-hdr__font-size .gp-hdr__font-size--small,
.gp-hdr__font-size .gp-hdr__font-size--medium,
.gp-hdr__font-size .gp-hdr__font-size--large {
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  vertical-align: middle;
}

.gp-hdr__font-size .gp-hdr__font-size--small {
  font-size: 16px !important;
}

.gp-hdr__font-size .gp-hdr__font-size--medium {
  font-size: 22px !important;
}

.gp-hdr__font-size .gp-hdr__font-size--large {
  font-size: 28px !important;
}

.gp-hdr__wcag {
  align-items: center;
  gap: 0.5rem;
}

/*
 * HTML width/height na ikonach (CLS) nie może nadpisywać wysokości z site.css
 * (width:100% / clamp) — inaczej oko/BIP/pogoda robią się ogromnie wysokie.
 */
.gp-hdr__wcag img,
.gp-hdr__group-toogle .nav-arrow,
.gp-hdr__logo-bip img,
.gp-hero__logo--img,
.gp-hero__social-icons img,
.gp-hero__content-detail-box .gp-hero__snowslide img,
.gp-tile .tile-logo .logo,
.gp-wx__icon {
  height: auto;
}

/*
 * next/image (bez fill) w kafelkach: nie pozwalaj na height:auto —
 * site.css wymaga height:100% + object-fit:cover w absolute overlay.
 */
.gp-tile-overlay > img {
  height: 100%;
  max-width: none;
}

/* Liczniki — height=font-size obcina glify przy większym line-height */
.gp-metrics__statistic--count {
  height: auto !important;
  min-height: 1em;
  line-height: 1.15;
  overflow: visible;
}

/* Karty zamkniętych szlaków — przy powiększeniu nie ścinaj opisu stałą wysokością */
html[data-font-size='medium'] .gp-trail__describtion,
html[data-font-size='large'] .gp-trail__describtion {
  height: auto !important;
  min-height: 10rem;
  max-height: none;
  overflow: visible;
}

html[data-font-size='medium'] .gp-trail__container,
html[data-font-size='large'] .gp-trail__container {
  max-height: none !important;
  height: auto;
}

/* Stopka — pozwól zawijać długą nazwę przy powiększeniu */
html[data-font-size='medium'] .gp-foot__heading p,
html[data-font-size='large'] .gp-foot__heading p,
html[data-font-size='medium'] .gp-foot__contact p,
html[data-font-size='large'] .gp-foot__contact p {
  white-space: normal;
}

/*
 * Przy powiększonym tekście treść hero zwykle > 100vh — bez nakładania
 * nagłówka Aktualności na numery / pogodę (zostaje odstęp w flow).
 */
html[data-font-size='medium'] .gp-hero:not(.gp-hero--subpage),
html[data-font-size='large'] .gp-hero:not(.gp-hero--subpage) {
  padding-bottom: 2rem;
}

html[data-font-size='medium'] .gp-hero:not(.gp-hero--subpage) > .min-vh-100,
html[data-font-size='large'] .gp-hero:not(.gp-hero--subpage) > .min-vh-100 {
  padding-bottom: 2rem;
  grid-template-rows: auto auto auto;
}

html[data-font-size='medium'] #newsSection.gp-news,
html[data-font-size='large'] #newsSection.gp-news {
  margin-top: 0 !important;
  padding-top: 3rem;
}

html[data-font-size='medium'] #newsSection.gp-news:empty,
html[data-font-size='large'] #newsSection.gp-news:empty {
  padding-top: 0;
}

/* Hero: mniejszy ujemny margines h2 + czytelniejszy stack */
html[data-font-size='medium'] .gp-hero__content-detail-box .h2,
html[data-font-size='medium'] .gp-hero__content-detail-box h2,
html[data-font-size='large'] .gp-hero__content-detail-box .h2,
html[data-font-size='large'] .gp-hero__content-detail-box h2 {
  margin-top: 0.15em;
}

html[data-font-size='medium'] .gp-hero__content-detail-box .h1,
html[data-font-size='medium'] .gp-hero__content-detail-box h1,
html[data-font-size='large'] .gp-hero__content-detail-box .h1,
html[data-font-size='large'] .gp-hero__content-detail-box h1 {
  line-height: 1.05;
}

html[data-font-size='large'] .gp-hero__content-detail-box .gp-hero__moreInfo {
  font-size: clamp(18px, 1.6rem, 28px);
  line-height: 1.25;
  margin-top: 0.5rem;
}

/* Nawigacja desktop — pod czarnym paskiem; przy braku miejsca JS pokazuje hamburger */
html[data-font-size='medium'] .gp-hero__nav,
html[data-font-size='large'] .gp-hero__nav {
  line-height: normal;
}

html[data-font-size='medium'] .gp-hero__nav ul,
html[data-font-size='large'] .gp-hero__nav ul {
  /* Nie schodzić poniżej stałego paska (60/80px) — rem margines był za mały */
  margin-top: 72px;
  row-gap: 0.65rem;
  column-gap: 1.25rem;
  align-items: center;
}

@media (max-width: 1280px) {
  html[data-font-size='medium'] .gp-hero__nav ul,
  html[data-font-size='large'] .gp-hero__nav ul {
    margin-top: 92px;
  }
}

html[data-font-size='large'] .gp-hero__nav ul li a {
  font-size: clamp(15px, 1.45rem, 26px);
  line-height: 1.25;
}

html[data-font-size='medium'] .gp-hero__nav ul li a {
  font-size: clamp(15px, 1.65rem, 24px);
  line-height: 1.25;
}

/* Kafelki — ogranicz rozrost tytułu (2rem przy large = 40px) i odstęp od „Czytaj więcej” */
html[data-font-size='medium'] .gp-tile,
html[data-font-size='large'] .gp-tile {
  max-height: none;
  min-height: 16rem;
  align-items: flex-end;
}

html[data-font-size='large'] .gp-tile {
  min-height: 18rem;
}

html[data-font-size='medium'] .gp-tile a,
html[data-font-size='large'] .gp-tile a {
  font-size: clamp(15px, 1.35rem, 24px);
  line-height: 1.25;
}

html[data-font-size='medium'] .gp-tile-content,
html[data-font-size='large'] .gp-tile-content {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

html[data-font-size='medium'] .gp-tile h3,
html[data-font-size='medium'] .gp-tile .h3,
html[data-font-size='medium'] .gp-news .gp-tile h3,
html[data-font-size='medium'] .gp-news .gp-tile .h3,
html[data-font-size='large'] .gp-tile h3,
html[data-font-size='large'] .gp-tile .h3,
html[data-font-size='large'] .gp-news .gp-tile h3,
html[data-font-size='large'] .gp-news .gp-tile .h3 {
  font-size: clamp(16px, 1.35rem, 26px);
  line-height: 1.25;
  margin: 0;
  hyphens: auto;
}

html[data-font-size='medium'] .gp-tile a span,
html[data-font-size='large'] .gp-tile a span {
  display: inline-block;
  margin-top: 0.15rem;
  line-height: 1.3;
}

/* Prognoza / nagłówki sekcji z nowrap */
html[data-font-size='medium'] .forecast__header,
html[data-font-size='large'] .forecast__header {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

html[data-font-size='medium'] .gp-article-pager__heading,
html[data-font-size='large'] .gp-article-pager__heading {
  white-space: normal;
}

/* Pasek WCAG — wyrównanie w środku zamiast line-height=wysokość paska */
html[data-font-size='medium'] .gp-hdr__top-bar,
html[data-font-size='large'] .gp-hdr__top-bar {
  max-height: none;
  min-height: 60px;
  display: flex;
  align-items: center;
}

html[data-font-size='medium'] .gp-hdr__wcag,
html[data-font-size='large'] .gp-hdr__wcag {
  line-height: normal;
  height: 100%;
  display: flex;
  align-items: center;
}

html[data-font-size='medium'] .gp-hdr__group-toogle,
html[data-font-size='large'] .gp-hdr__group-toogle {
  line-height: normal;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

@media (max-width: 1280px) {
  html[data-font-size='medium'] .gp-hdr__top-bar,
  html[data-font-size='large'] .gp-hdr__top-bar {
    min-height: 80px;
  }

  html[data-font-size='medium'] .gp-hdr__wcag,
  html[data-font-size='large'] .gp-hdr__wcag {
    line-height: normal;
  }

  .gp-hdr__font-size .gp-hdr__font-size--small {
    font-size: 14px !important;
  }

  .gp-hdr__font-size .gp-hdr__font-size--medium {
    font-size: 18px !important;
  }

  .gp-hdr__font-size .gp-hdr__font-size--large {
    font-size: 24px !important;
  }
}

/* Baner cookies — czytelny line-height przy powiększeniu */
html[data-font-size='medium'] .gp-cookie,
html[data-font-size='large'] .gp-cookie {
  max-height: min(92vh, 80rem);
}

html[data-font-size='medium'] .gp-cookie__text,
html[data-font-size='large'] .gp-cookie__text {
  line-height: 1.55;
}

html[data-font-size='medium'] .gp-cookie__heading,
html[data-font-size='large'] .gp-cookie__heading {
  line-height: 1.3;
}

/* Treść artykułów / BIP — unikaj ciasnych fixed line-height z site.css */
html[data-font-size='medium'] .article p,
html[data-font-size='medium'] .gp-content p,
html[data-font-size='large'] .article p,
html[data-font-size='large'] .gp-content p {
  line-height: 1.55;
}

html[data-font-size='large'] .gp-section-title,
html[data-font-size='large'] .gp-section-title__align-left,
html[data-font-size='medium'] .gp-section-title,
html[data-font-size='medium'] .gp-section-title__align-left {
  line-height: 1.2;
}

/* Banner PZU / Szlaki bez granic — na szerokich ekranach img-fluid
   nie wypełnia .article (naturalna szerokość < kontener), więc bez
   align-items zostaje przy lewej krawędzi. */
.gp-pzu-banner .article {
  align-items: center;
}

.gp-pzu-banner .article a {
  display: block;
  max-width: 100%;
}

.gp-pzu-banner .article img {
  display: block;
  margin-inline: auto;
}