/* ================================
   AstroHub – Tarot Tab (scoped)
   All rules live under #ah-tarot
   ================================ */

/* --- Hard reset just inside the scope --- */
#ah-tarot, #ah-tarot * { box-sizing: border-box !important; font-family: inherit !important; }
#ah-tarot h1, #ah-tarot h2, #ah-tarot h3, #ah-tarot p { margin: 0 !important; }

/* --- Design tokens (scoped) --- */
#ah-tarot{
  --ah-t-bg: #0f0d20;              /* page backdrop */
  --ah-t-card: #121028;            /* card base over image */
  --ah-t-card-ink: #e7e6ff;        /* text on cards */
  --ah-t-muted: #a5a2c7;           /* secondary text */
  --ah-t-glow: 0 10px 34px rgba(25, 20, 70, .32);
  --ah-t-border: rgba(255,255,255,.07);
  --ah-t-card-r: 16px;
  --ah-t-cta: #8d7aff;             /* CTA pill */
  --ah-t-cta-ink: #110a33;
  --ah-t-cta-glow: 0 8px 26px rgba(141,122,255,.45);
  --ah-t-locked: rgba(255,255,255,.28);  /* disabled overlay tint */
  background: transparent !important;
}

/* --- Container --- */
#ah-tarot .ah-tarot__head{
  max-width: 1140px !important;
  margin: 0 auto 14px !important;
  padding: 8px 4px !important;
}
#ah-tarot .ah-tarot__title{
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  letter-spacing: .2px !important;
}
#ah-tarot .ah-tarot__sub{
  color: var(--ah-t-muted) !important;
  font-size: 13px !important;
  margin-top: 6px !important;
}

/* --- Grid --- */
#ah-tarot .ah-tarot__grid{
  max-width: 1140px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 18px !important;
}

/* --- Card base --- */
#ah-tarot .ah-tarot-card{
  position: relative !important;
  min-height: 165px !important;
  border-radius: var(--ah-t-card-r) !important;
  overflow: hidden !important;
  border: 1px solid var(--ah-t-border) !important;
  box-shadow: var(--ah-t-glow) !important;
  /* two-layer background: image + dark veil */
  background-image:
    linear-gradient(180deg, rgba(10,9,24,.50), rgba(10,9,24,.50)),
    var(--ah-default-bg) !important; /* <-- shared bg from #ah-tarot inline style */
  background-size: cover !important;
  background-position: center !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  will-change: transform !important;
}
#ah-tarot .ah-tarot-card:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 36px rgba(40,30,120,.45) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* --- Card body (center content) --- */
#ah-tarot .ah-tarot-card__body{
  position: relative !important;
  z-index: 2 !important;
  min-height: 165px !important;
  padding: 18px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  text-align: center !important;
}
#ah-tarot .ah-tarot-card__title{
  color: var(--ah-t-card-ink) !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
}
#ah-tarot .ah-tarot-card__desc{
  color: var(--ah-t-muted) !important;
  margin-top: 8px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  max-width: 92% !important;
}

/* --- Full overlay anchor for unlocked cards --- */
#ah-tarot .ah-tarot-card__overlay{
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  border-radius: var(--ah-t-card-r) !important;
  /* focus-visible ring for a11y */
  outline: none !important;
}
#ah-tarot .ah-tarot-card__overlay:focus-visible{
  box-shadow: 0 0 0 3px rgba(141,122,255,.85) inset !important;
}

/* --- Locked state --- */
#ah-tarot .ah-tarot-card.is-locked{
  filter: saturate(.7) brightness(.86) !important;
  cursor: not-allowed !important;
}
#ah-tarot .ah-tarot-card.is-locked::after{
  /* subtle disabled veil to separate from unlocked */
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background: linear-gradient(180deg, rgba(10,9,24,.65), rgba(10,9,24,.78)) !important;
  pointer-events: none !important;
}
#ah-tarot .ah-tarot-card.is-locked .ah-tarot-card__body{
  opacity: .85 !important;
}

/* --- Upgrade CTA on locked --- */
#ah-tarot .ah-tarot-card__cta{
  position: absolute !important;
  left: 50% !important;
  bottom: 14px !important;
  transform: translateX(-50%) !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  text-decoration: none !important;
  color: var(--ah-t-cta-ink) !important;
  background: var(--ah-t-cta) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: var(--ah-t-cta-glow) !important;
}
#ah-tarot .ah-tarot-card__cta:hover{
  filter: brightness(1.06) !important;
}

/* --- Responsive tweaks --- */
@media (max-width: 600px){
  #ah-tarot .ah-tarot__title{ font-size: 20px !important; }
  #ah-tarot .ah-tarot__grid{ grid-template-columns: 1fr !important; }
  #ah-tarot .ah-tarot-card{ min-height: 158px !important; }
  #ah-tarot .ah-tarot-card__body{ min-height: 158px !important; }
}

/* --- Optional: fade-in on mount (if you add class in PHP) --- */
#ah-tarot .ah-tarot-card{ opacity: 0; transform: translateY(4px) scale(.998) !important; }
#ah-tarot .ah-tarot-card:nth-child(n){ animation: ahTarotIn .35s ease forwards !important; }
#ah-tarot .ah-tarot-card:nth-child(2){ animation-delay: .03s !important; }
#ah-tarot .ah-tarot-card:nth-child(3){ animation-delay: .06s !important; }
#ah-tarot .ah-tarot-card:nth-child(4){ animation-delay: .09s !important; }
#ah-tarot .ah-tarot-card:nth-child(5){ animation-delay: .12s !important; }
#ah-tarot .ah-tarot-card:nth-child(6){ animation-delay: .15s !important; }
#ah-tarot .ah-tarot-card:nth-child(7){ animation-delay: .18s !important; }
#ah-tarot .ah-tarot-card:nth-child(8){ animation-delay: .21s !important; }
#ah-tarot .ah-tarot-card:nth-child(9){ animation-delay: .24s !important; }
#ah-tarot .ah-tarot-card:nth-child(10){ animation-delay: .27s !important; }
#ah-tarot .ah-tarot-card:nth-child(11){ animation-delay: .30s !important; }
#ah-tarot .ah-tarot-card:nth-child(12){ animation-delay: .33s !important; }

@keyframes ahTarotIn{
  to{ opacity: 1; transform: translateY(0) scale(1) !important; }
}