/* ==========================================================================
   Section: CTA
   Figma: 249:930 — 1920 × 607 (CTA 567 + footer bar 40, χωρίς κενό ανάμεσα)
   Φόντο: το bottom glow 443:779, όχι gradient στο ίδιο το section.

   Μετρήσεις από τη μακέτα:
     container   x=280  → 1360 πλάτος (--container-md)
     padding     72 πάνω / 24 κάτω
     στήλες      547 (κείμενο) + 828 (εικόνα), με μικρή υπέρβαση του container
     εικόνα      828 × 471, κομμένη (cover)
   ========================================================================== */

.ss-cta {
  padding-block: var(--sp-18) var(--sp-6);
}

.ss-cta__grid {
  max-width: calc(var(--container-cta) + var(--page-gutter) * 2);
  display: grid;
  grid-template-columns: minmax(0, 547fr) minmax(0, 828fr);
  align-items: center;
  gap: 0;
}

.ss-cta__copy {
  display: flex;
  flex-direction: column;
  /* Η μακέτα δίνει 42px ανάμεσα στο κείμενο και τα κουμπιά. */
  gap: var(--sp-10);
}

/* Τίτλος + παράγραφος: δική τους ομάδα με κενό 32px. */
.ss-cta__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.ss-cta__text {
  color: var(--c-black);
}

/* Στα 374px της στήλης τα δύο κουμπιά χωρούν μόνο δίπλα-δίπλα, με κενό 14px. */
.ss-cta__actions {
  width: 68.3729%;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: var(--sp-3);
}

@media (hover: hover) {
  .ss-cta__actions .ss-btn:hover {
    background-color: var(--c-green);
    color: var(--c-white);
  }
}

/*
 * Η νέα μακέτα δίνει 547px στο πλαίσιο του τίτλου. Το μπλε span πέφτει στη
 * δεύτερη γραμμή από το φυσικό wrapping του κειμένου.
 */
.ss-cta__intro .ss-h2 {
  max-width: 100%;
}

.ss-cta__media {
  margin: 0;
}

/*
 * Η μακέτα κόβει την εικόνα σε 828 × 471 και τη μετατοπίζει ελαφρώς προς τα
 * πάνω. Χωρίς λόγο διαστάσεων το φυσικό ύψος του αρχείου φούσκωνε το section.
 */
.ss-cta__media img {
  width: 100%;
  aspect-ratio: 828 / 471;
  object-fit: cover;
  object-position: center 53%;
}

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

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

  .ss-cta__actions {
    width: 100%;
  }
}

/* Mobile (≤ 991px): stacked layout. */
@media (max-width: 991px) {
  /* Δύο κουμπιά 180px δεν χωρούν σε 320px· full width το ένα κάτω από το άλλο. */
  .ss-cta__actions {
    flex-wrap: wrap;
    gap: var(--sp-3);
  }

  .ss-cta__actions .ss-btn {
    flex: 1 1 100%;
  }

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

  .ss-cta__intro .ss-h2 {
    max-width: none;
  }
}