/* ==========================================================================
   Section: Video
   Figma: 268:3270 — 824 × 544
   ========================================================================== */

.ss-video__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-16);
}

.ss-video__title {
  width: 100%;
  max-width: var(--container-video-title);
  color: var(--c-black);
  line-height: 1.2;
  text-align: center;
  /* Αντιστοιχεί το 96px line box στο 77px visual text box του Figma. */
  margin-block: -0.2375em;
}

.ss-video__player {
  position: relative;
  width: 100%;
  max-width: var(--container-video);
  aspect-ratio: 824 / 403;
}

.ss-video__player::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-logo);
  pointer-events: none;
}

.ss-video__viewport,
.ss-video__embed {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background-color: var(--c-white);
  box-shadow: var(--shadow-raised);
}

/*
 * Το VIDEO fill του Figma χρησιμοποιεί crop matrix:
 *   x = 0.971455574x - 0.000501677
 *   y = 0.844653070y + 0.113050759
 * Οι παρακάτω ποσοστιαίες τιμές είναι η αντίστροφη απεικόνιση του ίδιου
 * matrix πάνω στο 16:9 source, ώστε να κόβονται browser chrome και taskbar.
 */
.ss-video__media {
  position: absolute;
  inset-block-start: -13.384283%;
  inset-inline-start: 0;
  width: 102.938315%;
  height: 118.391803%;
  max-width: none;
}

.ss-video__poster {
  margin: 0;
}

.ss-video__embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.ss-video__play {
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 10.206616%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.ss-video__play img {
  width: 100%;
  height: 100%;
}

/* Mobile (≤ 991px): stacked layout. */
@media (max-width: 991px) {
  .ss-video__inner {
    gap: var(--sp-10);
  }
}