/* Cichy pas zaufania pod hero (marki v4). Markup: parts/brands-bar.php */

.netim-brands-bar {
  --nbb-navy: #050a30;
  --nbb-paper: #fafbff;
  --nbb-mint-deep: #3dbd6e;
  --nbb-blue: #1e5e9f;
  --nbb-mute: #5b6385;
  --nbb-line: #d8defa;
  --nbb-ease: cubic-bezier(.23, 1, .32, 1);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 26px 0 26px;
  background: var(--nbb-paper);
  border-bottom: 1px solid var(--nbb-line);
  color: var(--nbb-navy);
  font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;

  img, svg { display: block; max-width: 100%; }

  a { text-decoration: none; color: inherit; }

  .bar {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: min(100%, 1320px);
    margin: 0 auto;
    padding: 0 32px;
  }

  .claim   { order: 1; }
  .marquee { order: 2; }

  .claim {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 14px;
    white-space: normal;
    text-align: center;
  }
  .claim em::before,
  .claim .ref::before {
    content: "·";
    margin-right: 14px;
    color: var(--nbb-line);
  }

  .claim b {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--nbb-navy);
  }

  .claim em {
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
    color: var(--nbb-mute);
  }

  .claim .ref {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 12px;
    font-style: italic;
    font-weight: 800;
    color: var(--nbb-mint-deep);
    transition: color .2s var(--nbb-ease);
  }

  .claim .ref:hover { color: var(--nbb-blue); }
  .claim .ref .arr { transition: transform .25s var(--nbb-ease); }
  .claim .ref:hover .arr { transform: translateX(4px); }

  .marquee {
    position: relative;
  }

  /* SIATKA logo (nie slider) - wyśrodkowana, zawija się w rzędy */
  .track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(30px, 3.4vw, 54px) clamp(40px, 4.8vw, 74px);
    width: auto;
    padding: 4px 0;
  }

  .logo {
    display: grid;
    place-items: center;
    flex: none;
    height: 60px;
    width: auto;
  }

  /* Loga przyciete do realnej tresci (assets/clients-logos, backup w _orig).
     Kolor, duze i widoczne. Rozmiary skalibrowane optycznie per logo - zadne nie znika. */
  .logo img {
    width: auto;
    object-fit: contain;
    opacity: .92;
    transition: opacity .3s var(--nbb-ease), transform .3s var(--nbb-ease);
  }

  .logo-eltrox img         { max-height: 52px; max-width: 52px; }
  .logo-ascoin img         { max-height: 52px; max-width: 40px; }
  .logo-alltax img         { max-height: 54px; max-width: 56px; }
  .logo-gameta img         { max-height: 44px; max-width: 215px; }
  .logo-arkana img         { max-height: 41px; max-width: 210px; }
  .logo-biomedika img      { max-height: 38px; max-width: 185px; }
  .logo-podatkomat img     { max-height: 54px; max-width: 272px; }
  .logo-mobilny-lekarz img { max-height: 50px; max-width: 210px; }
  .logo-bader img          { max-height: 47px; max-width: 168px; }
  .logo-eko-logis img      { max-height: 41px; max-width: 150px; }
  .logo-gmsystem img       { max-height: 47px; max-width: 180px; }

  .logo:hover img {
    opacity: 1;
    transform: translateY(-2px);
  }

  @media (max-width: 760px) {
    padding: 30px 0;

    .bar {
      grid-template-columns: 1fr;
      gap: 22px;
      padding: 0 20px;
    }

    .claim { white-space: normal; justify-content: center; text-align: center; gap: 4px; }
    .claim em::before, .claim .ref::before { display: none; }

    .logo { height: 48px; }
    .logo-eltrox img         { max-height: 37px; max-width: 37px; }
    .logo-ascoin img         { max-height: 37px; max-width: 34px; }
    .logo-alltax img         { max-height: 38px; max-width: 40px; }
    .logo-gameta img         { max-height: 37px; max-width: 185px; }
    .logo-arkana img         { max-height: 33px; max-width: 168px; }
    .logo-biomedika img      { max-height: 30px; max-width: 148px; }
    .logo-podatkomat img     { max-height: 46px; max-width: 232px; }
    .logo-mobilny-lekarz img { max-height: 40px; max-width: 168px; }
    .logo-bader img          { max-height: 38px; max-width: 134px; }
    .logo-eko-logis img      { max-height: 33px; max-width: 120px; }
    .logo-gmsystem img       { max-height: 38px; max-width: 144px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .track { animation: none !important; flex-wrap: wrap; justify-content: center; }
  }
}

@keyframes nbb-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}