/* components/clamped-text.css */

/* Texto cortado con "ver más…" */
/* contenedor del texto: verde un poco más claro que la tarjeta.
   el fondo va acá (no en el <p>) para que "ver más" quede dentro y solo este bloque se estire. */
.clamp {
  padding: 8px 10px;
  background: #154236;
  background: color-mix(in srgb, var(--surface-card) 85%, white);
  border-radius: var(--radius-sm);
}

.clamp-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.clamp.is-expanded .clamp-text {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.clamp-more {
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  cursor: pointer;
}

.clamp-more[hidden] {
  display: none;
}

/* Home: avatar chico, de la altura del nombre, a la derecha */
.recent-comment-card .comment-avatar {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-size: 0.6rem;
}

.recent-comment-card .clamp-text {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}