/* ==========================================================================
   Article page — decision-guide blocks and the authorship meta line.
   Loaded only by blog/article_detail.html ({% block css %}, ?v=1).
   Tokens come from kh.css; nothing here is defined twice.

   .kh-decision       boxed block with a coloured inline-start edge, the same
                      shape as the .kh-callout inside the prose so the two
                      read as one family (summary, audience, key points,
                      example, actions)
   .kh-decision--plain the same header treatment without the box (tools,
                      files — these hold cards, not text)
   .kh-decision-card  small link card (a tool, a file)
   .kh-article-meta   نویسنده · تاریخ انتشار · آخرین اصلاح · وضعیت بازبینی
   ========================================================================== */

.kh-decision {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-soft);
  border-inline-start: 3px solid var(--border);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface-2);
}

.kh-decision .kh-kicker {
  display: block;
}

.kh-decision__title {
  margin: 0.25rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.8;
}

.kh-decision__body {
  margin-top: var(--sp-2);
  font-size: 0.97rem;
  line-height: 2.05;
  color: var(--text-2);
}

.kh-decision__body p {
  margin: 0;
}

.kh-decision__body p + p {
  margin-top: 0.7em;
}

.kh-decision__list {
  margin: var(--sp-2) 0 0;
  padding-inline-start: 1.3rem;
  display: grid;
  gap: 0.35rem;
  font-size: 0.97rem;
  line-height: 1.95;
}

.kh-decision__list li::marker {
  color: var(--accent);
}

ol.kh-decision__list {
  list-style: persian;
}

[dir='ltr'] ol.kh-decision__list {
  list-style: decimal;
}

/* the «مثال فرضی» line: tag + one plain sentence */
.kh-decision__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-caption);
  color: var(--text-3);
}

/* one edge colour per block kind, echoing the prose callouts */
.kh-decision--summary  { border-inline-start-color: var(--accent); }
.kh-decision--audience { border-inline-start-color: var(--series-b); }
.kh-decision--points   { border-inline-start-color: var(--series-c); }
.kh-decision--example  { border-inline-start-color: var(--series-e); }
.kh-decision--actions  { border-inline-start-color: var(--pos); }

.kh-decision--plain {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* cards: tools and files */
.kh-decision__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.7rem;
  margin-top: var(--sp-3);
}

.kh-decision-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.kh-decision-card:hover {
  border-color: var(--text-3);
  transform: translateY(-1px);
}

.kh-decision-card__title {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.7;
}

.kh-decision-card__sub {
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--text-2);
}

.kh-decision-card__kind {
  margin-top: auto;
  padding-top: 0.2rem;
  font-size: 0.7rem;
  color: var(--text-3);
}

/* authorship / review line under the sources */
.kh-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin: 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-caption);
  color: var(--text-3);
}

@media (max-width: 640px) {
  .kh-decision {
    padding: var(--sp-3);
  }

  .kh-decision__cards {
    grid-template-columns: 1fr;
  }
}