/* Equipment band and card, shared by the homepage and the industry pages (session 10).
   Markup: <section class="eq"> ... <ul class="eq-grid"><li><a class="eq-card" data-spotlight> .eq-media > img, .eq-kicker, h3, .eq-text, .eq-cta.
   One effect: a soft spotlight that follows the cursor (pattern after reactbits.dev SpotlightCard, MIT; written here,
   no code copied). It moves with transform only, runs on fine pointers only (eq-cards.js) and is off with reduced motion. */
.eq {
  color: var(--ts-on-dark-muted);
  background:
    radial-gradient(50% 60% at 100% 0%, rgba(0, 144, 212, 0.28), transparent 70%),
    linear-gradient(170deg, var(--ts-navy-900) 0%, var(--ts-navy-850) 60%, var(--ts-blue-975) 100%);
}
.eq .section-head h2 { color: var(--ts-on-dark); }
.eq .section-head h2 .blue { color: var(--ts-sky-300); }
.eq .section-head p { color: var(--ts-on-dark-muted); }
.eq .badge, .cta-band .badge { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: var(--ts-on-dark); }
.eq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.eq-grid > li { display: flex; }
.eq-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; width: 100%; overflow: hidden;
  padding: var(--space-4) var(--space-4) var(--space-5); border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--ts-on-dark-muted); text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}
.eq-card::before {
  content: ""; position: absolute; left: 0; top: 0; z-index: -1; width: 440px; height: 440px; margin: -220px 0 0 -220px;
  border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 300ms var(--ease);
  background: radial-gradient(circle, rgba(0, 167, 239, 0.3), rgba(0, 167, 239, 0) 62%);
  transform: translate3d(var(--gx, 160px), var(--gy, 0px), 0);
}
.eq-card:hover, .eq-card:focus-visible { border-color: rgba(0, 167, 239, 0.6); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .eq-card:hover::before { opacity: 1; } }
.eq-card:focus-visible { outline: 3px solid var(--ts-sky-300); outline-offset: 3px; }
.eq-media {
  display: grid; place-items: center; height: 200px; margin-bottom: var(--space-5); border-radius: var(--radius-lg);
  background: radial-gradient(70% 70% at 50% 40%, var(--ts-white), var(--ts-sky-100));
}
.eq-media img { width: auto; height: auto; max-width: 82%; max-height: 172px; object-fit: contain; }
.eq-kicker, .eq-card h3, .eq-text, .eq-cta { padding-inline: var(--space-2); }
.eq-kicker { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ts-sky-300); }
.eq-card h3 { margin: 6px 0 4px; font-size: var(--text-lg); color: var(--ts-on-dark); }
.eq-text { flex: 1; font-size: var(--text-sm); }
.eq-cta svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.eq-card:hover .eq-cta svg, .eq-card:focus-visible .eq-cta svg { transform: translateX(3px); }
.eq-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-4); font-weight: 700; color: var(--ts-on-dark); }
.eq-fit { max-width: 760px; margin: calc(-1 * var(--space-4)) auto var(--space-7); text-align: center; color: var(--ts-on-dark); font-size: var(--text-md); }
.eq-all { margin: var(--space-7) 0 0; text-align: center; }
@media (max-width: 1023px) { .eq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .eq-grid {
    display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding: var(--space-3) var(--gutter) var(--space-3); scroll-padding-inline: var(--gutter);
  }
  .eq-grid > li { flex: 0 0 78%; scroll-snap-align: start; }
  .eq-media { height: 168px; }
  .eq-media img { max-height: 144px; }
}

@media (max-width: 1023px) { .eq-text { font-size: var(--text-base); } }
@media (prefers-reduced-motion: reduce) { .eq-card, .eq-card::before, .eq-cta svg { transition: none; } }