/* JAPI CSS Manager - menu ID 815 */

/* =========================================================
   JM GLOBAL - F.A.Q. - KARTY ARTYKUŁÓW - V6
   Wklej jako osobny styl w JAPI CSS Managerze.
   Zastępuje w całości wersje V1-V5.
   ========================================================= */

/* SIATKA: 4 / 2 / 1 KOLUMNA */
html body .article-list > .row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 32px !important;
  row-gap: 38px !important;
  align-items: stretch !important;
  margin: 0 !important;
}

/* Joomla może tworzyć kilka osobnych wierszy. */
html body .article-list > .row + .row {
  margin-top: 38px !important;
}

html body .article-list > .row > [class*="col-"] {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* KARTA: bez sztucznej, wielkiej wysokości */
html body .article-list .article {
  position: relative !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 16px 42px rgba(23, 25, 28, 0.09) !important;
  transition: transform 220ms ease, box-shadow 220ms ease !important;
}

html body .article-list .article:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 23px 54px rgba(23, 25, 28, 0.15) !important;
}

/* ZDJĘCIE */
html body .article-list .article-intro-image,
html body .article-list .article-full-image,
html body .article-list .article-featured-video {
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: 270px !important;
  min-height: 270px !important;
  max-height: 270px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #eef0f2 !important;
}

html body .article-list .article-intro-image a,
html body .article-list .article-full-image a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

html body .article-list .article-intro-image img,
html body .article-list .article-full-image img,
html body .article-list .article-featured-video img,
html body .article-list .article-featured-video iframe,
html body .article-list .article-featured-video video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 420ms ease !important;
}

html body .article-list .article:hover .article-intro-image img,
html body .article-list .article:hover .article-full-image img,
html body .article-list .article:hover .article-featured-video img {
  transform: scale(1.04) !important;
}

/* WNĘTRZE KARTY
   Przycisk pracuje w normalnym przepływie, bez sztucznej wysokości karty. */
html body .article-list .article .article-body {
  position: relative !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 30px !important;
  text-align: left !important;
}

/* TYTUŁ: miejsce na 4 pełne wiersze, bez obcinania treści.
   24 px × 1.28 × 4 = 122,88 px, dlatego rezerwujemy 123 px. */
html body .article-list .article .article-header {
  display: block !important;
  width: 100% !important;
  min-height: 123px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body .article-list .article .article-header h1,
html body .article-list .article .article-header h2,
html body .article-list .article .article-header h3,
html body .article-list .article .article-header h4 {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  color: #1b1d20 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.28 !important;
  text-align: left !important;
  text-transform: none !important;
  white-space: normal !important;
  text-overflow: clip !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

html body .article-list .article .article-header h1 a,
html body .article-list .article .article-header h2 a,
html body .article-list .article .article-header h3 a,
html body .article-list .article .article-header h4 a {
  color: inherit !important;
  text-decoration: none !important;
}

html body .article-list .article .article-header h1 a:hover,
html body .article-list .article .article-header h2 a:hover,
html body .article-list .article .article-header h3 a:hover,
html body .article-list .article .article-header h4 a:hover {
  color: #f20d17 !important;
}

/* INTROTEXT MUSI POZOSTAĆ WIDOCZNY.
   W tym widoku Joomla wewnątrz .article-introtext znajduje się przycisk
   „Czytaj więcej”, dlatego nie wolno ukrywać całego kontenera. */
html body .article-list .article .article-introtext {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 24px 0 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Nie ukrywamy żadnego dziecka .article-introtext, ponieważ Joomla może
   umieszczać przycisk wewnątrz dodatkowego akapitu lub kontenera. Sam
   kontener ma font-size: 0, więc zwykły tekst wprowadzający nie rozpycha karty. */
html body .article-list .article .article-intro-text,
html body .article-list .article .fields-container,
html body .article-list .article .tags {
  display: none !important;
}

/* DATA: bez dużej dziury pod tytułem */
html body .article-list .article .article-info {
  display: flex !important;
  align-items: baseline !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #8a8f95 !important;
  font-size: 0 !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

html body .article-list .article .article-info > span {
  display: none !important;
  margin: 0 !important;
}

html body .article-list .article .article-info > .published,
html body .article-list .article .article-info > .create,
html body .article-list .article .article-info > [class*="publish"] {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  margin: 0 !important;
  color: #8a8f95 !important;
  font-size: 0 !important;
  font-weight: 500 !important;
}

html body .article-list .article .article-info > .published::before,
html body .article-list .article .article-info > .create::before,
html body .article-list .article .article-info > [class*="publish"]::before {
  content: "Opublikowano dnia:" !important;
  color: #8a8f95 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
}

html body .article-list .article .article-info time,
html body .article-list .article .article-info .published time,
html body .article-list .article .article-info .create time {
  display: inline !important;
  color: #8a8f95 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

html body .article-list .article .article-info .fa,
html body .article-list .article .article-info .fas,
html body .article-list .article .article-info .far,
html body .article-list .article .article-info .icon-calendar {
  display: none !important;
}

/* PRZYCISK „CZYTAJ WIĘCEJ”
   Obsługuje wariant z przyciskiem wewnątrz .article-introtext oraz
   standardowe warianty Joomla/Helix. Przycisk pozostaje w normalnym
   przepływie i jest dociskany do dołu karty bez sztucznej wysokości. */
html body .article-list .article .article-introtext .readmore,
html body .article-list .article .article-introtext .article-readmore,
html body .article-list .article .article-introtext > a.readmore,
html body .article-list .article .article-introtext > a.btn,
html body .article-list .article .article-body > .readmore,
html body .article-list .article .article-body > .article-readmore,
html body .article-list .article .article-body > a.readmore,
html body .article-list .article .article-body > a.btn {
  position: static !important;
  z-index: auto !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-self: flex-start !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: auto 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: normal !important;
  text-align: left !important;
}

html body .article-list .article .article-introtext .readmore a,
html body .article-list .article .article-introtext .article-readmore a,
html body .article-list .article .article-introtext a.readmore,
html body .article-list .article .article-introtext a.btn,
html body .article-list .article .article-introtext p a,
html body .article-list .article .article-introtext a,
html body .article-list .article .article-introtext > a.readmore,
html body .article-list .article .article-introtext > a.btn,
html body .article-list .article .article-body > .readmore a,
html body .article-list .article .article-body > .article-readmore a,
html body .article-list .article .article-body > a.readmore,
html body .article-list .article .article-body > a.btn {
  position: relative !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 10px 17px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f20d17 !important;
  background-color: #f20d17 !important;
  background-image: linear-gradient(#f20d17, #f20d17) !important;
  box-shadow:
    inset 0 0 0 100px #f20d17,
    0 7px 16px rgba(242, 13, 23, 0.22) !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-family: inherit !important;
  font-size: 0 !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

html body .article-list .article .article-introtext > a.readmore,
html body .article-list .article .article-introtext > a.btn,
html body .article-list .article .article-introtext > p:has(a),
html body .article-list .article .article-introtext > div:has(a) {
  margin-top: auto !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
}

html body .article-list .article .article-introtext .readmore a::before,
html body .article-list .article .article-introtext .article-readmore a::before,
html body .article-list .article .article-introtext a::before,
html body .article-list .article .article-introtext > a.readmore::before,
html body .article-list .article .article-introtext > a.btn::before,
html body .article-list .article .article-body > .readmore a::before,
html body .article-list .article .article-body > .article-readmore a::before,
html body .article-list .article .article-body > a.readmore::before,
html body .article-list .article .article-body > a.btn::before {
  content: "Czytaj więcej" !important;
  position: static !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

html body .article-list .article .article-introtext .readmore a::after,
html body .article-list .article .article-introtext .article-readmore a::after,
html body .article-list .article .article-introtext a::after,
html body .article-list .article .article-introtext > a.readmore::after,
html body .article-list .article .article-introtext > a.btn::after,
html body .article-list .article .article-body > .readmore a::after,
html body .article-list .article .article-body > .article-readmore a::after,
html body .article-list .article .article-body > a.readmore::after,
html body .article-list .article .article-body > a.btn::after {
  content: "\2192" !important;
  position: static !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 0 8px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

html body .article-list .article .article-introtext .readmore a:hover,
html body .article-list .article .article-introtext .readmore a:focus,
html body .article-list .article .article-introtext .article-readmore a:hover,
html body .article-list .article .article-introtext .article-readmore a:focus,
html body .article-list .article .article-introtext a:hover,
html body .article-list .article .article-introtext a:focus,
html body .article-list .article .article-introtext > a.readmore:hover,
html body .article-list .article .article-introtext > a.readmore:focus,
html body .article-list .article .article-introtext > a.btn:hover,
html body .article-list .article .article-introtext > a.btn:focus,
html body .article-list .article .article-body > .readmore a:hover,
html body .article-list .article .article-body > .readmore a:focus,
html body .article-list .article .article-body > .article-readmore a:hover,
html body .article-list .article .article-body > .article-readmore a:focus,
html body .article-list .article .article-body > a.readmore:hover,
html body .article-list .article .article-body > a.readmore:focus,
html body .article-list .article .article-body > a.btn:hover,
html body .article-list .article .article-body > a.btn:focus {
  background: #c90b13 !important;
  background-color: #c90b13 !important;
  background-image: linear-gradient(#c90b13, #c90b13) !important;
  box-shadow:
    inset 0 0 0 100px #c90b13,
    0 9px 20px rgba(242, 13, 23, 0.28) !important;
  transform: translateY(-2px) !important;
}

/* PAGINACJA */
html body .pagination-wrapper,
html body .pagination {
  margin-top: 52px !important;
}

html body .pagination .page-link,
html body .pagination-wrapper .page-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border: 1px solid #e1e4e7 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #23262a !important;
  font-weight: 700 !important;
}

html body .pagination .page-item.active .page-link,
html body .pagination-wrapper .page-item.active .page-link,
html body .pagination .page-link:hover,
html body .pagination-wrapper .page-link:hover {
  border-color: #f20d17 !important;
  background: #f20d17 !important;
  color: #ffffff !important;
}

/* TABLET */
@media (max-width: 1199px) {
  html body .article-list > .row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 28px !important;
    row-gap: 32px !important;
  }

  html body .article-list > .row + .row {
    margin-top: 32px !important;
  }

  html body .article-list .article-intro-image,
  html body .article-list .article-full-image,
  html body .article-list .article-featured-video {
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
  }

  html body .article-list .article .article-header {
    min-height: 118px !important;
  }

  html body .article-list .article .article-header h1,
  html body .article-list .article .article-header h2,
  html body .article-list .article .article-header h3,
  html body .article-list .article .article-header h4 {
    font-size: 23px !important;
  }
}

/* TELEFON */
@media (max-width: 767px) {
  html body .article-list > .row {
    grid-template-columns: 1fr !important;
    row-gap: 26px !important;
  }

  html body .article-list > .row + .row {
    margin-top: 26px !important;
  }

  html body .article-list .article {
    height: auto !important;
    border-radius: 16px !important;
  }

  html body .article-list .article-intro-image,
  html body .article-list .article-full-image,
  html body .article-list .article-featured-video {
    height: 235px !important;
    min-height: 235px !important;
    max-height: 235px !important;
  }

  html body .article-list .article .article-body {
    padding: 26px 22px !important;
  }

  html body .article-list .article .article-header {
    min-height: 0 !important;
    margin-bottom: 16px !important;
  }

  html body .article-list .article .article-header h1,
  html body .article-list .article .article-header h2,
  html body .article-list .article .article-header h3,
  html body .article-list .article .article-header h4 {
    margin: 0 !important;
    font-size: 22px !important;
  }

  html body .article-list .article .article-introtext .readmore a,
  html body .article-list .article .article-introtext .article-readmore a,
  html body .article-list .article .article-introtext > a.readmore,
  html body .article-list .article .article-introtext > a.btn,
  html body .article-list .article .article-body > .readmore a,
  html body .article-list .article .article-body > .article-readmore a,
  html body .article-list .article .article-body > a.readmore,
  html body .article-list .article .article-body > a.btn {
    width: auto !important;
    min-width: 0 !important;
  }

}