/* =============================================================================
   AdStar landing — cta.css
   Centered call-to-action with a MacBook mockup + perspective-warped screen video
   ========================================================================== */

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  text-align: center;
}

/* ---- Headline block ------------------------------------------------------ */
.cta__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.cta__eyebrow {
  margin: 0;
  font-size: var(--fs-lg);          /* 18px */
  line-height: var(--lh-lg);        /* 28px */
  font-weight: 700;
  color: var(--brand-500);          /* #e0fc31 lime eyebrow */
}

.cta__title {
  margin: 0;
  font-size: var(--fs-display-lg);  /* 48px */
  line-height: var(--lh-display-lg);/* 60px */
  font-weight: 700;
  letter-spacing: -0.96px;
  color: var(--text-primary);
}

.cta__btn {
  margin-top: 4px;
}
.cta__btn .btn__icon {
  width: 20px;
  height: 20px;
}

/* ---- Device / laptop mockup ---------------------------------------------- */
.cta__device {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

/* 760 x 410 frame, kept by aspect-ratio so it scales fluidly */
.cta__device-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 760 / 410;
}

/* The laptop photo (screen is opaque black in the asset) */
.cta__device-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
}

/* Subtle screen-light overlay on top of everything */
.cta__device-light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 3;
  opacity: 0.55;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Screen region: a perspective trapezoid clipped to the laptop display.
   The video renders ABOVE the laptop photo (whose screen is opaque black) but
   is inset to the display interior, so the laptop bezel still frames it.
   Coordinates are % of the 760x410 frame, sampled from the asset.
   APPROXIMATE — fine-tune the trapezoid against the real laptop art. */
.cta__screen {
  position: absolute;
  inset: 0;
  z-index: 2;                        /* above the laptop photo, under the light */
  overflow: hidden;
  /* perspective trapezoid: wide at top, narrower toward the hinge */
  clip-path: polygon(
    5.8% 3%,                         /* top-left */
    94.2% 3%,                        /* top-right */
    89.4% 59.5%,                     /* bottom-right (hinge) */
    10.6% 59.5%                      /* bottom-left (hinge) */
  );
  background: var(--black);
}

.cta__screen-video {
  position: absolute;
  left: 0;
  top: 0;
  /* span the trapezoid bounding box generously; the clip-path on
     .cta__screen trims it to the perspective screen shape */
  width: 100%;
  height: 62%;
  object-fit: cover;
  display: block;
}

/* Bottom fade so the laptop melts into the black section */
.cta__device-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 60%,
    var(--black) 100%
  );
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .cta__inner { gap: 48px; }
}

@media (max-width: 767px) {
  .cta__inner { gap: 40px; }
  .cta__head { gap: 16px; }
  .cta__eyebrow { font-size: var(--fs-md); line-height: var(--lh-md); }
  .cta__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.64px;
  }
}

/* Respect reduced motion: the global handler also pauses, but keep static */
@media (prefers-reduced-motion: reduce) {
  .cta__screen-video { /* poster frame remains visible */ }
}