/* =========================================================================
   portfolio-stats-band — v1.3 (2026-04-21). NEW in v1.3.
   Class-based component CSS for the Patents-page stats band (brief §7.4 P-4).
   Path B: dedicated component, structurally separate from the locked
   v1.2 credibility-bar. Visually consistent — same prospectus-cover
   vocabulary (big gold numeral, navy label, mono source line, hairline
   rules) — but sized for 5 cells, not 4.

   Why Path B (recommended in README):
     v1.2 credibility-bar is LOCKED. Extending the locked file to accept
     5 cells would touch the locked CSS, regressing the hard "untouched"
     guarantee. A sibling component preserves the lock completely AND
     avoids conditional padding/font-size logic based on cell count.
     Home page keeps using the 4-cell ws-credibility-bar unchanged.

   Shape differences from credibility-bar:
     • 5-cell grid (vs 4). Slightly tighter cell padding (20/20/18) since
       5 cells need ~20% less horizontal breathing room at 1200px max.
     • Numeral font-size drops from 52px to 46px — still dominant but
       fits 5 abreast without line-wrap on longer values like "1,369".
     • Tight-numeral variant (for "US 12,316,610 B1") drops from 26→22px.

   Usage:
     <section class="ws-psb">
       <div class="ws-psb__wrap">
         <div class="ws-psb__eyebrow">Portfolio at a glance</div>
         <div class="ws-psb__grid">
           <a class="ws-psb__cell" href="#portfolio">
             <div class="ws-psb__numeral">7</div>
             <div class="ws-psb__unit">filings</div>
             <div class="ws-psb__src">#portfolio →</div>
           </a>
           <!-- 4 more cells -->
         </div>
       </div>
     </section>
   ========================================================================= */

.ws-psb {
  background: var(--ws-surface);
}

.ws-psb__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 48px 36px;
}

.ws-psb__eyebrow {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-label);
  letter-spacing: var(--ws-tracking-label);
  text-transform: uppercase;
  color: var(--ws-ink-faint);
  font-weight: 500;
  margin-bottom: 18px;
}

.ws-psb__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--ws-rule);
  border-bottom: 1px solid var(--ws-rule);
}

.ws-psb__cell {
  display: block;
  padding: 20px 20px 18px;
  border-left: 1px solid var(--ws-rule);
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease;
  font-family: var(--ws-font-body);
}

.ws-psb__cell:first-child {
  border-left: none;
}

.ws-psb__cell:hover,
.ws-psb__cell:focus-visible {
  background: var(--ws-surface-2);
  outline: none;
}

.ws-psb__numeral {
  font-family: var(--ws-font-display);
  font-size: 46px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ws-accent);
  margin-bottom: 10px;
  font-variant-numeric: lining-nums tabular-nums;
}

.ws-psb__numeral--tight {
  font-size: 22px;
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}

.ws-psb__unit {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ws-ink);
  margin-bottom: 4px;
  line-height: 1.3;
}

.ws-psb__src {
  font-family: var(--ws-font-mono);
  font-size: 10.5px;
  letter-spacing: var(--ws-tracking-mono);
  color: var(--ws-ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ws-psb__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .ws-psb__cell:nth-child(4),
  .ws-psb__cell:nth-child(5) {
    border-top: 1px solid var(--ws-rule);
  }
  .ws-psb__cell:nth-child(4) {
    border-left: none;
  }
}

@media (max-width: 720px) {
  .ws-psb__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ws-psb__cell {
    border-left: 1px solid var(--ws-rule);
    border-top: 1px solid var(--ws-rule);
  }
  .ws-psb__cell:nth-child(odd) {
    border-left: none;
  }
  .ws-psb__cell:nth-child(1),
  .ws-psb__cell:nth-child(2) {
    border-top: none;
  }
}

@media (max-width: 480px) {
  .ws-psb__grid {
    grid-template-columns: 1fr;
  }
  .ws-psb__cell {
    border-left: none;
    border-top: 1px solid var(--ws-rule);
  }
  .ws-psb__cell:first-child {
    border-top: none;
  }
}