/* ==========================================================================
   Binary Bliss — Signal System (approved artwork integration)
   12 approved assets only: assets/signal/approved/BB-Signal-<NN>-<Name>-<Dark|Light>.png
   The approved PNG is the visual source of truth; WebP derivatives serve delivery
   and the PNG stays the fallback / social file. Geometry is never re-drawn here.

   Palette: surface dark #111318, surface light #F8F9FB, signal blue #0F52BA.
   No purple. No CSS filter inversion. No motion is applied to the artwork at all,
   so the static state is complete by definition and prefers-reduced-motion is
   inherently honoured (explicit guard at the end of this file).
   ========================================================================== */

:root {
  --bb-signal-surface-dark: #111318;
  --bb-signal-surface-light: #F8F9FB;
  --bb-signal-blue: #0F52BA;
  --bb-signal-ratio: 1672 / 941;   /* native approved aspect, 16:9 */
}

/* --------------------------------------------------------------------------
   1. Base artwork block — seamless on the matching surface
   -------------------------------------------------------------------------- */
.bb-signal-art {
  margin: 0;
  background-color: transparent;
}
.bb-signal-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--bb-signal-ratio);
  object-fit: contain;           /* never crop node-critical artwork */
  max-width: 100%;
}
.bb-signal-art--dark {
  background-color: var(--bb-signal-surface-dark);
}
.bb-signal-art--light {
  background-color: var(--bb-signal-surface-light);
}
/* Plate variant keeps a deliberate edge for artwork sitting on a tinted panel. */
.bb-signal-art--plate {
  border: 1px solid var(--bb-border-light);
  border-radius: var(--bb-radius-md);
  overflow: hidden;
}
.bb-v2 .bb-signal-art .bb-signal-art__caption {
  margin: 0;
  padding: var(--bb-space-3) 0 0;
  font-size: var(--bb-fs-300);
  line-height: var(--bb-lh-body);
  color: var(--bb-text-secondary);
}
.bb-v2 .bb-signal-art--dark .bb-signal-art__caption {
  color: var(--bb-text-secondary-dark);
}

/* --------------------------------------------------------------------------
   2. LIGHT Signal hero (homepage)
   Off-white surface, graphite copy, approved Light artwork on a bounded panel.
   The design-system defaults are already light-surface, so this block states
   the light surface explicitly and adds only the panel and width rules.
   -------------------------------------------------------------------------- */
.bb-v2 .bb-hero--signal {
  background-color: var(--bb-signal-surface-light);
  color: var(--bb-text-primary);
  /* The site header is position:fixed (measured 80px up to 991px, 100px from
     992px), so the hero's own top padding must clear it — otherwise the first
     hero line renders behind the fixed header at every breakpoint. */
  padding-block-start: calc(80px + clamp(1.5rem, 3vw, 2.5rem));
}
@media (min-width: 992px) {
  .bb-v2 .bb-hero--signal {
    padding-block-start: calc(100px + clamp(2rem, 4vw, 3.5rem));
  }
}
.bb-v2 .bb-hero--signal .bb-display,
.bb-v2 .bb-hero--signal .bb-h2 {
  color: var(--bb-text-primary);
}
.bb-v2 .bb-hero--signal .bb-hero__lead {
  color: var(--bb-text-secondary);
}
.bb-v2 .bb-hero--signal .bb-hero__visual {
  max-width: 560px;          /* Hero/Large footprint: ~530-560px at 1440 */
  margin-inline: auto;
  width: 100%;
}
.bb-v2 .bb-hero--signal .bb-hero__visual img {
  max-width: 100%;
}
/* The panel is the hero's only "surface": tabs and artwork live inside it, so
   the state control reads as part of the composition rather than floating. */
.bb-v2 .bb-signal-panel,
.bb-signal-panel {
  background-color: #FFFFFF;
  border: 1px solid var(--bb-border-light);
  border-radius: var(--bb-radius-lg, 16px);
  padding: var(--bb-space-5);
}

/* --------------------------------------------------------------------------
   3. Hero capability states (accessible tablist, no slider, no autoplay)
   -------------------------------------------------------------------------- */
.bb-signal-states {
  display: grid;
  gap: var(--bb-space-4);
}
.bb-signal-states__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-space-2);
}
.bb-signal-states__tab {
  min-height: var(--bb-touch-min);
  padding: var(--bb-space-2) var(--bb-space-4);
  font-family: var(--bb-font-body);
  font-size: var(--bb-fs-300);
  font-weight: var(--bb-fw-semibold);
  letter-spacing: 0.01em;
  color: var(--bb-text-secondary);
  background-color: #FFFFFF;
  border: 1px solid var(--bb-border-light);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--bb-motion-ui) var(--bb-ease-standard),
              border-color var(--bb-motion-ui) var(--bb-ease-standard),
              background-color var(--bb-motion-ui) var(--bb-ease-standard);
}
.bb-signal-states__tab:hover {
  color: var(--bb-accent);
  border-color: var(--bb-accent);
}
.bb-signal-states__tab[aria-selected="true"] {
  color: #FFFFFF;
  background-color: var(--bb-accent);
  border-color: var(--bb-accent);
}
.bb-signal-states__tab:focus-visible {
  outline: 3px solid var(--bb-accent);
  outline-offset: 2px;
}
.bb-signal-states__panel {
  margin: 0;
}
.bb-signal-states__panel[hidden] {
  display: none;
}
.bb-signal-states__panel figcaption {
  margin: var(--bb-space-3) 0 0;
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-300);
  line-height: var(--bb-lh-body);
  color: var(--bb-text-secondary);
}

/* --------------------------------------------------------------------------
   3b. Capability tabs on small screens: one swipeable row
   No hard clipping and no lopsided 3+1 wrap. Each tab keeps a 44px target,
   scroll-snap keeps a full tab aligned at either edge, and the strip gets
   end padding so the last tab is never flush against the viewport edge.
   Without JS or with touch scrolling disabled, every tab is still reachable
   because the row scrolls natively.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .bb-signal-states__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--bb-space-2);
    padding-inline-end: var(--bb-space-5);
    scroll-padding-inline-start: var(--bb-space-1, 4px);
  }
  .bb-signal-states__tabs > .bb-signal-states__tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .bb-v2 .bb-signal-panel,
  .bb-signal-panel {
    padding: var(--bb-space-4);
  }
}

/* --------------------------------------------------------------------------
   4. Miniatures — full approved composition at small size, never cropped
   -------------------------------------------------------------------------- */
.bb-signal-mini {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: var(--bb-signal-ratio);
  object-fit: contain;
}
/* Cards: fill the reserved visual slot at natural ratio. */
.bb-v2 .bb-card__visual--signal {
  height: auto;
  min-height: 0;
}
.bb-v2 .bb-card__visual--signal img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--bb-signal-ratio);
  object-fit: contain;
}
.bb-v2 .bb-card__visual--signal .bb-signal-mini {
  height: auto;
  max-width: 100%;
}

/* Growth-system carousel: the icon slot carries the Signal miniature instead of
   an icon-font glyph the template never loaded. */
.portfolio-sildes.bb-growth-system .single-portfolio-slide .growth-service-icon {
  align-items: center;
  padding: 24px 24px 0;
}
.portfolio-sildes.bb-growth-system .single-portfolio-slide .growth-service-icon img {
  width: 100%;
  max-width: 260px;
  height: auto;
}

/* --------------------------------------------------------------------------
   4b. Services hub capability blocks — miniature above the Lucide icon
   -------------------------------------------------------------------------- */
.hub-signal {
  margin: 0 0 var(--bb-space-4);
}
.hub-signal img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--bb-signal-ratio);
  object-fit: contain;
  background-color: var(--bb-signal-surface-light);
  border: 1px solid var(--bb-border-light);
  border-radius: var(--bb-radius-sm, 8px);
}
.single-service-area .service-icon svg {
  width: 28px;
  height: 28px;
}

/* --------------------------------------------------------------------------
   5. Signal band — service-page hero visual below the breadcrumb
   -------------------------------------------------------------------------- */
.bb-signal-band {
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.bb-signal-band--dark {
  background-color: var(--bb-signal-surface-dark);
}
.bb-signal-band--light {
  background-color: var(--bb-signal-surface-light);
}
.bb-signal-band__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--bb-space-5);
}
.bb-v2 .bb-signal-art .bb-signal-band__caption,
.bb-signal-band__caption {
  margin: var(--bb-space-3) 0 0;
  font-size: var(--bb-fs-300);
  line-height: var(--bb-lh-body);
  color: var(--bb-text-secondary);
}
.bb-v2 .bb-signal-band--dark .bb-signal-band__caption,
.bb-signal-band--dark .bb-signal-band__caption {
  color: var(--bb-text-secondary-dark);
}

/* --------------------------------------------------------------------------
   6. Partner / editorial artwork (About + homepage partner section)
   -------------------------------------------------------------------------- */
.bb-signal-partner {
  margin: 0;
  background-color: var(--bb-signal-surface-light);
  border-radius: var(--bb-radius-md);
  overflow: hidden;
}
.bb-signal-partner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--bb-signal-ratio);
  object-fit: contain;
}
.bb-v2 .bb-signal-art .bb-signal-partner__caption,
.bb-signal-partner__caption {
  margin: 0;
  padding: var(--bb-space-3) var(--bb-space-4);
  font-size: var(--bb-fs-300);
  line-height: var(--bb-lh-body);
  color: var(--bb-text-secondary);
}

/* --------------------------------------------------------------------------
   7. Responsive — mobile keeps the composition legible rather than shrinking it
      into illegibility: the artwork stays full-width at natural ratio.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .bb-v2 .bb-hero--signal .bb-hero__visual {
    max-width: 100%;
  }
  .bb-signal-states__tabs {
    gap: var(--bb-space-1, 4px);
  }
  .bb-signal-states__tab {
    padding-inline: var(--bb-space-3);
  }
  .bb-signal-art__caption,
  .bb-signal-states__panel figcaption {
    font-size: 0.8125rem;
  }
}

/* Explicit reduced-motion guard: these images never animate; if any inherited
   rule would animate them, it is switched off here. */
@media (prefers-reduced-motion: reduce) {
  .bb-signal-art img,
  .bb-signal-mini,
  .bb-signal-partner img,
  .bb-signal-band img,
  .bb-signal-states__panel img {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
}