/*
 * Serajj CTA — front-end styles (v1.1)
 * Three colours only: black, white, gold. One row, one action.
 * Scales from the host page's own typography (font-family:inherit, em units).
 */

.serajj-cta{
  --sjc-gold:#C8A24A;
  --sjc-gold-lite:#EFD79A;
  --sjc-gold-deep:#8C6D22;
  --sjc-black:#0B0B0B;
  --sjc-white:#FFFFFF;
  --sjc-bg:var(--sjc-black);
  --sjc-text:var(--sjc-white);
  --sjc-muted:rgba(255,255,255,.62);
  --sjc-btn-text:var(--sjc-black);
  --sjc-radius:14px;
  --sjc-size:1em;

  font-family:inherit;
  font-size:var(--sjc-size);
  line-height:1.5;
  color:var(--sjc-text);
  background:var(--sjc-bg);
  border-radius:var(--sjc-radius);
  padding:1.4em 1.7em;
  margin:2em 0;
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
}
.serajj-cta *,
.serajj-cta *::before,
.serajj-cta *::after{box-sizing:border-box;}

/* the lamp: one gold hairline along the top edge */
.serajj-cta::after{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;
  background:linear-gradient(90deg,transparent 0%,var(--sjc-gold) 22%,var(--sjc-gold-lite) 40%,var(--sjc-gold) 58%,transparent 92%);
  pointer-events:none;
}

.sjc__inner{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:1em 1.75em;
}
.sjc__copy{flex:1 1 18em;min-width:0;}
.sjc__action{flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:.4em;}

.sjc__title{
  font-family:inherit;
  font-size:1.18em;font-weight:700;line-height:1.35;
  margin:0;color:var(--sjc-text);
}
.sjc__title em{font-style:normal;color:var(--sjc-gold);}
.sjc__text{
  margin:.35em 0 0;font-size:.9em;color:var(--sjc-muted);max-width:52ch;
}

.sjc__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.78em 1.5em;
  font-size:.98em;font-weight:700;line-height:1.2;white-space:nowrap;
  text-decoration:none !important;
  color:var(--sjc-btn-text) !important;
  background:linear-gradient(180deg,var(--sjc-gold-lite) 0%,var(--sjc-gold) 58%,var(--sjc-gold-deep) 100%);
  border-radius:999px;
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
  box-shadow:0 8px 20px -12px rgba(200,162,74,.9);
}
.sjc__btn svg{width:1.2em;height:1.2em;fill:currentColor;flex:0 0 auto;}
.sjc__btn:hover,.sjc__btn:focus-visible{
  transform:translateY(-1px);filter:brightness(1.06);
  box-shadow:0 12px 26px -12px rgba(200,162,74,1);
  color:var(--sjc-btn-text) !important;
}
.sjc__btn:active{transform:translateY(0);}
.sjc__btn:focus-visible{outline:3px solid var(--sjc-gold-lite);outline-offset:3px;}

.sjc__alt{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  font-size:.8em;color:var(--sjc-muted) !important;text-decoration:none !important;
  transition:color .18s ease;
}
.sjc__alt:hover,.sjc__alt:focus-visible{color:var(--sjc-gold-lite) !important;}
.sjc__alt svg{width:.9em;height:.9em;fill:currentColor;flex:0 0 auto;}

/* ---------- white variant: white ground, black type, gold action ---------- */
.serajj-cta.is-light{
  --sjc-bg:var(--sjc-white);
  --sjc-text:var(--sjc-black);
  --sjc-muted:rgba(11,11,11,.62);
  box-shadow:inset 0 0 0 1px rgba(11,11,11,.10);
}
.serajj-cta.is-light .sjc__title em{color:var(--sjc-gold-deep);}

/* ---------- narrow containers ---------- */
@media (max-width:600px){
  .serajj-cta{padding:1.25em 1.2em;margin:1.6em 0;}
  .sjc__inner{gap:.9em;}
  .sjc__action{flex:1 1 100%;}
  .sjc__btn{width:100%;}
  .sjc__title{font-size:1.1em;}
}

@media (prefers-reduced-motion:reduce){
  .sjc__btn,.sjc__alt{transition:none;}
  .sjc__btn:hover{transform:none;}
}