/* ═══════════════════════════════════════════════════════════════
   SIGNAL BAND — LiquidPixels shared component
   ═══════════════════════════════════════════════════════════════
   Purpose
     A single-row band of vertical-specific trust signals: a number,
     a label, and a credible third-party source. Replaces the legacy
     25yr / 100B / 600+ corporate stats repetition on industry pages
     and any other page where a vertical-relevant credibility moment
     is warranted.

   Canonical source
     Originally .fash-rail on industry-luxury.html (4-up grid on
     navy). Extracted, re-prefixed, and corrected here.

   Background contract
     The signal band is ALWAYS navy. Per the site section-rhythm
     rule, it must be preceded and followed by a white section.
     Never place it adjacent to another navy section or to warm-100.

   Source-label color
     The luxury page used a dark red (#8B1A1A) for the source label.
     Unreadable on navy. Corrected to amber (--amber) so it matches
     every other overline/tag/source label across the site.

   Usage
     <section class="signal-band" data-summary-content>
       <div class="wrap">
         <div class="signal-band-grid rv">
           <div class="signal-band-item">
             <span class="signal-band-num">€363B</span>
             <span class="signal-band-label">Personal luxury goods
               market in 2024, with long-term fundamentals pointing
               toward renewed growth.</span>
             <span class="signal-band-source">Bain & Altagamma</span>
           </div>
           <div class="signal-band-div"></div>
           <!-- repeat for 2nd, 3rd, 4th item -->
         </div>
       </div>
     </section>

   Rules
     - Use exactly 4 items. The grid is designed for 4; fewer reads
       sparse, more wraps awkwardly.
     - Every item MUST carry a source. No source, no stat.
     - Numbers stay short: €363B / ~80% / +10 pts / 56%. Long numbers
       wrap the label and break the grid alignment.
     - Do NOT use this component for the 25yr / 100B / 600+ corporate
       stats. Those live on the homepage testimonials band per the
       stats placement policy.
   =============================================================== */

.signal-band {
  background: var(--navy);--amber:#f59e0b;}

.signal-band-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
}

.signal-band-item {
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.signal-band-num {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--white);
  display: block;
}

.signal-band-label {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, .5);
  display: block;
  min-height: 4em;
}

.signal-band-source {
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber);
  display: block;
}

.signal-band-div {
  width: 1px;
  background: rgba(255, 255, 255, .1);
  align-self: stretch;
}

/* ── High Contrast overrides ── */
body.hc .signal-band { background: #00102a;--amber:#f59e0b;}
body.hc .signal-band-num { color: #ffffff; }
body.hc .signal-band-label { color: rgba(255, 255, 255, .85); }
body.hc .signal-band-source { color: #ffd27a; }
body.hc .signal-band-div { background: rgba(255, 255, 255, .2); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   =============================================================== */

/* Tablet — 2×2 grid */
@media (max-width: 1024px) {
  .signal-band-grid {
    grid-template-columns: 1fr 1fr;
  }
  .signal-band-div { display: none; }
  .signal-band-item {
    padding: 36px 32px;
    border: 0 solid rgba(255, 255, 255, .1);
  }
  .signal-band-item:nth-child(1),
  .signal-band-item:nth-child(5) { border-right-width: 1px; }
  .signal-band-item:nth-child(1),
  .signal-band-item:nth-child(3) { border-bottom-width: 1px; }
  .signal-band-label { min-height: auto; }
}

/* Mobile — single column stack */
@media (max-width: 768px) {
  .signal-band-grid {
    grid-template-columns: 1fr;
  }
  .signal-band-item {
    padding: 32px 24px;
    border: 0 solid rgba(255, 255, 255, .1);
    border-bottom-width: 1px;
  }
  .signal-band-item:last-child { border-bottom: 0; }
  .signal-band-item:nth-child(1),
  .signal-band-item:nth-child(5) { border-right: 0; }
  .signal-band-num { font-size: clamp(24px, 6vw, 32px); }
  .signal-band-label { font-size: 12px; }
}

@media (max-width: 480px) {
  .signal-band-item { padding: 24px 16px; }
}