/* =============================================================================
   Blog — index, archive, article.
   ========================================================================== */

.ho-blog { padding-block: var(--ho-8) var(--ho-12); }

.ho-blog__head { margin-bottom: var(--ho-6); }
.ho-blog__title { margin: 0 0 var(--ho-2); font-size: var(--ho-fs-2xl); font-weight: 900; }
@media (min-width: 768px) { .ho-blog__title { font-size: var(--ho-fs-3xl); } }

.ho-blog__subtitle {
  max-width: 62ch;
  margin: 0 0 var(--ho-4);
  font-size: var(--ho-fs-md);
  color: var(--ho-ink-500);
  line-height: 2.1;
}

.ho-blog__cats { margin-bottom: var(--ho-5); }
.ho-blog__cats .ho-chip small { color: var(--ho-ink-300); font-weight: 600; }

/* -------------------------------------------------------------- article -- */

.ho-article { padding-block: var(--ho-8) var(--ho-12); }

.ho-reading-bar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: calc(var(--ho-z-header) + 1);
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.ho-reading-bar span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--ho-amber-500), var(--ho-gold));
}

.ho-article__head { margin-bottom: var(--ho-6); text-align: center; }

.ho-article__cat {
  display: inline-block;
  margin-bottom: var(--ho-3);
  padding: 4px 12px;
  border-radius: var(--ho-r-pill);
  background: var(--ho-amber-50);
  color: var(--ho-amber-600);
  font-size: var(--ho-fs-xs);
  font-weight: 800;
}

.ho-article__title {
  margin: 0 0 var(--ho-4);
  font-size: clamp(23px, 5vw, var(--ho-fs-3xl));
  font-weight: 900;
  line-height: 1.6;
}

.ho-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ho-4);
  font-size: var(--ho-fs-sm);
  color: var(--ho-ink-400);
}
.ho-article__meta span,
.ho-article__meta time { display: inline-flex; align-items: center; gap: 5px; }

.ho-article__figure {
  margin: 0 0 var(--ho-8);
  border-radius: var(--ho-r-lg);
  overflow: hidden;
}
.ho-article__img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }

.ho-article__layout { display: block; }
@media (min-width: 1000px) {
  .ho-article__layout {
    display: grid;
    /* The contents column comes first in the source, so in RTL it lands on the
       right — beside the text, where the eye starts. */
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--ho-8);
    align-items: start;
  }
}

.ho-article__body { font-size: var(--ho-fs-lg); line-height: 2.3; }
.ho-article__body h2 { font-size: var(--ho-fs-xl); margin-top: var(--ho-8); }
.ho-article__body h3 { font-size: var(--ho-fs-lg); margin-top: var(--ho-6); }

/* Table of contents ------------------------------------------------------- */

.ho-toc {
  margin-bottom: var(--ho-6);
  padding: var(--ho-4);
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-md);
  background: var(--ho-cream-50);
}
.ho-toc[hidden] { display: none; }
@media (min-width: 1000px) {
  .ho-toc {
    position: sticky;
    /* --ho-header-h is the measured height of the sticky header, so the list
       stops just below it instead of scrolling underneath. */
    top: calc(var(--ho-header-h) + var(--ho-4));
    max-height: calc(100vh - var(--ho-header-h) - var(--ho-8));
    overflow-y: auto;
    margin-bottom: 0;
    scrollbar-width: none;
  }
  .ho-toc::-webkit-scrollbar { width: 0; display: none; }
}

.ho-toc__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--ho-3);
  font-size: var(--ho-fs-sm);
  font-weight: 800;
}
.ho-toc__title .ho-icon { color: var(--ho-amber-500); }

.ho-toc__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.ho-toc__item--h3 { padding-inline-start: var(--ho-4); }
.ho-toc__list a {
  display: block;
  padding: 6px var(--ho-2);
  border-radius: var(--ho-r-xs);
  color: var(--ho-ink-500);
  font-size: var(--ho-fs-sm);
  line-height: 1.8;
}
.ho-toc__list a:hover { background: var(--ho-cream-100); color: var(--ho-amber-600); }
.ho-toc__list a.is-active {
  background: var(--ho-amber-50);
  color: var(--ho-amber-700);
  font-weight: 700;
}

.ho-article__foot {
  display: grid;
  gap: var(--ho-4);
  margin-top: var(--ho-8);
  padding-top: var(--ho-6);
  border-top: 1px solid var(--ho-line);
}

/* ------------------------------------------------------------ comments --- */

.ho-comments { margin-top: var(--ho-10); }
.ho-comments__title { margin-bottom: var(--ho-5); font-size: var(--ho-fs-lg); }
.ho-comments__list { display: grid; gap: var(--ho-4); margin: 0 0 var(--ho-8); padding: 0; list-style: none; }
.ho-comments__list ul.children { margin: var(--ho-4) 0 0; padding-inline-start: var(--ho-6); list-style: none; display: grid; gap: var(--ho-4); }

.ho-comment {
  padding: var(--ho-5);
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-md);
  background: var(--ho-surface);
}
.ho-comment__head { display: flex; align-items: center; gap: var(--ho-2); margin-bottom: var(--ho-2); }
.ho-comment__author { font-weight: 800; color: var(--ho-ink-900); font-size: var(--ho-fs-sm); }
.ho-comment__date { font-size: var(--ho-fs-xs); color: var(--ho-ink-400); }
.ho-comment__text { font-size: var(--ho-fs-sm); color: var(--ho-ink-600); line-height: 2.1; }
.ho-comment__reply { margin-top: var(--ho-2); font-size: var(--ho-fs-xs); font-weight: 700; }

.comment-respond {
  padding: var(--ho-6);
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-md);
  background: var(--ho-cream-50);
}
.comment-respond .comment-reply-title { margin-top: 0; font-size: var(--ho-fs-lg); }
.comment-form-cookies-consent { display: flex; align-items: center; gap: var(--ho-2); font-size: var(--ho-fs-sm); }
.comment-form input[type="submit"] {
  min-height: 46px;
  padding: 0 var(--ho-8);
  border: 0;
  border-radius: var(--ho-r-pill);
  background: linear-gradient(135deg, var(--ho-amber-400), var(--ho-amber-500));
  color: #fff;
  font-family: inherit;
  font-size: var(--ho-fs-md);
  font-weight: 700;
  cursor: pointer;
}