/**
 * @file        article.css
 * @description Blog / Insights index and article pages (Epic 7)
 *
 * @author      Thomas Dobler - SYNTHETIXMIND LTD
 * @email       tom@synthetixmind.com
 * @company     SYNTHETIXMIND LTD, Paphos, Cyprus
 * @url         https://synthetixmind.com
 *
 * @uid         9c4e8a30-6b17-4f25-83d9-71a0e2fc5648
 * @version     0.0.0.2
 * @created     2026-09-12
 * @updated     2026-09-12
 *
 * @copyright   (c) 2026 by SYNTHETIXMIND LTD
 * @license     Proprietary — All rights reserved
 */

/* Semantic aliases only — never a raw brand token or a hex value (DESIGN.md). */

/* --- Index listing -------------------------------------------------------- */

.article-list {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
}

/* 375px is the design target; wider viewports are the enhancement, so the
   multi-column form is the media query rather than the default. */
@media (min-width: 48rem) {
  .article-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.article-card__title {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
}

.article-card__meta,
.article__meta {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* The date sits next to the author; a separator that is not a bare dash, so a
   screen reader does not read punctuation as part of the name. */
.article-card__meta time,
.article__meta time {
  margin-inline-start: var(--space-3);
}

.article-card__excerpt {
  margin: 0;
}

/* --- Article body --------------------------------------------------------- */

.article__excerpt {
  font-size: var(--text-lg);
  margin: var(--space-4) 0 0;
}

/* Measure matters more here than anywhere else on the site: this is the only
   surface with sustained prose. ~70 characters is the readable band. */
.article__body {
  max-width: 70ch;
}

.article__body h2,
.article__body h3 {
  margin-top: var(--space-8);
}

.article__body p,
.article__body ul,
.article__body ol {
  margin: 0 0 var(--space-5);
}

.article__body img {
  max-width: 100%;
  height: auto;
}

.article__topics {
  margin-top: var(--space-4);
}

/* --- The C02 / R04 CTA block ---------------------------------------------- */

/* Order is the requirement, and it is expressed in DOM order in the template —
   NOT here. Nothing in this file may reorder these items: a visitor with
   stylesheets disabled must meet the same call to action first. */
.article-cta {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 48rem) {
  .article-cta {
    grid-template-columns: repeat(2, 1fr);
  }
}

.article-cta__title {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
}

.article-cta__summary {
  margin: 0;
}

/* The webinar CTA carries a date and place; the service variant has neither,
   which is why only this one has a meta line. Story 5.3. */
.article-cta__meta {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}