/* ============================================================
   Cross Trade Shipping — News & Insights (listing + article)
   Written by the CMS's News screen; uses the tokens in style.css.
   ============================================================ */

/* ---------- Hero variants ---------- */
.phero--news{min-height:78vh;min-height:78svh}
.phero--article{min-height:82vh;min-height:82svh}
.phero--article .phero__title{font-size:clamp(2.3rem,5.4vw,4.6rem);max-width:22ch;line-height:1.04}
.phero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:var(--s5);font-size:var(--t-sm);color:var(--on-dark-soft)}
.phero__meta span{display:inline-flex;align-items:center;gap:18px}
.phero__meta span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--teal-bright)}

/* ---------- Listing ---------- */
.newsroom{padding:var(--section) 0;background:var(--bg)}
.newsroom__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s6);flex-wrap:wrap;margin-bottom:var(--s8)}
.newsroom__title{font-family:var(--serif);font-weight:500;font-size:var(--t-xl);line-height:1.06;letter-spacing:-.02em;margin-top:var(--s4);max-width:18ch}
.newsroom__filters{display:flex;flex-wrap:wrap;gap:var(--s2)}
.newsroom__filters:empty{display:none}
.nchip{font:600 var(--t-xs)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:11px 16px;border-radius:999px;border:1.5px solid var(--line-strong);background:transparent;color:var(--ink-soft);cursor:pointer;min-height:40px;transition:border-color var(--fast) var(--eo),color var(--fast) var(--eo),background var(--fast) var(--eo)}
.nchip:hover{border-color:var(--teal);color:var(--teal-deep)}
.nchip.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.nchip:focus-visible{outline:3px solid var(--teal-bright);outline-offset:2px}

.newsroom__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7) var(--s6)}
.newsroom__empty{grid-column:1/-1;padding:var(--s8) var(--s6);border:1.5px dashed var(--line-strong);border-radius:var(--radius);color:var(--ink-soft);text-align:center;font-size:var(--t-md);max-width:none}

.ncard{display:flex;flex-direction:column;gap:var(--s5);min-width:0}
.ncard[hidden]{display:none}
.ncard__media{display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--bg-soft);box-shadow:var(--sh-sm)}
.ncard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--eo)}
.ncard:hover .ncard__media img{transform:scale(1.045)}
.ncard__media--blank{background:linear-gradient(135deg,var(--navy),var(--teal-deep))}
.ncard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:var(--t-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ncard__cat{color:var(--teal-deep)}
.ncard__title{font-family:var(--serif);font-weight:500;font-size:var(--t-lg);line-height:1.15;letter-spacing:-.01em}
.ncard__title a{color:var(--ink);transition:color var(--fast) var(--eo)}
.ncard__title a:hover{color:var(--teal-deep)}
.ncard__excerpt{color:var(--ink-soft);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ncard__more{margin-top:auto;font-weight:600;font-size:var(--t-sm);color:var(--teal-deep);display:inline-flex;align-items:center;gap:8px}
.ncard__more span{transition:transform var(--fast) var(--eo)}
.ncard__more:hover span{transform:translateX(4px)}

/* First post spans the row */
.ncard--feature{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr;gap:var(--s5) var(--s8);align-items:center}
.ncard--feature .ncard__media{aspect-ratio:16/10}
.ncard--feature .ncard__title{font-size:var(--t-xl);line-height:1.08}
.ncard--feature .ncard__excerpt{font-size:var(--t-md);-webkit-line-clamp:4}
.ncard--feature .ncard__body{display:flex;flex-direction:column;gap:var(--s4)}
.ncard__body{display:flex;flex-direction:column;gap:var(--s3);flex:1}

/* ---------- Article ---------- */
.article{padding:var(--section) 0;background:var(--bg)}
.article__grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s8);align-items:start}
.article__aside{position:sticky;top:120px;display:flex;flex-direction:column;gap:var(--s5);font-size:var(--t-sm);color:var(--ink-soft)}
.article__aside h4{font-size:var(--t-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2)}
.article__share{display:flex;flex-wrap:wrap;gap:8px}
.article__share a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line-strong);font-weight:600;font-size:var(--t-xs);color:var(--ink);transition:border-color var(--fast) var(--eo),color var(--fast) var(--eo)}
.article__share a:hover{border-color:var(--teal);color:var(--teal-deep)}
.article__back{font-weight:600;color:var(--teal-deep)}

.article__body{max-width:72ch;color:var(--ink-soft);font-size:var(--t-md);line-height:1.75}
.article__body>*+*{margin-top:1.15em}
.article__body h2,.article__body h3{font-family:var(--serif);font-weight:500;color:var(--ink);letter-spacing:-.015em;line-height:1.15}
.article__body h2{font-size:var(--t-lg);margin-top:1.9em}
.article__body h3{font-size:var(--t-md);margin-top:1.6em}
.article__body strong{color:var(--ink);font-weight:600}
.article__body a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.article__body a:hover{color:var(--navy)}
.article__body ul,.article__body ol{padding-left:1.3em}
.article__body li+li{margin-top:.45em}
.article__body li::marker{color:var(--teal)}
.article__body blockquote{border-left:3px solid var(--teal);padding:.2em 0 .2em 1.2em;font-family:var(--serif);font-size:var(--t-lg);line-height:1.35;color:var(--ink)}
.article__body figure{margin:2em 0}
.article__body img{display:block;width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--sh-md)}
.article__body figcaption{margin-top:.7em;font-size:var(--t-sm);color:var(--muted)}
.article__body hr{border:0;height:1px;background:var(--line-strong);margin:2.4em 0}
.article__cover{margin:0 0 var(--s7)}
.article__cover img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);box-shadow:var(--sh-md)}

.morenews{padding:0 0 var(--section);background:var(--bg)}
.morenews__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s7);padding-top:var(--s8);border-top:1px solid var(--line)}
.morenews__title{font-family:var(--serif);font-weight:500;font-size:var(--t-xl);letter-spacing:-.02em;line-height:1.06;margin-top:var(--s4)}

@media (max-width:1024px){
  .newsroom__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ncard--feature{grid-template-columns:1fr}
  .article__grid{grid-template-columns:1fr;gap:var(--s6)}
  .article__aside{position:static;order:2;border-top:1px solid var(--line);padding-top:var(--s6)}
}
@media (max-width:640px){
  .newsroom__grid{grid-template-columns:1fr;gap:var(--s7)}
  .newsroom__head{margin-bottom:var(--s6)}
  .article__body{font-size:var(--t-base)}
  .phero--news,.phero--article{min-height:70svh}
}