/* =========================================================
   WHY / DLACZEGO
   Sekcja wyjaśniająca „dlaczego my”
   ========================================================= */


/* =========================================================
   1. SEKCJA GŁÓWNA
   - tło (ciemny gradient)
   - kolor tekstu
   - pionowe odstępy sekcji
   ========================================================= */

.why {
  background:
    linear-gradient(
      180deg,
      rgba(10,20,35,0.92),
      rgba(12,28,50,0.92)
    );
  color: rgba(255,255,255,0.88);
  padding: 10px 0;
}


/* =========================================================
   2. KONTAINER (szerokość strony)
   - trzyma treść w max-width
   - spójne guttery z resztą strony
   ========================================================= */

.why__container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}


/* =========================================================
   3. GRID GŁÓWNY
   - 2 kolumny: media + treść
   ========================================================= */

.why__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: start;
}


/* =========================================================
   4. MEDIA (główne zdjęcie po lewej)
   ========================================================= */

.why__media {
  margin: 0;
  border-radius: 1px;
  overflow: hidden;

  align-self: start;
  max-height: 100%;
}

.why__media img {
  width: 100%;
  height: auto;
  display: block;

  object-fit: cover;
  object-position: center top;
}


/* =========================================================
   5. CONTENT (prawa kolumna)
   ========================================================= */

.why__content {
  max-width: 520px;
}


/* =========================================================
   6. TYTUŁ I WPROWADZENIE
   ========================================================= */

.why__title {
  font-size: clamp(28px, 3vw, 40px);
  margin-bottom: 16px;
}

.why__intro {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,0.75);
}


/* =========================================================
   7. STATYSTYKI (boxy z liczbami)
   ========================================================= */

.why__stats {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.why__stat {
  padding: 12px;
  border-radius: 14px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}

.why__statValue {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}

.why__statLabel {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255,255,255,255,0.70);
}


/* =========================================================
   8. TEKST OPISOWY
   ========================================================= */

.why__text {
  margin-top: 18px;
  max-width: 56ch;

  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.80);
}

.why__text p {
  margin: 0 0 12px;
}


/* =========================================================
   9. PUNKTY / ARGUMENTY
   ========================================================= */

.why__points {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.why__point {
  padding: 14px;
  border-radius: 14px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}

.why__pointTitle {
  margin-bottom: 6px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}

.why__pointText {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,0.70);
}


/* =========================================================
   10. THUMBNAILE (miniatury pod sekcją)
   ========================================================= */

.why__thumbs {
  grid-column: 1 / -1;   /* span na cały grid */
  margin-top: 0;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;

  justify-content: start; /* wyrównanie do lewej */
}

.why__thumb {
  aspect-ratio: 16 / 9;
  border-radius: 1px;
  overflow: hidden;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}

.why__thumb img {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center;
}


/* =========================================================
   11. RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
  .why {
    padding: 40px 0;
  }

  .why__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .why__media {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 820px) {
  .why__thumbs {
    grid-template-columns: 1fr;
  }
}