/* ==========================================================================
   TRESUN-TECH — News hub stylesheet
   File: assets/css/news-page.css
   Page: /news/ only (enqueued by page-news.php, version = filemtime())
   Scope: EVERY selector is prefixed with .tsnews — no :root, no global
          element selector, no existing theme class is redefined. The rest of
          the frozen staging site cannot be affected by this file.
   Brief: TRESUN_NEWS_HUB_SEO_PAGE_BRIEF_V1.1 (AUDITED / APPROVED)
          + editorial layout pass 2026-09-14 (Jessica): layered B2B rhythm —
          soft topic panel → white reading area → light product band → navy CTA.
          No gradient backgrounds, no heavy shadows, no decorative filler.
   Style source: the site's own tokens (--navy / --green / --ink / --muted /
          --line / --soft / --radius) with literal fallbacks.
   Breakpoints: >=1181 three columns · 768–1180 two · <=767 one
   --------------------------------------------------------------------------
   INDEX
   01 · Tokens (scoped)          05 · Latest News & Insights
   02 · Shell                    06 · Renewable Energy Products band
   03 · Hero / intro             07 · CTA band
   04 · Explore by Topic panel   08 · Responsive · 09 · A11y
   ========================================================================== */

/* 01 · TOKENS (scoped to .tsnews — the site palette is never redefined) ---- */
.tsnews{
  --ts-navy:var(--navy,#071c2b);
  --ts-green:var(--green,#16984f);
  --ts-ink:var(--ink,#0b1f2a);
  --ts-muted:var(--muted,#657681);
  --ts-line:var(--line,#e3e9ec);
  --ts-soft:var(--soft,#f5f8f9);
  --ts-radius:var(--radius,22px);
  background:#fff;
  color:var(--ts-ink);
  padding:20px 0 76px;
}
.tsnews,.tsnews *{box-sizing:border-box}
.tsnews h1,.tsnews h2,.tsnews h3,.tsnews p{margin:0}
.tsnews a{text-decoration:none}

/* 02 · SHELL --------------------------------------------------------------- */
.tsnews-wrap{width:min(var(--max,1320px),calc(100% - 52px));margin:0 auto}

/* 03 · HERO / INTRO — white, tight, measure-capped, no rule under it ------- */
.tsnews-head{max-width:620px}
.tsnews-head h1{
  font-size:46px;line-height:1.08;letter-spacing:-1.4px;
  color:var(--ts-ink);font-weight:800;text-wrap:balance;
}
.tsnews-intro{
  margin-top:18px;max-width:620px;
  font-size:16px;line-height:1.65;color:var(--ts-muted);
}

/* 03b · shared block heading rhythm --------------------------------------- */
.tsnews-block{margin-top:64px}
.tsnews-block>h2,.tsnews-band h2,.tsnews-panel h2{
  font-size:32px;line-height:1.14;letter-spacing:-.9px;
  color:var(--ts-ink);font-weight:800;
}

/* 04 · EXPLORE BY TOPIC — soft green panel, three plain nav units --------- */
.tsnews-panel{
  margin-top:52px;background:#f2f7f4;
  border-radius:var(--ts-radius);padding:38px 42px 40px;
}
.tsnews-panel h2{margin-top:8px}
.tsnews-eyebrow{
  font-size:11px;font-weight:850;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--ts-green);
}
.tsnews-topics{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:26px;
}
.tsnews-topic{display:flex;gap:14px;padding:0 30px}
.tsnews-topic:first-child{padding-left:0}
.tsnews-topic:last-child{padding-right:0}
.tsnews-topic+.tsnews-topic{border-left:1px solid rgba(7,28,43,.10)}
.tsnews-topic-num{
  flex:0 0 auto;padding-left:10px;border-left:2px solid var(--ts-green);
  font-size:11.5px;font-weight:850;letter-spacing:1px;line-height:1.5;
  color:var(--ts-green);
}
.tsnews-topic-body h3{font-size:17px;line-height:1.35;font-weight:800}
.tsnews-topic-body h3 a{color:var(--ts-ink)}
.tsnews-topic-body h3 a:hover{color:var(--ts-green)}
.tsnews-topic-body p{margin-top:9px;font-size:13.5px;line-height:1.6;color:var(--ts-muted)}

/* 05 · LATEST NEWS & INSIGHTS — white, focal reading area, airy cards ------ */
.tsnews-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin-top:30px}

.tsnews-card{
  display:flex;flex-direction:column;background:#fff;border:0;
  border-radius:14px;
  transition:transform .22s ease,box-shadow .22s ease;
}
.tsnews-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(8,31,45,.08)}

.tsnews-card-media{
  display:block;position:relative;aspect-ratio:16/9;
  border-radius:12px;overflow:hidden;background:var(--ts-soft);
}
.tsnews-card-media img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;
}

.tsnews-card-body{display:flex;flex-direction:column;padding:20px 2px 0}
.tsnews-label{
  align-self:flex-start;
  font-size:11px;font-weight:850;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--ts-green);
}
.tsnews-card-title{
  margin-top:11px;font-size:20.5px;line-height:1.34;font-weight:800;
  color:var(--ts-ink);letter-spacing:-.3px;
}
.tsnews-card-title a{color:inherit}
.tsnews-card-title a:hover{color:var(--ts-green)}
.tsnews-card-excerpt{
  margin-top:12px;font-size:14.5px;line-height:1.68;color:var(--ts-muted);
  max-width:46ch;
}

/* 06 · RENEWABLE ENERGY PRODUCTS — full-width light band, hairline units --- */
.tsnews-band{background:#f7f8f6;padding:56px 0 60px}
.tsnews-products{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px;margin-top:30px;
}
.tsnews-product{
  display:flex;flex-direction:column;gap:9px;
  padding-top:18px;border-top:1px solid rgba(7,28,43,.14);
}
.tsnews-product h3{font-size:17.5px;line-height:1.35;font-weight:800;color:var(--ts-ink)}
.tsnews-product p{font-size:13.5px;line-height:1.64;color:var(--ts-muted);flex:1 1 auto}
.tsnews-link{margin-top:6px;font-size:13px;font-weight:850;color:var(--ts-green);letter-spacing:.2px}
.tsnews-link:hover{color:var(--ts-navy)}

/* 07 · CTA — flat navy, two balanced columns ------------------------------ */
.tsnews-cta{
  margin-top:70px;background:var(--ts-navy);
  border-radius:var(--ts-radius);padding:40px 44px;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  grid-template-areas:"title text" "btn text";
  gap:18px 52px;align-items:start;
}
.tsnews-cta h2{
  grid-area:title;font-size:28px;line-height:1.18;letter-spacing:-.7px;
  color:#fff;font-weight:800;max-width:520px;
}
.tsnews-cta p{
  grid-area:text;font-size:14.5px;line-height:1.7;
  color:rgba(255,255,255,.76);align-self:center;
}
.tsnews-btn{
  grid-area:btn;justify-self:start;align-self:end;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;border-radius:10px;
  background:var(--ts-green);color:#fff;
  font-size:13px;font-weight:850;white-space:nowrap;
  transition:background-color .2s ease;
}
.tsnews-btn:hover{background:#12813f}

/* 08 · RESPONSIVE ---------------------------------------------------------- */
@media (max-width:1180px){
  .tsnews-head h1{font-size:40px;letter-spacing:-1.1px}
  .tsnews-block>h2,.tsnews-band h2,.tsnews-panel h2{font-size:28px;letter-spacing:-.7px}
  .tsnews-panel{padding:32px 34px}

  /* two columns: the in-panel vertical rules become top rules */
  .tsnews-topics{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 34px;margin-top:22px}
  .tsnews-topic{padding:0}
  .tsnews-topic+.tsnews-topic{border-left:0}
  .tsnews-topic{border-top:1px solid rgba(7,28,43,.10);padding-top:16px}

  .tsnews-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
  .tsnews-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 36px}
  .tsnews-cta{grid-template-columns:1fr;grid-template-areas:"title" "text" "btn";gap:16px;padding:34px}
  .tsnews-cta p{align-self:start}
  .tsnews-btn{align-self:start}
}

@media (max-width:767px){
  .tsnews{padding:14px 0 60px}
  .tsnews-wrap{width:calc(100% - 48px)}
  .tsnews-head h1{font-size:30px;letter-spacing:-.8px;line-height:1.16}
  .tsnews-intro{margin-top:14px;font-size:15px;line-height:1.65}
  .tsnews-panel{margin-top:34px;padding:26px 24px 28px;border-radius:16px}
  .tsnews-block{margin-top:46px}
  .tsnews-block>h2,.tsnews-band h2,.tsnews-panel h2{font-size:24px;letter-spacing:-.5px}
  .tsnews-topics,.tsnews-grid,.tsnews-products{grid-template-columns:1fr}
  .tsnews-topics{gap:22px;margin-top:20px}
  .tsnews-grid{gap:30px;margin-top:24px}
  .tsnews-products{gap:26px;margin-top:22px}
  .tsnews-band{padding:42px 0 46px}
  .tsnews-cta{margin-top:48px;padding:28px 24px;border-radius:16px}
  .tsnews-cta h2{font-size:23px}
  .tsnews-btn{width:100%;padding:15px 22px}
}

/* 09 · ACCESSIBILITY ------------------------------------------------------ */
.tsnews a:focus-visible,.tsnews .tsnews-btn:focus-visible{
  outline:2px solid var(--ts-green);outline-offset:3px;border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  .tsnews-card,.tsnews-btn{transition:none}
}