/* ── Editor's comment ─────────────────────────────────────────────────────
   A named editor's advice in a speech bubble beside their photo.
   Markup: btf_editor_comment() in inc/editor-comment.php. Used by the
   acf/btf-editor-comment block on any page, and by the review spots it can
   attach to (score cards, review sections). Theme tokens only.
   Mobile first: the person sits above the bubble; from 640px the photo
   column sits beside it. */

.editor-comment {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

/* ── The person ── */
.editor-comment-person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.editor-comment-avatar {
  display: block;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--felt-bg);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 2px var(--brass), 0 8px 18px rgba(28, 24, 20, 0.12);
}

.editor-comment-avatar--initials {
  display: grid;
  place-items: center;
  font-family: 'Instrument Serif', serif;
  font-size: 1.4rem;
  color: var(--felt);
}

.editor-comment-who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.editor-comment-name {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
}
.editor-comment-name:hover { color: var(--felt); text-decoration: underline; }

.editor-comment-role {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--felt-bg);
  color: var(--felt);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
}

/* ── The bubble ── */
.editor-comment-bubble {
  position: relative;
  min-width: 0;
  padding: 18px 18px 20px;
  background: var(--felt-bg);
  border: 1px solid rgba(27, 58, 45, 0.14);
  border-radius: var(--radius);
  box-shadow: 0 4px 0 rgba(27, 58, 45, 0.07);
}

/* Tail pointing at the photo: up on phones, left from 640px. */
.editor-comment-bubble::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 24px;
  width: 14px;
  height: 14px;
  background: var(--felt-bg);
  border-top: 1px solid rgba(27, 58, 45, 0.14);
  border-left: 1px solid rgba(27, 58, 45, 0.14);
  transform: rotate(45deg);
}

/* Closing quote mark, top right. */
.editor-comment-bubble::after {
  content: '\201D';
  position: absolute;
  top: 6px;
  right: 14px;
  font-family: 'Instrument Serif', serif;
  font-size: 3rem;
  line-height: 1;
  color: var(--felt3);
  opacity: 0.28;
  pointer-events: none;
}

.editor-comment-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid rgba(27, 58, 45, 0.1);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--felt);
}

/* Brass sparkle before the tag. */
.editor-comment-label::before {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0l1.35 4.65L12 6l-4.65 1.35L6 12 4.65 7.35 0 6l4.65-1.35z' fill='%239A7B3C'/%3E%3C/svg%3E") center / contain no-repeat;
}

.editor-comment-text {
  margin-top: 14px;
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--ink2);
}
.editor-comment-text p { margin: 0 0 0.8em; }
.editor-comment-text p:last-child { margin-bottom: 0; }

/* ── Where it sits ──
   Extra room above and below (25px more than the surrounding rhythm), so
   the comment reads as a short break from the article. */

/* Its own section, when the block is placed between sections. */
.editor-comment-section { padding-top: 57px; padding-bottom: 57px; }

/* At the end of a review section, before its sources; or inside another section.
   The bottom margin collapses with the sources note's own 18px, so 43px
   gives 25px more than before. */
.editor-comment-slot { margin: 57px 0 43px; }

/* Under a review score card: a full row of the cards grid. Dense packing
   lets the card after it fill the gap, so the pairs of cards stay intact
   and the comment lands under the row holding its card. */
.review-score-reason-grid { grid-auto-flow: row dense; }
.editor-comment-slot--grid { grid-column: 1 / -1; margin: 29px 0; }

/* Shown in the block editor when the comment is attached elsewhere. */
.editor-comment-elsewhere {
  padding: 12px 16px;
  border: 1px dashed var(--rule);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--ink3);
}

/* ── From 640px: photo column beside the bubble ── */
@media (min-width: 640px) {
  .editor-comment { grid-template-columns: 176px minmax(0, 1fr); gap: 22px; }
  .editor-comment-person { flex-direction: column; gap: 10px; padding-top: 2px; text-align: center; }
  .editor-comment-avatar { width: 76px; height: 76px; }
  .editor-comment-avatar--initials { font-size: 1.7rem; }
  .editor-comment-who { align-items: center; gap: 6px; }
  .editor-comment-bubble { padding: 20px 28px 24px; }
  .editor-comment-bubble::before {
    top: 30px;
    left: -8px;
    border-top: 0;
    border-bottom: 1px solid rgba(27, 58, 45, 0.14);
  }
  .editor-comment-bubble::after { top: 8px; right: 22px; font-size: 3.6rem; }
  .editor-comment-text { padding-right: 24px; font-size: 1rem; }
  .editor-comment-section { padding-top: 65px; padding-bottom: 65px; }
}