/* ==========================================================
   SilverWars — Koenig Signup Card (kg-signup-card)
   File: assets/css/signup.css
========================================================== */

article.sw-article-body.gh-content .kg-signup-card {
  /* size + wrap behavior */
  float: left;
  clear: none;
  width: min(560px, 52%);
  max-width: 560px;
  margin: 0 28px 18px 0;

  /* SilverWars HUD look */
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 60, 60, 0.35);
  background: linear-gradient(180deg, rgba(10,10,10,0.85), rgba(5,5,5,0.75));
  box-shadow:
    0 0 16px rgba(255,0,0,0.15),
    inset 0 0 18px rgba(255,0,0,0.12);
}

/* subtle “glass” vignette */
article.sw-article-body.gh-content .kg-signup-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 25% 20%, rgba(255,255,255,0.06), rgba(0,0,0,0) 55%),
    radial-gradient(120% 90% at 75% 80%, rgba(255,0,0,0.10), rgba(0,0,0,0) 60%);
  opacity: 0.9;
}

/* animated scanlines */
@keyframes swSignupScan {
  0% { background-position: 0 0; }
  100% { background-position: 0 420px; }
}
article.sw-article-body.gh-content .kg-signup-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.06) 0px,
    rgba(255,255,255,0.02) 2px,
    rgba(0,0,0,0.10) 4px
  );
  animation: swSignupScan 10s linear infinite;
}

/* hover: a little more “live” */
article.sw-article-body.gh-content .kg-signup-card:hover {
  border-color: rgba(255, 90, 90, 0.65);
  box-shadow:
    0 0 24px rgba(255,0,0,0.25),
    inset 0 0 22px rgba(255,0,0,0.16);
  transform: translateY(-1px);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

/* keep content above overlays */
article.sw-article-body.gh-content .kg-signup-card * {
  position: relative;
  z-index: 2;
}

/* tighten default padding + make it feel like a “window” */
article.sw-article-body.gh-content .kg-signup-card-text {
  padding: 34px 34px 28px !important;
  color: rgba(245, 247, 250, 0.92) !important;
  font-family: "Refinery", system-ui, sans-serif !important;
}

/* heading */
article.sw-article-body.gh-content .kg-signup-card-heading {
  font-family: "GrindDemolished", "Refinery-75-Bold", sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 40px !important;
  line-height: 1.05 !important;
  margin: 0 0 14px !important;
  color: #f3f6fb !important;
  text-shadow:
    0 0 10px rgba(255,0,0,0.22),
    0 0 18px rgba(0,0,0,0.6);
}

/* subheading */
article.sw-article-body.gh-content .kg-signup-card-subheading {
  margin: 0 0 18px !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  color: rgba(215, 220, 226, 0.92) !important;
}

/* form row */
article.sw-article-body.gh-content .kg-signup-card-form {
  gap: 10px !important;
}

/* input */
article.sw-article-body.gh-content input.kg-signup-card-input {
  background: rgba(0,0,0,0.55) !important;
  color: #f5f7fa !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 10px !important;
  padding: 14px 14px !important;
  font-size: 16px !important;
  outline: none !important;
}
article.sw-article-body.gh-content input.kg-signup-card-input::placeholder {
  color: rgba(245,247,250,0.55) !important;
}
article.sw-article-body.gh-content input.kg-signup-card-input:focus {
  border-color: rgba(255,80,80,0.70) !important;
  box-shadow: 0 0 0 3px rgba(255,0,0,0.18) !important;
}

/* button */
article.sw-article-body.gh-content button.kg-signup-card-button.kg-style-accent {
  border-radius: 10px !important;
  padding: 14px 18px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  background: linear-gradient(180deg, #ff3b3b, #b70000) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,0.35),
    inset 0 0 10px rgba(255,255,255,0.08);
}
article.sw-article-body.gh-content button.kg-signup-card-button.kg-style-accent:hover {
  filter: brightness(1.08);
  box-shadow:
    0 14px 22px rgba(0,0,0,0.38),
    0 0 18px rgba(255,0,0,0.22),
    inset 0 0 12px rgba(255,255,255,0.10);
}

/* footnote */
article.sw-article-body.gh-content .kg-signup-card-disclaimer {
  margin-top: 10px !important;
  color: rgba(215,220,226,0.70) !important;
  font-size: 12px !important;
}

/* Mobile: stack and full width (no float wrap) */
@media (max-width: 900px) {
  article.sw-article-body.gh-content .kg-signup-card {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 18px 0;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  article.sw-article-body.gh-content .kg-signup-card::after {
    animation: none !important;
  }
  article.sw-article-body.gh-content .kg-signup-card:hover {
    transform: none !important;
  }
}

/* ==========================================================
   FIX: scanline/vignette bleed
   Clamp overlays to the outer Koenig wrapper + isolate blending
========================================================== */

/* 1) Make sure the OUTER wrapper is the containing block */
article.sw-article-body.gh-content figure.kg-card.kg-signup-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;   /* prevents blend/opacity weirdness with page */
}

/* 2) If Ghost uses a DIV wrapper instead of FIGURE in some contexts, clamp that too */
article.sw-article-body.gh-content .kg-signup-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* 3) Ensure overlays are always behind card contents */
article.sw-article-body.gh-content figure.kg-card.kg-signup-card::before,
article.sw-article-body.gh-content figure.kg-card.kg-signup-card::after,
article.sw-article-body.gh-content .kg-signup-card::before,
article.sw-article-body.gh-content .kg-signup-card::after {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* 4) Put the real content above overlays (don’t use * selector) */
article.sw-article-body.gh-content figure.kg-card.kg-signup-card .kg-signup-card-text,
article.sw-article-body.gh-content .kg-signup-card .kg-signup-card-text {
  position: relative !important;
  z-index: 1 !important;
}