/* ARAI — blog (arai.build/{ru,en}/blog): what is the blog's own and nothing else. Tokens, faces, chrome
   and every component come from the Design Kit (/_ds/<hash>/kit.css, design/, DESIGN.md §17 phase 1);
   this file is the `surface` layer, built from role and structure tokens only. */
@layer surface {
  /* the hub: the list starts level with the filter column (56 px from lg, under the controls below it) */
  .blog-feed { padding-bottom: 56px; }
  @media (width >= 1024px) { .blog-feed { padding-top: 56px; } }
  @media (width < 1024px) { .blog-hub > .a-hub__side[hidden] + .blog-feed { padding-top: 24px; } }

  /* the post: the norms it names, then the ask block and the editorial credit, follow the text */
  .blog-body > .blog-norms { margin-top: 56px; display: grid; gap: 16px; }
  .blog-norms .a-entry--text .a-entry__body { gap: 4px; }
  .blog-body > .a-ask { margin-top: 56px; }
  .blog-how { margin-top: 32px; }
  /* Article chrome must leave opening text on the first phone screen. */
  @media (width < 640px) {
    article .a-pagehead__text { gap: 8px; padding-bottom: 24px; }
  }

  /* related reading (DESIGN.md §13 Reading: «related on surface-muted»): three columns from md */
  .blog-related { padding-block: 48px 64px; border-top: var(--a-line-hair) solid var(--a-border-strong); background: var(--a-surface-muted); }
  .blog-related__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-bottom: 24px; }
  .blog-related__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--a-line-rule) solid var(--a-border-strong); }
  .blog-related__card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; padding: 20px 0 24px; border-bottom: var(--a-line-hair) solid var(--a-border); text-decoration: none; }
  .blog-related__fig { display: none; aspect-ratio: 16 / 9; padding: 8px 16px; background: var(--a-surface); border: var(--a-line-hair) solid var(--a-border); transition: border-color var(--a-dur-1) var(--a-ease); }
  .blog-related__fig .dwg { height: 100%; }
  .blog-related__title { font: var(--a-type-title); letter-spacing: var(--a-track-title); text-wrap: balance; }
  .blog-related__card:hover .blog-related__title { text-decoration: underline; text-decoration-color: var(--a-mark); text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .blog-related__card:hover .blog-related__fig { border-color: var(--a-border-strong); }
  @media (width >= 640px) { .blog-related__fig { display: block; } }
  @media (width >= 768px) {
    .blog-related__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; border-top: 0; }
    .blog-related__list > li { border-top: var(--a-line-rule) solid var(--a-border-strong); }
    .blog-related__card { height: 100%; border-bottom: 0; }
  }

  @media print { .blog-related { display: none !important; } }
}