/* ==========================================================================
   Section: Ai Βοηθός
   Figma: 167:58 — 1855 × 719

   Η μακέτα ΔΕΝ είναι πλέγμα, είναι πέντε στρώματα που επικαλύπτονται:

     panel      0,   0   1855 × 600   γαλάζιο, radius 48   (118:1405)
     φωτογραφία 925, 0    883 × 600   πιάνει ΟΛΟ το ύψος   (122:1517)
     tablet     218, 188  727 × 531   ΒΓΑΙΝΕΙ 119px κάτω   (129:26)
     κείμενο    48,  48   418 × 125                        (167:56)
     βελάκια    1708,48   100 × 46                         (157:560)
     κουκκίδες  1729,632   78 × 8     ΚΑΤΩ από το panel    (139:492)

   Τρία πράγματα δεν βγαίνουν με flow layout: το tablet ξεπερνά το panel προς
   τα κάτω, καβαλάει τη φωτογραφία κατά 20px, και οι κουκκίδες κάθονται έξω
   από το panel. Το πλουσιότερο copy της νέας αρχικής κατέβασε το tablet στα
   287px· ο καμβάς επεκτείνεται αναλογικά στα 788px ώστε το tablet των 501px
   να χωρά ολόκληρο, χωρίς να μετακινηθεί πάνω στα κείμενα. Όλα τα στρώματα
   παραμένουν απόλυτα, σε ποσοστά — καμία σταθερή διάσταση.
   ========================================================================== */

.ss-ai__panel {
  position: relative;
}

/*
 * Το γαλάζιο panel παραμένει 600 μονάδες στον καμβά των 788 (76.14%) — δεν είναι το
 * background του κουτιού, γιατί το tablet πρέπει να το ξεπερνά.
 */
.ss-ai__panel::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 0;
  height: 76.1421%;
  border-radius: var(--r-3xl);
  background-color: var(--c-white);
  background-image: var(--grad-ai-panel);
}

/* Ένα slide ανά «σελίδα»: χωρίς gap και χωρίς padding το scroll snap πέφτει
   ακριβώς πάνω στο πλάτος του track, οπότε οι κουκκίδες μετρούν σωστά. */
.ss-ai__track {
  gap: 0;
  padding-block: 0;
}

.ss-ai__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  aspect-ratio: 1855 / 788;
}

/* ---------- Κείμενο ---------- */

/* Μακέτα 384:1891: 692 πλάτος, στα 48/48 από τη γωνία του panel. */
.ss-ai__intro {
  position: absolute;
  inset-block-start: 6.0914%;
  inset-inline-start: 2.5876%;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  width: 37.3046%;
  column-gap: 4.1908%;
}

/* Το sparkle παραμένει 97 × 101 μέσα στη νέα στήλη των 692. */
.ss-ai__icon {
  margin: 0;
  flex: 0 0 14.0173%;
}

/* Η μακέτα ανεβάζει την εικόνα 4.24% μέσα στο πλαίσιό της (118:1416). */
.ss-ai__icon img {
  margin-block-start: -4.4%;
}

/*
 * Το κείμενο καταλαμβάνει τον υπόλοιπο χώρο της ομάδας. Η νέα μακέτα πρόσθεσε
 * υπότιτλο και δύο παραδείγματα, άρα χρειάζεται το πλήρες πλάτος των 566px.
 */
.ss-ai__copy {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--sp-3);
  /*
   * Το Figma στοιχίζει το κείμενο στο ΥΨΟΣ ΚΕΦΑΛΑΙΟΥ (text-box-trim), το CSS
   * στο line box. Η διαφορά είναι το half-leading + η απόσταση ascender→cap,
   * μετρημένη 9px στα 46 του τίτλου. Χωρίς αυτό ο τίτλος κάθεται 9px πιο κάτω
   * από τη μακέτα. Σε em του ΤΙΤΛΟΥ, ώστε να ακολουθεί το clamp.
   * Όταν το `text-box-trim` πάρει υποστήριξη σε Safari/Firefox, φεύγει.
   */
  margin-block-start: calc(var(--fs-h2-lg) * -0.196);
}

/* Στη μακέτα το «Ai» είναι μπλε (από το <span>) και το «Βοηθός» navy. */
.ss-ai__copy .ss-h2 {
  color: var(--c-navy);
}

/* 118:1408 — μαύρο, όχι το navy του body. */
.ss-ai__text {
  color: var(--c-black);
}

.ss-ai__subtitle {
  color: var(--c-navy);
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

.ss-ai__examples {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  color: var(--c-black);
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.ss-ai__examples strong {
  color: var(--c-navy);
  font-weight: var(--fw-bold);
}

/* ---------- Tablet ---------- */

/*
 * Η ενημερωμένη θέση είναι 287 και το ύψος 501 στον καμβά των 788: κλείνει
 * ακριβώς στη βάση του section. Το PNG είναι κομμένη σιλουέτα με διάφανο
 * περιθώριο — το εσωτερικό crop αφαιρεί μόνο αυτό το περιθώριο.
 */
.ss-ai__screenshot {
  position: absolute;
  inset-block-start: 36.4213%;
  inset-inline-start: 9.3801%;
  z-index: 2;
  margin: 0;
  width: 37.0890%;
  height: 63.5787%;
  overflow: hidden;
}

.ss-ai__screenshot img {
  position: absolute;
  inset-block-start: -10.54%;
  inset-inline-start: -16.12%;
  width: 124.667%;
  height: 113.52%;
  max-width: none;
}

/* ---------- Φωτογραφία ---------- */

/*
 * 883 × 600 — ίδιο ύψος με το panel, 48 από τη δεξιά άκρη. Το tablet την
 * καβαλάει, γι' αυτό κάθεται ένα στρώμα χαμηλότερα.
 */
.ss-ai__photo {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 2.5876%;
  z-index: 1;
  margin: 0;
  width: 47.6011%;
  height: 76.1421%;
  overflow: hidden;
}

.ss-ai__photo img {
  position: absolute;
  inset-block-start: -6.25%;
  inset-inline-start: 0;
  width: 108.31%;
  height: 106.23%;
  max-width: none;
}

/* ---------- Βελάκια ---------- */

.ss-ai__controls {
  position: absolute;
  inset-block-start: 6.0914%;
  inset-inline-end: 2.5876%;
  z-index: 4;
  display: flex;
  gap: var(--sp-2);
}

/* 139:482 — καθαρός λευκός κύκλος 46px πάνω στο γαλάζιο, χωρίς σκιά. */
.ss-ai__controls .ss-carousel__nav {
  width: var(--carousel-nav-size);
  background-color: var(--c-white);
  box-shadow: none;
}

/* Με ένα μόνο slide τα βελάκια είναι disabled — στη μακέτα φαίνονται κανονικά. */
.ss-ai__controls .ss-carousel__nav[disabled] {
  opacity: 1;
}

/* Το τρίγωνο είναι 9.2 × 13 μέσα στον κύκλο των 46 — 30% μετά τη στροφή. */
.ss-ai__controls .ss-carousel__nav svg {
  width: 30%;
}

/* ---------- Κουκκίδες ---------- */

/* 139:492 — 32px στην ενεργή, έξω από το panel, στα 632 από την κορυφή. */
.ss-ai__dots {
  position: absolute;
  inset-block-start: 80.203%;
  inset-inline-end: 2.5876%;
  z-index: 4;
  justify-content: flex-end;
}

.ss-ai__dots .ss-carousel__dot {
  background-color: var(--c-blue);
  opacity: .5;
}

.ss-ai__dots .ss-carousel__dot:nth-child(3) {
  opacity: .2;
}

.ss-ai__dots .ss-carousel__dot.is-active {
  opacity: 1;
}

/* Στο laptop το νέο, μεγαλύτερο copy block ανοίγει ώστε να μη συναντά το tablet. */
@media (max-width: 1550px) {
  .ss-ai__intro {
    width: 44%;
  }

  .ss-ai__icon {
    flex-basis: 12%;
  }
}

/* ==========================================================================
   Mobile (≤ 991px): stacked layout.
   Το κλείδωμα του λόγου καταργείται και τα στρώματα ξαναμπαίνουν σε ροή,
   αλλιώς το section γίνεται λωρίδα. Κρατάει μόνο τη διάταξη όρθια.
   ========================================================================== */

@media (max-width: 991px) {
  .ss-ai__slide {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    padding: var(--sp-10) var(--sp-6);
  }

  .ss-ai__panel::before {
    height: 100%;
  }

  .ss-ai__intro,
  .ss-ai__screenshot,
  .ss-ai__photo {
    position: static;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .ss-ai__screenshot img,
  .ss-ai__photo img {
    position: static;
    width: 100%;
    height: auto;
  }

  .ss-ai__controls,
  .ss-ai__dots {
    display: none;
  }
}