<figure class="cbq-expand">
  <blockquote>
    <p class="cbq-expand-text">
      "Software engineering is not really about computers. It's about people: the people you build
      for, the people you build with, and the future-you who has to maintain whatever you ship
      today. Every line of code is a little contract with all of them."
    </p>
  </blockquote>
  <button type="button" class="cbq-expand-btn" aria-expanded="false">Read more</button>
  <figcaption>— Jen Rodriguez, Staff Engineer</figcaption>
</figure>

.cbq-expand {
  max-width: 340px;
  padding: 22px;
  background: #18181f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  font-family: system-ui, sans-serif;
  color: #f0eeff;
}

.cbq-expand blockquote {
  margin: 0;
}

.cbq-expand-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: -webkit-line-clamp 0.3s ease;
}

.cbq-expand-text.is-open {
  -webkit-line-clamp: 99;
}

.cbq-expand-btn {
  margin-top: 10px;
  padding: 4px 10px;
  background: transparent;
  color: #a78bfa;
  border: 1px solid rgba(167, 139, 250, 0.4);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.cbq-expand-btn:hover {
  background: rgba(167, 139, 250, 0.1);
  border-color: #a78bfa;
}

.cbq-expand-btn:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}

.cbq-expand figcaption {
  margin-top: 14px;
  font-size: 12px;
  color: #b8b6d4;
}

(function () {
  document.querySelectorAll(".cbq-expand").forEach(function (root) {
    var btn = root.querySelector(".cbq-expand-btn");
    var text = root.querySelector(".cbq-expand-text");
    if (!btn || !text) return;
    btn.addEventListener("click", function () {
      var open = text.classList.toggle("is-open");
      btn.setAttribute("aria-expanded", String(open));
      btn.textContent = open ? "Read less" : "Read more";
    });
  });
})();