/* ═══════════════════════════════════════════════════════════════
   FLOWSYNERGY — hub.css : the Insights library. Hero variant `count`;
   a 4-cell pillar strip, then ONE data-hub-grid of horizontal index cards
   (2 columns — 14 cards, no orphan), then the reference layer.
   Extends site.css; redefines no chrome. Smallest font-size: 12px.
   ═══════════════════════════════════════════════════════════════ */

.hub-hero{position:relative; isolation:isolate; overflow:hidden; padding-top:clamp(44px,7vh,88px)}
.hub-hero__plot{position:absolute; inset:0; width:100%; height:100%; z-index:-2; color:var(--sig); opacity:.22}
.hub-hero__vign{position:absolute; inset:0; z-index:-1; background:radial-gradient(110% 80% at 82% 0%, rgba(133,224,255,.08), transparent 55%), linear-gradient(to top, var(--bg) 12%, rgba(8,9,11,.78) 55%, rgba(8,9,11,.40) 100%)}
.hub-hero__grid{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr); gap:clamp(28px,4vw,72px); align-items:end; margin-bottom:clamp(36px,6vh,72px)}
.hub-hero__title h1{font-size:clamp(3rem,7.5vw,6.8rem); font-weight:800; letter-spacing:-.045em; margin-bottom:clamp(18px,2.6vh,28px)}
.hub-hero .crumbs span{color:var(--txt-2)}
.hub-hero .crumbs a{color:var(--dim)}
.hub-hero__readout{animation:fadeUp .9s var(--ease) .18s both}
.hub-hero__readout .taglist a{display:block}
.hub-pillars__h{font-family:var(--mono); font-size:12px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:14px}
.hub-pillars .cell{min-height:200px}
.hub-pillars .cell h3{text-wrap:balance}
.hub-pillars .cell__foot{color:var(--txt-2)}

/* ── the grid: one container, cards only ── */
.hub{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-struct); border:1px solid var(--line-struct); border-radius:var(--radius-frame); overflow:hidden}
.hub .card{display:grid; grid-template-columns:minmax(210px,.48fr) 1fr; gap:clamp(16px,1.8vw,26px); padding:clamp(16px,1.6vw,22px)}
.hub .card__img{align-self:start}
.hub .card__img img{aspect-ratio:16/9; object-fit:cover}
.hub .card__txt{display:flex; flex-direction:column; gap:10px; min-width:0}
.hub .card h3{font-size:clamp(1.02rem,1.3vw,1.22rem)}
.hub .card .cell__ix{display:flex; flex-wrap:wrap; gap:10px; align-items:baseline}
.hub .card .cell__ix em{font-style:normal; color:var(--dim); letter-spacing:.12em}
.hub .card--pillar .cell__ix em{color:var(--txt-2)}
.hub .card--pillar h3{font-size:clamp(1.1rem,1.45vw,1.36rem); font-weight:700}
/* R1-11: cards carry no <time>/date — the markup omits it so the hub-refresh tool never fills one */
.hub .card p{text-wrap:pretty}


@media (max-width:1180px){
  .hub-hero__grid{grid-template-columns:1fr; align-items:start}
  .hub-hero__readout{max-width:var(--exhibit)}
  .hub{grid-template-columns:minmax(0,1fr)}
  .hub .card{grid-template-columns:minmax(150px,.3fr) 1fr}
}
@media (max-width:720px){
  .hub-hero{padding-top:32px}
  .hub-hero__title h1{font-size:clamp(2.8rem,16vw,4rem)}
  .hub .card{grid-template-columns:1fr; gap:14px}
  .hub .card__img img{aspect-ratio:16/9}
  .hub-pillars .cell{min-height:0}
}