/* ==================================================
   UNIVERSAL SANSKRIT LESSON LAYOUT
   Wrapper: .lesson-output
   ================================================== */

.lesson-output{
  font-family: "Noto Serif Devanagari","Mangal",serif;
  font-size: 1.25rem;
  line-height: 1.85;
  color:#111;
  max-width:1100px;
  margin:0 auto;
}

/* ---------------- Headings ---------------- */

.lesson-output h2{
  font-size:1.6rem;
  font-weight:800;
  color:#1a237e;
  margin:2rem 0 1rem;
}

.lesson-output h3{
  font-size:1.35rem;
  color:#4a148c;
  margin:1.6rem 0 0.8rem;
}

/* Pill / badge heading (Line by Lesson, Vocabulary etc.) */
.lesson-output .section-pill{
  display:inline-block;
  background:#ffe9a8;
  color:#222;
  padding:6px 16px;
  border-radius:999px;
  font-weight:700;
  margin:1.2rem 0;
}

/* ---------------- Line by Line Cards ---------------- */

.lesson-output .line-card{
  background:#f8f9ff;
  border-left:5px solid #c5cae9;
  border-radius:14px;
  padding:14px 16px;
  margin:14px 0;
}

/* Text roles */
.lesson-output .sanskrit{
  font-weight:700;
  color:#000;
  display:block;
  margin-bottom:6px;
}

.lesson-output .pron{
  color:#1e64c8;
  font-style:italic;
  display:block;
  margin-bottom:6px;
}

.lesson-output .meaning{
  color:#0a7a28;
  display:block;
}

/* ---------------- Paragraph / Biography ---------------- */

.lesson-output .para{
  background:#ffffff;
  border-radius:14px;
  padding:16px 18px;
  margin:18px 0;
  box-shadow:0 6px 18px rgba(0,0,0,0.05);
}

/* ---------------- Vocabulary Table ---------------- */

.lesson-output table{
  width:100%;
  border-collapse:collapse;
  margin:20px 0;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
}

.lesson-output table th{
  background:#dfe3ff;
  color:#1a237e;
  padding:12px;
  font-weight:800;
  border:1px solid #cfd9e6;
}

.lesson-output table td{
  border:1px solid #e0e0e0;
  padding:10px 12px;
  vertical-align:top;
}

.lesson-output table td:nth-child(2){
  color:#1e64c8;
  font-style:italic;
}

.lesson-output table td:nth-child(3){
  color:#0a7a28;
}

/* ---------------- Question – Answer Layout ---------------- */

.lesson-output .qa-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;
  margin:1rem 0;
}

.lesson-output .card{
  background:#ffffff;
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 6px 16px rgba(0,0,0,0.06);
}

.lesson-output .card .question{
  font-weight:800;
  color:#1a237e;
  margin-bottom:0.6rem;
}

.lesson-output .answer-line{
  margin-top:0.4rem;
}

.lesson-output .answer-line .label{
  font-weight:700;
  margin-right:4px;
}

/* ---------------- Fill in the blanks ---------------- */

.lesson-output .blank{
  border-bottom:2px dotted #555;
  padding:0 6px;
  display:inline-block;
  min-width:80px;
}

/* ---------------- Moral / Saar ---------------- */

.lesson-output .moral-box{
  margin:2rem 0;
  padding:16px 18px;
  background:#e3f2fd;
  border-left:6px solid #64b5f6;
  border-radius:14px;
}

.lesson-output .moral-box h4{
  margin:0 0 8px;
  color:#0b3a66;
  font-size:1.2rem;
}

/* ---------------- Images inside lesson ---------------- */

.lesson-output img{
  max-width:100%;
  border-radius:12px;
  margin:12px 0;
}

/* ---------------- Responsive ---------------- */

@media (max-width:600px){
  .lesson-output{
    font-size:1.15rem;
  }
}