.threads-page {
  /* Same dot grid as the home page; the feed card below stays solid white. */
  background: #fff radial-gradient(circle, #e0e0e0 1px, transparent 1px) 0 0 / 24px 24px;
  padding: 48px 16px 96px;
}

.threads-feed {
  max-width: 620px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #c9c9c9;
  border-radius: 20px;
  overflow: hidden;
}

/* Single post: the card plus a back button sitting in the gutter to its left. */
.threads-single {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
}

.threads-back {
  position: absolute;
  top: 16px;
  right: 100%;
  margin-right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #f2f2f2;
  color: #444;
  transition: background 0.15s ease, color 0.15s ease;
}

.threads-back:hover,
.threads-back:focus-visible {
  background: #e6e6e6;
  color: #111;
}

.threads-back svg {
  width: 20px;
  height: 20px;
}

.threads-back::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  padding: 6px 12px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 2;
}

.threads-back:hover::after,
.threads-back:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%);
}

/* No gutter beside the card on narrow screens: the button moves above it. */
@media (max-width: 860px) {
  .threads-back {
    position: relative;
    top: auto;
    right: auto;
    margin: 0 0 12px;
  }

  .threads-back::after {
    left: 0;
    transform: translateY(-2px);
  }

  .threads-back:hover::after,
  .threads-back:focus-visible::after {
    transform: none;
  }
}

.thread-post {
  display: flex;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid #eee;
}

.thread-post:last-child {
  border-bottom: none;
}

.thread-post__avatar-col {
  flex: 0 0 auto;
}

.thread-post__avatar {
  position: relative;
  width: 40px;
  height: 40px;
}

.thread-post__avatar img,
.thread-post__avatar-fallback {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.thread-post__avatar-fallback {
  background: #222;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
}

.thread-post__badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  border: 2px solid #fff;
  font-size: 12px;
  line-height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thread-post__body {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

/* WP's video shortcode player sets an inline width (from the file's native
   resolution) on this wrapper, which otherwise overrides any external CSS
   and forces the whole flex row wider than the feed column. */
.thread-post__body .wp-video,
.thread-post__body .wp-video-shortcode,
.thread-post__body .mejs-container {
  width: 100% !important;
  max-width: 100% !important;
}

.thread-post__head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.thread-post__name {
  font-weight: 400;
  font-size: 15px;
  color: #111;
}

.thread-post__via {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  color: #666;
}

.thread-post__via-icon {
  width: 13px;
  height: 13px;
  color: #999;
}

.thread-post__time {
  font-size: 14px;
  color: #999;
}

.thread-post__title {
  margin: 4px 0 8px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  color: #111;
}

.thread-post__title a {
  color: inherit;
  text-decoration: none;
}

.thread-post__title a:hover {
  text-decoration: underline;
}

.thread-post__text {
  margin-top: 2px;
  font-size: 16px;
  line-height: 24px;
  color: #111;
}

.thread-post__text p {
  margin: 0 0 20px;
}

.thread-post__text p:last-child {
  margin-bottom: 0;
}

/* Content pasted straight from Threads.com comes through as bare <div> lines
   (no <p> tags), so paragraph spacing needs to key off direct children in
   general, not just <p>. */
.thread-post__text > * + * {
  margin-top: 20px;
}

/* Bold text in a micro post reads as a yellow highlighter stroke. */
.thread-post__text strong,
.thread-post__text b {
  background: #fff17a;
  padding: 1px 3px;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Last paragraph shown before "View more": the gap to the button comes from
   the button, the same as when the post is expanded. */
.thread-post__text > .thread-post__cut {
  margin-bottom: 0;
}

.thread-post__text a {
  color: #2563eb;
  text-decoration: none;
}

.thread-post__text a:hover {
  text-decoration: underline;
}

.thread-post__text-wrap {
  position: relative;
}

.thread-post__more-btn {
  display: none;
  margin-top: 12px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
}

.thread-post__text-wrap.has-more .thread-post__more-btn {
  display: inline-block;
}

.thread-post__more-btn:hover {
  color: #111;
  text-decoration: none;
}

.thread-post__media {
  position: relative;
  margin: 10px 0 20px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #eee;
}

.thread-post__media img,
.thread-post__media video {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * Media dropped directly into the post body (WP video/image block) instead
 * of the ACF media field: fit to its own content instead of stretching full
 * width, stay centered, and match the same bordered/rounded frame as
 * .thread-post__media.
 */
.thread-post__text video,
.thread-post__text img,
.thread-post__text iframe {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 520px;
  margin: 16px auto 20px;
  border-radius: 16px;
  border: 1px solid #eee;
}

/* Figure wrapper (WP video/image block): let the media element inside carry
   the spacing/border above, not the figure itself, to avoid a double frame. */
.thread-post__text .wp-block-video,
.thread-post__text .wp-block-image {
  margin: 0;
  max-width: 100%;
}

.thread-post__text .wp-block-video video,
.thread-post__text .wp-block-image img {
  margin-top: 16px;
}

.thread-post__text figcaption {
  text-align: center;
  font-size: 13px;
  color: #999;
  margin-top: 6px;
}

.thread-post__video-sparkle,
.thread-post__video-mute {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}

.thread-post__video-sparkle svg,
.thread-post__video-mute svg {
  width: 16px;
  height: 16px;
}

.thread-post__video-sparkle {
  top: 10px;
  right: 10px;
}

.thread-post__video-mute {
  bottom: 10px;
  right: 10px;
}

.thread-post__translate {
  margin-top: 8px;
  font-size: 13px;
  color: #999;
}

.thread-post__empty {
  text-align: center;
  color: #999;
  padding: 60px 0;
}