/* ==========================================================================
   TRESUN-TECH — News article stylesheet
   File: assets/css/news-article-page.css
   Pages: the three News child pages only (enqueued by page-news-article.php,
          version = filemtime())
   Scope: EVERY selector is prefixed with .tsar — no :root, no global element
          selector, no existing theme class is redefined, so no other page on
          the frozen staging site can be affected by this file.
   Brief: TRESUN_NEWS_3_ARTICLE_STAGING_IMPLEMENTATION_BRIEF_V1.0 (AUDITED)
   Style source: the site's own tokens (--navy / --green / --ink / --muted /
          --line / --soft / --radius / --shadow) with literal fallbacks,
          matching the approved /news/ hub stylesheet.
   Breakpoints: >=1181 default · <=1180 · <=767
   --------------------------------------------------------------------------
   INDEX
   01 · Tokens (scoped)      04 · Lead image
   02 · Shell + breadcrumb   05 · Article body typography
   03 · Head + tag           06 · Responsive · 07 · A11y
   ========================================================================== */

/* 01 · TOKENS (scoped to .tsar — the site palette is never redefined) ------ */
.tsar{
  --tsa-navy:var(--navy,#071c2b);
  --tsa-green:var(--green,#16984f);
  --tsa-ink:var(--ink,#0b1f2a);
  --tsa-muted:var(--muted,#657681);
  --tsa-line:var(--line,#e3e9ec);
  --tsa-soft:var(--soft,#f5f8f9);
  --tsa-shadow:var(--shadow,0 18px 52px rgba(8,31,45,.09));
  background:#fff;
  color:var(--tsa-ink);
  padding:34px 0 92px;
}
.tsar,.tsar *{box-sizing:border-box}
.tsar h1,.tsar h2,.tsar h3,.tsar p,.tsar ul,.tsar li,.tsar figure{margin:0}
.tsar a{text-decoration:none}

/* 02 · SHELL + BREADCRUMB -------------------------------------------------- */
.tsar-wrap{width:min(1180px,calc(100% - 52px));margin:0 auto}

.tsar-crumbs{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-size:12.5px;font-weight:700;color:var(--tsa-muted);
  letter-spacing:.2px;margin-bottom:22px;
}
.tsar-crumbs a{color:var(--tsa-muted)}
.tsar-crumbs a:hover{color:var(--tsa-green)}
.tsar-crumbs-sep{color:#a9b8c0;font-weight:800}
.tsar-crumbs-now{color:var(--tsa-ink)}

/* 03 · HEAD + TAG ---------------------------------------------------------- */
.tsar-head{max-width:900px;padding-bottom:22px}
.tsar-tag{
  display:inline-block;margin-bottom:16px;
  padding:5px 11px;border-radius:999px;
  background:rgba(22,152,79,.08);border:1px solid rgba(22,152,79,.20);
  color:var(--tsa-green);font-size:11px;font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;
}
.tsar-title{
  font-size:46px;line-height:1.06;letter-spacing:-1.5px;
  color:var(--tsa-ink);font-weight:800;
}

/* 04 · LEAD IMAGE + CAPTION ------------------------------------------------ */
.tsar-figure{
  margin:8px 0 42px;padding:0;
  border:1px solid var(--tsa-line);border-radius:20px;
  background:var(--tsa-soft);overflow:hidden;
}
.tsar-figure img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:cover;object-position:center;
}

/* 05 · ARTICLE BODY TYPOGRAPHY -------------------------------------------- */
.tsar-body{max-width:820px}
.tsar-body p{
  margin:0 0 20px;font-size:16.5px;line-height:1.78;color:#33454f;
}
.tsar-body h2{
  margin:46px 0 16px;font-size:30px;line-height:1.16;letter-spacing:-.7px;
  color:var(--tsa-ink);font-weight:800;
}
.tsar-body h3{
  margin:32px 0 12px;font-size:19px;line-height:1.34;letter-spacing:-.2px;
  color:var(--tsa-ink);font-weight:800;
}
.tsar-body ul{
  margin:0 0 22px;padding:0 0 0 22px;list-style:disc;
}
.tsar-body li{
  margin:0 0 11px;font-size:16.5px;line-height:1.72;color:#33454f;
}
.tsar-body a{
  color:var(--tsa-green);font-weight:700;
  border-bottom:1px solid rgba(22,152,79,.35);
  /* long unbreakable link text (e.g. an institutional citation URL) must wrap
     instead of forcing horizontal scroll at 390px */
  overflow-wrap:anywhere;word-break:break-word;
}
.tsar-body a:hover{
  color:var(--tsa-navy);border-bottom-color:rgba(7,28,43,.35);
}
.tsar-body strong{font-weight:800;color:var(--tsa-ink)}
.tsar-body em{font-style:italic}

/* 06 · RESPONSIVE ---------------------------------------------------------- */
@media (max-width:1180px){
  .tsar-wrap{width:calc(100% - 44px)}
  .tsar-title{font-size:38px;letter-spacing:-1.1px}
  .tsar-body h2{font-size:27px}
}
@media (max-width:767px){
  .tsar{padding:24px 0 64px}
  .tsar-wrap{width:calc(100% - 32px)}
  .tsar-title{font-size:30px;letter-spacing:-.8px;line-height:1.14}
  .tsar-figure{border-radius:16px;margin-bottom:32px}
  .tsar-body p,.tsar-body li{font-size:16px;line-height:1.72}
  .tsar-body h2{font-size:23px;margin-top:36px}
  .tsar-body h3{font-size:17.5px;margin-top:26px}
}

/* 07 · A11Y ---------------------------------------------------------------- */
.tsar-crumbs a:focus-visible,
.tsar-body a:focus-visible{outline:2px solid var(--tsa-green);outline-offset:2px}