/* ================================================================
   writing-task2/had-better-nuance — local.css
   ================================================================ */

/* ----------------------------------------------------------------
   Wrong / Correct Example Blocks
   ---------------------------------------------------------------- */
.hbn-ex {
  border-radius: 8px;
  padding: .9rem 1.2rem;
  margin: .6rem 0;
}
.hbn-ex__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: 'Raleway', sans-serif;
  margin-bottom: .5rem;
}
.hbn-ex--wrong {
  background: rgba(229, 115, 115, .07);
}
.hbn-ex--wrong .hbn-ex__label { color: #c62828; }
.hbn-ex--correct {
  background: rgba(70, 162, 218, .07);
}
.hbn-ex--correct .hbn-ex__label { color: var(--blue); }
.hbn-ex__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.hbn-ex__list li {
  font-size: .92rem;
  line-height: 1.75;
  padding-left: 1.2rem;
  position: relative;
}
.hbn-ex--wrong .hbn-ex__list li::before {
  content: '✗';
  position: absolute;
  left: 0;
  color: #e57373;
  font-size: .8rem;
  line-height: 1.75;
}
.hbn-ex--correct .hbn-ex__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--lb);
  font-size: .8rem;
  line-height: 1.75;
}

@media (max-width: 640px) {
  .hbn-ex { padding: .75rem 1rem; }
}