/*
 * 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;
  gap:
    var(
      --feds-grid-gap,
      var(--views-responsive-grid--layout-gap, 10px)
    ) !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 NATIVE SLICK / BLAZY GRID
 *
 * Sam układ siatki buduje natywnie Slick/Blazy.
 * FEDS nie manipuluje slick-list / slick-track / slick-slide.
 * ========================================================== */

/*
 * W trybie statycznego gridu Slick może nadal wyrenderować
 * kontrolki na poziomie HTML. Nie są one potrzebne.
 */
.feds-layout--grid .slick-prev,
.feds-layout--grid .slick-next,
.feds-layout--grid .slick__arrow,
.feds-layout--grid .slick-dots {
  display: none !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;
  }
}