/* ============================================================
   components/askai-hero.css — Ask AI dark-navy hero (rp-askai-hero / 7400).
   Scoped under .rp-askai-hero. Loaded via inc/kadence-askai-hero.php
   (presence-loader gated, EN + AR). BASELINE only — Cowork owns the
   pixel-accurate polish vs Figma 14507:10608 (purple accent, play media).
   RTL flips live in askai-hero-rtl.css.
   ============================================================ */

.rp-askai-hero {
  position: relative;
  overflow: hidden;
  background: #0a0a23; /* TODO Cowork: navy gradient + purple glow per Figma */
  /* Rounded bottom to match the other Solutions heroes (56px). */
  border-bottom-left-radius: 56px;
  border-bottom-right-radius: 56px;
}

/* Headline + copy invert to light on the dark hero. */
.rp-askai-hero .askai-hero-title,
.rp-askai-hero .double-slide-landing-page-left-main-header { color: #ffffff; }
.rp-askai-hero .askai-hero-subtitle,
.rp-askai-hero .double-slide-landing-page-left-label { color: rgba(255, 255, 255, 0.72); }

/* Eyebrow pill ("Introducing Ask AI"). */
.rp-askai-hero .askai-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin-bottom: 20px;
  border-radius: 999px;
  border: 1px solid rgba(120, 63, 142, 0.5);
  background: rgba(120, 63, 142, 0.18);
  color: #783F8E;
  font-size: 14px;
  font-weight: 600;
}
.rp-askai-hero .askai-hero-eyebrow-icon { width: 20px; height: 20px; }

/* Right-column product screenshot + live play-button overlay. */
.rp-askai-hero .askai-hero-media { position: relative; display: inline-block; width: 100%; }
.rp-askai-hero .askai-hero-media-img { width: 100%; height: auto; border-radius: 16px; }

.rp-askai-hero .askai-hero-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease, background 0.18s ease;
}
.rp-askai-hero .askai-hero-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.rp-askai-hero .askai-hero-play-icon {
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-style: solid;
  border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent #783f8e; /* purple play triangle */
}

/* Decorative purple accent blob (CSS-only; no asset). */
.rp-askai-hero .askai-hero-accent {
  position: absolute;
  inset: auto -120px -120px auto;
  width: 360px;
  height: 360px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(120, 63, 142, 0.55) 0%, rgba(120, 63, 142, 0) 70%);
}

/* "Trusted by" sits on a light bg here but inherits the white brands-header color — make it black. */
.rp-askai-hero .rp-hero-brands strong { color: #000000; }

/* Ask AI feature panels: alternating purple-tint full-bleed bg on panels 2 & 4. */
.rp-askai-features .div-block-36 > div:nth-child(2),
.rp-askai-features .div-block-36 > div:nth-child(4) { background-color: #7a00df12; }