/* Blog2023 R20: the labelled opening dialogue only. */
.b23-qa {
  display: grid;
  gap: .9rem;
  margin-block: 1.4rem 1.6rem;
}

.b23-qa .b23-qa-row {
  --qa-accent: #096aa9;
  --qa-border: #88c9ef;
  --qa-background: #eaf7ff;
  --qa-text: #113950;
  display: flex;
  align-items: start;
  gap: .8rem;
}

.b23-qa .b23-qa-row--answer {
  --qa-accent: #ba315b;
  --qa-border: #ef9cb6;
  --qa-background: #fff0f4;
  --qa-text: #56283a;
  flex-direction: row-reverse;
}

.b23-qa .b23-qa-icon {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 50%;
  background: var(--qa-accent);
  color: #fff;
  font: 800 1.58rem/1 system-ui, sans-serif;
}

.b23-qa .b23-qa-icon::after {
  position: absolute;
  inset: auto -.18rem .14rem auto;
  width: .78rem;
  height: .65rem;
  background: var(--qa-accent);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  content: "";
}

.b23-qa .b23-qa-row--answer .b23-qa-icon::after {
  inset: auto auto .14rem -.18rem;
  transform: scaleX(-1);
}

.b23-qa .b23-qa-row .b23-qa-bubble {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: .65rem 1rem;
  border: 1px solid var(--qa-border);
  border-radius: 1.12rem;
  background: var(--qa-background);
  color: var(--qa-text);
  font-weight: 650;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.b23-qa .b23-qa-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .b23-qa .b23-qa-row { gap: .6rem; }
  .b23-qa .b23-qa-icon { width: 2.12rem; height: 2.12rem; font-size: 1.28rem; }
  .b23-qa .b23-qa-row .b23-qa-bubble { padding: .45rem .72rem; border-radius: .85rem; }
}

@media (forced-colors: active) {
  .b23-qa .b23-qa-icon { border: 1px solid CanvasText; }
  .b23-qa .b23-qa-icon::after { content: none; }
}