/*
 * IsleIQ adapter for the InfraNova Engage plugin.
 * Depends on: iq-tokens.css, iq-typography.css
 *
 * Targets the plugin's fixed BEM classes (InfraNova Engage 1.1.0):
 *   .engage-cta, .engage-cta--primary, .engage-cta--secondary
 *   .engage-cta__content, __eyebrow, __heading, __body, __btn
 *   .engage-trust-bar, .engage-trust-bar__item
 *   .engage-disclaimer, --finance, --ai-pricing, __label, __text
 *   .engage-capture, __intro, __eyebrow, __heading, __body, __form
 *
 * Shortcodes on IsleIQ:
 *   [iq_cta_primary] [iq_cta_secondary] [iq_trust_bar]
 *   [iq_disclaimer type="finance|ai-pricing"] [iq_capture]
 */

/* ------------------------------------------------------------------
   Shared base and in-article heading reset
   Post content styles reach h3 and p; reset them so the CTA keeps its
   own scale wherever it is placed.
------------------------------------------------------------------ */

.engage-cta,
.engage-capture,
.engage-disclaimer {
  clear: both;
  box-sizing: border-box;
  width: 100%;
  margin-block: var(--iq-space-8);
}

.engage-cta .engage-cta__heading,
.engage-capture .engage-capture__heading {
  margin-top: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.engage-cta__eyebrow,
.engage-capture__eyebrow {
  display: inline-block;
  margin-bottom: var(--iq-space-3);
  font-family: var(--iq-font-display);
  font-size: var(--iq-text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.engage-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--iq-space-2);
  min-height: 2.9rem;
  margin-top: var(--iq-space-2);
  padding: 0.8rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--iq-radius);
  font-family: var(--iq-font-display);
  font-size: var(--iq-text-sm);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition:
    transform var(--iq-duration) var(--iq-ease),
    background-color var(--iq-duration) var(--iq-ease),
    border-color var(--iq-duration) var(--iq-ease),
    box-shadow var(--iq-duration) var(--iq-ease);
}

.engage-cta__btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

/* ------------------------------------------------------------------
   Primary CTA: navy-to-teal panel, amber rule, amber action.
   The prompt kit ask. One per page, after the value.
------------------------------------------------------------------ */

.engage-cta--primary {
  --iq-text-primary: var(--iq-white);
  --iq-text-secondary: rgba(255, 255, 255, 0.78);
  position: relative;
  overflow: hidden;
  padding: clamp(var(--iq-space-6), 5vw, var(--iq-space-10));
  border: 1px solid var(--iq-border-inverse);
  border-radius: var(--iq-radius-xl);
  background:
    linear-gradient(135deg, rgba(46, 196, 182, 0.18), transparent 38%),
    linear-gradient(135deg, var(--iq-navy), var(--iq-teal-900));
  color: var(--iq-white);
  box-shadow: var(--iq-shadow);
}

.engage-cta--primary::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--iq-amber);
}

.engage-cta--primary > * {
  position: relative;
}

.engage-cta--primary .engage-cta__eyebrow {
  color: var(--iq-accent-on-dark);
}

.engage-cta--primary .engage-cta__heading {
  margin-bottom: var(--iq-space-3);
  color: var(--iq-white);
  font-family: var(--iq-font-display);
  font-size: var(--iq-text-3xl);
  font-weight: 800;
  line-height: var(--iq-leading-tight);
}

.engage-cta--primary .engage-cta__body {
  max-width: 62ch;
  margin-bottom: var(--iq-space-5);
  color: rgba(255, 255, 255, 0.78);
}

.engage-cta--primary .engage-cta__btn,
.engage-cta--primary .engage-cta__btn:visited {
  background: var(--iq-amber);
  color: var(--iq-on-amber);
}

.engage-cta--primary .engage-cta__btn:hover,
.engage-cta--primary .engage-cta__btn:focus-visible {
  background: var(--iq-amber-600);
  color: var(--iq-on-amber);
  box-shadow: 0 10px 24px rgba(244, 162, 97, 0.3);
}

/* ------------------------------------------------------------------
   Secondary CTA: light panel with a mint left rule. The newsletter or
   "watch next" nudge. Sits comfortably inside article copy.
------------------------------------------------------------------ */

.engage-cta--secondary {
  --iq-text-primary: var(--iq-slate);
  --iq-text-secondary: var(--iq-slate-700);
  padding: var(--iq-space-6) var(--iq-space-8);
  border: 1px solid rgba(26, 46, 59, 0.12);
  border-left: 4px solid var(--iq-mint);
  border-radius: 0 var(--iq-radius-lg) var(--iq-radius-lg) 0;
  background: var(--iq-mint-050);
  color: var(--iq-slate);
}

.engage-cta--secondary .engage-cta__eyebrow {
  color: var(--iq-mint-800);
}

.engage-cta--secondary .engage-cta__heading {
  margin-bottom: var(--iq-space-2);
  color: var(--iq-slate);
  font-family: var(--iq-font-display);
  font-size: var(--iq-text-xl);
  font-weight: 800;
  line-height: var(--iq-leading-snug);
}

.engage-cta--secondary .engage-cta__body {
  max-width: 62ch;
  margin-bottom: var(--iq-space-4);
  color: var(--iq-slate-700);
  font-size: var(--iq-text-base);
}

.engage-cta--secondary .engage-cta__btn,
.engage-cta--secondary .engage-cta__btn:visited {
  background: var(--iq-teal);
  color: var(--iq-white);
}

.engage-cta--secondary .engage-cta__btn:hover,
.engage-cta--secondary .engage-cta__btn:focus-visible {
  background: var(--iq-teal-900);
  color: var(--iq-white);
  box-shadow: 0 10px 24px rgba(13, 92, 99, 0.22);
}

.engage-cta__body:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Trust bar
------------------------------------------------------------------ */

.engage-trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--iq-space-3) var(--iq-space-6);
  margin: 0;
  padding: var(--iq-space-5) 0;
  list-style: none;
}

.engage-trust-bar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--iq-space-2);
  margin: 0;
  color: var(--iq-text-muted);
  font-family: var(--iq-font-display);
  font-size: var(--iq-text-xs);
  font-weight: 800;
}

.engage-trust-bar__item::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--iq-mint);
}

/* ------------------------------------------------------------------
   Disclaimer: finance and AI-pricing notes required by the brand guide.
------------------------------------------------------------------ */

.engage-disclaimer {
  padding: var(--iq-space-4) var(--iq-space-5);
  border: 1px solid rgba(26, 46, 59, 0.12);
  border-left: 4px solid var(--iq-teal);
  border-radius: 0 var(--iq-radius-lg) var(--iq-radius-lg) 0;
  background: var(--iq-white);
}

.engage-disclaimer--finance {
  border-left-color: var(--iq-amber);
  background: var(--iq-amber-050);
}

.engage-disclaimer--ai-pricing {
  border-left-color: var(--iq-mint);
  background: var(--iq-mint-050);
}

.engage-disclaimer__label {
  display: block;
  margin-bottom: var(--iq-space-1);
  color: var(--iq-slate);
  font-family: var(--iq-font-display);
  font-size: var(--iq-text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.engage-disclaimer .engage-disclaimer__text {
  margin: 0;
  color: var(--iq-slate-700);
  font-size: var(--iq-text-sm);
  line-height: var(--iq-leading-normal);
}

/* ------------------------------------------------------------------
   Capture block: branded intro around the Ninja Forms email form.
------------------------------------------------------------------ */

.engage-capture {
  --iq-text-primary: var(--iq-white);
  --iq-text-secondary: rgba(255, 255, 255, 0.78);
  --iq-text-muted: rgba(255, 255, 255, 0.62);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.9fr);
  gap: clamp(var(--iq-space-6), 4vw, var(--iq-space-10));
  align-items: center;
  padding: clamp(var(--iq-space-6), 5vw, var(--iq-space-10));
  border-radius: var(--iq-radius-xl);
  background:
    linear-gradient(90deg, rgba(244, 162, 97, 0.16), transparent 58%),
    linear-gradient(135deg, var(--iq-navy), var(--iq-teal-900));
  color: var(--iq-white);
}

.engage-capture__eyebrow {
  color: var(--iq-accent-on-dark);
}

.engage-capture .engage-capture__heading {
  margin-bottom: var(--iq-space-3);
  color: var(--iq-white);
  font-family: var(--iq-font-display);
  font-size: var(--iq-text-2xl);
  font-weight: 800;
  line-height: var(--iq-leading-tight);
}

.engage-capture .engage-capture__body {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.78);
}

.engage-capture .nf-form-cont {
  margin: 0;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

.engage-capture .nf-form-cont .nf-field-label label,
.engage-capture .nf-form-cont .nf-form-title h3 {
  color: var(--iq-white);
}

.engage-capture .nf-form-cont .nf-form-fields-required,
.engage-capture .nf-form-cont .checkbox-wrap .nf-field-label label {
  color: rgba(255, 255, 255, 0.72);
}

/* ------------------------------------------------------------------
   Responsive and motion
------------------------------------------------------------------ */

@media (max-width: 760px) {
  .engage-capture {
    grid-template-columns: 1fr;
  }

  .engage-cta--secondary {
    padding: var(--iq-space-5);
  }
}

@media (max-width: 520px) {
  .engage-cta__btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .engage-cta__btn:hover {
    transform: none;
  }
}