/* ─────────────────────────────────────────────

   Incentives — Post Cards Overlay Design

   ───────────────────────────────────────────── */

.section-posts-item.keen-slider__slide {
  position: relative;

  overflow: hidden;

  border-radius: 5px;

  height: 420px;

  background: #111;

  cursor: pointer;
}

.section-posts-item.keen-slider__slide > a {
  position: absolute;

  inset: 0;

  display: block;

  z-index: 0;
}

.section-posts-item.keen-slider__slide .img-resp {
  height: 100%;

  margin: 0 !important;

  border: none !important;
}

.section-posts-item.keen-slider__slide .img-resp-inner {
  height: 100%;

  background-size: cover;

  background-position: center;

  transition: transform 0.5s ease;
}

.section-posts-item.keen-slider__slide:hover .img-resp-inner {
  transform: scale(1.05);
}

.section-posts-item.keen-slider__slide::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    to top,

    rgba(0, 0, 0, 0.85) 0%,

    rgba(0, 0, 0, 0.4) 50%,

    rgba(0, 0, 0, 0.1) 100%
  );

  z-index: 1;

  transition: background 0.3s ease;
}

.section-posts-item.keen-slider__slide:hover::after {
  background: linear-gradient(
    to top,

    rgba(0, 0, 0, 0.92) 0%,

    rgba(0, 0, 0, 0.6) 60%,

    rgba(0, 0, 0, 0.2) 100%
  );
}

.section-posts-item.keen-slider__slide .section-posts-item-inner {
  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  padding: 24px !important;

  z-index: 2;

  color: #fff;
}

.section-posts-item.keen-slider__slide .section-posts-date {
  display: none !important;
}

.section-posts-item.keen-slider__slide .section-posts-title {
  display: block;

  color: #fff !important;

  /* font-size: 20px !important; */

  /* font-weight: 600 !important; */

  margin-bottom: 0 !important;

  text-decoration: none;

  line-height: 1.3;
}

.section-posts-item.keen-slider__slide .section-posts-excerpt {
  max-height: 0;

  overflow: hidden;

  opacity: 0;

  margin: 0 !important;

  transition:
    max-height 0.35s ease,
    opacity 0.35s ease,
    margin 0.35s ease;
}

.section-posts-item.keen-slider__slide .section-posts-excerpt p {
  color: rgba(255, 255, 255, 0.85) !important;

  /* font-size: 13px !important; */

  line-height: 1.5;

  margin: 0;
}

.section-posts-item.keen-slider__slide:hover .section-posts-excerpt {
  max-height: 120px;

  opacity: 1;

  margin-top: 10px !important;

  margin-bottom: 12px !important;
}

/* ─────────────────────────────────────────────

   Przycisk Show more — ikona zawsze widoczna,

   tekst pojawia się na hover

   ───────────────────────────────────────────── */

.section-posts-item.keen-slider__slide .section-posts-url,
.section-posts-item.keen-slider__slide .section-posts-url.block {
  display: inline-flex !important;

  align-items: center;

  gap: 0;

  background: transparent !important;

  padding: 0 !important;

  width: auto !important;

  margin-top: 14px;

  text-decoration: none;
}

/* Tekst — domyślnie ukryty */

.section-posts-item.keen-slider__slide .section-posts-url .btn-label {
  display: inline-block;

  color: #fff;

  font-size: 14px;

  font-weight: 500;

  white-space: nowrap;

  max-width: 0;

  opacity: 0;

  overflow: hidden;

  transition:
    max-width 0.3s ease,
    opacity 0.3s ease,
    margin 0.3s ease;
}

/* Tekst — widoczny na hover */

.section-posts-item.keen-slider__slide:hover .section-posts-url .btn-label {
  max-width: 120px;

  opacity: 1;

  margin-right: 10px;
}

/* Ikona — zawsze widoczna */

.section-posts-item.keen-slider__slide .section-posts-url .btn-icon {
  width: 36px;

  height: 36px;

  flex-shrink: 0;

  transition: transform 0.3s ease;

  transform: rotate(-45deg);
}

.section-posts-item.keen-slider__slide:hover .section-posts-url .btn-icon {
  transform: translateX(2px);
}

/* ─────────────────────────────────────────────

   Mobile

   ───────────────────────────────────────────── */

@media (max-width: 768px) {
  .section-posts-item.keen-slider__slide {
    height: 360px;
  }

  .section-posts-item.keen-slider__slide .section-posts-excerpt {
    max-height: 80px;

    opacity: 1;

    margin-top: 8px !important;

    margin-bottom: 10px !important;
  }

  .section-posts-item.keen-slider__slide .section-posts-url .btn-label {
    max-width: 120px;

    opacity: 1;

    margin-right: 10px;
  }
}

/* ─────────────────────────────────────────────

   Case Studies — tekst po lewej, slider po prawej

   ───────────────────────────────────────────── */

.incentive-case-studies .page-link {
  display: flex !important;

  align-items: flex-start;

  gap: 24px;
}

.incentive-case-studies .cyber-section-top-header {
  flex: 0 0 340px;

  max-width: 340px;

  padding-top: 8px;
}

.incentive-case-studies .cyber-section-top-header h2 {
  font-size: 32px;

  font-weight: 700;

  margin: 0 0 12px 0;

  line-height: 1.2;
}

.incentive-case-studies .cyber-section-top-header h3 {
  font-size: 18px;

  font-weight: 400;

  margin: 0 0 16px 0;

  color: #444;
}

.incentive-case-studies .cyber-section-top-header p {
  font-size: 14px;

  line-height: 1.7;

  color: #555;

  margin: 0;
}

.incentive-case-studies .navigation-wrapper {
  flex: 1;

  min-width: 0;
}

.incentive-case-studies .section-posts-item.keen-slider__slide {
  height: 460px;
}

@media (max-width: 860px) {
  .incentive-case-studies .page-link {
    flex-direction: column !important;

    gap: 32px;
  }

  .incentive-case-studies .cyber-section-top-header {
    flex: 1 1 auto;

    max-width: 100%;
  }

  .incentive-case-studies .section-posts-item.keen-slider__slide {
    height: 360px;
  }
}

/*how-we-work*/

/* ─────────────────────────────────────────────

   We Work — 4 bloki

   ───────────────────────────────────────────── */

.cyber-flex-4blocks-25 {
  display: flex;

  gap: 16px;

  align-items: stretch;
}

.cyber-flex-4blocks-25 .site25 {
  position: relative;

  overflow: hidden;

  border-radius: 5px;

  background-size: cover !important;

  background-position: center center !important;

  min-height: 380px;

  flex: 1;

  cursor: pointer;
}

/* Biała nakładka przykrywa obraz domyślnie */

.cyber-flex-4blocks-25 .site25::before {
  content: "";

  position: absolute;

  inset: 0;

  background-color: #fff;

  z-index: 1;

  transition: opacity 0.4s ease;

  border-radius: 5px;
}

.cyber-flex-4blocks-25 .site25:last-child::before {
  background-color: #dce8f5;
}

/* Ciemna nakładka — niewidoczna domyślnie */

.cyber-flex-4blocks-25 .site25::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    to top,

    rgba(0, 0, 0, 0.7) 0%,

    rgba(0, 0, 0, 0.3) 50%,

    rgba(0, 0, 0, 0.1) 100%
  );

  z-index: 2;

  opacity: 0;

  transition: opacity 0.4s ease;

  border-radius: 5px;
}

/* Hover — ukryj białą nakładkę, pokaż gradient */

.cyber-flex-4blocks-25 .site25:hover::before {
  opacity: 0;
}

.cyber-flex-4blocks-25 .site25:hover::after {
  opacity: 1;
}

/* Treść */

.cyber-flex-4blocks-25 .site25 .txtside {
  position: relative;

  z-index: 3;

  padding: 20px;

  height: 100%;

  display: flex;

  flex-direction: column;

  color: #111;

  transition: color 0.3s ease;
}

.cyber-flex-4blocks-25 .site25:hover .txtside {
  color: #fff;
}

/* ─────────────────────────────────────────────

   Typografia — wszystkie teksty zawsze widoczne

   ───────────────────────────────────────────── */

.cyber-flex-4blocks-25 .work-subtitle {
  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: inherit;

  margin: 0 0 8px 0;

  opacity: 0.7;
}

.cyber-flex-4blocks-25 .work-heading {
  font-size: 28px;

  font-weight: 700;

  color: inherit;

  margin: 0 0 16px 0;

  line-height: 1.2;
}

.cyber-flex-4blocks-25 .txtside > p:not(.work-subtitle):not(.work-heading) {
  font-size: 14px;

  line-height: 1.6;

  color: inherit;

  margin: 0;

  flex: 1;
}

/* ─────────────────────────────────────────────

   Strzałka — widoczna zawsze, obrót na hover

   ───────────────────────────────────────────── */

.cyber-flex-4blocks-25 .workbtn-icon {
  width: 36px;

  height: 36px;

  display: block;

  margin-top: 16px;

  border-radius: 50%;

  /* border: 1px solid rgba(0, 0, 0, 0.25); */

  /* padding: 4px; */

  box-sizing: border-box;

  transition:
    border-color 0.3s ease,
    filter 0.3s ease,
    transform 0.3s ease;

  transform: rotate(0deg);
}

.cyber-flex-4blocks-25 .site25:hover .workbtn-icon {
  border-color: rgba(255, 255, 255, 0.6);
  transform: rotate(30deg);
}

/* ─────────────────────────────────────────────

   Mobile

   ───────────────────────────────────────────── */

@media (max-width: 860px) {
  .cyber-flex-4blocks-25 {
    flex-wrap: wrap;
  }

  .cyber-flex-4blocks-25 .site25 {
    flex: 1 1 calc(50% - 8px);

    min-height: 300px;
  }
}

@media (max-width: 540px) {
  .cyber-flex-4blocks-25 .site25 {
    flex: 1 1 100%;
  }
}

/*counter*/

/* ─────────────────────────────────────────────

   Counters — projekt design

   ───────────────────────────────────────────── */

.counters {
  display: flex;

  gap: 20px;

  align-items: stretch;
}

/* Karta */

.counters .site33,
.counters .site25,
.counters .site20 {
  flex: 1;

  background: rgba(255, 255, 255, 0.88);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  border-radius: 5px;

  padding: 24px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  min-height: 220px;

  box-sizing: border-box;

  width: auto !important;
}

.counters .site25 {
  flex: 0 0 calc(25% - 16px);

  opacity: 0.95;
}

.counters .site25:nth-child(3) {
  opacity: 0.85;
}

.counters .site25:hover .counter-arrow {
  transform: rotate(28deg);
}

/* Usuń domyślny styl .counter-txt */

.counters .counter-txt {
  display: flex;

  flex-direction: column;

  justify-content: space-between;

  height: 100%;

  text-align: left !important;
}

/* ─────────────────────────────────────────────

   Górna część — tytuł + strzałka

   ───────────────────────────────────────────── */

.counter-card-top {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 8px;
}

.counter-title {
  /* font-size: 18px !important; */

  font-weight: 600 !important;

  /* color: #111 !important; */

  line-height: 1.3;
}

.counter-arrow {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  border-radius: 50%;

  /* border: 1px solid #000; */

  background: #000;

  flex-shrink: 0;

  color: #333;

  font-size: 14px;

  text-decoration: none;

  /* transform: rotate(28deg); */
}

/* ─────────────────────────────────────────────

   Dolna część — over + liczba + jednostka

   ───────────────────────────────────────────── */

.counter-card-bottom {
  margin-top: auto;

  padding-top: 32px;
}

.counter-over {
  display: block;

  font-size: 12px;

  color: #888;

  margin-bottom: 4px;

  font-weight: 400;
}

.counter-number {
  display: flex !important;

  align-items: baseline;

  gap: 6px;

  /* font-size: 48px !important; */

  font-weight: 700 !important;

  /* color: #111 !important; */

  line-height: 1;
}

.counter-number span[cyber-countinghover] {
  font-size: inherit;

  font-weight: inherit;

  color: inherit;
}

.counter-mark-plus {
  font-size: 32px;

  font-weight: 700;

  /* color: #111; */
}

.counter-desc {
  /* font-size: 14px !important; */

  /* color: #888 !important; */

  font-weight: 400 !important;

  display: inline !important;

  margin-left: 6px;
}

/* ─────────────────────────────────────────────

   Separator między kartami (tylko site33)

   ───────────────────────────────────────────── */

.counters .site33:not(:first-child) .counter-txt::before,
.counters .site33:not(:last-child) .counter-txt::after {
  display: none !important;
}

/* ─────────────────────────────────────────────

   Mobile

   ───────────────────────────────────────────── */

@media (max-width: 860px) {
  .counters {
    flex-wrap: wrap;
    gap: 16px;
  }

  .counters .site33,
  .counters .site25 {
    flex: 1 1 calc(50% - 8px);

    min-height: 180px;
  }
}

@media (max-width: 540px) {
  .counters .site33,
  .counters .site25 {
    flex: 1 1 100%;
  }
}

/*Our services mobile*/
@media (max-width: 980px) {
  .service-block {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  .service-block .service-card {
    position: relative;
    width: 100%;
  }

  .service-block .service-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .service-card .service-card-btn {
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 12px;
  }
}

@media (max-width: 980px) {
  .service-block {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1280px) {
  .counters .site25 {
    flex: 33%;
  }
}

@media (max-width: 980px) {
  .cs-1166-7 {
    background-size: cover !important;
  }

  .counters {
    flex-wrap: wrap;
  }

  .counters .site25 {
    flex: 100% !important;
  }
}