/* ====================================================================
   YOUNG BUILDERS PODCAST — SHARED STYLES
   ==================================================================== */
:root {
  --gold: #D4AF37;
  --gold-bright: #f2ca50;
  --bg: #0a0a0a;
  --surface: #131313;
  --surface-low: #1b1b1b;
  --surface-container: #1f1f1f;
  --surface-high: #2a2a2a;
  --on-surface: #e2e2e2;
  --on-surface-variant: #d0c5af;
  --outline: rgba(255,255,255,0.1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--bg);
  color: var(--on-surface);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
}
::selection { background: var(--gold); color: #000; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.material-symbols-outlined.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

.glass-border { border: 1px solid rgba(255, 255, 255, 0.1); }
.ghost-border { border: 1px solid rgba(255, 255, 255, 0.1); }
.gold-glow:hover { box-shadow: 0 0 20px rgba(212, 175, 55, 0.2); }
.hero-gradient {
  background: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #000000 100%);
}
.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}
.fade-in-up { animation: fadeInUp 0.8s ease forwards; }
.fade-in    { animation: fadeIn 0.6s ease forwards; }

.skeleton {
  background: linear-gradient(90deg, #1b1b1b 0%, #2a2a2a 50%, #1b1b1b 100%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
}

/* Cards & interactions */
.card {
  background: var(--surface-low);
  border: 1px solid var(--outline);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover { background: var(--surface-container); border-color: rgba(212,175,55,0.3); }

/* Form fields */
.field-input {
  width: 100%;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 14px 18px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  transition: all 0.2s ease;
  outline: none;
}
.field-input:focus { border-color: var(--gold); background: #000; }
.field-input::placeholder { color: rgba(255,255,255,0.3); }
textarea.field-input { resize: vertical; min-height: 120px; }

.field-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  font-weight: 500;
  display: block;
  margin-bottom: 10px;
}

/* Buttons */
.btn-gold {
  background: var(--gold);
  color: #000;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 16px 32px;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.btn-gold:hover { filter: brightness(1.1); }
.btn-gold:active { transform: scale(0.97); }

.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 16px 32px;
  transition: all 0.2s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.btn-ghost:hover { background: #fff; color: #000; }

/* Audio player bar */
.player-bar {
  background: #000;
  border-top: 1px solid var(--surface-high);
}

/* Search bar inside pages */
.search-large {
  width: 100%;
  background: var(--surface-lowest, #0e0e0e);
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding: 16px 0;
  color: #fff;
  font-size: 18px;
  outline: none;
  transition: border-color 0.2s ease;
}
.search-large:focus { border-color: var(--gold); }
.search-large::placeholder { color: rgba(255,255,255,0.3); }

/* Mobile menu fix */
@media (max-width: 768px) {
  .headline-xl { font-size: 40px !important; }
  .headline-lg { font-size: 32px !important; }
  .section-gap { padding-top: 80px !important; padding-bottom: 80px !important; }
}

/* Sticky filter bar shadow */
.sticky-shadow { box-shadow: 0 8px 24px rgba(0,0,0,0.4); }

/* Animations on scroll (reveal) */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }