/* The article view: InsideTechWorld's layout in EvolveDash's tokens.
 *
 * docs/plans/article-view.md is the plan, with ITW's source lines for each
 * part and every departure measured. Everything here is scoped to
 * `.ed-art--post`; article.css keeps the body rules the careers pages share.
 *
 * Every size, colour and font is a token (tokens.css); logical properties
 * throughout, so the page mirrors under Arabic from `dir` alone.
 */

/* ---- Frame ------------------------------------------------------------- */

.ed-art.ed-art--post { max-width: none; padding: 0; }
.ed-art--post .ed-art__band { background: var(--ed-ground-article-head); }
.ed-art--post .ed-art__band-inner,
.ed-art--post .ed-art__main {
  max-width: var(--ed-maxw);
  margin-inline: auto;
  padding-inline: var(--ed-gutter);
}
.ed-art--post .ed-art__band-inner { padding-block: clamp(28px, 3.2vw, 52px) clamp(24px, 2.8vw, 44px); }
/* No 3px brand rule between the head and the body, on articles only (the
 * owner, 11 October 2026: "hate this bar"; docs/BASELINE.md §5, "The article
 * view"). The band's ground ends on white, the body's, so the two paddings
 * read as one gap: 56px on a phone, 92px at 1440px. */
.ed-art--post .ed-art__main { padding-block: clamp(32px, 3.6vw, 56px) clamp(40px, 4.4vw, 72px); }

/* ---- Head: words left, image right (ITW article.css:165-207) ----------- */

.ed-art--post .ed-art__head {
  max-width: var(--ed-maxw-read);
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
@media (min-width: 56.25em) {
  .ed-art--post .ed-art__head--media {
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(280px, 30vw, 400px));
    column-gap: clamp(24px, 2.8vw, 44px);
    align-items: start;
  }
}
.ed-art--post .ed-art__headtext { min-width: 0; }

.ed-art--post .ed-art__kicker {
  display: inline-block;
  margin-block-end: 18px;
  font-family: var(--ed-font-body);
  font-size: var(--ed-size-eyebrow);
  font-weight: var(--ed-weight-medium);
  letter-spacing: var(--ed-track-eyebrow);
  text-transform: uppercase;
  color: var(--ed-magenta-ink);
  text-decoration: none;
}
.ed-art--post .ed-art__kicker:hover { text-decoration: underline; text-underline-offset: 3px; }

.ed-art--post .ed-art__title {
  margin: 0 0 16px;
  font-family: var(--ed-font-display);
  font-size: var(--ed-size-h1-compact);
  font-weight: var(--ed-weight-bold);
  line-height: 1.1;
  letter-spacing: var(--ed-track-tight);
  color: var(--ed-ink);
  text-wrap: balance;
}

.ed-art--post .ed-art__dek {
  max-width: 60ch;
  margin: 0 0 22px;
  font-size: var(--ed-size-lead-lg);
  line-height: 1.6;
  color: var(--ed-dek);
  text-wrap: pretty;
}

.ed-art--post .ed-art__hero { margin: 0; max-width: 520px; }
@media (min-width: 56.25em) { .ed-art--post .ed-art__hero { max-width: none; } }
.ed-art--post .ed-art__hero img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius-panel);
}

/* ---- Byline (ITW article.css:320-526) ---------------------------------- */

.ed-art--post .ed-art__byline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  padding: 0;
  border: 0;
}
.ed-art--post .ed-art__byline:not(:has(.ed-art__avatar)) { grid-template-columns: minmax(0, 1fr); }
.ed-art--post .ed-art__avatar { display: block; width: 40px; height: 40px; }
.ed-art--post .ed-art__avatar img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: var(--ed-radius-pill);
  object-fit: cover;
}
.ed-art--post .ed-art__bytext { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ed-art--post .ed-art__author {
  font-family: var(--ed-font-body);
  font-size: var(--ed-size-body);
  color: var(--ed-body);
}
.ed-art--post .ed-art__author a {
  font-weight: var(--ed-weight-semibold);
  color: var(--ed-ink);
  text-decoration: none;
}
.ed-art--post .ed-art__author a:hover { color: var(--ed-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.ed-art--post .ed-art__metas { display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; }
.ed-art--post .ed-art__meta {
  font-family: var(--ed-font-body);
  font-size: var(--ed-size-eyebrow);
  color: var(--ed-sub);
  white-space: nowrap;
}
/* A dot between two metas, drawn, not typed: nothing is read aloud, and a dot
 * is never left alone at the end of a line. */
.ed-art--post .ed-art__meta + .ed-art__meta::before {
  content: "";
  display: inline-block;
  inline-size: 3px;
  block-size: 3px;
  margin-inline: 8px;
  border-radius: var(--ed-radius-pill);
  background: currentColor;
  vertical-align: middle;
}
/* It may wrap, its date staying whole: at 32px browser text "Updated 27
 * September 2026" ran past a phone's edge (a11y plan item 19). */
.ed-art--post .ed-art__meta--updated { flex-basis: 100%; white-space: normal; }
.ed-art--post .ed-art__meta--updated time { white-space: nowrap; }
/* Its own line, so no dot; as specific as the dot rule, and after it. */
.ed-art--post .ed-art__meta + .ed-art__meta--updated::before { display: none; }

/* A thumb's reach below the desktop layout, with the margins trimmed so the
 * line spacing does not move (the precedent in docs/BASELINE.md §5). */
@media (max-width: 72.4375em), (pointer: coarse) {
  .ed-art--post .ed-art__kicker,
  .ed-art--post .ed-art__author a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--ed-target);
    margin-block: -12px;
  }
  .ed-art--post .ed-art__kicker { margin-block-end: 6px; }
}

/* ---- Body and the rail (ITW article.css:826-829, 2206-2217) ------------ */

.ed-art--post .ed-art__grid {
  max-width: var(--ed-maxw-read);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 32px;
}
.ed-art--post .ed-art__col { min-width: 0; }
.ed-art--post .ed-art__rail { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
@media (min-width: 72.5em) {
  .ed-art--post .ed-art__grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 48px;
    align-items: start;
  }
  .ed-art--post .ed-art__rail {
    position: sticky;
    inset-block-start: var(--ed-rail-top, calc(var(--ed-header-h) + 24px));
  }
  /* The wrapper, not just the list: an empty "Contents" landmark would
   * stay beside the rail's. */
  .ed-art--post .ed-art__toc-nav { display: none; }
}
@media (max-width: 72.4375em) {
  .ed-art--post .ed-art__toc { display: none; }
  .ed-art--post .ed-art__rail { max-width: 520px; }
}

.ed-art--post .ed-art__rail-label {
  margin: 0 0 12px;
  font-family: var(--ed-font-mono);
  font-size: var(--ed-size-label);
  font-weight: var(--ed-weight-semibold);
  letter-spacing: var(--ed-track-label);
  text-transform: uppercase;
  color: var(--ed-sub);
}

/* ---- Contents: the rail's list and the disclosure below 1160px --------- */

.ed-art--post .ed-art__toc-list { margin: 0; padding: 0; list-style: none; }
.ed-art--post .ed-art__toc-list a {
  display: flex;
  align-items: center;
  min-block-size: 36px;
  padding-block: 6px;
  padding-inline: 14px 8px;
  border-inline-start: 2px solid var(--ed-border);
  font-family: var(--ed-font-body);
  font-size: var(--ed-size-small);
  line-height: 1.35;
  color: var(--ed-dek);
  text-decoration: none;
  transition: color var(--ed-transition), border-color var(--ed-transition);
}
.ed-art--post .ed-art__toc-list a:hover { color: var(--ed-link-hover); }
/* The section being read: ink, semibold and a purple bar; the bar is there in
 * both states, so the text never moves, and bold is the cue that is not
 * colour alone. */
.ed-art--post .ed-art__toc-list a[aria-current="location"] {
  color: var(--ed-ink);
  font-weight: var(--ed-weight-semibold);
  border-inline-start-color: var(--ed-purple);
}
@media (pointer: coarse) { .ed-art--post .ed-art__toc-list a { min-block-size: var(--ed-target); } }

.ed-art--post .ed-art__toc-mobile {
  margin-block-end: 28px;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius);
}
.ed-art--post .ed-art__toc-mobile > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-block-size: var(--ed-target);
  padding-inline: 16px;
  font-family: var(--ed-font-body);
  font-size: var(--ed-size-body);
  font-weight: var(--ed-weight-semibold);
  color: var(--ed-ink);
  cursor: pointer;
  list-style: none;
}
.ed-art--post .ed-art__toc-mobile > summary::-webkit-details-marker { display: none; }
.ed-art--post .ed-art__toc-mobile > summary::after {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-inline-end: 2px solid var(--ed-sub);
  border-block-end: 2px solid var(--ed-sub);
  transform: rotate(45deg);
  transition: transform var(--ed-transition);
}
.ed-art--post .ed-art__toc-mobile[open] > summary::after { transform: rotate(-135deg); }
.ed-art--post .ed-art__toc-mobile .ed-art__toc-list { padding: 4px 8px 12px; }
.ed-art--post .ed-art__toc-mobile .ed-art__toc-list a { min-block-size: var(--ed-target); }

/* Headings clear the sticky bar when a contents link jumps to them. */
.ed-art--post .ed-art__body :is(h2, h3, h4) { scroll-margin-top: 8px; }

/* ---- Topic chips (ITW article.css:3443-3484) --------------------------- */

.ed-art--post .ed-art__topics { margin-block-start: 2.4em; }
.ed-art--post .ed-art__topics ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ed-art--post .ed-art__topics a {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  padding-inline: 12px;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius);
  font-family: var(--ed-font-body);
  font-size: var(--ed-size-caption);
  color: var(--ed-dek);
  text-decoration: none;
  transition: color var(--ed-transition), border-color var(--ed-transition);
}
.ed-art--post .ed-art__topics a:hover { color: var(--ed-link-hover); border-color: var(--ed-purple); }
@media (max-width: 72.4375em), (pointer: coarse) { .ed-art--post .ed-art__topics a { min-block-size: var(--ed-target); } }

/* ---- Text size (ITW article.css:982-988) ------------------------------- */

:root:not([data-js]) .ed-textsize { display: none; }
.ed-textsize__row { display: flex; gap: 8px; }
.ed-textsize__btn,
.ed-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--ed-target);
  block-size: var(--ed-target);
  padding: 0;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius);
  font-family: var(--ed-font-display);
  color: var(--ed-dek);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--ed-transition), border-color var(--ed-transition), box-shadow var(--ed-transition);
}
.ed-textsize__btn:hover,
.ed-share__btn:hover { color: var(--ed-link-hover); border-color: var(--ed-purple); }
.ed-textsize__btn[data-ed-textsize-set="s"] { font-size: var(--ed-size-caption); }
.ed-textsize__btn[data-ed-textsize-set="m"] { font-size: var(--ed-size-body); }
.ed-textsize__btn[data-ed-textsize-set="l"] { font-size: var(--ed-size-lead); }
.ed-textsize__btn[data-ed-textsize-set="xl"] { font-size: var(--ed-size-title-sm); }
/* The pressed step, from the root attribute, so it is right before any
 * script runs; aria-pressed follows it. */
:root:not([data-textsize]) .ed-textsize__btn[data-ed-textsize-set="m"],
:root[data-textsize="s"] .ed-textsize__btn[data-ed-textsize-set="s"],
:root[data-textsize="l"] .ed-textsize__btn[data-ed-textsize-set="l"],
:root[data-textsize="xl"] .ed-textsize__btn[data-ed-textsize-set="xl"] {
  color: var(--ed-ink);
  font-weight: var(--ed-weight-semibold);
  border-color: var(--ed-purple);
  box-shadow: inset 0 0 0 1px var(--ed-purple);
}
:root[data-textsize="s"] .ed-art--post .ed-art__body { font-size: var(--ed-read-body-s); }
:root[data-textsize="l"] .ed-art--post .ed-art__body { font-size: var(--ed-read-body-l); }
:root[data-textsize="xl"] .ed-art--post .ed-art__body { font-size: var(--ed-read-body-xl); }

/* ---- Share (ITW article.css:2344-2424) ---------------------------------- */

/* Six 44px buttons in the 300px rail: 6px apart they fit on one line. */
.ed-share__row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ed-share__svg { display: block; }
.ed-share__btn[data-copied] { border-color: var(--ed-purple); color: var(--ed-ink); }
:root:not([data-js]) [data-ed-copy] { display: none; }
.ed-share__status {
  margin: 8px 0 0;
  min-block-size: 1.2em;
  font-family: var(--ed-font-body);
  font-size: var(--ed-size-eyebrow);
  color: var(--ed-sub);
}

/* ---- Related cards ------------------------------------------------------ */

.ed-art__related { background: var(--ed-ground-insights); }

/* ---- Print (ITW has none) ------------------------------------------------ */

@media print {
  .ed-art--post .ed-art__rail,
  .ed-art--post .ed-art__toc-mobile,
  .ed-art--post .ed-art__topics,
  .ed-art__related { display: none; }
}

/* The author's portrait is a link too: 44px under a finger (item 28). */
@media (pointer: coarse) {
  .ed-art--post .ed-art__avatar,
  .ed-art--post .ed-art__avatar img { width: var(--ed-target); height: var(--ed-target); }
}