/* ==========================================================================
   Technica AI — news.css
   News pages: list (ja/news/) and article template (ja/news/<slug>/). Only
   the parts unique to news pages; hero, crumb, cards, .dt, .kv, .callout,
   .figure, .tag, CTA and footer are the canonical components in site.css.
   Parts: nmeta (date + category) · nfilter (category filter) · bcard (post
          card, --feature) · rag-fig (diagram width).
   The article layout (.article, .prose, .asec, .bullets, .share, .olist) and the
   SVG diagram styles (.sfig) moved to site.css section 10 (also used by the
   technology pages).
   ========================================================================== */

/* nmeta — date + category labels (hero, post cards, Other News list). Same look as the home
   What's New row (.news__cat in home.css). */
.nmeta{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.nmeta time{font-family:var(--mono);font-size:12px;font-weight:500;line-height:1;letter-spacing:.06em;color:var(--muted)}
.nmeta__cat{font-family:var(--mono);font-size:10px;font-weight:700;line-height:1;letter-spacing:.18em;text-transform:uppercase;
  padding:4px 8px;border-radius:var(--r-xs);color:var(--accent);border:1px solid rgba(99,102,241,.3)}
.hero .nmeta{margin-bottom:24px}
.hero .nmeta time{color:rgba(255,255,255,.7)}
.hero .nmeta__cat{color:var(--accent-pale);border-color:rgba(165,180,252,.4)}

/* nfilter — category filter buttons (aria-pressed, news.js) + result count */
.nfilter{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.nfilter__list{display:flex;flex-wrap:wrap;gap:8px}
.nfilter__btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border:1px solid var(--line-strong);border-radius:var(--r-pill);
  background:var(--white);font-family:var(--mono);font-size:12px;font-weight:600;line-height:1;letter-spacing:.06em;text-transform:uppercase;
  color:var(--body);cursor:pointer;transition:color .25s ease,border-color .25s ease,background-color .25s ease}
.nfilter__btn small{font-size:10px;font-weight:700;color:var(--muted)}
.nfilter__btn:hover{border-color:rgba(99,102,241,.4);color:var(--accent)}
.nfilter__btn[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--white)}
.nfilter__btn[aria-pressed="true"] small{color:rgba(255,255,255,.75)}
.nfilter__btn:focus-visible{outline:none;box-shadow:var(--ring)}
.nfilter__count{font-size:14px;color:var(--muted)}
:where(.section > .container) > .nfilter + *{margin-top:32px}

/* bcard — post card (a.card): 16:9 media (hero image + white logo) + meta, title,
   excerpt, link. --feature = first post, full width, media left. */
.card.bcard{padding:0;overflow:hidden}
.bcard[hidden]{display:none}
.bcard__media{position:relative;flex:none;aspect-ratio:16 / 9;overflow:hidden;background:var(--dark)}
.bcard__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform .25s ease}
.bcard__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,22,46,.40) 0%,rgba(22,22,46,.64) 100%)}
.bcard__logo{position:absolute;z-index:1;top:50%;left:50%;width:auto;height:48px;max-width:72%;transform:translate(-50%,-50%);object-fit:contain}
.bcard:hover .bcard__bg{transform:scale(1.04)}
.bcard__body{display:flex;flex-direction:column;flex:1;padding:32px}
.bcard .nmeta{margin-bottom:16px}
.card.bcard h3{margin-bottom:12px;font-size:16px;line-height:1.8}
.bcard__foot{margin-top:auto;padding-top:24px}
.bcard--feature{grid-column:1 / -1;flex-direction:row}
.bcard--feature .bcard__media{width:58%}
.bcard--feature .bcard__logo{height:72px}
.bcard--feature .bcard__body{justify-content:center;padding:48px}
.card.bcard--feature h3{font-size:var(--h4);line-height:1.5;margin-bottom:16px}
.bcard--feature p{font-size:16px}
.bcard--feature .bcard__foot{margin-top:0;padding-top:32px}
@media (max-width:1024px){
  .bcard--feature .bcard__media{width:50%}
  .bcard--feature .bcard__body{padding:32px}
}
@media (max-width:860px){
  .bcard--feature{flex-direction:column}
  .bcard--feature .bcard__media{width:auto}
  .bcard--feature .bcard__logo{height:48px}
  .card.bcard--feature h3{font-size:16px;line-height:1.8}
  .bcard--feature p{font-size:14px}
  .bcard--feature .bcard__foot{padding-top:24px}
}

/* rag-fig — conventional RAG vs agentic RAG diagram (inline SVG; drawing styles = .sfig in site.css) */
.rag-fig{--fig-w:760px}

/* bcard__media--photo — the post has its own image (e.g. an event visual): no veil, no logo */
.bcard__media--photo .bcard__bg{opacity:1}
.bcard__media--photo::after{display:none}

/* prog — event programme table (.dt): part rows + session title / speaker */
.prog .prog__part th{width:auto;padding:12px 24px;background:var(--bg-tint);font-size:14px;font-weight:700;color:var(--accent)}
.prog td b{display:block;font-weight:700;color:var(--ink)}
.prog td span{display:block;color:var(--muted)}
.prog td b + br,.prog td span + br{display:none}