/* =========================================================
   Theme — Relicrunners
   Purpose: Sci-fantasy teal/cyan glow + Relicrunners backdrop
   UPDATED for clickable cards + no internal card buttons
   IMPORTANT (Option A):
   - NO newsletter modal CSS in this file.
   - Modal styling lives ONLY in /assets/css/newsletter-modal.css
   ========================================================= */

:root{
  --bg-main: #070b10;
  --bg-panel: rgba(10, 18, 26, 0.88);
  --bg-soft: rgba(255, 255, 255, 0.04);

  --text-main: #e7f6f8;
  --text-muted: rgba(231, 246, 248, 0.74);

  --accent: #46f0ff;
  --accent-soft: rgba(70, 240, 255, 0.22);

  --border-soft: rgba(255, 255, 255, 0.12);
  --shadow-deep: 0 20px 60px rgba(0, 0, 0, 0.55);
}

/* =========================================================
   Background
   ========================================================= */

.wrap{
  min-height: 100vh;
  position: relative;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.40), rgba(0,0,0,0.55)),
    url("/assets/img/backgrounds/relicrunners-bg.png") center / cover no-repeat;
}

.wrap::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(980px 640px at 18% 22%, rgba(70,240,255,0.20), transparent 62%),
    radial-gradient(900px 600px at 72% 30%, rgba(0,140,160,0.16), transparent 62%),
    radial-gradient(700px 520px at 55% 72%, rgba(120,255,230,0.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.62));
}

.container{ position: relative; z-index: 2; }

/* =========================================================
   Card Background Images
   (theme CSS is in /assets/css/ so use ../img/ paths)
   ========================================================= */

.card--rr-feels{  background-image: url("../img/relicrunners/rr-feels-like.png"); }
.card--rr-start{  background-image: url("../img/relicrunners/rr-start-here.png"); }
.card--rr-series{ background-image: url("../img/relicrunners/rr-ecliptic-codex.png"); }

/* =========================================================
   Card Base Styling
   ========================================================= */

.card--image{
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 18px 55px rgba(0,0,0,0.58);
  border-radius: 16px; /* helps focus ring look clean */
}

.card--image::after{
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.18) 42%,
    rgba(0,0,0,0.62) 100%
  ) !important;
}

.card__overlay{
  position: relative;
  z-index: 2;
}

/* =========================================================
   CLICKABLE CARDS (match Gateway pattern)
   Your updated HTML uses:
     <a class="card card--image ... card--link" href="...">...</a>
   ========================================================= */

.card--link{
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

/* Lift + a bit more presence */
.card--link:hover{
  transform: translateY(-6px);
  box-shadow:
    0 26px 70px rgba(0,0,0,0.62),
    0 0 26px rgba(70,240,255,0.10);
}

.card--link:hover .card__overlay{
  filter: brightness(1.03);
}

/* Keyboard focus */
.card--link:focus-visible{
  outline: 2px solid rgba(70,240,255,0.60);
  outline-offset: 5px;
  border-radius: 18px;
}

/* Optional: subtle “edge glow” on hover without changing your art */
.card--link:hover::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.14),
    inset 0 0 26px rgba(70,240,255,0.10);
}

/* =========================================================
   REMOVE/DEPRECATE card button styling
   - You said: no buttons inside cards now.
   - Leaving these out avoids “mystery styles” later.
   ========================================================= */
/* (Intentionally removed) .card .btn--teal, .btn--fx, and other in-card button styles */

/* =========================================================
   PNG Buttons — Keep ONLY for Join the List (global modal trigger)
   NOTE: Your page also has a small inline block; this keeps a clean baseline.
   ========================================================= */

.btn-png{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: var(--btn-h, clamp(92px, 5.4vw, 118px));
  aspect-ratio: var(--btn-ratio, 2048 / 485);
  width: auto;
  max-width: 100%;

  background: center / 100% 100% no-repeat;
  text-decoration: none;
  cursor: pointer;

  font-family: var(--serif, "Cinzel", ui-serif, Georgia, "Times New Roman", Times, serif);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(240,248,255,.96);

  transition: transform .22s ease, filter .22s ease;
  isolation: isolate;

  border: 0;
}

.btn-png::before{
  content:"";
  position:absolute;
  inset: 10% 6%;
  border-radius: 999px;
  pointer-events:none;
  z-index: 0;
  background:
    radial-gradient(140% 160% at 50% 65%, rgba(0,0,0,.38), transparent 62%),
    radial-gradient(120% 140% at 50% 30%, rgba(0,0,0,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.22));
  opacity: .55;
  mix-blend-mode: multiply;
}

.btn-png::after{
  content:"";
  position:absolute;
  inset: 10% 6%;
  border-radius: 999px;
  pointer-events:none;
  z-index: 1;
  background:
    radial-gradient(120% 140% at 50% 30%, rgba(0,0,0,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18));
  mix-blend-mode: multiply;
  opacity: .65;
}

.btn-png > span{
  position: relative;
  z-index: 2;
  padding: 0 44px;
  transform: translateY(2px);
  font-size: clamp(1.02rem, 1.05vw, 1.22rem);
  text-shadow: 0 3px 14px rgba(0,0,0,.78);
  white-space: nowrap;
}

.btn-png:hover{
  transform: translateY(-3px);
  filter: drop-shadow(0 0 16px rgba(70,240,255,.55));
}
.btn-png:active{
  transform: translateY(1px) scale(.985);
}

.btn-png:focus-visible,
button.btn-png:focus-visible{
  outline: 2px solid rgba(70,240,255,.55);
  outline-offset: 4px;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 980px){
  .card-grid{ grid-template-columns: 1fr !important; gap: 18px !important; }
  .card--image{ min-height: 320px; }
}

@media (max-width: 520px){
  .btn-png > span{ white-space: normal; padding: 0 28px; }
}