/* ========================================================================== 
   Section: Στατιστικά αναζήτησης
   Figma: 384:2154 — 1470 × 484
   ========================================================================== */

.ss-metrics__inner {
  max-width: calc(var(--container-metrics) + var(--page-gutter) * 2);
}

.ss-metrics__title {
  max-width: 1170px;
  margin-inline: auto;
  line-height: 1.2;
  text-align: center;
  transform: translateY(-.175em);
}

.ss-metrics__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 31.972789%));
  justify-content: space-between;
  margin-block-start: var(--sp-metrics-heading-gap);
}

.ss-metrics__card {
  position: relative;
  isolation: isolate;
  aspect-ratio: 470 / 332;
  overflow: hidden;
  border-radius: var(--r-pill);
  background-color: var(--c-white);
}

.ss-metrics__card--2 {
  transform: translateX(-.638298%);
}

/*
 * Το ίδιο image-fill του Rectangle 64: λευκή βάση, 50% opacity στο layer,
 * δεύτερο 50% opacity στο bitmap και το ακριβές ανάποδο crop του Figma.
 */
.ss-metrics__background {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  margin: 0;
  border-radius: inherit;
  background-color: var(--c-white);
  opacity: .5;
  transform: scaleY(-1);
  pointer-events: none;
}

.ss-metrics__background img {
  position: absolute;
  top: -129.15%;
  left: -4.36%;
  width: 153.21%;
  max-width: none;
  height: 413.31%;
  opacity: .5;
}

.ss-metrics__content {
  position: static;
}

.ss-metrics__value,
.ss-metrics__rule,
.ss-metrics__text {
  position: absolute;
  z-index: 2;
}

.ss-metrics__value {
  inset: 0;
  color: var(--c-blue);
}

.ss-metrics__number,
.ss-metrics__suffix {
  position: absolute;
  top: 12.650602%;
  white-space: nowrap;
}

.ss-metrics__number {
  left: 8.510638%;
  font-family: var(--ff-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-metric-value);
  line-height: .82;
  letter-spacing: var(--ls-display);
}

.ss-metrics__suffix {
  left: 40.425532%;
  font-family: var(--ff-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-metric-mark);
  line-height: .82;
  letter-spacing: var(--ls-numeral);
}

.ss-metrics__card--2 .ss-metrics__number,
.ss-metrics__card--3 .ss-metrics__number {
  letter-spacing: var(--ls-numeral);
}

.ss-metrics__card--2 .ss-metrics__number--first {
  left: 10.212766%;
}

.ss-metrics__card--2 .ss-metrics__number--second {
  left: 30.638298%;
}

.ss-metrics__card--2 .ss-metrics__suffix {
  top: 12.048193%;
  left: 45.106383%;
  font-family: var(--ff-accent-serif);
  font-weight: var(--fw-bold);
  font-size: var(--fs-metric-times);
}

.ss-metrics__card--3 .ss-metrics__suffix {
  left: 34.893617%;
}

.ss-metrics__separator {
  position: absolute;
  z-index: 2;
  top: 25.903614%;
  left: 27.446809%;
  width: 3.191489%;
  height: 1.204819%;
  display: block;
}

.ss-metrics__rule {
  top: 52.710843%;
  left: 8.510638%;
  width: 53.191489%;
  height: 1px;
  background-color: var(--c-white);
}

.ss-metrics__text {
  top: 60.240964%;
  left: 8.510638%;
  width: 39.574468%;
  color: var(--c-grey-700);
  font-family: var(--ff-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-sm);
  /* Κόψιμο μόνο σε κενά· μέσα σε λέξη μόνο αν η λέξη δεν χωράει ολόκληρη. */
  overflow-wrap: break-word;
  white-space: pre-line;
  transform: translateY(-.285714em);
}

.ss-metrics__card--2 .ss-metrics__text {
  left: 10.212766%;
  width: 62.12766%;
}

.ss-metrics__card--3 .ss-metrics__text {
  width: 37.021277%;
}

.ss-metrics__media {
  position: absolute;
  z-index: 1;
  inset: 0;
  margin: 0;
  pointer-events: none;
}

.ss-metrics__media img {
  position: absolute;
  max-width: none;
}

.ss-metrics__card--1 .ss-metrics__media img {
  top: 53.88%;
  left: 38.31%;
  width: 59.89%;
  height: 47.92%;
  opacity: .8;
}

.ss-metrics__card--2 .ss-metrics__media img {
  top: 25.6%;
  left: 11.11%;
  width: 89.9%;
  height: 74.87%;
  opacity: .8;
}

.ss-metrics__card--3 .ss-metrics__media img {
  top: 54.08%;
  left: 45.42%;
  width: 54.52%;
  height: 43.63%;
}

/* Mobile (≤ 991px): μία κάρτα ανά γραμμή, το κείμενο παίρνει το μισό πλάτος. */
@media (max-width: 991px) {
  .ss-metrics__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-metrics-gap);
  }

  .ss-metrics__rule {
    width: 60%;
  }

  .ss-metrics__text,
  .ss-metrics__card--3 .ss-metrics__text {
    width: 52%;
  }

  .ss-metrics__card--2 .ss-metrics__text {
    width: 66%;
  }

  /* Οι εικόνες φεύγουν δεξιά ώστε να μην κάθονται πάνω στο κείμενο. */
  .ss-metrics__card--1 .ss-metrics__media img {
    left: 58%;
    width: 42%;
    height: 40%;
    top: 58%;
  }

  .ss-metrics__card--3 .ss-metrics__media img {
    left: 60%;
    width: 40%;
    height: 36%;
    top: 60%;
  }
}