/* ===================================================
   TGK Card Styles – Modular Component System
   Version: 1.3 – Includes Diagonal Coming Soon Overlay
   =================================================== */

/* 🔶 Universal Gnostic Card */
.gnostic-card {
  position: relative; /* Anchor for overlay */
  background: var(--card-gradient);
  color: var(--card-action-text); /* Ensures white/dark text balance */
  border: 2px solid var(--text-accent);
  border-radius: var(--border-radius-base);
  box-shadow: 0 0 0 transparent;
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  width: 100%;
  max-width: 280px;
  min-height: 100px;
  margin: var(--space-md) auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden; /* Ensures overlay respects border-radius */
}

/* 🜁 Card Inner Elements */
.gnostic-card-inner {
  position: relative;
  z-index: 1; /* Below overlay */]
  text-align: center !important;
}

.gnostic-card-glyph {
  font-size: clamp(2rem, 2.8vw, 2.8rem);
  color: var(--glyph-color);
  text-shadow: 0 0 8px var(--shadow-glow);
  margin-bottom: var(--glyph-margin-bottom, 1rem);
}

.gnostic-card-title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-accent);
}

.gnostic-card-description {
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 1vw, 1.05rem);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  line-height: var(--font-base-line, 1.85);
}

.gnostic-card-action {
  background-color: var(--card-action-bg, var(--text-accent));
  color: var(--card-action-text, var(--bg-primary));
  border: none;
  border-radius: var(--border-radius-base);
  padding: 0.65rem 1.25rem;
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: 600;
  font-family: var(--font-display);
  text-transform: uppercase;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.gnostic-card-action:hover {
  background-color: var(--card-action-hover, var(--highlight));
}

.gnostic-card-action:focus {
  outline: 2px solid var(--highlight);
  outline-offset: 2px;
}

.gnostic-card.large {
  max-width: 360px;
  min-height: 180px;
  padding: var(--space-md);
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1); /* light darkener */
  z-index: 0;
  pointer-events: none;
}
.card-content {
  position: relative;
  z-index: 1;
}

/* Vault Card Summary Styling */
.card-summary {
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--strong-text);
  margin-top: var(--space-sm);
}


/* ===================================================
   Coming Soon / premimum Overlay – Diagonal Ribbon (Top-Left)
   Version: 1.3 – Anchored to card container
   =================================================== */

.coming-soon .coming-soon-overlay {
  position: absolute;
  top: var(--space-lg);               /* approx. 2.2rem */
  left: var(--overlay-left-shift);   /* new token recommended */
  width: var(--overlay-width);       /* new token recommended */
  transform: rotate(-45deg);
  text-align: center;
  background: var(--overlay-bg-gradient);  /* new token */
  color: var(--text-accent);
  font-family: var(--font-display);
  font-size: var(--font-size-vs);
  font-weight: bold;
  padding: 0.25rem 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 6px var(--shadow-glow);
  border-top: 1px solid var(--text-accent);
  border-bottom: 1px solid var(--text-accent);
  text-shadow: 0 0 var(--shadow-size-sm, 6px) var(--shadow-glow);
  pointer-events: none;
  z-index: 10;
}

.premium .premium-overlay {
  position: absolute;
  top: var(--space-lg);               /* approx. 2.2rem */
  left: var(--overlay-left-shift);   /* new token recommended */
  width: var(--overlay-width);       /* new token recommended */
  transform: rotate(-45deg);
  text-align: center;
  background: var(--overlay-bg-gradient);  /* new token */
  color: var(--text-accent);
  font-family: var(--font-display);
  font-size: var(--font-size-vs);
  font-weight: bold;
  padding: 0.25rem 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 6px var(--shadow-glow);
  border-top: 1px solid var(--text-accent);
  border-bottom: 1px solid var(--text-accent);
  text-shadow: 0 0 var(--shadow-size-sm, 6px) var(--shadow-glow);
  pointer-events: none;
  z-index: 10;
}

.gnostic-card-tagline {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--highlight); /* fallback in case var undefined */
  margin-top: 4px;
  line-height: 1.3;
  max-width: 90%;
}

.gnostic-card-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}