/* ============================================================
   Cho Cho Industry (CCI) — News page styles
   Loads AFTER css/styles.css and reuses its tokens/components:
   .wrap .section .eyebrow .tag .ncard .news__grid .link-arrow .btn
   ============================================================ */

/* ============================================================
   BREADCRUMB — simple bar under the navbar
   (identical to css/news-article.css — same pixels/margins/padding)
   ============================================================ */
.crumbs{background:#fff}
.crumbs__inner{display:flex;align-items:center;gap:8px;height:48px;
  font-family:"DM Sans",sans-serif;font-size:14px;white-space:nowrap;overflow:hidden}
.crumbs a{color:var(--ink-soft);font-weight:500;flex:none;transition:.15s}
.crumbs a:hover{color:var(--cci-blue)}
.crumbs__sep{color:var(--silver);flex:none}
.crumbs__current{color:var(--cci-blue);font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   PAGE HEADER — compact centered title + intro
   ============================================================ */
.nhero{padding:48px 0 8px;text-align:center}
.nhero .eyebrow{margin-bottom:12px}
.nhero__title{
  font-size:clamp(36px,4.4vw,54px);font-weight:700;color:var(--cci-blue);
  font-family:"DM Sans",sans-serif;letter-spacing:-.025em;line-height:1.1;margin:0 0 14px;
}
.nhero__lead{color:var(--ink-soft);font-size:16px;max-width:600px;margin:0 auto}

/* ============================================================
   FILTER TABS — pills, homepage button styling
   ============================================================ */
.news-page{padding-top:44px}
.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start;margin-bottom:44px}
.filter__btn{
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:14px;
  padding:10px 22px;border-radius:100px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer;transition:.18s;
  display:inline-flex;align-items:center;white-space:nowrap;
}
.filter__btn:hover{border-color:var(--cci-blue-500);color:var(--cci-blue);transform:translateY(-2px)}
.filter__btn.is-active{background:var(--cci-blue);border-color:var(--cci-blue);color:#fff}

/* ============================================================
   NEWS GRID — compact cards (reuses .ncard from styles.css)
   ============================================================ */
/* larger media with a soft white gradient rising from the bottom edge */
.news-page .news__grid{gap:24px}
.news-page .ncard__media{height:240px;position:relative}
.news-page .ncard__media::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:30%;z-index:1;
  pointer-events:none;
  background:linear-gradient(to top,rgba(255,255,255,.7),rgba(255,255,255,0));
}
.news-page .ncard__body{padding:20px}
/* title clamped to 2 lines, always reserving 2 lines of height */
.news-page .ncard h3{
  font-size:16px;line-height:1.3;min-height:2.6em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* description clamped to exactly 2 lines so the Read-more button never shifts */
.news-page .ncard p{
  font-size:14px;line-height:1.6;flex:none;min-height:3.2em;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* filtered-out cards are hidden via JS (display:none) */

/* empty state — shown when a category has no stories */
.news-empty{
  display:none;text-align:center;color:var(--ink-soft);font-size:16px;
  padding:36px 0;margin:0;
}

/* ============================================================
   RESPONSIVE — same breakpoints as styles.css
   ============================================================ */
@media (max-width:1100px){
  .news-page .news__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nhero{padding:36px 0 4px}
  .news-page{padding-top:32px}
  /* keep the filter pills on ONE line — scroll horizontally, edge to edge */
  .filters{
    flex-wrap:nowrap;overflow-x:auto;gap:8px;
    margin:0 calc(-1 * var(--pad)) 32px;padding:0 var(--pad) 2px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .filters::-webkit-scrollbar{display:none}
  .filter__btn{flex:none;padding:9px 18px}
  .news-page .news__grid{grid-template-columns:1fr}
}