/* Szablon O (O nas): opis z ilustracją, liczniki na zdjęciu z gradientem, „Co nas wyróżnia”. Style obliczone na starej stronie. */

/* Opis: telefon tekst, obraz, przycisk (wyśrodkowane); od 768 px tekst z przyciskiem po lewej, obraz po prawej. */
.about { padding: 72px 0; }
.about__grid { display: grid; justify-items: center; gap: var(--s-6) 0; text-align: center; }
.about__text p { margin: 0; }
.about__title { margin: 0 0 var(--s-2); font-size: 1.25rem; line-height: 1.2; }
.about__wave { width: 104px; height: 11px; margin: 0 auto var(--s-3); color: var(--c-blue); }
.about__grid > picture { width: min(100%, 296px); }
.about__more { margin: 0; }
.about__btn { min-height: 48px; padding: 0 30px; background: linear-gradient(90deg, var(--c-navy), var(--c-blue-text-bg)); font-family: var(--font-body); font-weight: 400; }
.about__btn:hover, .about__btn:focus-visible { background: var(--g-brand-text); }

@media (min-width: 768px) {
  .about__grid {
    grid-template-columns: minmax(0, 550px) minmax(0, 1fr);
    grid-template-areas: "text img" "more img";
    grid-template-rows: auto 1fr;
    justify-items: start;
    gap: 0 var(--s-8);
    padding-inline: 25px;
    text-align: left;
  }
  .about__text { grid-area: text; padding-top: 113px; }
  .about__more { grid-area: more; align-self: start; margin-top: 38px; }
  .about__grid > picture { grid-area: img; justify-self: end; width: min(100%, 462px); }
  .about__title { font-size: 2.1875rem; font-weight: var(--fw-heading); }
  .about__wave { margin: 0 0 var(--s-3); }
}

/* Liczniki: wartości końcowe w HTML, counter.js tylko animuje (bez prefers-reduced-motion). */
.counters {
  position: relative;
  isolation: isolate;
  padding: 50px 0 40px;
  background: center / cover no-repeat url("/assets/img/tla/liczniki-960.jpg");
  background-image: image-set(url("/assets/img/tla/liczniki-960.webp") type("image/webp"), url("/assets/img/tla/liczniki-960.jpg") type("image/jpeg"));
  color: var(--c-on-brand);
}
.counters::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--g-banner);
  opacity: 0.85;
}
.counters__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-4); margin: 0 auto; padding-block: 0; list-style: none; }
.counters__item { display: flex; flex-direction: column; align-items: center; font-size: 1.125rem; line-height: 1.5; text-align: center; }
.counters__icon {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  margin-bottom: var(--s-3);
  border: 1px solid var(--c-on-brand);
  border-radius: 50%;
}
.counters__icon svg { width: 25px; height: 25px; }
.counters__value {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: var(--fw-heading);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .counters {
    padding: 121px 0 100px;
    background-image: url("/assets/img/tla/liczniki-1440.jpg");
    background-image: image-set(url("/assets/img/tla/liczniki-1440.webp") type("image/webp"), url("/assets/img/tla/liczniki-1440.jpg") type("image/jpeg"));
  }
  .counters__list { grid-template-columns: repeat(4, 1fr); padding-inline: 25px; }
  .counters__item { font-size: 1rem; line-height: 1.75; }
  .counters__icon { width: 50px; height: 50px; margin-bottom: 15px; border: 0; border-radius: 0; }
  .counters__icon svg { width: 50px; height: 50px; }
  .counters__value { font-size: 2.5rem; font-weight: 400; line-height: 1.2; }
}
@media (min-width: 1025px) {
  .counters {
    background-image: url("/assets/img/tla/liczniki-1920.jpg");
    background-image: image-set(url("/assets/img/tla/liczniki-1920.webp") type("image/webp"), url("/assets/img/tla/liczniki-1920.jpg") type("image/jpeg"));
  }
}

/* Co nas wyróżnia: 4 wyróżniki z ikoną w kole z gradientem. */
.features { padding: 73px 0 90px; text-align: center; }
.features__title { margin: 0 0 14px; font-size: 1.5rem; font-weight: var(--fw-heading-strong); line-height: 1.2; }
.features__lead { margin: 0 0 50px; color: var(--c-heading); }
.features__list { display: grid; gap: var(--s-6); margin: 0; padding: 0; list-style: none; }
.features__icon {
  display: grid;
  place-items: center;
  width: 80px; height: 80px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--g-brand);
  color: var(--c-on-brand);
}
.features__icon svg { width: 30px; height: 30px; }
.features__name {
  margin: 0;
  padding: 26px 0 14px;
  color: var(--c-text-strong);
  font-size: 1.25rem;
  line-height: 1.2;
}
.features__item p { margin: 0; padding: 0 10px; }

@media (min-width: 768px) {
  .features__title { font-size: 2.1875rem; }
  .features__lead { margin-bottom: 86px; }
  .features__list { grid-template-columns: repeat(2, 1fr); padding-inline: 10px; }
  /* Jak na starej stronie: nazwy łamią się na dwa wiersze w wąskiej kolumnie. */
  .features__name { max-width: 190px; margin-inline: auto; }
}
@media (min-width: 1025px) {
  .features__list { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

/* Oryginalny wariant O nas PL/EN: obrót dekoracyjnej ikony, bez nowego tabstopu. */
.features__icon { transition: transform 0.5s; }
.features__item:hover .features__icon, .features__item:focus-within .features__icon { transform: rotate(360deg); }
@media (prefers-reduced-motion: reduce) {
  .features__item:hover .features__icon, .features__item:focus-within .features__icon { transform: none; }
}