/* ==========================================================================
   Section: Οφέλη
   Figma: 268:3427 — 1807 × 593

   Αριστερά τίτλος (464), κενό 260, δεξιά μπλοκ 1083 με τρεις κάρτες πάνω σε
   γαλάζιο panel. Το badge «Γιατί smart search» υπάρχει στο Figma αλλά είναι
   ΚΡΥΦΟ (268:3431 hidden) — γι' αυτό δεν τυπώνεται.

   Όπως και στα άλλα δύο sections, το Figma μετράει κάθε κενό από το ύψος
   κεφαλαίου (`text-box-trim`). Τα αρνητικά margins σε em αφαιρούν το
   half-leading + ascender→cap πάνω και το half-leading + descent κάτω:

     Manrope 1.2  →  0.25em      Inter normal →  0.24em
     Manrope 1.5  →  0.38 / 0.40 Inter 1.4    →  0.34em
                                 Inter 1.5    →  0.39em

   Χωρίς αυτά η κάρτα δεν κλείνει στα 500 της μακέτας.
   ========================================================================== */

/*
 * Μακέτα: 464 (κείμενο) + 260 (κενό) + 1083 (κάρτες) = 1807.
 * Το κενό μπαίνει ως ποσοστό ώστε οι δύο στήλες να μοιράζονται το υπόλοιπο
 * ακριβώς στον λόγο 464:1083 σε κάθε πλάτος. Με 104px κενό η στήλη κειμένου
 * έβγαινε 456px και ο τίτλος έσπαγε σε τέσσερις σειρές αντί για τρεις.
 */
/*
 * Το πλαίσιο δεν είναι συμμετρικό: στη μακέτα ο τίτλος ξεκινά στα 80 (το
 * κανονικό gutter της σελίδας) ενώ το panel φτάνει μέχρι τα 32 από τη δεξιά
 * άκρη — σύνολο 1807. Με συμμετρικά 32 η στήλη κειμένου έβγαινε 49px φαρδύτερη
 * και τίποτα δεν έπεφτε πάνω στη μακέτα.
 */
.ss-benefits__grid {
  display: grid;
  grid-template-columns: minmax(0, 464fr) minmax(0, 1083fr);
  align-items: center;
  gap: 14.39%;
  padding-inline-start: var(--page-gutter);
}

.ss-benefits__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}

/* Μακέτα 268:3429: τρεις σειρές στα 1.2 — το --lh-tight θα τις κόλλαγε. */
.ss-benefits__intro .ss-h2 {
  line-height: 1.2;
  margin-block: -0.25em;
}

/*
 * 268:3430 — μαύρο, όχι το navy του body, και 381 από τα 464. Χωρίς tracking:
 * το κείμενο αυτό είναι το μόνο του section που δεν έχει, και με το -0.02em
 * του body χωρούσε μια λέξη παραπάνω ανά σειρά — τρεις σειρές αντί για τέσσερις.
 */
.ss-benefits__text {
  max-width: 82.11%;
  color: var(--c-black);
  letter-spacing: normal;
  margin-block: -0.38em -0.40em;
}

/* ---------- Κάρτες ---------- */

/*
 * Το γαλάζιο panel ΔΕΝ είναι το κουτί των καρτών: στη μακέτα ξεκινά 130px πιο
 * δεξιά (12% των 1083) και οι κάρτες το ξεπερνούν αριστερά. Γι' αυτό μπαίνει
 * ως ::before και όχι ως background του grid.
 */
.ss-benefits__cards {
  position: relative;
  display: grid;
  /*
   * Οι κάρτες ΔΕΝ γεμίζουν το μπλοκ: στη μακέτα είναι 312px η καθεμία μέσα σε
   * 1083 (28.8%), με κενό 20px (1.85%), και αφήνουν ~107px panel ακάλυπτο
   * δεξιά. Με `1fr` άπλωναν σε 357px και φούσκωναν τις εικόνες.
   */
  grid-template-columns: repeat(3, 28.8%);
  justify-content: start;
  align-items: stretch;
  gap: 1.85%;
  /* 61 πάνω και 32 κάτω από τις κάρτες, μέσα στα 593 του panel. */
  padding-block: var(--sp-16) var(--sp-8);
}

.ss-benefits__cards::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline: 12% 0;
  border-radius: var(--r-3xl);
  background-color: var(--c-white);
  background-image: var(--grad-benefits-panel);
}

/*
 * Οι κάρτες πατούν πάνω στο panel του ::before. Ύψος 500 στη μακέτα, με το
 * κείμενο πάνω και την εικονογράφηση ΚΟΛΛΗΤΑ στη βάση — γι' αυτό
 * `space-between` και όχι σταθερό κενό: τα τρία κείμενα έχουν άλλο ύψος.
 */
.ss-benefits__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-14);
  /*
   * Μακέτα 268:3450: padding 61 / 32 / 29 — με τα trims η κάρτα κλείνει στα 500.
   * Πλάγια όμως 30 και όχι 32: η μακέτα δίνει στη 2η κάρτα pr-28 ώστε να χωρέσει
   * το «Μην αφήνεις μια κακή αναζήτηση», που είναι 249 φαρδύ. Με 32 έμεναν 248
   * και έσπαγε σε τρίτη σειρά. Ποσοστό των 312 της κάρτας, όχι token.
   */
  padding: var(--sp-16) 9.615% var(--sp-8);
  border-radius: var(--r-pill);
  background-color: var(--c-white);
  box-shadow: var(--shadow-media);
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/*
 * Hover 170:155 — λευκό → #EDF2FF, χωρίς σκιά. Ίδιο layout, ίδιο check.
 * Μόνο σε συσκευές με πραγματικό hover, ώστε το tap στο κινητό να μην κολλάει.
 */
@media (hover: hover) {
  .ss-benefits__card:hover {
    z-index: 2;
    background-color: var(--c-benefits-hover);
    box-shadow: none;
    transform: scale(1.03);
  }
}

/* Κυκλικό check που κάθεται πάνω στην άκρη της κάρτας: 56px, 32 από πάνω. */
.ss-benefits__check {
  position: absolute;
  inset-block-start: calc(var(--sp-14) * -0.571);
  inset-inline-start: var(--sp-8);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-14);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--c-blue);
  color: var(--c-white);
}

/* Το τικ είναι 20.6 μέσα στον κύκλο των 56. */
.ss-benefits__check svg {
  width: 37%;
  height: auto;
}

/* ---------- Πάνω μισό της κάρτας ---------- */

.ss-benefits__card-head {
  display: flex;
  flex-direction: column;
  /* 24 τίτλος → γραμμή → κείμενα (268:3452). */
  gap: var(--sp-6);
}

.ss-benefits__card-title {
  font-family: var(--ff-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-card-title);
  line-height: normal;
  letter-spacing: var(--ls-ui);
  color: var(--c-navy);
  margin-block: -0.24em;
}

/* 268:3454 — μπλε γραμμή 1px στο 30%, σε όλο το πλάτος του περιεχομένου. */
.ss-benefits__card-rule {
  width: 100%;
  height: 1px;
  background-color: var(--c-blue);
  opacity: .3;
}

.ss-benefits__card-copy {
  display: flex;
  flex-direction: column;
  /* 20 ανάμεσα σε lead και κείμενο (268:3455). */
  gap: var(--sp-5);
}

.ss-benefits__card-subtitle {
  font-family: var(--ff-ui);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  line-height: 1.4;
  letter-spacing: var(--ls-ui);
  color: var(--c-navy);
  margin-block: -0.34em;
}

.ss-benefits__card-text {
  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);
  color: var(--c-navy);
  margin-block: -0.39em;
}

/* ---------- Εικονογράφηση ---------- */

/*
 * 268:3458 — πιάνει όλο το πλάτος του περιεχομένου, με λόγο 312:203 και 90%
 * αδιαφάνεια. Τα PNG έχουν κανονικό alpha, οπότε ΔΕΝ θέλουν `multiply`.
 */
/*
 * Ο λόγος μπαίνει στην ΕΙΚΟΝΑ, όχι στο <figure>. Με `aspect-ratio` στο figure
 * και `height: 100%` στην εικόνα το ποσοστό δεν λύνεται (το ύψος του γονέα
 * μετράει ως αόριστο), η εικόνα έπαιρνε το φυσικό της ύψος και ξεχείλιζε
 * 66px έξω από το κουτί.
 */
.ss-benefits__card-media {
  margin: 0;
  width: 100%;
  opacity: .9;
mix-blend-mode: multiply;
}

.ss-benefits__card-media img {
  width: 100%;
  aspect-ratio: 312 / 203;
  object-fit: contain;
}

/* ---------- Laptop ---------- */

@media (max-width: 1550px) {
  .ss-benefits__grid {
    gap: var(--sp-16);
  }
}

/* Mobile (≤ 991px): stacked layout. */
@media (max-width: 991px) {
  .ss-benefits__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-12);
  }

  .ss-benefits__text {
    max-width: none;
  }

  .ss-benefits__cards {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-16);
  }
}