/* Sekcja "o firmie" - modul rkabout.
   Ta sama geometria kontenera i ta sama ramka co baner oraz kafelki. */

.rk-about {
  /* jedno miejsce na kolor panelu - tym samym kolorem konczy sie gradient
     przenikania na zdjeciu, wiec musi byc wspolny */
  --rk-about-bg: #fbfaf8;

  box-sizing: border-box;
  width: 100%;
  max-width: var(--rk-container, 1320px);
  margin: 44px auto 0;
  padding: 0 12px;
}

.rk-about__box {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  align-items: stretch;
  border: 2px solid #f4f2ee;
  border-radius: 20px;
  background: var(--rk-about-bg);
  overflow: hidden;
}

/* --- lewa kolumna --- */

.rk-about__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem;
}

.rk-about__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--rk-ink, #1b2733);
}

.rk-about__text {
  margin: 1.125rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--rk-muted, #5b6875);
}

/* --- plakietki --- */

/* Plakietki wg makiety: ikona w jasnym kolku NAD dwuwierszowym podpisem,
   cztery w rzedzie, bez ramek - wczesniej byly to male karty z ikona obok
   tekstu. Nie zawijamy, zamiast tego pozwalamy im sie zwezac. */
.rk-about__badges {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.75rem;
  margin-top: 1.75rem;
}

.rk-about__badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.rk-about__badge-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0.6875rem;
  border-radius: 999px;
  /* jasny bez z logo - kolko ma byc tlem dla ikony, nie plama koloru */
  background: #f7efe3;
  color: var(--rk-blue, #b08a4e);
}

.rk-about__badge-icon svg {
  width: 100%;
  height: 100%;
}

.rk-about__badge-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--rk-muted, #5b6875);
  overflow-wrap: break-word;
}

.rk-about__badge-lead {
  font-weight: 700;
  color: var(--rk-ink, #1b2733);
}

/* --- przycisk --- */

.rk-about__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  align-self: flex-start;
  margin-top: 1.875rem;
  padding: 0.9rem 1.75rem;
  border-radius: 6px;
  background: var(--rk-blue, #131310);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out;
}

.rk-about__btn:hover,
.rk-about__btn:focus {
  background: var(--rk-blue-dark, #000000);
  color: #fff;
  text-decoration: none;
}

.rk-about__btn svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
}

/* --- zdjecie --- */

.rk-about__media {
  position: relative;
  min-height: 300px;
  /* gorna granica wysokosci sekcji: bez niej wysokie zdjecie rozciaga panel
     na ~600 px i tekst tonie w pustej przestrzeni po lewej */
  max-height: 420px;
}

.rk-about__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Kadrujemy od PRAWEJ: dostarczone grafiki maja motyw po prawej stronie,
     a lewa polowe wypelnia puste tlo. Przy domyslnym srodkowaniu ta pustka
     wchodzila w kadr i miedzy tekstem a zdjeciem robila sie szeroka biel. */
  object-position: right center;
}

/* przenikanie: lewa krawedz zdjecia rozplywa sie w tle panelu, dzieki czemu
   nie ma twardej pionowej linii miedzy trescia a fotografia */
.rk-about__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--rk-about-bg) 0%,
    rgba(251, 250, 248, 0.92) 6%,
    rgba(251, 250, 248, 0.55) 14%,
    rgba(251, 250, 248, 0) 26%
  );
}

/* --- mniejsze ekrany --- */

@media (max-width: 991.98px) {
  .rk-about__badges {
    flex-wrap: wrap;
  }

  .rk-about__box {
    grid-template-columns: 1fr;
  }

  .rk-about__media {
    order: -1;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  /* w ukladzie pionowym zdjecie jest nad trescia, wiec przenikanie
     obraca sie o 90 stopni - z boku na dol kadru */
  .rk-about__media::before {
    background: linear-gradient(
      to bottom,
      rgba(251, 250, 248, 0) 55%,
      rgba(251, 250, 248, 0.6) 78%,
      var(--rk-about-bg) 100%
    );
  }

  .rk-about__content {
    padding: 2rem 1.5rem 2.5rem;
  }
}

/* na telefonie plakietki ida w dwie kolumny - jedna kolumna ciagnela sie przez
   pol ekranu, a cztery obok siebie sie nie miesciły */
@media (max-width: 575.98px) {
  .rk-about__badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.375rem 1rem;
  }
}