/* ================================================================
   Learning Pages — Unified with homepage design system
   Uses CSS custom properties from styles.css
   ================================================================ */

.page-learning {
  background: var(--c-bg);
  color: var(--c-tx);
}

/* Learning Home Hero V2 */
.learning-hero-v2 {
  background:
    radial-gradient(circle at top right, rgba(76, 175, 80, 0.15), transparent 32rem),
    linear-gradient(135deg, var(--c-mu), var(--c-bg));
  padding: var(--sp-10) var(--sp-5) var(--sp-12);
  position: relative;
  overflow: hidden;
}
.learning-hero-v2::before {
  content: "";
  position: absolute;
  bottom: -20%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(244,162,97,0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.learning-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: var(--sp-8);
  align-items: center;
  position: relative;
  z-index: 1;
}
.learning-hero-content h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--fw-b);
  line-height: var(--lh-t);
  margin-bottom: var(--sp-4);
  color: var(--c-tx);
}
.learning-hero-content p {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  color: var(--c-t2);
  font-weight: var(--fw-sb);
  max-width: 480px;
}
.learning-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  width: 100%;
  min-width: 0;
}

/* Quick Actions */
.quick-actions {
  max-width: 1200px;
  margin: var(--sp-8) auto;
  padding: 0 var(--sp-5);
}
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.quick-action-card {
  background: var(--c-su);
  border-radius: var(--r-xl);
  padding: var(--sp-5) var(--sp-4);
  border: 2px solid var(--c-bo);
  box-shadow: var(--sh-sm);
  text-align: center;
  text-decoration: none;
  color: var(--c-tx);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.quick-action-card:hover, .quick-action-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--c-pr);
}
.quick-action-icon {
  font-size: 2.5rem;
  line-height: 1;
}
.quick-action-label {
  font-size: var(--tx-sm);
  font-weight: var(--fw-sb);
  color: var(--c-t2);
}

/* Vocab Carousel Improvements */
.vocab-carousel-progress {
  text-align: center;
  font-size: var(--tx-sm);
  font-weight: var(--fw-sb);
  color: var(--c-tm);
  margin-bottom: var(--sp-4);
}
.vocab-swipe-hint {
  display: none;
  text-align: center;
  font-size: var(--tx-xs);
  color: var(--c-tm);
  margin-top: var(--sp-3);
}
@media (max-width: 768px) {
  .vocab-swipe-hint { display: block; }
  .learning-hero-inner { grid-template-columns: 1fr; text-align: center; }
  .learning-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .learning-hero-v2 { padding-inline: var(--sp-4); }
  .learning-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .hero-stat-card { padding: var(--sp-3) var(--sp-2); border-radius: var(--r-lg); }
  .hero-stat-card strong { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .hero-stat-card span { font-size: clamp(0.72rem, 3.2vw, 0.86rem); line-height: 1.15; }
  .quick-actions-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .quick-action-card { padding: var(--sp-4) var(--sp-3); }
  .quick-action-icon { font-size: 2rem; }
}

/* Hero / header band for learning home */
.learning-hero {
  background:
    radial-gradient(circle at top right, rgba(76, 175, 80, 0.25), transparent 32rem),
    linear-gradient(135deg, var(--c-mu), var(--c-bg));
}

/* Stat / score cards */
.hero-stat-card,
.category-header,
.lesson-hero,
.score-card {
  background: linear-gradient(145deg, #FFFFFF 0%, #FFFDF7 100%);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
}

[data-theme="dark"] .hero-stat-card,
[data-theme="dark"] .category-header,
[data-theme="dark"] .lesson-hero,
[data-theme="dark"] .score-card {
  background: linear-gradient(145deg, #2A2720 0%, #1E1C18 100%);
}

.hero-stat-card {
  aspect-ratio: 1;
  padding: 2rem;
  min-width: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-stat-card strong {
  display: block;
  font-size: clamp(2.4rem, 10vw, 4.5rem);
  line-height: 1;
}

.hero-stat-card span {
  color: var(--c-t2);
  display: block;
  font-weight: var(--fw-b);
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .hero-stat-card {
    padding: var(--sp-3) var(--sp-2);
    border-radius: var(--r-lg);
  }

  .hero-stat-card strong {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }

  .hero-stat-card span {
    font-size: clamp(0.68rem, 3vw, 0.82rem);
    line-height: 1.1;
  }
}

/* Section kickers & overlines */
.section-kicker {
  color: var(--c-pr);
  font-size: var(--tx-xs);
  font-weight: var(--fw-b);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Panels */
.learning-panel,
.learning-score-card {
  background: linear-gradient(145deg, #FFFFFF 0%, #FFFDF7 100%);
  border-radius: var(--r-xl);
  border: 1px solid var(--c-bo);
  box-shadow: var(--sh-sm);
  padding: var(--sp-5);
}

[data-theme="dark"] .learning-panel,
[data-theme="dark"] .learning-score-card {
  background: linear-gradient(145deg, #2A2720 0%, #1E1C18 100%);
}

.learning-panel {
  margin-bottom: var(--sp-5);
}

.learning-panel-copy {
  margin-bottom: 0;
  color: var(--c-t2);
  font-size: var(--tx-lg);
  line-height: 1.6;
}

.learning-block {
  margin-bottom: var(--sp-6);
}

.learning-search {
  max-width: 56rem;
  margin: 0 auto var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--c-bo);
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, #FFFFFF 0%, #FFFDF7 100%);
  box-shadow: var(--sh-sm);
}

[data-theme="dark"] .learning-search {
  background: linear-gradient(145deg, #2A2720 0%, #1E1C18 100%);
}

.learning-search label {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--c-t2);
  font-weight: var(--fw-b);
}

.learning-search-row {
  display: flex;
  gap: var(--sp-3);
}

.learning-search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.9rem 1rem;
  border: 2px solid var(--c-bo);
  border-radius: var(--r-lg);
  background: var(--c-su);
  color: var(--c-tx);
  font: inherit;
}

.learning-search input:focus {
  border-color: var(--c-pr);
  box-shadow: 0 0 0 3px var(--c-mu);
  outline: none;
}

.learning-search-results {
  margin-bottom: var(--sp-6);
}

.learning-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-3);
}

.learning-result-card {
  display: block;
  padding: 1rem;
  border: 1px solid var(--c-bo);
  border-radius: var(--r-lg);
  background: var(--c-su);
  color: var(--c-tx);
  text-decoration: none;
  box-shadow: var(--sh-sm);
}

.learning-result-card:hover,
.learning-result-card:focus-visible {
  color: var(--c-tx);
  transform: translateY(-2px);
}

.learning-result-card span {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--c-pr);
  font-size: var(--tx-xs);
  font-weight: var(--fw-b);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.learning-result-card p {
  margin: 0.35rem 0 0;
  color: var(--c-t2);
}

.conversation-entry-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 210, 0, 0.18), transparent 7rem),
    linear-gradient(145deg, #FFFFFF 0%, #FFFDE7 100%);
  border-color: #FFD200;
}

.conversation-entry-card::after {
  content: "";
  position: absolute;
  right: -2rem;
  bottom: -2rem;
  width: 7rem;
  height: 7rem;
  border-radius: 999px;
  background: rgba(255, 210, 0, 0.18);
}

.conversation-entry-card .card-icon {
  background: #FFF9C4;
}

[data-theme="dark"] .conversation-entry-card {
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 210, 0, 0.22), transparent 7rem),
    linear-gradient(145deg, #2A2C15 0%, #1B1C10 100%);
}

.learning-section-head {
  margin-bottom: var(--sp-4);
}

.learning-section-head h2 {
  margin-bottom: var(--sp-2);
  color: var(--c-tx);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: var(--fw-sb);
}

.learning-section-head p {
  margin-bottom: 0;
  color: var(--c-tm);
}

/* Grids */
.learning-lesson-grid,
.learning-vocab-grid,
.learning-conversation-grid,
.learning-answer-list,
.learning-choice-grid {
  display: grid;
  gap: var(--sp-4);
}

.learning-lesson-grid,
.learning-vocab-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.learning-conversation-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.learning-overline {
  margin-bottom: var(--sp-2);
  color: var(--c-pr);
  font-size: var(--tx-xs);
  font-weight: var(--fw-b);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.learning-example-block {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-bo);
}

.learning-example-block p {
  margin-bottom: var(--sp-2);
}

.learning-example-translation,
.learning-answer-note,
.learning-empty-copy,
.learning-note {
  color: var(--c-tm);
}

.learning-note {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--c-bo);
  font-size: 0.95rem;
}

.learning-choice-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.learning-action-row,
.learning-carousel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.learning-action-row {
  margin-top: var(--sp-4);
}

.learning-carousel-actions {
  justify-content: center;
  margin-top: var(--sp-4);
}

/* Cards */
.topic-card,
.lesson-tile,
.vocab-mini-card,
.big-vocab-card,
.quiz-question {
  background: linear-gradient(145deg, #FFFFFF 0%, #FFFDF7 100%);
  border: 0;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}

[data-theme="dark"] .topic-card,
[data-theme="dark"] .lesson-tile,
[data-theme="dark"] .vocab-mini-card,
[data-theme="dark"] .big-vocab-card,
[data-theme="dark"] .quiz-question {
  background: linear-gradient(145deg, #2A2720 0%, #1E1C18 100%);
}

.topic-card {
  color: var(--c-tx);
  padding: 1.5rem;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.topic-card:hover,
.topic-card:focus-visible {
  color: var(--c-tx);
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}

.topic-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  border-radius: var(--r-xl);
  background: var(--c-mu);
  font-size: 2rem;
}

.lesson-tile,
.vocab-mini-card,
.quiz-question {
  padding: 1.25rem;
}

.lesson-tile h2,
.vocab-mini-card h3,
.quiz-question legend {
  color: var(--c-tx);
  font-size: var(--tx-lg);
  font-weight: var(--fw-sb);
}

.lesson-tile p,
.vocab-mini-card p,
.quiz-question p {
  color: var(--c-t2);
}

/* Conversation cards */
.conversation-practice {
  scroll-margin-top: 5rem;
}

.conversation-card {
  overflow: hidden;
  border: 0;
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, #FFFFFF 0%, #FFFDF7 100%);
  box-shadow: var(--sh-md);
}

[data-theme="dark"] .conversation-card {
  background: linear-gradient(145deg, #2A2720 0%, #1E1C18 100%);
}

.conversation-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, var(--c-pr), var(--c-ph));
  color: var(--c-ti);
}

.conversation-card-header p {
  color: rgba(255, 255, 255, 0.88);
}

.conversation-level {
  flex: 0 0 auto;
  padding: 0.35rem 0.65rem;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.22);
  font-size: 0.78rem;
  font-weight: var(--fw-b);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.conversation-path {
  margin-bottom: 0.35rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.78rem;
  font-weight: var(--fw-b);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.conversation-lines {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  background: linear-gradient(180deg, var(--c-bg), #FFF7ED);
}

[data-theme="dark"] .conversation-lines {
  background: linear-gradient(180deg, var(--c-bg), #1E1C18);
}

.conversation-line {
  max-width: 92%;
  padding: 1rem;
  border-radius: var(--r-xl);
  background: var(--c-su);
  box-shadow: var(--sh-sm);
}

.conversation-line.speaker-b {
  justify-self: end;
  background: linear-gradient(145deg, #E8F5E9 0%, #D4EDDA 100%);
}

[data-theme="dark"] .conversation-line.speaker-b {
  background: linear-gradient(145deg, #1B3A2F 0%, #142D24 100%);
}

.conversation-speaker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
  margin-bottom: 0.4rem;
}

.conversation-speaker span {
  color: var(--c-tm);
  font-size: 0.85rem;
  font-weight: var(--fw-b);
}

.conversation-shona {
  margin-bottom: 0.25rem;
  color: var(--c-tx);
  font-size: 1.15rem;
  font-weight: var(--fw-b);
}

.conversation-pronunciation {
  margin-bottom: 0.35rem;
  color: var(--c-pr);
  font-size: 0.95rem;
  font-weight: var(--fw-sb);
}

.conversation-english {
  margin-bottom: 0;
  color: var(--c-t2);
}

.conversation-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  padding: 1.25rem;
  border-top: 1px solid var(--c-bo);
  background: var(--c-su);
}

.conversation-list-grid .conversation-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.conversation-list-grid .conversation-lines {
  flex: 1 1 auto;
}

/* Vocab images */
.vocab-card-image,
.big-vocab-image,
.vocab-image-placeholder {
  width: 100%;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--c-mu);
}

.vocab-card-image {
  height: clamp(180px, 40vw, 280px);
}

.big-vocab-image {
  max-width: 22rem;
  height: clamp(200px, 50vw, 320px);
}

.vocab-image-placeholder {
  display: grid;
  place-items: center;
  height: clamp(180px, 40vw, 280px);
  color: var(--c-pr);
  font-size: clamp(2.5rem, 16vw, 5rem);
  font-weight: var(--fw-b);
}

.big-vocab-card .vocab-image-placeholder {
  max-width: 22rem;
  margin: 0 auto;
}

.pronunciation {
  color: var(--c-pr);
  font-weight: var(--fw-sb);
}

/* Audio player */
.learning-audio {
  margin: 0.75rem 0 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--c-bo);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--c-mu), #FFFDF7);
}

[data-theme="dark"] .learning-audio {
  background: linear-gradient(180deg, var(--c-mu), #1E1C18);
}

.learning-audio-compact {
  padding: 0.7rem 0.8rem;
}

.learning-audio-label-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.45rem;
}

.learning-audio-label {
  color: var(--c-pr);
  font-size: 0.82rem;
  font-weight: var(--fw-b);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.learning-audio-caption {
  color: var(--c-t2);
  font-size: 0.9rem;
  font-weight: var(--fw-sb);
}

.learning-audio-player {
  width: 100%;
  min-height: 2.75rem;
}

/* Card practice section */
.card-practice {
  background: linear-gradient(180deg, var(--c-bg), #FFF7ED);
  min-height: 72vh;
}

[data-theme="dark"] .card-practice {
  background: linear-gradient(180deg, var(--c-bg), #2A2018);
}

.big-vocab-card {
  max-width: 34rem;
  min-height: 26rem;
  padding: 2rem;
  text-align: center;
  margin: 0 auto;
}

.big-vocab-card h2 {
  color: var(--c-se);
  font-size: clamp(2.5rem, 13vw, 4.5rem);
  font-weight: var(--fw-b);
}

.big-vocab-card .translation {
  font-size: 1.4rem;
  font-weight: var(--fw-sb);
}

/* Quiz */
.quiz-progress {
  width: 100%;
  height: 8px;
  background: var(--n-200);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-bottom: var(--sp-3);
}
.quiz-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--c-pr), var(--c-ac));
  border-radius: var(--r-full);
  transition: width 0.4s ease;
}
.quiz-progress-text {
  text-align: center;
  font-size: var(--tx-sm);
  font-weight: var(--fw-sb);
  color: var(--c-tm);
  margin-bottom: var(--sp-4);
}
.quiz-nav-row {
  justify-content: center;
}

.quiz-form.is-enhanced .quiz-question[hidden] {
  display: none;
}

.quiz-choice {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.9rem 1rem;
  border: 2px solid var(--c-bo);
  border-radius: var(--r-lg);
  background: var(--c-su);
  cursor: pointer;
}

.quiz-choice:focus-within {
  border-color: var(--c-pr);
  box-shadow: 0 0 0 3px var(--c-mu);
}
.quiz-question.is-unanswered {
  border-color: var(--c-se);
  box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.15);
  animation: shake 0.4s ease both;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.quiz-choice input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--c-pr);
}

/* Quiz — Wide desktop layout */
@media (min-width: 1200px) {
  .quiz-layout {
    max-width: 1400px;
  }
  .quiz-question {
    padding: 2rem;
  }
  .quiz-question legend {
    font-size: var(--tx-xl);
  }
  .quiz-layout .learning-choice-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  .quiz-choice {
    padding: 1.1rem 1.25rem;
    font-size: var(--tx-lg);
    min-height: 4rem;
  }
  .quiz-choice input {
    width: 1.35rem;
    height: 1.35rem;
  }
}

@media (min-width: 1200px) and (min-height: 700px) {
  .quiz-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 220px);
  }
}

/* Vanilla vocabulary carousel */
.vocab-carousel {
  position: relative;
  overflow: hidden;
}

.vocab-carousel-inner {
  display: flex;
  transition: transform 0.4s ease;
}

.vocab-carousel-item {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Responsive — Tablet */
@media (max-width: 992px) {
  .learning-lesson-grid,
  .learning-vocab-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .learning-conversation-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .hero-stat-card strong {
    font-size: clamp(2rem, 8vw, 3.5rem);
  }
}

/* Responsive — Small */
@media (max-width: 575.98px) {
  .hero-stat-card,
  .category-header,
  .lesson-hero,
  .score-card {
    border-radius: var(--r-lg);
  }

  .big-vocab-card {
    min-height: 24rem;
    padding: 1.5rem;
  }

  .learning-panel,
  .learning-score-card {
    border-radius: var(--r-lg);
    padding: var(--sp-4);
  }

  .conversation-card-header {
    flex-direction: column;
  }

  .conversation-line {
    max-width: 100%;
  }

  .learning-choice-grid,
  .learning-conversation-grid,
  .learning-lesson-grid,
  .learning-vocab-grid {
    grid-template-columns: 1fr;
  }

  .learning-action-row,
  .learning-carousel-actions {
    flex-direction: column;
  }

  .learning-action-row .nav-btn,
  .learning-action-row .sec-link,
  .learning-carousel-actions .nav-btn,
  .learning-carousel-actions .sec-link,
  .learning-carousel-actions .auto-speak-toggle {
    width: 100%;
  }

  .learning-audio-label-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .learning-search-row {
    flex-direction: column;
  }

  .learning-search-row .nav-btn {
    width: 100%;
  }

  .conversation-card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .conversation-card-actions .nav-btn,
  .conversation-card-actions .sec-link {
    width: 100%;
  }

  /* Fix masonry on mobile */
  .clay-masonry {
    columns: 1;
    column-gap: var(--sp-3);
  }

  .clay-masonry-item {
    margin-bottom: var(--sp-3);
  }
}