/* =========================================================
   Theme — The Balam
   Purpose: Modern myth + ember/gold glow + Balam backdrop
   UPDATED:
   - Relicrunners “bones” for background + card layering
   - Clickable cards (no in-card buttons)
   IMPORTANT:
   - Newsletter modal styling lives ONLY in /assets/css/newsletter-modal.css
   ========================================================= */

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

  --text-main: #f5efe4;
  --text-muted: rgba(245,239,228,0.76);

  --accent: #ff9a3c;                 /* ember */
  --accent-soft: rgba(255,154,60,0.22);

  --gold: #d6b26b;
  --gold-soft: rgba(214,178,107,0.22);

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

  --serif: "Cinzel", ui-serif, Georgia, "Times New Roman", Times, serif;
}

/* =========================================================
   Background (poster style)
   ========================================================= */

.wrap{
  min-height: 100vh;
  position: relative;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.40), rgba(0,0,0,0.58)),
    url("/assets/img/backgrounds/balam-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 20% 22%, rgba(255,154,60,0.18), transparent 62%),
    radial-gradient(900px 600px at 78% 30%, rgba(214,178,107,0.14), transparent 62%),
    radial-gradient(760px 560px at 52% 72%, rgba(255,210,120,0.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.68));
}

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

/* =========================================================
   Title block styling
   ========================================================= */

.titleBlock{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.titleBlock__author{
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.95rem;
  color: var(--text-muted);
  text-shadow:0 12px 30px rgba(0,0,0,.65);
}

.titleBlock__logo{
  width:min(980px, 92%);
  height:auto;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.65));
}

.titleBlock__tagline{
  margin-top:0;
  font-style:italic;
  font-size:1.25rem;
  color: var(--text-main);
  text-shadow:0 12px 30px rgba(0,0,0,.65);
}

/* =========================================================
   Card grid “bones”
   ========================================================= */

.section--cards{ padding-top:18px; }
.card-grid--three{ grid-template-columns: repeat(3, minmax(0,1fr)); }

.card__overlay--mock{
  justify-content:space-between;
  padding:18px;
  gap:14px;
}

.card__cap{ text-align:center; }

.card__capTitle{
  font-size:1.35rem;
  margin:0 0 6px;
  text-shadow:0 12px 28px rgba(0,0,0,.85);
}

.card__mid{ text-align:center; }

.card__italic{
  font-style:italic;
  text-shadow:0 10px 24px rgba(0,0,0,.75);
}

.card__italic--tight{ margin-bottom:0; }

.card__bookWrap{ display:flex; justify-content:center; }

.card__book{
  width:min(240px, 75%);
  height:auto;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 55px rgba(0,0,0,.55);
}

/* =========================================================
   Card Background Images
   ========================================================= */

.card--balam-feels{
  background-image: url("../img/balam/cards/balam-feels.png");
}

.card--balam-start{
  /* If this was intended to be /assets/img/balam/cards/balam-start.png, switch it there */
  background-image: url("../img/balam/cards/balam-start-here.png");
}

.card--balam-series{
  background-image: url("../img/balam/cards/balam-series.png");
}

/* =========================================================
   Card Base Styling (Relicrunners-style layering)
   ========================================================= */

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

  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 22px 70px rgba(0,0,0,0.58);
  border-radius: 16px;
}

/* Inner “mock frame” — use ::before so ::after can be the gradient */
.card.card--image::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: 18px;
  border: 1px solid rgba(214,178,107,0.18);
  pointer-events:none;
  opacity: .55;
  z-index: 1;
}

/* Cinematic readability gradient — matches Relicrunners’ approach */
.card.card--image::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 0;

  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.18) 42%,
    rgba(0,0,0,0.64) 100%
  );
}

/* Keep overlay content above both layers */
.card__overlay{
  position: relative;
  z-index: 2;
}

/* =========================================================
   CLICKABLE CARDS (match Gateway + Relicrunners)
   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;
}

.card--link:hover{
  transform: translateY(-6px);
  box-shadow:
    0 28px 78px rgba(0,0,0,0.62),
    0 0 26px rgba(255,154,60,0.10);
}

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

.card--link:focus-visible{
  outline: 2px solid rgba(255,154,60,0.70);
  outline-offset: 5px;
  border-radius: 18px;
}

/* Soft inner edge glow on hover */
.card--link:hover::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: 16px;
  z-index: 3;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset 0 0 26px rgba(255,154,60,0.10);
}

/* =========================================================
   Bottom CTA block
   ========================================================= */

.section--cta{ padding-top:22px; }

.ctaBlock{
  text-align:center;
  max-width: 920px;
  margin: 0 auto;

  display:flex;
  flex-direction: column;
  align-items: center;
}

.ctaBlock__title{
  margin:0 0 10px;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  text-shadow:0 14px 32px rgba(0,0,0,.65);
}

.ctaBlock__sub{
  margin:0 auto 18px;
  color: var(--text-muted);
  font-style:italic;
}

/* =========================================================
   Mobile collapse
   ========================================================= */

@media (max-width: 980px){
  .card-grid{ grid-template-columns: 1fr !important; gap: 18px !important; }
  .card--image{ min-height: 320px; background-position:center; background-size:cover; }
  .card__overlay{ padding: 18px !important; gap: 12px !important; }
}