/*
 * Knowledge Hub and article components (Session 4.4; Blueprint 5.26, 5.28, 11.28–11.30, 10.20; typography 2.17)
 *
 * sd-article-meta   — metadata line under the article title: category link, reading time, date or status ("Sample"
 *                     badge while the article is a prototype sample; 04_Content_SEO_Knowledge.md 9).
 * sd-article-cover  — supporting media (16:9 vector cover or SisuDent photograph) with an optional caption.
 * sd-article-layout — article body beside an "On this page" list. Phone and tablet: one column, the list as a
 *                     collapsible <details> above the text · desktop >= 1024px: text 8 columns (reading width 65–72ch),
 *                     list 4 columns on the right, sticky below the header, always open.
 * sd-toc            — "On this page" links to the H2 sections (in-page anchors).
 * sd-article-end    — end of the article: category, related service link, back to the Knowledge Hub.
 * sd-hub-categories — Knowledge Hub category list: one link row per category with description and article count.
 */

/* ---------- Meta ---------- */
.sd-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sd-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--sd-color-text-muted);
  font-size: var(--sd-font-size-small);
}

.sd-article-meta li { display: inline-flex; align-items: center; min-height: var(--sd-target-min); }
.sd-article-meta a { display: inline-flex; align-items: center; min-height: var(--sd-target-min); color: var(--sd-color-link); font-weight: var(--sd-font-weight-medium); }

/* ---------- Cover ---------- */
.sd-article-cover { margin: 0; }

.sd-article-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: var(--sd-border-width) solid var(--sd-color-border-subtle);
  border-radius: var(--sd-radius-md);
  background: var(--sd-color-white);
}

.sd-article-cover figcaption { margin-top: var(--sd-space-2); color: var(--sd-color-text-muted); font-size: var(--sd-font-size-small); }

/* ---------- Layout and table of contents ---------- */
.sd-article-layout {
  display: grid;
  gap: var(--sd-space-5);
  align-items: start;
}

.sd-article-layout__body { min-width: 0; }

.sd-toc {
  border: var(--sd-border-width) solid var(--sd-color-border-subtle);
  border-radius: var(--sd-radius-md);
  background: var(--sd-color-surface-subtle);
}

.sd-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--sd-target-min);
  padding: var(--sd-space-2) var(--sd-space-4);
  color: var(--sd-color-text-heading);
  font-weight: var(--sd-font-weight-semibold);
  cursor: pointer;
  list-style: none;
}

.sd-toc__summary::-webkit-details-marker { display: none; }
.sd-toc__summary svg { width: 1.25rem; height: 1.25rem; transition: transform var(--sd-transition-ui); }
.sd-toc[open] .sd-toc__summary svg { transform: rotate(180deg); }

.sd-toc__list {
  margin: 0;
  padding: 0 var(--sd-space-4) var(--sd-space-3);
  list-style: none;
  counter-reset: toc;
}

.sd-toc__list a {
  display: flex;
  gap: var(--sd-space-2);
  align-items: center;
  min-height: var(--sd-target-min);
  padding-block: var(--sd-space-1);
  border-top: var(--sd-border-width) solid var(--sd-color-border-subtle);
  color: var(--sd-color-text-default);
  font-size: var(--sd-font-size-small);
  line-height: var(--sd-line-height-small);
  text-decoration: none;
}

.sd-toc__list a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  color: var(--sd-color-card-index);
  font-variant-numeric: tabular-nums;
}

.sd-toc__list a:hover { color: var(--sd-color-link); text-decoration: underline; }

@media (min-width: 1024px) {
  .sd-article-layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--sd-space-8); }
  .sd-article-layout__aside {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--sd-scroll-offset) + var(--sd-space-2));
  }
  .sd-article-layout__body { grid-column: 1; grid-row: 1; }
  .sd-toc__summary { cursor: default; }
  .sd-toc__summary svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sd-toc__summary svg { transition: none; }
}

/* ---------- End of article ---------- */
.sd-article-end {
  display: grid;
  gap: var(--sd-space-3);
  max-width: var(--sd-measure-article);
  margin-top: var(--sd-space-7);
  padding-top: var(--sd-space-5);
  border-top: var(--sd-border-width) solid var(--sd-color-border-subtle);
}

.sd-article-end__links { display: flex; flex-wrap: wrap; gap: var(--sd-space-2) var(--sd-space-6); }

/* ---------- Knowledge Hub category rows ---------- */
.sd-hub-categories {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--sd-border-width) solid var(--sd-color-border-subtle);
}

.sd-hub-categories__item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sd-space-1) var(--sd-space-4);
  align-items: center;
  padding: var(--sd-space-4) var(--sd-space-2);
  border-bottom: var(--sd-border-width) solid var(--sd-color-border-subtle);
  transition: background-color var(--sd-transition-feedback);
}

.sd-hub-categories__item:hover { background: var(--sd-color-blue-050); }
.sd-hub-categories__item:focus-within { outline: var(--sd-focus-ring-width) solid var(--sd-focus-ring-color); outline-offset: 2px; }

.sd-hub-categories__index {
  grid-column: 1;
  grid-row: 1;
  color: var(--sd-color-card-index);
  font-size: var(--sd-font-size-small);
  font-variant-numeric: tabular-nums;
}

.sd-hub-categories__title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: var(--sd-color-text-heading);
  font-size: var(--sd-font-size-h4);
  line-height: var(--sd-line-height-h4);
  font-weight: var(--sd-font-weight-semibold);
}

.sd-hub-categories__title a { color: inherit; text-decoration: none; }
.sd-hub-categories__title a:focus-visible { outline: none; }
.sd-hub-categories__title a::after { content: ""; position: absolute; inset: 0; }

.sd-hub-categories__text { grid-column: 2; margin: 0; color: var(--sd-color-text-default); }
.sd-hub-categories__count { grid-column: 2; color: var(--sd-color-text-muted); font-size: var(--sd-font-size-small); }

.sd-hub-categories__arrow {
  grid-column: 3;
  grid-row: 1 / span 3;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--sd-color-brand-blue);
  transition: transform var(--sd-transition-ui);
}

.sd-hub-categories__item:hover .sd-hub-categories__arrow { transform: translateX(4px); }

@media (min-width: 1024px) {
  .sd-hub-categories__item { grid-template-columns: 3rem minmax(0, 5fr) minmax(0, 6fr) auto; padding-inline: var(--sd-space-3); }
  .sd-hub-categories__index { grid-row: 1 / span 2; align-self: start; padding-top: 0.35em; }
  .sd-hub-categories__text { grid-column: 3; grid-row: 1 / span 2; }
  .sd-hub-categories__count { grid-column: 2; grid-row: 2; }
  .sd-hub-categories__arrow { grid-column: 4; grid-row: 1 / span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .sd-hub-categories__item:hover .sd-hub-categories__arrow { transform: none; }
}