@import url("/yoruba/assets/course.css");

body[data-naija-course] {
  margin: 0;
  overflow-x: hidden;
  color: var(--ice);
  background:
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--coral) 12%, transparent), transparent 28rem),
    radial-gradient(circle at 8% 42%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 32rem),
    var(--void);
  font-family: Inter, sans-serif;
  line-height: 1.65;
}

body[data-naija-course] *,
body[data-naija-course] *::before,
body[data-naija-course] *::after { box-sizing: border-box; }

body[data-naija-course] a { color: inherit; }

body[data-naija-course] button,
body[data-naija-course] input,
body[data-naija-course] textarea { font: inherit; }

body[data-naija-course] :focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 4px;
}

body[data-naija-course] .yoruba-hero::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 6.5%, color-mix(in srgb, var(--cyan) 10%, transparent) 6.6% 6.72%, transparent 6.82% 13%),
    radial-gradient(ellipse at 78% 38%, color-mix(in srgb, var(--coral) 42%, transparent), transparent 28%),
    radial-gradient(ellipse at 71% 50%, color-mix(in srgb, var(--gold) 24%, transparent), transparent 42%),
    linear-gradient(130deg, var(--void-3), var(--void) 67%);
}

body[data-naija-course] .yoruba-hero-shade {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--void) 97%, transparent) 0%, color-mix(in srgb, var(--void) 84%, transparent) 54%, color-mix(in srgb, var(--void) 35%, transparent) 100%),
    linear-gradient(0deg, var(--void), transparent 52%);
}

.naija-call-grid {
  display: grid;
  gap: .65rem;
  width: min(100%, 37rem);
  margin: 2rem 0;
}

.naija-call-grid div {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: baseline;
  padding: .8rem 1rem;
  border-left: 2px solid var(--coral);
  background: color-mix(in srgb, var(--void-3) 74%, transparent);
}

.naija-call-grid div:last-child {
  margin-left: clamp(1.5rem, 8vw, 6rem);
  border-color: var(--gold);
}

.naija-call-grid span {
  color: var(--steel);
  font-family: "JetBrains Mono", monospace;
  font-size: .66rem;
  text-transform: uppercase;
}

.naija-call-grid strong {
  color: var(--ice);
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 400;
  letter-spacing: .035em;
}

.yoruba-module-art {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  min-height: 14rem;
  overflow: hidden;
  padding: 1.25rem;
  border-bottom: 1px solid var(--yoruba-line);
  background:
    radial-gradient(circle at 78% 28%, color-mix(in srgb, var(--coral) 28%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--cyan) 8%, var(--void-3)), var(--void-2));
}

.yoruba-module-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.1rem;
  background: repeating-linear-gradient(90deg, transparent 0 9%, color-mix(in srgb, var(--gold) 28%, transparent) 9.4% 9.8%, transparent 10.2% 18%);
  clip-path: polygon(0 45%, 8% 45%, 8% 25%, 12% 25%, 12% 72%, 17% 72%, 17% 38%, 24% 38%, 24% 58%, 30% 58%, 30% 16%, 35% 16%, 35% 81%, 41% 81%, 41% 40%, 48% 40%, 48% 64%, 54% 64%, 54% 29%, 61% 29%, 61% 74%, 66% 74%, 66% 44%, 73% 44%, 73% 61%, 80% 61%, 80% 35%, 87% 35%, 87% 53%, 100% 53%, 100% 58%, 0 58%);
}

.yoruba-module-art span,
.yoruba-module-art small {
  font-family: "JetBrains Mono", monospace;
}

.yoruba-module-art span {
  color: var(--cyan);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.yoruba-module-art strong {
  margin-top: .25rem;
  font-family: "Bebas Neue", sans-serif;
  font-size: 2.25rem;
  font-weight: 400;
  letter-spacing: .035em;
}

.yoruba-module-art small { color: var(--steel); }

.naija-signal-lab .yoruba-tone-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.naija-editorial-feature { min-height: 28rem; }

.naija-voice-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.45rem, 2vw, 1rem);
  min-height: 22rem;
  padding: 2rem;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--coral) 20%, transparent), transparent 52%),
    var(--void-3);
}

.naija-voice-score span {
  width: clamp(.35rem, 1.4vw, .8rem);
  height: 22%;
  background: var(--gold);
  transform-origin: center;
}

.naija-voice-score span:nth-child(2),
.naija-voice-score span:nth-child(6) { height: 48%; background: var(--coral); }
.naija-voice-score span:nth-child(3),
.naija-voice-score span:nth-child(5) { height: 76%; }
.naija-voice-score span:nth-child(4) { height: 100%; background: var(--cyan); }

@media (min-width: 768px) {
  .naija-call-grid { grid-template-columns: 1fr; }
  .naija-signal-lab .yoruba-tone-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .naija-voice-score span { transform: none; }
}