/* ========== Homework Block (optional) ========== */
:root {
  --hw_bg: #f1f5f9;
  --hw_border: #64748b;
  --hw_title: #334155;
  --hw_text: #334155;
  --hw_radius: 14px;
  --hw_badge_bg: #e2e8f0;
  --hw_badge_text: #475569;
  --hw_reflection_bg: rgba(100, 116, 139, 0.10);
  --hw_reflection_border: rgba(100, 116, 139, 0.35);
  --hw_fold_bg: #ffffff;

  --hw_num_1: #0e7490; /* teal */
  --hw_num_2: #7c3aed; /* violet */
  --hw_num_3: #d97706; /* amber */
  --hw_num_4: #db2777; /* pink */
  --hw_num_color: #ffffff;
  --hw_step_card_bg: #ffffff;
  --hw_step_card_border: #e2e8f0;
}

/* Main container — full dashed border + folded corner, unlike the left-accent
   blocks used elsewhere on the site (lesson_activity, lesson_case, etc.) */
.lesson_homework {
  position: relative;
  background: var(--hw_bg);
  border: 2px dashed var(--hw_border);
  padding: 20px 22px;
  border-radius: var(--hw_radius);
  margin-bottom: 25px;
  overflow: hidden;
}

/* folded-corner effect, top-right, like a torn-off notebook page */
.lesson_homework::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 26px 26px 0;
  border-color: transparent var(--hw_fold_bg) transparent transparent;
  filter: drop-shadow(-1px 1px 2px rgba(51, 65, 85, 0.2));
}

/* Header row: title + optional badge */
.lesson_homework_header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.lesson_homework_title {
  margin: 0;
  color: var(--hw_title);
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lesson_homework_title::before {
  content: "\1F4DD"; /* memo / notebook icon */
  font-size: 1.2rem;
}

.lesson_homework_badge {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--hw_badge_bg);
  color: var(--hw_badge_text);
  padding: 3px 10px;
  border-radius: 100px;
  white-space: nowrap;
}

/* Plain intro / instruction text */
.lesson_homework_text {
  margin: 0.6rem 0;
  line-height: 1.6;
  font-size: 1.2rem;
  color: var(--hw_text);
}

.lesson_homework_text + .lesson_homework_text {
  margin-top: 0.8rem;
}

/* Numbered steps — colorful tilted number badges instead of plain list markers */
.lesson_homework_steps {
  list-style: none;
  padding-left: 0;
  margin: 0.9rem 0;
  counter-reset: hw_step;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lesson_homework_steps li {
  counter-increment: hw_step;
  position: relative;
  padding: 12px 16px 12px 56px;
  margin-bottom: 0;
  background: var(--hw_step_card_bg);
  border: 1px solid var(--hw_step_card_border);
  border-radius: 10px;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--hw_text);
  box-shadow: 0 1px 3px rgba(51, 65, 85, 0.08);
}

.lesson_homework_steps li::before {
  content: counter(hw_step);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  width: 30px;
  height: 30px;
  background: var(--hw_num_1);
  color: var(--hw_num_color);
  font-weight: 800;
  font-size: 1rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 2px 4px rgba(51, 65, 85, 0.3);
}

.lesson_homework_steps li:nth-child(2)::before {
  background: var(--hw_num_2);
  transform: translateY(-50%) rotate(7deg);
}
.lesson_homework_steps li:nth-child(3)::before {
  background: var(--hw_num_3);
  transform: translateY(-50%) rotate(-6deg);
}
.lesson_homework_steps li:nth-child(4)::before {
  background: var(--hw_num_4);
  transform: translateY(-50%) rotate(8deg);
}
.lesson_homework_steps li:nth-child(4n+1)::before {
  background: var(--hw_num_1);
}
.lesson_homework_steps li:nth-child(4n+2)::before {
  background: var(--hw_num_2);
}
.lesson_homework_steps li:nth-child(4n+3)::before {
  background: var(--hw_num_3);
}
.lesson_homework_steps li:nth-child(4n+4)::before {
  background: var(--hw_num_4);
}

/* Closing reflection question, visually distinct */
.lesson_homework_reflection {
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  background: var(--hw_reflection_bg);
  border-radius: 10px;
  border: 1px solid var(--hw_reflection_border);
  font-size: 1.15rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--hw_text);
}

/* ---------- Mobile adaptation ---------- */
@media (max-width: 480px) {
  .lesson_homework {
    padding: 16px 16px;
  }
  .lesson_homework_title {
    font-size: 1.2rem;
  }
}
/* ---------- Homework Block End ---------- */