/* ---------- Design Tokens ---------- */
.blog-detail-page {
  --bd-font-title: "Playfair Display", "IBM Plex Serif", Georgia, serif;
  --bd-font-serif: "IBM Plex Serif", Georgia, serif;
  --bd-font-body: "Mulish", "PT Sans", system-ui, sans-serif;
  --bd-surface: var(--background, #fff);
  --bd-surface-alt: #f8f9fb;
  --bd-text: var(--text-dark, #212529);
  --bd-text-secondary: var(--text-gray, #727b85);
  --bd-border: #e8eaef;
  --bd-radius: 12px;
  --bd-radius-sm: 8px;
  --bd-content-width: 720px;
  --bd-wide-width: 920px;
  --bd-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --bd-category-color: #888;
}

body.dark .blog-detail-page {
  --bd-surface-alt: #1f2228;
  --bd-border: #2e3138;
}

/* ---------- Title Block ---------- */
.bd-title-block {
  max-width: var(--bd-content-width);
  margin: 0 auto;
  padding: 48px 24px 36px;
}

.bd-category-label {
  font-family: var(--bd-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bd-category-color);
  margin-bottom: 20px;
}

.bd-title {
  font-family: var(--bd-font-title);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--bd-text);
  margin: 0 0 28px;
}

.bd-title__accent {
  color: #d4a053;
}

.bd-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--bd-font-body);
  font-size: 14px;
  color: var(--bd-text-secondary);
  margin-bottom: 0;
  flex-wrap: wrap;
}

.bd-meta__sep {
  font-size: 8px;
  opacity: 0.45;
  flex-shrink: 0;
  color: var(--bd-text-secondary);
  line-height: 1;
}

.bd-meta__reading {
  display: inline-flex;
  align-items: center;
}

/* ---------- Hero / Banner ---------- */
.bd-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #111;
}

.bd-hero__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 520px;
  overflow: hidden;
}

.bd-hero__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Action Bar ---------- */
.bd-action-bar {
  max-width: var(--bd-content-width);
  margin: 0 auto;
  padding: 14px 24px;
  margin-top: 8px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--bd-border);
  border-bottom: 1px solid var(--bd-border);
}

.bd-action-bar__left,
.bd-action-bar__right {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* ---------- Responsive: Title + Hero + Action Bar ---------- */
@media (max-width: 767.98px) {
  .bd-hero__image-wrap {
    aspect-ratio: 16 / 10;
    max-height: 320px;
  }

  .bd-title-block {
    padding: 28px 20px 24px;
  }

  .bd-title {
    font-size: 2.1rem;
    line-height: 1.12;
    margin-bottom: 22px;
  }

  .bd-action-bar {
    padding: 12px 20px;
    margin-top: 16px;
    margin-bottom: 20px;
  }

  .bd-category-label {
    font-size: 12px;
    margin-bottom: 14px;
  }

  .bd-meta {
    font-size: 13px;
  }

  .bd-end-actions {
    padding: 32px 20px 36px;
  }

  .bd-authors {
    padding: 0 20px 36px;
  }

  .bd-comments {
    padding: 0 20px 40px;
  }
}

@media (max-width: 479.98px) {
  .bd-hero__image-wrap {
    aspect-ratio: 16 / 11;
    max-height: 260px;
  }

  .bd-title-block {
    padding: 24px 16px 20px;
  }

  .bd-title {
    font-size: 1.85rem;
    line-height: 1.12;
  }

  .bd-action-bar {
    padding: 10px 16px;
  }

  .bd-end-actions {
    padding: 28px 16px 32px;
    gap: 16px;
  }

  .bd-end-action {
    padding: 8px 16px;
    font-size: 12px;
  }

  .bd-authors {
    padding: 0 16px 32px;
  }

  .bd-author-card {
    padding: 12px 18px 12px 12px;
    gap: 14px;
  }

  .bd-comments {
    padding: 0 16px 36px;
  }

  .bd-comment-form textarea {
    min-height: 90px;
    padding: 14px 16px;
  }
}

.bd-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 100px;
  border: none;
  background: transparent;
  color: var(--bd-text-secondary);
  font-family: var(--bd-font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--bd-transition), background var(--bd-transition);
  text-decoration: none;
  line-height: 1;
  letter-spacing: 0.01em;
}

.bd-action-btn:hover {
  color: var(--bd-text);
  background: var(--bd-surface-alt);
}

.bd-action-btn i {
  font-size: 19px;
  line-height: 1;
}

.bd-action-btn--liked {
  color: #d4607a;
}

.bd-action-btn--liked i {
  color: #d4607a;
}


/* ---------- Divider ---------- */
.bd-divider {
  max-width: var(--bd-content-width);
  margin: 32px auto;
  border: none;
  border-top: 1px solid var(--bd-border);
}

/* ---------- Article Content ---------- */
.bd-article {
  max-width: var(--bd-content-width);
  margin: 0 auto;
  padding: 0 24px;
}

.bd-article .ns-summer-note-content {
  font-family: var(--bd-font-body);
  font-size: 18px;
  line-height: 1.8;
  color: var(--bd-text);
  word-break: break-word;
}

.bd-article .ns-summer-note-content p {
  margin-bottom: 1.5em;
}

.bd-article .ns-summer-note-content h1,
.bd-article .ns-summer-note-content h2,
.bd-article .ns-summer-note-content h3 {
  font-family: var(--bd-font-title);
  margin-top: 2em;
  margin-bottom: 0.75em;
  line-height: 1.3;
}

.bd-article .ns-summer-note-content img {
  border-radius: var(--bd-radius-sm);
  max-width: 100%;
  height: auto;
}

.bd-article .ns-summer-note-content blockquote {
  border-left: 3px solid var(--bd-category-color, #ccc);
  margin: 2em 0;
  padding: 0.5em 0 0.5em 1.5em;
  font-style: italic;
  color: var(--bd-text-secondary);
}

@media (max-width: 767.98px) {
  .bd-article .ns-summer-note-content {
    font-size: 16px;
    line-height: 1.75;
  }
}

/* ---------- End-of-Article Actions ---------- */
.bd-end-actions {
  max-width: var(--bd-content-width);
  margin: 0 auto;
  padding: 40px 24px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  border-top: 1px solid var(--bd-border);
}

.bd-end-actions__prompt {
  font-family: var(--bd-font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--bd-text-secondary);
  margin: 0;
  letter-spacing: 0.01em;
}

.bd-end-actions__row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bd-end-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 100px;
  border: 1px solid var(--bd-border);
  background: transparent;
  color: var(--bd-text-secondary);
  font-family: var(--bd-font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--bd-transition);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.bd-end-action:hover {
  color: var(--bd-text);
  border-color: var(--bd-text-secondary);
  background: var(--bd-surface-alt);
}

.bd-end-action i {
  font-size: 18px;
  line-height: 1;
}

.bd-end-action--liked {
  color: #d4607a;
  border-color: rgba(212, 96, 122, 0.3);
}

.bd-end-action--liked i {
  color: #d4607a;
}

.bd-end-actions__sep {
  width: 1px;
  height: 20px;
  background: var(--bd-border);
  flex-shrink: 0;
}

/* ---------- Authors Section ---------- */
.bd-authors {
  max-width: var(--bd-content-width);
  margin: 0 auto;
  padding: 0 24px 40px;
}

.bd-authors__label {
  font-family: var(--bd-font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bd-text-secondary);
  margin-bottom: 16px;
}

.bd-author-card {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px 10px 10px;
  border-radius: var(--bd-radius);
  border: 1px solid var(--bd-border);
  background: var(--bd-surface);
  text-decoration: none;
  transition: all var(--bd-transition);
  margin-right: 10px;
}

.bd-author-card:hover {
  border-color: var(--bd-text-secondary);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.bd-author-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--bd-category-color, #667) 0%, #888 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--bd-font-body);
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
  overflow: hidden;
}

.bd-author-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bd-author-card__name {
  font-family: var(--bd-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--bd-text);
  line-height: 1.3;
}

.bd-author-card:hover .bd-author-card__name {
  color: var(--bd-text);
}

/* ---------- Progress Ring (Desktop only) ---------- */
.bd-progress-wrap {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 100;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.bd-progress-wrap.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.bd-progress-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bd-surface);
  border: 1px solid var(--bd-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: box-shadow var(--bd-transition);
}

.bd-progress-btn:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16);
}

.bd-progress-btn i {
  font-size: 18px;
  color: var(--bd-text);
  z-index: 2;
}

.bd-progress-btn svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.bd-progress-btn svg path {
  fill: none;
  stroke: var(--bd-category-color, #00a8cf);
  stroke-width: 3;
  stroke-linecap: round;
  /* transition is added via JS after first paint to avoid flash on refresh */
}

/* Hide ring on mobile — mobile uses the progress bar instead */
@media (max-width: 767.98px) {
  .bd-progress-wrap {
    display: none;
  }
}

/* ---------- Mobile Progress Bar ---------- */
.bd-mobile-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 1050;
  background: transparent;
  pointer-events: none;
  display: none;
}

.bd-mobile-progress__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
      var(--bd-category-color, #00a8cf),
      color-mix(in srgb, var(--bd-category-color, #00a8cf) 60%, #fff 40%));
  border-radius: 0 2px 2px 0;
  transition: width 80ms linear;
  will-change: width;
}

@media (max-width: 767.98px) {
  .bd-mobile-progress {
    display: block;
  }
}

/* ---------- Comments Section ---------- */
.bd-comments {
  max-width: var(--bd-content-width);
  margin: 0 auto;
  padding: 0 24px 56px;
}

.bd-comments__heading {
  font-family: var(--bd-font-title);
  font-size: 20px;
  font-weight: 700;
  color: var(--bd-text);
  margin-bottom: 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--bd-border);
  letter-spacing: -0.01em;
}

/* Comment Form */
.bd-comment-form {
  margin-bottom: 40px;
}

.bd-comment-form textarea {
  width: 100%;
  min-height: 110px;
  padding: 18px 22px;
  border: 1px solid var(--bd-border);
  border-radius: var(--bd-radius);
  background: var(--bd-surface-alt);
  color: var(--bd-text);
  font-family: var(--bd-font-body);
  font-size: 15px;
  line-height: 1.7;
  resize: vertical;
  transition: border-color var(--bd-transition), box-shadow var(--bd-transition), background var(--bd-transition);
  outline: none;
}

.bd-comment-form textarea::placeholder {
  color: var(--bd-text-secondary);
  opacity: 0.55;
}

.bd-comment-form textarea:focus {
  background: var(--bd-surface);
  border-color: var(--bd-category-color, #00a8cf);
  box-shadow: 0 0 0 3px rgba(0, 168, 207, 0.08);
}

.bd-comment-form__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.bd-comment-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 24px;
  border-radius: 100px;
  border: none;
  background: var(--bd-text);
  color: var(--bd-surface);
  font-family: var(--bd-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all var(--bd-transition);
}

.bd-comment-form__submit:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.bd-comment-form__submit i {
  font-size: 15px;
}

/* Comment Group */
.bd-comment-group {
  margin-bottom: 4px;
}

/* Comment Items */
.bd-comment-item {
  padding: 22px 0;
  border-bottom: 1px solid var(--bd-border);
}

.bd-comment-item:last-child {
  border-bottom: none;
}

.bd-comment-item__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.bd-comment-item__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(145deg, #555 0%, #333 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ddd;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
  font-family: var(--bd-font-body);
}

.bd-comment-item__name {
  font-family: var(--bd-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--bd-text);
  text-decoration: none;
}

.bd-comment-item__name:hover {
  text-decoration: underline;
}

.bd-comment-item__time {
  font-family: var(--bd-font-body);
  font-size: 12px;
  color: var(--bd-text-secondary);
  opacity: 0.8;
}

.bd-comment-item__body {
  font-family: var(--bd-font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--bd-text);
  margin-bottom: 10px;
  padding-left: 46px;
}

.bd-comment-item__footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 46px;
}

.bd-comment-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 100px;
  border: none;
  background: transparent;
  color: var(--bd-text-secondary);
  font-family: var(--bd-font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--bd-transition);
  text-decoration: none;
}

.bd-comment-btn:hover {
  background: var(--bd-surface-alt);
  color: var(--bd-text);
}

.bd-comment-btn i {
  font-size: 16px;
}

.bd-comment-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 100px;
  border: none;
  background: transparent;
  color: var(--bd-text-secondary);
  font-family: var(--bd-font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.bd-comment-like-btn i {
  font-size: 16px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.bd-comment-like-btn:hover {
  background: rgba(231, 76, 111, 0.08);
  color: #e74c6f;
}

.bd-comment-like-btn:hover i {
  transform: scale(1.15);
}

.bd-comment-like-btn--has-likes {
  color: #e74c6f;
}

.bd-comment-like-btn--liked {
  color: #e74c6f;
}

.bd-comment-like-btn--liked i {
  animation: bd-like-pop 0.35s ease;
}

@keyframes bd-like-pop {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.35);
  }

  100% {
    transform: scale(1);
  }
}

body.dark .bd-comment-like-btn:hover {
  background: rgba(231, 76, 111, 0.15);
}

/* Replies */
.bd-replies {
  margin-left: 46px;
  padding-left: 20px;
  border-left: 2px solid var(--bd-border);
  margin-top: 8px;
}

.bd-replies .bd-comment-item {
  padding: 14px 0;
}

.bd-replies .bd-comment-item__body,
.bd-replies .bd-comment-item__footer {
  padding-left: 46px;
}

/* Reply Form */
.bd-reply-form {
  margin-left: 46px;
  padding-left: 20px;
  border-left: 2px solid var(--bd-border);
  padding-top: 12px;
  padding-bottom: 4px;
  display: none;
}

.bd-reply-form textarea {
  width: 100%;
  min-height: 72px;
  padding: 12px 16px;
  border: 1px solid var(--bd-border);
  border-radius: var(--bd-radius-sm);
  background: var(--bd-surface);
  color: var(--bd-text);
  font-family: var(--bd-font-body);
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  transition: border-color var(--bd-transition);
}

.bd-reply-form textarea:focus {
  border-color: var(--bd-category-color, #00a8cf);
}

.bd-reply-form__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.bd-reply-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border-radius: 100px;
  border: none;
  background: var(--bd-text);
  color: var(--bd-surface);
  font-family: var(--bd-font-body);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--bd-transition);
}

.bd-reply-form__submit:hover {
  opacity: 0.85;
}

/* Empty state */
.bd-comments__empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--bd-text-secondary);
  font-family: var(--bd-font-body);
  font-size: 15px;
}

.bd-comments__empty i {
  display: block;
  font-size: 32px;
  margin-bottom: 8px;
  opacity: 0.4;
}

/* ---------- Category Gradient Footer Line ---------- */
.bd-gradient-line {
  height: 3px;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--bd-category-color, #888) 30%,
      var(--bd-category-color, #888) 70%,
      transparent 100%);
  opacity: 0.5;
  margin: 0 auto;
  max-width: var(--bd-wide-width);
}

/* ---------- Utilities ---------- */
.bd-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Hide legacy floating options on this page ---------- */
.blog-detail-page .fixed-options-wrap {
  display: none !important;
}

/* ---------- Dark Mode Overrides ---------- */
body.dark .bd-hero {
  background: #0e0f13;
}

body.dark .bd-action-btn {
  color: #888;
}

body.dark .bd-action-btn:hover {
  color: #ddd;
  background: rgba(255, 255, 255, 0.06);
}

body.dark .bd-action-btn--liked {
  color: #d4607a;
}

body.dark .bd-action-bar {
  border-color: var(--bd-border);
}

/* End actions dark */
body.dark .bd-end-actions {
  border-top-color: var(--bd-border);
}

body.dark .bd-end-actions__prompt {
  color: #777;
}

body.dark .bd-end-action {
  color: #888;
  border-color: var(--bd-border);
}

body.dark .bd-end-action:hover {
  color: #ddd;
  border-color: #555;
  background: rgba(255, 255, 255, 0.04);
}

body.dark .bd-end-action--liked {
  color: #d4607a;
  border-color: rgba(212, 96, 122, 0.25);
}

body.dark .bd-end-actions__sep {
  background: #333;
}

/* Author dark */
body.dark .bd-author-card {
  background: var(--bd-surface-alt);
  border-color: var(--bd-border);
}

body.dark .bd-author-card:hover {
  border-color: #555;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

body.dark .bd-author-card__name {
  color: #eee;
}

body.dark .bd-author-card__role {
  color: #777;
}

/* Progress dark */
body.dark .bd-progress-btn {
  background: #1f2228;
  border-color: #333;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body.dark .bd-progress-btn i {
  color: #ddd;
}

/* Comment form dark */
body.dark .bd-comment-form textarea {
  background: #1a1c21;
  border-color: var(--bd-border);
  color: #ddd;
}

body.dark .bd-comment-form textarea:focus {
  background: var(--bd-surface-alt);
}

body.dark .bd-comment-form__submit,
body.dark .bd-reply-form__submit {
  background: #ddd;
  color: #191a1f;
}

body.dark .bd-comment-item__name {
  color: #eee;
}

body.dark .bd-comment-item__body {
  color: #bbb;
}

body.dark .bd-comment-item__avatar {
  background: linear-gradient(145deg, #444 0%, #2a2d35 100%);
  color: #aaa;
}

body.dark .bd-comment-btn:hover {
  background: #2a2d35;
  color: #ddd;
}

body.dark .bd-reply-form textarea {
  background: #1a1c21;
  border-color: var(--bd-border);
  color: #ddd;
}

/* ---------- Print ---------- */
@media print {

  .bd-progress-wrap,
  .bd-mobile-progress,
  .bd-action-bar,
  .bd-end-actions,
  .bd-comment-form {
    display: none !important;
  }
}