/* ==========================================================================
   SEKCJA TOWARZYSTW UBEZPIECZENIOWYCH (PARTNER LOGO SLIDER & OPIS)
   ========================================================================== */

.ak-partners-section {
  padding: 50px 0 35px;
  background-color: var(--ak-bg-white);
  overflow: hidden;
}

.ak-partners-container {
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.ak-partners-h2 {
  font-family: 'Outfit', 'Outfit Fallback', sans-serif;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  color: var(--ak-text-dark);
  text-align: left;
  text-wrap: normal;
  -webkit-text-wrap: normal;
  line-height: 1.3;
  margin: 0 0 30px 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Pasek płynący (Marquee) */
.logo-slider {
  overflow: hidden;
  width: 100%;
  background: transparent; 
  padding: 30px 0; 
  box-sizing: border-box;
  contain: paint layout; 
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logo-track {
  display: flex;
  flex-wrap: nowrap; 
  width: max-content;
}

/* Animacja tylko, gdy main.js dołożył kopię do zapętlenia (bez JS pasek jest statyczny) */
.logo-track.is-looping {
  animation: scrollLogos 60s linear infinite;
  will-change: transform;
}

.logo-slider:hover .logo-track {
  animation-play-state: paused;
}

.logo-track img {
  height: 60px;
  max-width: 200px; 
  object-fit: contain; 
  margin: 0 36px;
  flex-shrink: 0; 
  user-select: none;
  filter: grayscale(100%) opacity(0.85);
  transition: filter 0.3s ease;
}

.logo-track img[src$=".svg"] {
  width: auto; /* szerokość z proporcji width/height — wymiary w HTML tylko rezerwują miejsce (CLS) */
}

.logo-track img:hover {
  filter: grayscale(0%) opacity(1);
}

@keyframes scrollLogos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Tekst pod logotypami */
.ak-partners-text-wrap {
  width: 100%;
  margin: 35px 0 10px;
  text-align: left;
  box-sizing: border-box;
}

.ak-partners-lead {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ak-text-gray);
  margin: 0 0 16px 20px;
  width: 90%;
  max-width: 90%;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  box-sizing: border-box;
}

.ak-partners-body {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ak-text-gray);
  margin: 0 0 16px 20px;
  width: 90%;
  max-width: 90%;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  box-sizing: border-box;
}

.ak-partners-body strong {
  font-weight: 700;
  color: var(--ak-navy-dark);
}

/* Responsywność dla mobile */
@media (max-width: 768px) {
  .ak-partners-section {
    padding: 35px 0 20px;
  }
  
  .ak-partners-h2 {
    font-size: 23px;
    margin: 0 auto 20px;
    text-align: center;
  }
  
  .logo-slider {
    padding: 20px 0;
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  }
  
  .logo-track.is-looping {
    animation-duration: 40s;
  }
  
  .logo-track img {
    height: 44px;
    margin: 0 18px;
  }
  
  .ak-partners-text-wrap {
    margin: 25px auto 10px;
    text-align: center;
  }

  .ak-partners-lead, .ak-partners-body {
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
  }
}

/* ==========================================================================
   PASKI PRZEWIJANE — PAUZA I OGRANICZENIE RUCHU (2026-10-01)
   WCAG 2.2.2: ruch dłuższy niż 5 s musi dać się zatrzymać. Pauza: przycisk,
   najechanie, fokus z klawiatury, a także automatycznie poza ekranem (JS).
   ========================================================================== */
.logo-slider.is-paused .logo-track,
.logo-slider.is-offscreen .logo-track,
.logo-slider:focus-within .logo-track {
  animation-play-state: paused;
}

.ak-marquee-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 4px auto 0;
  padding: 0 16px;
  border: 1px solid var(--ak-border-light);
  border-radius: 50px;
  background: var(--ak-bg-white);
  color: var(--ak-navy-dark);
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.ak-partners-container > .ak-marquee-toggle,
.ak-reviews-section > .ak-marquee-toggle {
  display: flex;
}

.ak-marquee-toggle:hover {
  border-color: var(--ak-teal-ink);
  color: var(--ak-teal-ink);
}

.ak-marquee-toggle:focus-visible {
  outline: 3px solid var(--ak-navy-dark);
  outline-offset: 2px;
}

.ak-marquee-toggle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

.ak-marquee-toggle .ak-mq-icon-play,
.ak-marquee-toggle.is-paused .ak-mq-icon-pause {
  display: none;
}

.ak-marquee-toggle.is-paused .ak-mq-icon-play {
  display: block;
}

/* Ograniczony ruch: zamiast pętli statyczna siatka logotypów (bez kopii do zapętlenia) */
@media (prefers-reduced-motion: reduce) {
  .logo-slider {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .logo-track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 24px;
    transform: none;
    will-change: auto;
  }
  .logo-track img[aria-hidden="true"] {
    display: none;
  }
  .logo-track img {
    transition: none;
  }
  .ak-partners-container > .ak-marquee-toggle {
    display: none;
  }
}