/* ==========================================================================
   KF Elements — Text Section
   --------------------------------------------------------------------------
   The column itself is base.css's `.kfe-text-col` (render_text_column(),
   ADR-0004 decisions 5 and 6): the lead, the blocks, the chips, the callout
   and the arrow link are the pack's one set, and nothing here restates them.
   This file holds the head, the two-column ASIDE layout and the aside itself.

   THIS WIDGET READS `--kfe-head-align` ON ITS COLUMN as well as on its head.
   Everywhere else the frame's alignment moves the head alone, because the head
   sits above a grid of cards. Here the column of text IS the whole widget, and
   the reference's centred variant centres every paragraph in it (744#9), so a
   head_align of `center` with left-aligned prose under it would be a look the
   reference never draws. Recorded in ADR-0004's w2.kfe-text.1 section.

   The aside's geometry (320px track, 48px gutter, 28px padding, 24px offset)
   is a new layout's own value, as the reference draws it. Logical properties
   throughout, so a right-to-left page mirrors itself.
   ========================================================================== */

.kfe .kfe-text-section .head,
.kfe .kfe-text-section .kfe-text-col { text-align: var(--kfe-head-align, start); }

.kfe .kfe-text-section .head { margin-bottom: 18px; max-width: var(--kfe-title-measure, none); }
/* The title is ALWAYS classed, so the class rule restates what base.css gives
   `.kfe h2`: at `h1` — the draft stub's level — base.css has no rule and the
   title would fall back to the theme's own face (measured on run V's T5b). */
.kfe .kfe-text-section .head .kfe-text-section-title {
  font-family: var(--kfe-font-heading);
  font-weight: var(--kfe-heading-weight);
  letter-spacing: -0.01em;
  color: var(--kfe-heading, var(--kfe-primary));
  margin: 0;
  font-size: var(--kfe-title-size, var(--kfe-h2-size, clamp(1.7rem, 3.1vw, 2.4rem)));
  line-height: 1.2;
}
.kfe .kfe-text-section.kfe-dark .head .kfe-text-section-title { color: #fff; }

/* ---------- the aside layout ---------- */
.kfe .kfe-text-section.layout-aside .kfe-text-section-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}
/* The reference sets 38px above every heading after the first in this layout;
   base.css's `.kfe-text-col > * + *` gives 1.5em, which is the prose rhythm
   rather than the run break. */
.kfe .kfe-text-section.layout-aside .kfe-text-col .kfe-text-block + .kfe-text-block { margin-top: 38px; }

.kfe .kfe-text-section .kfe-text-section-aside {
  background: var(--kfe-surface);
  border: 1px solid var(--kfe-line);
  border-radius: var(--kfe-radius-card, 14px);
  padding: 28px;
  text-align: start;
}
.kfe .kfe-text-section .kfe-text-section-aside.is-sticky {
  position: sticky;
  inset-block-start: 24px;
}
/* Always classed and always one level below `header_size`, so at `h3` or `h4`
   it prints an `h4` — base.css has a rule for `h2` and `h3` and none for `h4`,
   and an unset family falls back to the theme's own face (run V's T5b,
   checklist.css:22-26). Size, weight and colour are this element's own. */
.kfe .kfe-text-section .kfe-text-section-aside-title {
  font-family: var(--kfe-font-heading);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--kfe-accent);
  margin: 0 0 16px;
}
.kfe .kfe-text-section .kfe-text-section-aside dl { margin: 0; }
.kfe .kfe-text-section .kfe-text-section-aside dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--kfe-muted);
  margin: 14px 0 2px;
}
.kfe .kfe-text-section .kfe-text-section-aside dt:first-child { margin-top: 0; }
.kfe .kfe-text-section .kfe-text-section-aside dd {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--kfe-heading, var(--kfe-primary));
}
.kfe .kfe-text-section .kfe-text-section-aside dd a { color: var(--kfe-link, var(--kfe-accent)); text-decoration: none; }
.kfe .kfe-text-section .kfe-text-section-aside dd a:hover { text-decoration: underline; }

/* ---------- dark grounds ---------- */
.kfe .kfe-text-section.kfe-dark .kfe-text-section-aside {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.kfe .kfe-text-section.kfe-dark .kfe-text-section-aside dt { color: var(--kfe-on-dark); }
.kfe .kfe-text-section.kfe-dark .kfe-text-section-aside dd,
.kfe .kfe-text-section.kfe-dark .kfe-text-section-aside dd a { color: #fff; }

/* The reference collapses the profile at 980 and makes the aside static —
   sticky inside a one-column stack would park it over the prose. */
@media (max-width: 980px) {
  .kfe .kfe-text-section.layout-aside .kfe-text-section-cols { grid-template-columns: 1fr; gap: 28px; }
  .kfe .kfe-text-section .kfe-text-section-aside.is-sticky { position: static; }
}