/**
 * OSAKAWIRE - Japanese Learning Section CSS
 */

/* ═══════════════════════════════════════════════════════════════
   LEARN HERO
   ═══════════════════════════════════════════════════════════════ */

.learn-hero {
  text-align: center;
  padding: var(--space-2xl) 0;
  margin-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--border);
}

.learn-hero h1 {
  font-family: var(--font-editorial);
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  color: var(--ink);
}

.learn-hero .lead {
  font-family: var(--font-editorial);
  font-size: 1.2rem;
  color: var(--ink-light);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   LEARN SECTIONS & CARDS
   ═══════════════════════════════════════════════════════════════ */

.learn-section {
  margin-bottom: var(--space-2xl);
}

.learn-section h2 {
  font-family: var(--font-editorial);
  font-size: 1.5rem;
  margin-bottom: var(--space-lg);
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: var(--space-sm);
  display: inline-block;
}

.learn-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.learn-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-xl);
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  position: relative;
}

.learn-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.learn-card.featured {
  border-color: var(--accent);
  border-width: 2px;
  background: linear-gradient(135deg, var(--paper) 0%, var(--accent-light) 100%);
}

.learn-card .card-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: var(--space-md);
}

.learn-card h3 {
  font-family: var(--font-editorial);
  font-size: 1.25rem;
  margin: 0 0 var(--space-sm);
  color: var(--ink);
}

.learn-card .title-ja {
  font-family: var(--font-jp);
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin: 0 0 var(--space-sm);
}

.learn-card p {
  color: var(--ink-light);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.5;
}

.learn-card .phrase-count {
  display: inline-block;
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
}

.difficulty-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 4px;
}

.learn-card .difficulty-badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
}

.difficulty-badge.beginner { background: #e8f5e9; color: #2e7d32; }
.difficulty-badge.intermediate { background: #fff3e0; color: #ef6c00; }
.difficulty-badge.advanced { background: #fce4ec; color: #c2185b; }

/* ═══════════════════════════════════════════════════════════════
   SITUATION GRID
   ═══════════════════════════════════════════════════════════════ */

.situation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-md);
}

.situation-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-lg);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: all 0.2s;
}

.situation-link:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.situation-link span {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}

/* ═══════════════════════════════════════════════════════════════
   QUICK REFERENCE
   ═══════════════════════════════════════════════════════════════ */

.quick-ref {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.ref-card {
  background: var(--paper-warm);
  border-radius: 8px;
  padding: var(--space-lg);
}

.ref-card h4 {
  font-family: var(--font-editorial);
  margin: 0 0 var(--space-md);
  color: var(--ink);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
}

.compare-table td {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-jp);
}

.compare-table td:first-child { color: var(--accent); font-weight: 500; }
.compare-table td:last-child { font-family: var(--font-body); color: var(--ink-muted); font-size: 0.9rem; }

.emergency-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.emergency-list li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
}

.emergency-list li:last-child { border-bottom: none; }
.emergency-list strong { font-family: var(--font-mono); color: var(--accent); margin-right: var(--space-sm); }

/* ═══════════════════════════════════════════════════════════════
   LEARN ARTICLE
   ═══════════════════════════════════════════════════════════════ */

.learn-article {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-2xl) 0;
}

.learn-article h1 {
  font-family: var(--font-editorial);
  font-size: 2.25rem;
  margin-bottom: var(--space-sm);
  color: var(--ink);
}

.learn-article .subtitle {
  font-family: var(--font-jp);
  font-size: 1.5rem;
  color: var(--ink-muted);
  margin-bottom: var(--space-xl);
}

.learn-article h2 {
  font-family: var(--font-editorial);
  font-size: 1.5rem;
  margin: var(--space-2xl) 0 var(--space-lg);
  color: var(--ink);
}

.learn-article h3 {
  font-family: var(--font-editorial);
  font-size: 1.15rem;
  margin: var(--space-xl) 0 var(--space-md);
  color: var(--ink);
}

.intro-box {
  background: var(--paper-warm);
  border-left: 4px solid var(--accent);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  border-radius: 0 8px 8px 0;
}

.intro-box p {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: 1.1rem;
  line-height: 1.6;
}

.tip-box {
  background: #e3f2fd;
  border-left: 4px solid #1976d2;
  padding: var(--space-md);
  margin: var(--space-lg) 0;
  border-radius: 0 8px 8px 0;
}

/* ═══════════════════════════════════════════════════════════════
   PHRASE CARDS
   ═══════════════════════════════════════════════════════════════ */

.phrase-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.phrase-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-lg);
}

.phrase-card:hover { border-color: var(--accent); }

.phrase-card.detailed {
  display: flex;
  gap: var(--space-lg);
}

.phrase-number {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--accent);
  opacity: 0.5;
  min-width: 40px;
}

.phrase-content { flex: 1; }

.phrase-japanese { margin-bottom: var(--space-sm); }

.phrase-japanese .kanji,
.japanese {
  font-family: var(--font-jp);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
  display: block;
}

.phrase-japanese .hiragana {
  font-family: var(--font-jp);
  font-size: 0.95rem;
  color: var(--ink-muted);
  display: block;
  margin-top: var(--space-xs);
}

.phrase-romaji, .romaji {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--ink-light);
  margin-bottom: var(--space-sm);
}

.phrase-english {
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: var(--space-sm);
}

.phrase-literal {
  font-style: italic;
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin-bottom: var(--space-sm);
}

.phrase-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}

.formality-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 4px;
}

.formality-tag.formal { background: #e8eaf6; color: #3f51b5; }
.formality-tag.polite { background: #e8f5e9; color: #388e3c; }
.formality-tag.casual { background: #fff8e1; color: #f57c00; }
.formality-tag.rough { background: #ffebee; color: #d32f2f; }

.standard-note, .kansai-note {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-muted);
  background: var(--paper-warm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 4px;
}

.phrase-notes {
  font-size: 0.9rem;
  color: var(--ink-light);
  line-height: 1.6;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════
   GRAMMAR TABLES
   ═══════════════════════════════════════════════════════════════ */

.grammar-table, .verb-table, .decision-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-lg) 0;
}

.grammar-table th, .verb-table th, .decision-table th {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  background: var(--paper-warm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.grammar-table td, .verb-table td, .decision-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-jp);
}

/* ═══════════════════════════════════════════════════════════════
   FORMALITY LEVELS
   ═══════════════════════════════════════════════════════════════ */

.formality-level {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.formality-level h3 { margin: 0 0 var(--space-sm); }

.level-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 4px;
  margin-left: var(--space-sm);
  vertical-align: middle;
}

.level-tag.formal { background: #e8eaf6; color: #3f51b5; }
.level-tag.polite { background: #e8f5e9; color: #388e3c; }
.level-tag.casual { background: #fff8e1; color: #f57c00; }
.level-tag.rough { background: #ffebee; color: #d32f2f; }

.example-box {
  background: var(--paper-warm);
  padding: var(--space-md);
  border-radius: 8px;
  margin-top: var(--space-md);
}

.example-box .ja { font-family: var(--font-jp); font-size: 1.25rem; margin: 0 0 var(--space-xs); }
.example-box .rom { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-muted); margin: 0 0 var(--space-xs); }
.example-box .en { font-size: 0.9rem; color: var(--ink-light); margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   DIALOGUE
   ═══════════════════════════════════════════════════════════════ */

.dialogue-box {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-lg);
}

.dialogue-line {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border);
}

.dialogue-line:last-child { border-bottom: none; }

.speaker-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--ink-muted);
  min-width: 80px;
}

.speaker-a .speaker-label { color: var(--accent); }
.speaker-b .speaker-label { color: #1976d2; }

.line-content { flex: 1; }
.line-ja { font-family: var(--font-jp); font-size: 1.1rem; display: block; margin-bottom: var(--space-xs); }
.line-rom { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-muted); display: block; margin-bottom: var(--space-xs); }
.line-en { font-size: 0.9rem; color: var(--ink-light); display: block; }

/* ═══════════════════════════════════════════════════════════════
   CULTURAL NOTES
   ═══════════════════════════════════════════════════════════════ */

.cultural-notes {
  background: #fef3e2;
  border-radius: 8px;
  padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-2xl);
  list-style: none;
}

.cultural-notes li {
  position: relative;
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

.cultural-notes li:last-child { margin-bottom: 0; }
.cultural-notes li::before { content: '💡'; position: absolute; left: calc(-1 * var(--space-xl)); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .learn-hero h1 { font-size: 1.75rem; }
  .learn-cards { grid-template-columns: 1fr; }
  .phrase-card.detailed { flex-direction: column; }
  .phrase-number { font-size: 1rem; margin-bottom: var(--space-sm); }
  .quick-ref { grid-template-columns: 1fr; }
}