/* =========================================================
   Theme — Veilborn
   Purpose: Dark urban fantasy amber/silver glow + Veilborn 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: #080709;
  --bg-panel: rgba(12, 10, 14, 0.88);
  --bg-soft: rgba(255, 255, 255, 0.04);

  --text-main: #f0eae2;
  --text-muted: rgba(240, 234, 226, 0.74);

  --accent: #d4903a;
  --accent-soft: rgba(212, 144, 58, 0.22);

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

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

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

.wrap::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(900px 560px at 22% 38%, rgba(212,144,58,0.14), transparent 62%),
    radial-gradient(800px 520px at 70% 28%, rgba(160,100,30,0.10), transparent 62%),
    radial-gradient(600px 440px at 50% 78%, rgba(180,130,60,0.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.70));
}

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

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

.card--vb-feels{  background-image: url("../img/veilborn/vb-feels-like.png"); }
.card--vb-start{  background-image: url("../img/veilborn/vb-start-here.png"); }
.card--vb-series{ background-image: url("../img/veilborn/vb-night-it-broke.png"); }

/* Button */
.btn-vb-join {
  --btn-ratio: 2048 / 485;
  background-image: url("../img/veilborn/buttons/veilborn-button.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.14);
  box-shadow: 0 18px 55px rgba(0,0,0,0.65);
  border-radius: 16px;
}

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

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

/* =========================================================
   CLICKABLE CARDS
   ========================================================= */

.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 + amber presence */
.card--link:hover{
  transform: translateY(-6px);
  box-shadow:
    0 26px 70px rgba(0,0,0,0.68),
    0 0 26px rgba(212,144,58,0.12);
}

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

/* Keyboard focus */
.card--link:focus-visible{
  outline: 2px solid rgba(212,144,58,0.65);
  outline-offset: 5px;
  border-radius: 18px;
}

/* Subtle edge glow on hover */
.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.13),
    inset 0 0 26px rgba(212,144,58,0.08);
}

/* =========================================================
   PNG Buttons — Keep ONLY for Join the List (global modal trigger)
   ========================================================= */

.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,234,226,.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,.42), transparent 62%),
    radial-gradient(120% 140% at 50% 30%, rgba(0,0,0,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.26));
  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,.08), rgba(0,0,0,.20));
  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,.82);
  white-space: nowrap;
}

.btn-png:hover{
  transform: translateY(-3px);
  filter: drop-shadow(0 0 16px rgba(212,144,58,.50));
}
.btn-png:active{
  transform: translateY(1px) scale(.985);
}

.btn-png:focus-visible,
button.btn-png:focus-visible{
  outline: 2px solid rgba(212,144,58,.60);
  outline-offset: 4px;
}

/* =========================================================
   Coming Soon Banner
   Toggle visibility in /assets/includes/coming-soon-banner.php
   ========================================================= */

.coming-soon-banner {
  width: 100%;
  text-align: center;
  padding: 10px 20px;
  background: rgba(200,144,58,0.08);
  border-bottom: 1px solid rgba(200,144,58,0.22);
  position: relative;
  z-index: 98; /* sits below nav (z-index 99+) */
}

.coming-soon-banner__text {
  font-family: var(--serif, "Cinzel", ui-serif, Georgia, serif);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #c8943e;
}

/* =========================================================
   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; }
}