/*
 * FEDS Block Layout
 *
 * Reguły są aktywne wyłącznie dla konkretnej instancji bloku,
 * która otrzyma klasę .feds-layout--grid.
 */

.feds-layout--grid .views-view-responsive-grid {
  display: grid !important;
  width: 100%;
  grid-template-columns:
    repeat(var(--feds-cols-desktop, 3), minmax(0, 1fr)) !important;
}

.feds-layout--grid .views-view-responsive-grid__item {
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
}

.feds-layout--grid .views-view-responsive-grid__item-inner {
  width: 100%;
  min-width: 0;
  height: 100%;
}

/* Tablet. */
@media only screen and (min-width: 768px) and (max-width: 1199.98px) {
  .feds-layout--grid .views-view-responsive-grid {
    grid-template-columns:
      repeat(var(--feds-cols-tablet, 2), minmax(0, 1fr)) !important;
  }
}

/* Telefon. */
@media only screen and (max-width: 767.98px) {
  .feds-layout--grid .views-view-responsive-grid {
    grid-template-columns:
      repeat(var(--feds-cols-mobile, 1), minmax(0, 1fr)) !important;
  }
}


/* ==========================================================
 * FEDS GRID DLA VIEWS SLICK
 *
 * Nie usuwamy ani nie modyfikujemy konfiguracji Slick View.
 * Gdy wrapper bloku ma .feds-layout--grid, neutralizujemy
 * zachowanie wizualne slidera i układamy jego slajdy w grid.
 * ========================================================== */

/* Strzałki karuzeli nie są potrzebne w trybie grid. */
.feds-layout--grid .slick__arrow,
.feds-layout--grid .slick-dots {
  display: none !important;
}

/*
 * Stan przed inicjalizacją Slick JS.
 * W server-side HTML .slick__slide są bezpośrednimi dziećmi slidera.
 */
.feds-layout--grid .slick__slider:not(.slick-initialized) {
  display: grid !important;
  grid-template-columns:
    repeat(var(--feds-cols-desktop, 3), minmax(0, 1fr)) !important;
  width: 100% !important;
}

/*
 * Stan po inicjalizacji Slick JS:
 *
 * slider
 *   -> slick-list
 *      -> slick-track
 *         -> slick__slide
 */
.feds-layout--grid .slick__slider.slick-initialized {
  width: 100% !important;
}

.feds-layout--grid .slick__slider.slick-initialized .slick-list {
  overflow: visible !important;
  width: 100% !important;
  padding: 0 !important;
}

.feds-layout--grid .slick__slider.slick-initialized .slick-track {
  display: grid !important;
  grid-template-columns:
    repeat(var(--feds-cols-desktop, 3), minmax(0, 1fr)) !important;

  width: 100% !important;
  max-width: none !important;

  transform: none !important;
  left: auto !important;
  top: auto !important;
}

/* Slick dodaje clearfix przez pseudo-elementy tracka. */
.feds-layout--grid
.slick__slider.slick-initialized
.slick-track::before,
.feds-layout--grid
.slick__slider.slick-initialized
.slick-track::after {
  display: none !important;
  content: none !important;
}

/* Jeden slajd = jeden kafelek siatki. */
.feds-layout--grid .slick__slide {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;

  display: block !important;

  visibility: visible !important;
  opacity: 1 !important;
}

/*
 * Gdyby inny optionset używał infinite=true,
 * nie pokazujemy kopii tworzonych przez Slick.
 */
.feds-layout--grid .slick__slide.slick-cloned {
  display: none !important;
}


/* Tablet. */
@media only screen
  and (min-width: 768px)
  and (max-width: 1199.98px) {

  .feds-layout--grid
  .slick__slider:not(.slick-initialized),

  .feds-layout--grid
  .slick__slider.slick-initialized
  .slick-track {
    grid-template-columns:
      repeat(
        var(--feds-cols-tablet, 2),
        minmax(0, 1fr)
      ) !important;
  }
}


/* Telefon. */
@media only screen and (max-width: 767.98px) {

  .feds-layout--grid
  .slick__slider:not(.slick-initialized),

  .feds-layout--grid
  .slick__slider.slick-initialized
  .slick-track {
    grid-template-columns:
      repeat(
        var(--feds-cols-mobile, 1),
        minmax(0, 1fr)
      ) !important;
  }
}


/* ==========================================================
 * FEDS PREDEFINED SLICK GRID
 * ========================================================== */

.feds-layout--grid .slick__arrow,
.feds-layout--grid .slick-dots {
  display: none !important;
}

/*
 * Po unslick() slajdy wracają jako bezpośrednie dzieci
 * .slick__slider.
 */
.feds-layout--grid .slick__slider {
  display: grid !important;
  grid-template-columns:
    repeat(
      var(--feds-cols-desktop, 3),
      minmax(0, 1fr)
    ) !important;

  width: 100% !important;
  height: auto !important;

  transform: none !important;
}

/*
 * Fallback na moment przed wykonaniem unslick().
 */
.feds-layout--grid .slick-list {
  overflow: visible !important;
  width: 100% !important;
  height: auto !important;
}

.feds-layout--grid .slick-track {
  display: grid !important;
  grid-template-columns:
    repeat(
      var(--feds-cols-desktop, 3),
      minmax(0, 1fr)
    ) !important;

  width: 100% !important;
  height: auto !important;

  transform: none !important;
}

.feds-layout--grid .slick-track::before,
.feds-layout--grid .slick-track::after {
  display: none !important;
  content: none !important;
}

.feds-layout--grid .slick__slide {
  display: block !important;
  float: none !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;

  margin: 0 !important;

  opacity: 1 !important;
  visibility: visible !important;
}

.feds-layout--grid .slick__slide.slick-cloned {
  display: none !important;
}


/* Tablet. */
@media only screen
  and (min-width: 768px)
  and (max-width: 1199.98px) {

  .feds-layout--grid .slick__slider,
  .feds-layout--grid .slick-track {
    grid-template-columns:
      repeat(
        var(--feds-cols-tablet, 2),
        minmax(0, 1fr)
      ) !important;
  }
}


/* Telefon. */
@media only screen and (max-width: 767.98px) {

  .feds-layout--grid .slick__slider,
  .feds-layout--grid .slick-track {
    grid-template-columns:
      repeat(
        var(--feds-cols-mobile, 1),
        minmax(0, 1fr)
      ) !important;
  }
}


/* ==========================================================
 * FEDS GRID FIXED CONTAINER
 *
 * Warianty bez karuzeli korzystają z tej samej szerokości
 * kontenera co standardowa zawartość portalu.
 * Karuzela pozostaje bez zmian.
 * ========================================================== */

/*
 * Nagłówek sekcji.
 */
.page-view-strona-glowna
.feds-layout--grid > h1,
.page-view-strona-glowna
.feds-layout--grid > h2 {
  width: 100%;
  max-width: 540px;

  box-sizing: border-box;

  padding: 0 20px;
  margin: 0 auto 60px auto;
}

/*
 * Cała zawartość bloku w wariancie siatkowym.
 *
 * W karuzeli .content może być szerszy, dlatego ograniczenie
 * nakładamy wyłącznie przy .feds-layout--grid.
 */
.page-view-strona-glowna
.feds-layout--grid > .content {
  width: 100%;
  max-width: 540px;

  box-sizing: border-box;

  padding-left: 20px;
  padding-right: 20px;

  margin-left: auto;
  margin-right: auto;
}


/* >= 768 px */
@media only screen and (min-width: 768px) {

  .page-view-strona-glowna
  .feds-layout--grid > h1,

  .page-view-strona-glowna
  .feds-layout--grid > h2,

  .page-view-strona-glowna
  .feds-layout--grid > .content {
    max-width: 720px;
  }
}


/* >= 992 px */
@media only screen and (min-width: 992px) {

  .page-view-strona-glowna
  .feds-layout--grid > h1,

  .page-view-strona-glowna
  .feds-layout--grid > h2,

  .page-view-strona-glowna
  .feds-layout--grid > .content {
    max-width: 960px;
  }
}


/* >= 1200 px */
@media only screen and (min-width: 1200px) {

  .page-view-strona-glowna
  .feds-layout--grid > h1,

  .page-view-strona-glowna
  .feds-layout--grid > h2,

  .page-view-strona-glowna
  .feds-layout--grid > .content {
    max-width: 1140px;
  }
}


/* >= 1400 px */
@media only screen and (min-width: 1400px) {

  .page-view-strona-glowna
  .feds-layout--grid > h1,

  .page-view-strona-glowna
  .feds-layout--grid > h2,

  .page-view-strona-glowna
  .feds-layout--grid > .content {
    max-width: 1320px;
  }
}