/**
 * ══════════════════════════════════════════════════════════════════════════════
 * OURMASJID TV V2 — SACRED WISDOM DUET SLIDE (tv-wisdom-duet.css)
 * ══════════════════════════════════════════════════════════════════════════════
 * Shared stylesheet for the merged Quran + Hadith two-zone display.
 * Works across TV1 (Pillar), TV2 (Modern), TV3 (Cinematic).
 *
 * Layout:  Full-width stage split into TOP (Quran) and BOTTOM (Hadith).
 * Theming: Each zone has its own identity color that per-TV CSS can override.
 *
 * Dynamic Font Sizing:
 *   Arabic text auto-sizes via JS reading text length and applying a
 *   data-size attribute. CSS maps these ranges to clamped px values.
 *   Translation text shrinks proportionally.
 */

/* ── OUTER WRAPPER: Full Stage, Flex Column ─────────────────────────────────── */
.wisdom-duet-stage {
  width: 100%;
  height: 100%;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  overflow: hidden;
  transition: opacity 0.35s ease-out;
}

/* ── ZONE (Shared between Quran & Hadith) ───────────────────────────────────── */
.wisdom-duet-zone {
  flex: 1 1 0;
  min-height: 0;
  border-radius: var(--card-radius, var(--tv-radius-lg, 24px));
  border: 1.5px solid var(--wisdom-card-border, var(--tenant-border, rgba(255,255,255,0.09)));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 12px 24px 10px 24px;
  gap: 6px;
  position: relative;
  overflow: hidden;
  opacity: 1;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, opacity 0.35s ease;
}

/* Flagship Royal Emerald & Imperial Gold specific theme panel glass background */
[data-theme="emerald-gold"] .wisdom-duet-stage:not([data-theme]) .wisdom-duet-zone,
.wisdom-duet-stage[data-theme="emerald-gold"] .wisdom-duet-zone,
:root:not([data-theme]) .wisdom-duet-stage .wisdom-duet-zone {
  background: linear-gradient(145deg, rgba(8, 30, 26, 0.94), rgba(3, 15, 13, 0.92)) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

/* ── ZONE — Decorative Glow Layer (pseudo) ──────────────────────────────────── */
.wisdom-duet-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.07;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.wisdom-duet-zone-header,
.wisdom-duet-arabic,
.wisdom-duet-ref,
.wisdom-duet-divider,
.wisdom-duet-trans-row {
  position: relative;
  z-index: 1;
}

/* ── ZONE HEADER ROW: badge + counter pill ──────────────────────────────────── */
.wisdom-duet-zone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 12px;
}

.wisdom-duet-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: var(--tv-radius-pill, 999px);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  flex-shrink: 0;
}

.wisdom-duet-counter {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--tv-radius-pill, 999px);
  background: var(--tenant-surface-elevated, rgba(255,255,255,0.07));
  color: var(--tenant-desc-color, rgba(255,255,255,0.55));
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Standard dot indicators */
.wisdom-duet-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tenant-border, rgba(255, 255, 255, 0.3));
  transition: all 0.35s ease;
}

.wisdom-duet-dot.active {
  width: 18px;
  border-radius: 4px;
  background: var(--tenant-gold, #f5d061);
  box-shadow: 0 0 10px rgba(245, 208, 97, 0.65);
}

/* ── ARABIC CALLIGRAPHY BLOCK ───────────────────────────────────────────────── */
.wisdom-duet-arabic {
  font-family: var(--tenant-font-arabic, var(--tv-font-ar, 'Scheherazade New', 'Amiri', 'Cairo', serif));
  direction: rtl;
  text-align: right;
  line-height: 1.50;
  font-weight: 700;
  flex-shrink: 0;
  /* Universal gold calligraphy — same majestic gold for both Quran and Hadith */
  color: var(--wisdom-arabic-color, var(--role-h4-ar-color, var(--tenant-gold, #f5d061)));
  text-shadow: var(--wisdom-arabic-shadow, 0 0 30px rgba(212, 175, 55, 0.60), 0 2px 10px rgba(0,0,0,0.5));
  /* JS overrides font-size inline with measured auto-fit value */
  font-size: 40px;
}

/* CSS tier baseline — JS auto-fit will override these with inline styles if zone is available */
.wisdom-duet-arabic[data-size="xl"]  { font-size: clamp(38px, 3.6vw, 54px); }
.wisdom-duet-arabic[data-size="lg"]  { font-size: clamp(30px, 2.9vw, 44px); }
.wisdom-duet-arabic[data-size="md"]  { font-size: clamp(24px, 2.3vw, 36px); }
.wisdom-duet-arabic[data-size="sm"]  { font-size: clamp(20px, 1.9vw, 30px); }
.wisdom-duet-arabic[data-size="xs"]  { font-size: clamp(16px, 1.6vw, 24px); }

/* ── SOURCE REFERENCE BADGE ─────────────────────────────────────────────────── */
.wisdom-duet-ref {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 9px;
  border-radius: 7px;
  background: var(--tenant-surface-elevated, rgba(255,255,255,0.06));
  border: 1px solid var(--tenant-border, rgba(255,255,255,0.1));
  color: var(--tenant-desc-color, rgba(255,255,255,0.7));
  flex-shrink: 0;
  align-self: flex-start;
}

/* ── DIVIDER ────────────────────────────────────────────────────────────────── */
.wisdom-duet-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tenant-border, rgba(255,255,255,0.1)) 30%, var(--tenant-border, rgba(255,255,255,0.1)) 70%, transparent);
  flex-shrink: 0;
}

/* ── TRANSLATIONS ROW: 3 columns side-by-side, fills all remaining space ──────── */
.wisdom-duet-trans-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  min-height: 0;
  flex: 1 1 auto;          /* grow to fill whatever vertical space the zone has left */
  overflow: hidden;
}

.wisdom-duet-trans-col {
  background: var(--wisdom-box-bg, var(--tenant-surface-elevated, rgba(255,255,255,0.04)));
  border: 1px solid var(--wisdom-box-border, var(--tenant-border, rgba(255,255,255,0.07)));
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  min-height: 0;
}

.wisdom-duet-lang-label {
  display: none !important;
}

.wisdom-duet-trans-text {
  flex: 1 1 auto;
  overflow: hidden;
  /* JS auto-fit sets inline font-size to maximally fill zone space.
     This base is what CSS renders before JS measurement kicks in. */
  font-size: 16px;
  line-height: 1.4;
  color: var(--wisdom-trans-color, var(--role-h4-en-color, var(--tenant-text-primary, #f8fafc)));
}

/* Dynamic translation font sizing */
.wisdom-duet-zone[data-tsize="lg"]  .wisdom-duet-trans-text { font-size: clamp(14px, 1.5vw, 20px); }
.wisdom-duet-zone[data-tsize="md"]  .wisdom-duet-trans-text { font-size: clamp(13px, 1.3vw, 17px); }
.wisdom-duet-zone[data-tsize="sm"]  .wisdom-duet-trans-text { font-size: clamp(12px, 1.1vw, 15px); }
.wisdom-duet-zone[data-tsize="xs"]  .wisdom-duet-trans-text { font-size: clamp(11px, 1.0vw, 13px); }

/* Sinhala specific override */
.wisdom-duet-trans-text.script-si {
  font-family: var(--tv-font-si);
  line-height: var(--tv-lh-si);
}

/* Tamil specific override */
.wisdom-duet-trans-text.script-ta {
  font-family: var(--tv-font-ta);
  line-height: var(--tv-lh-ta);
}

/* ── QURAN ZONE — Gold Theme ────────────────────────────────────────────────── */
.wisdom-duet-zone--quran {
  background: var(--wisdom-card-bg, var(--tenant-surface, rgba(12, 35, 25, 0.72)));
  border-color: var(--wisdom-card-border, var(--tenant-border, rgba(212, 175, 55, 0.38)));
}

.wisdom-duet-zone--quran::before {
  background: radial-gradient(ellipse at 20% 80%, rgba(140, 105, 25, 0.035) 0%, transparent 65%);
  opacity: 1;
}

.wisdom-duet-zone--quran .wisdom-duet-badge {
  background: var(--wisdom-badge-bg, var(--tenant-surface-elevated, rgba(212, 175, 55, 0.18)));
  color: var(--wisdom-tag-color, var(--tenant-gold, #f5d061));
  border-color: var(--wisdom-badge-border, var(--tenant-border, rgba(212, 175, 55, 0.45)));
}

.wisdom-duet-zone--quran .wisdom-duet-arabic {
  color: var(--wisdom-arabic-color, var(--tenant-gold, #f5d061));
  text-shadow: var(--wisdom-arabic-shadow, 0 0 34px rgba(212, 175, 55, 0.65), 0 2px 8px rgba(0,0,0,0.5));
}

.wisdom-duet-zone--quran .wisdom-duet-ref {
  background: var(--tenant-surface-elevated, rgba(212, 175, 55, 0.12));
  border-color: var(--tenant-border, rgba(212, 175, 55, 0.3));
  color: var(--wisdom-narrator-color, var(--tenant-desc-color, #f5d061));
}

.wisdom-duet-zone--quran .wisdom-duet-lang-label {
  color: var(--tenant-gold, #d4af37);
}

.wisdom-duet-zone--quran .wisdom-duet-trans-col {
  background: var(--wisdom-box-bg, var(--tenant-surface-elevated, rgba(255, 255, 255, 0.04)));
  border-color: var(--wisdom-box-border, var(--tenant-border, rgba(212, 175, 55, 0.12)));
}

/* Subtle inner border pulse on quran zone */
@keyframes wisdomQuranPulse {
  0%, 100% { border-color: var(--wisdom-quran-border, var(--wisdom-card-border, rgba(212,175,55,0.38))); }
  50%       { border-color: var(--tenant-border-focus, rgba(212,175,55,0.65)); }
}
.wisdom-duet-zone--quran {
  animation: wisdomQuranPulse 4s ease-in-out infinite;
}

/* ── HADITH ZONE (Dynamic Theme Tokens with graceful Emerald Fallback) ── */
.wisdom-duet-zone--hadith {
  background: var(--wisdom-hadith-bg, var(--wisdom-card-bg, var(--tenant-surface, rgba(4, 28, 20, 0.75))));
  border-color: var(--wisdom-hadith-border, var(--wisdom-card-border, var(--tenant-border, rgba(16, 185, 129, 0.30))));
}

.wisdom-duet-zone--hadith::before {
  background: radial-gradient(ellipse at 20% 80%, var(--wisdom-hadith-border, var(--tenant-border-subtle, rgba(16,185,129,0.15))) 0%, transparent 65%);
  opacity: 1;
}

.wisdom-duet-zone--hadith .wisdom-duet-badge {
  background: var(--wisdom-hadith-badge-bg, var(--wisdom-badge-bg, var(--tenant-surface-elevated, rgba(16, 185, 129, 0.18))));
  color: var(--wisdom-hadith-badge-color, var(--wisdom-tag-color, var(--tenant-primary-light, #34d399)));
  border-color: var(--wisdom-hadith-badge-border, var(--wisdom-badge-border, var(--tenant-border, rgba(16, 185, 129, 0.40))));
}

.wisdom-duet-zone--hadith .wisdom-duet-arabic {
  /* Universal calligraphy matching theme token */
  color: var(--wisdom-arabic-color, var(--tenant-gold, #f5d061));
  text-shadow: var(--wisdom-arabic-shadow, 0 0 32px rgba(212, 175, 55, 0.65), 0 2px 10px rgba(0,0,0,0.5));
}

.wisdom-duet-zone--hadith .wisdom-duet-ref {
  background: var(--wisdom-hadith-ref-bg, var(--tenant-surface-elevated, rgba(16, 185, 129, 0.10)));
  border-color: var(--wisdom-hadith-ref-border, var(--tenant-border, rgba(16, 185, 129, 0.28)));
  color: var(--wisdom-hadith-ref-color, var(--wisdom-narrator-color, var(--tenant-desc-color, #6ee7b7)));
}

.wisdom-duet-zone--hadith .wisdom-duet-lang-label {
  color: var(--wisdom-hadith-badge-color, var(--tenant-primary-light, #34d399));
}

.wisdom-duet-zone--hadith .wisdom-duet-trans-col {
  background: var(--wisdom-box-bg, var(--tenant-surface-elevated, rgba(255, 255, 255, 0.04)));
  border-color: var(--wisdom-box-border, var(--wisdom-hadith-border, var(--tenant-border, rgba(16, 185, 129, 0.10))));
}

/* ── EMPTY STATE (when one type has no content) ─────────────────────────────── */
.wisdom-duet-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.35;
  font-size: 18px;
  color: var(--tv-text-muted);
  font-style: italic;
  letter-spacing: 0.5px;
  flex: 1 1 auto;
}

/* ── DECORATIVE HORIZONTAL SEPARATOR BETWEEN ZONES ─────────────────────────── */
.wisdom-duet-separator {
  flex-shrink: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--wisdom-quran-border, var(--tenant-border, rgba(212,175,55,0.3))) 20%,
    var(--tenant-gold, rgba(212,175,55,0.6)) 50%,
    var(--wisdom-hadith-border, var(--tenant-border, rgba(16,185,129,0.3))) 80%,
    transparent 100%
  );
  border-radius: 2px;
  position: relative;
}

.wisdom-duet-separator::before {
  content: '✦';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: var(--tenant-gold, var(--tv-gold, #d4af37));
  background: var(--wisdom-card-bg, var(--tenant-surface, var(--tv-bg-canvas, #062319)));
  padding: 0 10px;
  line-height: 1;
}

/* ── TV2 MODERN OVERRIDES ───────────────────────────────────────────────────── */
.tv2-modern-canvas .wisdom-duet-zone--quran {
  border-color: var(--wisdom-card-border, rgba(56, 189, 248, 0.25));
}

.tv2-modern-canvas .wisdom-duet-zone--quran::before {
  background: radial-gradient(ellipse at 20% 80%, rgba(56,189,248,0.08) 0%, transparent 60%);
}

.tv2-modern-canvas .wisdom-duet-zone--quran .wisdom-duet-arabic {
  color: var(--wisdom-arabic-color, #f5d061) !important;
  text-shadow: var(--wisdom-arabic-shadow, 0 0 32px rgba(212, 175, 55, 0.65), 0 2px 10px rgba(0,0,0,0.5)) !important;
}

.tv2-modern-canvas .wisdom-duet-zone--quran .wisdom-duet-badge {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.4);
}

.tv2-modern-canvas .wisdom-duet-zone--quran .wisdom-duet-ref {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.25);
}

.tv2-modern-canvas .wisdom-duet-zone--quran .wisdom-duet-lang-label {
  color: #38bdf8;
}

/* ── TV3 CINEMATIC OVERRIDES ────────────────────────────────────────────────── */
.tv3-cinematic-canvas .wisdom-duet-zone--quran {
  background: var(--wisdom-card-bg, rgba(4, 22, 16, 0.85));
  border-color: var(--wisdom-card-border, rgba(245, 208, 97, 0.45));
}

.tv3-cinematic-canvas .wisdom-duet-zone--quran .wisdom-duet-arabic {
  color: var(--wisdom-arabic-color, var(--tenant-gold, #f5d061)) !important;
  text-shadow: var(--wisdom-arabic-shadow, 0 0 36px rgba(245, 208, 97, 0.7)) !important;
}

.tv3-cinematic-canvas .wisdom-duet-zone--quran .wisdom-duet-badge {
  background: var(--wisdom-badge-bg, var(--tenant-surface-elevated, rgba(245, 208, 97, 0.20)));
  color: var(--wisdom-tag-color, var(--tenant-gold, #f5d061));
  border-color: var(--wisdom-badge-border, var(--tenant-border, rgba(245, 208, 97, 0.5)));
}

.tv3-cinematic-canvas .wisdom-duet-zone--quran .wisdom-duet-ref {
  color: var(--wisdom-narrator-color, var(--tenant-desc-color, #f5d061));
  border-color: var(--tenant-border, rgba(245, 208, 97, 0.3));
}

.tv3-cinematic-canvas .wisdom-duet-zone--quran .wisdom-duet-lang-label {
  color: var(--tenant-gold, #f5d061);
}

.tv3-cinematic-canvas .wisdom-duet-zone--hadith {
  background: var(--wisdom-card-bg, rgba(4, 22, 16, 0.85));
  border-color: var(--wisdom-card-border, rgba(52, 211, 153, 0.30));
}

.tv3-cinematic-canvas .wisdom-duet-zone--hadith .wisdom-duet-arabic {
  color: var(--wisdom-arabic-color, var(--tenant-gold, #f5d061)) !important;
  text-shadow: var(--wisdom-arabic-shadow, 0 0 32px rgba(212, 175, 55, 0.65), 0 2px 10px rgba(0,0,0,0.5)) !important;
}

/* ── SMOOTH TRANSITIONS (Zero Blink / Zero Flash) ──────────────────────────── */
.wisdom-duet-arabic,
.wisdom-duet-trans-row,
.wisdom-duet-ref {
  transition: opacity 0.3s ease, transform 0.3s ease;
}