/* ============================================
   bge-rex.css — BGE Layout & Spacing Styles
   JDV Labs | jdvlabs.tech/bge/
   Built: July 2026
   NOTE: No avatar image rules.
   BGE operates via shared chat widget (site-wide).
   This file handles layout/spacing only.
   ============================================ */

/* ----------------------------------------
   REX NAME HIGHLIGHT
   ---------------------------------------- */
.bge-scope .rex-name {
  color: var(--color-text-gold);
  font-style: normal;
}

/* ----------------------------------------
   REX QUOTE INTERSTITIAL
   Used in value pillars section
   ---------------------------------------- */
.bge-scope .bge-quote-block {
  max-width: var(--max-width-wide);
  margin: var(--space-lg) auto;
  padding: var(--space-lg) var(--space-md);
  background: var(--color-bg-secondary);
  border-left: 4px solid var(--color-gold);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.bge-scope .bge-quote-text {
  flex: 1;
}

.bge-scope .bge-quote-text .quote-mark {
  font-family: 'Syne', sans-serif;
  font-size: 80px;
  color: var(--color-gold);
  line-height: 0.5;
  display: block;
  margin-bottom: var(--space-sm);
  opacity: 0.6;
}

.bge-scope .bge-quote-text blockquote {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 2.5vw, 28px);
  color: var(--color-text-primary);
  line-height: 1.4;
  margin: 0;
  padding: 0;
  border: none;
  font-style: normal;
}

/* ----------------------------------------
   ABOUT REX SECTION
   No avatar image — text-only layout
   ---------------------------------------- */
.bge-scope .bge-about-section {
  border-top: 2px solid var(--color-gold);
  border-bottom: 2px solid var(--color-gold);
  padding: var(--space-xl) 0;
}

.bge-scope .bge-about-section .bge-principle {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--color-text-primary);
  font-style: italic;
  margin-top: var(--space-md);
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-gold);
}

/* ----------------------------------------
   MOBILE OVERRIDES
   ---------------------------------------- */
@media (max-width: 768px) {
  .bge-scope .bge-quote-block {
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
  }

  .bge-scope .bge-quote-text .quote-mark {
    font-size: 56px;
  }
}