/* ==========================================================================
   FEATURES SECTION ("Everything You Need")
   Pozadina #242424 - ova boja se nastavlja na SVE sledece sekcije do footera.
   Desktop first (>1023px), zatim tablet (768-1023px) i mobile (<=767px).
   ========================================================================== */

.features {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 120px 48px;
  background: #242424;
}

.features__inner {
  width: 100%;
  max-width: var(--container-width);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.features__eyebrow {
  margin: 0;
  color: var(--main-blue);
  text-align: center;
  font-family: var(--font-family);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 21px; /* 150% */
  letter-spacing: 1.68px;
  text-transform: uppercase;
}

.features__heading {
  margin: 16px 0 0;
  color: #FFF;
  text-align: center;
  font-family: var(--font-family);
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 46px; /* 115% */
  letter-spacing: -0.8px;
}

.features__grid {
  margin-top: 64px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

/* Gradient border trik - JEDAN element, bez ugnjezdenog wrapper/inner diva.
   Ovo izbegava subpixel rounding problem koji nastaje kad flex/grid deli
   sirinu na kolone (npr. (100% - gap) / 3 skoro nikad ne izadje na ceo broj
   piksela, pa ugnjezdeni 1px padding trik gubi taj razlomljeni deo piksela
   na jednoj strani).
   Resenje: border: 1px solid transparent (rezervise prostor za border),
   background-image sloj 1 (pozadina kartice, clip: padding-box) + sloj 2
   (border boja/gradient, clip: border-box). Radi pouzdano u svim modernim
   browserima, bez ugnjezdenih divova i bez rundovanja piksela. */
.features__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 1 calc((100% - 64px) / 3);
  box-sizing: border-box;
  min-width: 0;

  padding: 40px;
  border-radius: 24px;
  border: 1px solid transparent;

  background-image: linear-gradient(#343434, #343434), linear-gradient(#5A5A5A, #5A5A5A);
  background-origin: border-box;
  background-clip: padding-box, border-box;

  transition: background-image 0.3s ease;
}

.features__card:hover {
  background-image: linear-gradient(#343434, #343434), linear-gradient(200deg, #CC3838 -1.35%, #5B8AE1 100%);
}

.features__icon {
  display: flex;
  width: 48px;
  height: 48px;
  padding: 5.5px 0 6.5px 0;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  background: rgba(91, 138, 225, 0.16);
}

.features__icon svg {
  display: block;
}

.features__card-title {
  margin: 8px 0 0;
  color: #FFF;
  font-family: var(--font-family);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px; /* 140% */
  letter-spacing: -0.4px;
}

.features__card-text {
  margin: 0;
  color: #C4C4C4;
  font-family: var(--font-family);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 137.5% */
}

/* ==========================================================================
   TABLET (768px - 1023px)
   2 kolone, 3 reda
   ========================================================================== */
@media (max-width: 1023px) {

  .features {
    padding: 80px 24px 96px 24px;
  }

  .features__card {
    flex: 1 1 calc((100% - 32px) / 2);
  }

  .features__card-title {
    font-size: 20px;
    line-height: 30px; /* 150% */
    letter-spacing: -0.4px;
  }

  .features__card-text {
    font-size: 16px;
    line-height: 24px; /* 150% */
  }
}

/* ==========================================================================
   MOBILE (<= 767px)
   1 kolona
   ========================================================================== */
@media (max-width: 767px) {

  .features {
    padding: 96px 24px 80px 24px;
  }

  .features__grid {
    gap: 24px;
  }

  .features__card {
    flex: 1 1 100%;
    padding: 32px;
  }

}