/* Jakosc: karuzela zdjec, haslo, boks "Jakosc", certyfikaty (dwie karuzele), zdjecie. Wartosci z PROD (1315 i 315);
   karuzele wg ustawien widzetow z Elementora (na PROD nie startowaly przez blad JS). */

/* --- Karuzela zdjec: 3 zdjecia co 5 s, kropki 70 px nad dolna krawedzia --- */
.quality-hero { min-height: 52.315vw; }
.quality-hero__slide {
  height: 52.431vw;
  background: center / cover no-repeat;
}
.quality-hero .carousel__dots {
  position: absolute;
  right: 0;
  bottom: 70px;
  left: 0;
  gap: 16px;
}
.quality-hero .carousel__dot[aria-current="true"] { width: 16px; height: 16px; }

/* --- Haslo --- */
.quality-claim {
  --band-width: 59.317vw;
  padding: 100px 20px 120px;
  background: var(--color-primary);
}
.quality-claim__title {
  position: relative;
  margin: 0;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--color-white);
}
.page--en .quality-claim__title { font-weight: 600; }

/* --- Boks "Jakosc" --- */
.quality-intro { --band-width: 60.764vw; padding: 63px 20px 104px; }
.quality-intro__box {
  position: relative;
  margin-left: 20px;
  color: var(--color-primary);
  text-align: center;
}
.quality-intro__img { display: inline-block; width: 110%; margin: 0 0 20px; text-align: start; }
.quality-intro__img img { max-width: 31.076vw; } /* liniowy, jak na PROD (odstep pod linia bazowa) */
.quality-intro__title {
  margin: 8px 0 16px;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.2;
}
.page--en .quality-intro__title { font-weight: 600; }
.quality-intro__text {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* --- Pas "Nasze certyfikaty": naglowek i karuzela ikon (3 widoczne, kropki 20 px pod ikonami) --- */
.quality-certs {
  --band-width: 59.317vw;
  padding: 31px 20px 26px;
  background: var(--color-primary);
  color: var(--color-white);
}
.quality-certs__inner { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px; }
.quality-certs__title {
  position: relative;
  flex: 1 0 auto;
  margin: 0;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
}
.quality-certs__carousel {
  --per-view: 3;
  --dot-color: var(--color-white);
  --dot-active-color: var(--color-accent);
  width: 50%;
}
.quality-certs__slide { text-align: center; }
.quality-certs__slide img { width: 143px; height: auto; aspect-ratio: 1; object-fit: cover; }
.quality-certs__carousel .carousel__dots { margin-top: 20px; }

/* --- Kafle certyfikatow: 3 widoczne, strzalki 100 px poza pasem --- */
.quality-tiles { --band-width: 58.449vw; padding: 90px 20px 110px; }
.quality-tiles__carousel { --per-view: 3; color: var(--color-primary); }
.quality-tiles .carousel__arrow { top: calc(50% - 30px); color: var(--color-primary); }
.quality-tiles .carousel__arrow--prev { left: -100px; }
.quality-tiles .carousel__arrow--next { right: -100px; }
.quality-tiles .carousel__arrow svg { width: 42px; height: 42px; }
.quality-tile { text-align: center; }
.quality-tile__img { display: block; margin: 0 auto 50px; line-height: 0; }
.quality-tile__img[type="button"],
.quality-tile__img[type="button"]:hover,
.quality-tile__img[type="button"]:focus { padding: 0; border: 0; background: none; cursor: pointer; }
.quality-tile__img img { width: 250px; height: 250px; }
.quality-tile__title {
  margin: 8px 0 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--color-primary);
}
.quality-tile__title button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}
.quality-tile__title button[type="button"],
.quality-tile__title button[type="button"]:hover,
.quality-tile__title button[type="button"]:focus { padding: 0; border: 0; background: none; }
/* Na PROD tytul byl linkiem - kolor przy najechaniu jak linki (base.css). */
.quality-tile__title button:hover { color: var(--color-accent); }

/* --- Zdjecie --- */
.quality-photo {
  min-height: 43.576vw;
  background: url("/assets/img/Screenshot-2023-07-08-at-18.08-1-1.webp") center / cover no-repeat;
}

@media (max-width: 1024px) {
  .quality-claim,
  .quality-intro,
  .quality-tiles { padding: 50px 20px; }
  .quality-certs { padding: 50px 20px; }
  .quality-certs__inner { justify-content: space-around; }
  .quality-intro__img { width: 100%; } /* na PROD 110% - przewijanie w bok */
  .quality-certs__title { width: 100%; margin-bottom: 20px; text-align: center; }
  .quality-certs__carousel { --per-view: 3; width: 80%; }
  .quality-tiles__carousel { --per-view: 2; }
  .quality-tiles .carousel__arrow--prev { left: 0; }
  .quality-tiles .carousel__arrow--next { right: 0; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .quality-claim,
  .quality-intro,
  .quality-certs,
  .quality-tiles { --band-width: 100%; }
}

@media (max-width: 767px) {
  .quality-claim,
  .quality-intro,
  .quality-certs,
  .quality-tiles { --band-width: var(--content-width); }
  .quality-hero__slide { height: 350px; }
  .quality-claim__title { font-size: 1.8rem; }
  .quality-intro__box { margin-left: 0; }
  .quality-intro__img { width: 100%; }
  .quality-certs__carousel { --per-view: 2; width: 100%; }
  .quality-tiles__carousel { --per-view: 1; }
  .quality-photo { min-height: 320px; }
}