/* =============================================================================
   POMELO — komponent .pikh-root (karuzela influencerów, „Nasi ambasadorzy")
   Tokeny systemu „new" (--pom-*) z FALLBACKAMI, więc działa też bez pomelo-new.css.
   Breakpoint: 767/768px (spójny z systemem new-).
   Figma: desktop 3238-15581 / mobile 3238-17325
   ============================================================================= */

/* fix: Elementor e-con potrafi zwinąć widget do 0 szerokości */
.elementor-widget:has(> .elementor-widget-container > .pikh-root),
.elementor-widget-container:has(> .pikh-root){ width:100%; }

/* fix: gdy kontener Elementora ma Overflow=hidden, ucina wystającą postać.
   Odblokowujemy tylko kontenery, w których stoi ta sekcja. */
.elementor-widget:has(.pikh-root),
.elementor-widget-container:has(.pikh-root),
.e-con:has(.pikh-root),
.e-con-inner:has(.pikh-root),
.elementor-section:has(.pikh-root),
.elementor-container:has(.pikh-root),
.elementor-column:has(.pikh-root),
.elementor-widget-wrap:has(.pikh-root){ overflow:visible !important; }

.pikh-root{
  --pikh-primary:var(--pom-primary-500,#C8C84A);
  --pikh-primary-600:var(--pom-primary-600,#B3B33F);
  --pikh-ink:var(--pom-neutral-900,#1F1F1F);
  --pikh-ink-800:var(--pom-neutral-800,#333333);
  --pikh-ink-700:var(--pom-neutral-700,#595959);
  --pikh-dot:#D9D9D9;
  --pikh-dot-on:#8E8E8E;

  /* konfigurowalne z Elementora (mają wartości domyślne) */
  --pikh-photo-w:298px;
  --pikh-photo-h:382px;
  --pikh-photo-overlap:256px;
  --pikh-ava:102px;
  --pikh-max:1260px;

  position:relative;
  z-index:0;
  isolation:isolate;
  width:100%;
  /* Zdjęcie może wychodzić poza sekcję. `clip` nie robi paska przewijania,
     a `overflow-clip-margin` pozwala postaci wyjść o tyle px poza krawędź. */
  overflow-x:clip;
  overflow-clip-margin:var(--pikh-bleed,100vw);
  font-family:var(--pom-font-body,'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);
  color:var(--pikh-ink);
  -webkit-font-smoothing:antialiased;
}
.pikh-root :where(p,h2,h3,div,span,figure,img,button){ margin:0; padding:0; box-sizing:border-box; }
.pikh-root *,.pikh-root *::before,.pikh-root *::after{ box-sizing:border-box; }

.pikh-inner{
  max-width:var(--pikh-max);
  margin:0 auto;
  padding:0 24px;
  display:flex;
  flex-direction:column;
  gap:32px;
}

/* ========================= nagłówek ========================= */
.pikh-head{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.pikh-root .pikh-eyebrow{
  font-family:var(--pom-font-heading,'Rubik'),sans-serif !important;
  font-weight:500 !important;
  font-size:14px;
  line-height:1.2;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--pikh-ink-700);
  text-align:center;
}
.pikh-root .pikh-title{
  font-family:var(--pom-font-heading,'Rubik'),sans-serif !important;
  font-weight:700 !important;
  font-size:40px;
  line-height:1.2;
  letter-spacing:0;
  text-transform:uppercase;
  color:var(--pikh-ink);
  text-align:center;
  /* Odstep 8px daje juz `gap` na .pikh-head (flex column) - tytul NIE moze
     miec wlasnego margin-top, bo odstepy sie sumowaly (8+17=25px).
     W Figmie y tytulu = 25 to pozycja w ramce, a nie odstep: 25 - 17 = 8. */
  margin:0 !important;
}

/* ============== kółka influencerów = nawigacja ============== */
.pikh-thumbs{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:32px;
  margin-top:23px; /* razem z gap = 40px od tytułu */
}
.pikh-root .pikh-thumb{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  background:none !important;
  border:0;
  box-shadow:none !important;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
/* motyw Elementora dorzuca czerwone tło na hover/tap button — neutralizujemy */
.pikh-root .pikh-thumb:hover,
.pikh-root .pikh-thumb:focus,
.pikh-root .pikh-thumb:focus-visible,
.pikh-root .pikh-thumb:active{
  background:none !important;
  color:inherit !important;
  box-shadow:none !important;
  outline:none;
}
/* Kółko = jasny pierścień + koło z tłem pod wyciętą postacią. Twarze wgrywa się
   jako kwadraty BEZ tła, więc tło daje dopiero to koło: domyślnie szare, na
   aktywnym limonkowe (makiety 2964-15935 / 2964-15924 / 3048-20168).
   Proporcje z Figmy: kółko 102 px, zdjęcie w kole 94 px → pierścień 4 px. */
.pikh-ava{
  width:var(--pikh-ava);
  height:var(--pikh-ava);
  border-radius:50%;
  background:var(--pikh-ava-ring,#FFFFFF);
  border:2px solid transparent;   /* na hover zielona obwódka, bez skakania */
  padding:2px;                    /* jasny pierścień między obwódką a zdjęciem */
  transition:border-color .18s ease, transform .18s ease;
}
.pikh-ava-in{
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  overflow:hidden;
  background:var(--pikh-ava-bg,var(--pom-neutral-300,#EFEFEF));
  transition:background-color .18s ease;
}
.pikh-root img.pikh-ava-img{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  object-position:bottom center;
}
/* AKTYWNY (makieta 2964-15913): zielona obwódka + zielona kreska pod podpisem,
   tło pod postacią jak w spoczynku, jasny pierścień zostaje. */
.pikh-thumb.is-active .pikh-ava{ border-color:var(--pikh-primary-600); }
.pikh-thumb.is-active .pikh-ava-in{
  background:var(--pikh-ava-bg-active,var(--pikh-ava-bg,var(--pom-neutral-300,#EFEFEF)));
}
.pikh-thumb.is-active .pikh-tline{ background:var(--pikh-primary-600); }

/* NAJECHANIE (makieta 3048-20161): zielona obwódka + LIMONKOWE wypełnienie
   pod postacią, między nimi nadal jasny pierścień. */
.pikh-thumb:hover .pikh-ava{
  border-color:var(--pikh-primary-600);
  transform:translateY(-2px);
}
.pikh-thumb:hover .pikh-ava-in{
  background:var(--pikh-ava-bg-hover,var(--pikh-primary));
}

.pikh-tmeta{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.pikh-root .pikh-tname,
.pikh-root .pikh-trole{
  font-family:var(--pom-font-heading,'Rubik'),sans-serif !important;
  font-weight:500 !important;
  font-size:14px;
  line-height:1.2;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-align:center;
  white-space:nowrap;
}
.pikh-root .pikh-tname{ color:var(--pikh-ink); }
.pikh-root .pikh-trole{ color:var(--pikh-ink-700); }
/* podkreślenie aktywnego — zawsze w layoucie, żeby nic nie skakało */
.pikh-tline{
  width:99px;
  height:3px;
  background:transparent;
  border-radius:2px;
  transition:background-color .18s ease;
}

/* ========================= karuzela ========================= */
.pikh-carousel{ display:flex; flex-direction:column; align-items:center; gap:24px; width:100%; }

/* Nic w drodze zdjęcia nie może przycinać — motyw i Elementor lubią wstawiać
   overflow:hidden na kontenerach. Pas przewijania (.pikh-track) to jedyny wyjątek,
   ale zdjęcia w nim nie siedzą. */
.pikh-inner,
.pikh-carousel,
.pikh-viewport,
.pikh-slide,
.pikh-photos,
.pikh-photo{ overflow:visible !important; }

/* Zdjęcia leżą w WARSTWIE nad pasem przewijania — pas musi mieć overflow, więc
   wszystko w jego środku byłoby ucinane. Poza nim postać może wyjść poza slajd,
   poza kartę i poza sekcję, a karta zachowuje pełną szerokość dla tekstu.
   Jazdę z pasem i wygaszanie sąsiadów robi JS (positionPhotos). */
.pikh-viewport{
  position:relative;
  width:100%;
  margin-top:var(--pikh-photo-lift,0px); /* miejsce na część wystającą ponad kartę */
}
.pikh-photos{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
}
.pikh-track{
  display:flex;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.pikh-track::-webkit-scrollbar{ display:none; height:0; }

.pikh-slide{
  position:relative;
  flex:0 0 100%;
  min-width:100%;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  /* Karta zajmuje cały slajd — zdjęcie jest w warstwie nad nim, więc nie musi
     zabierać miejsca. Ile miejsca ustępuje tekst, ustala „Odstęp tekstu". */
}

/* --- zdjęcie influencera (tylko desktop) --- */
.pikh-photo{
  position:absolute;
  /* --pikh-photo-x może być UJEMNY: postać wychodzi wtedy poza slajd i sekcję.
     --pikh-photo-slide ustawia JS, żeby zdjęcie jechało razem z kartą. */
  left:var(--pikh-photo-x,0px);
  bottom:var(--pikh-photo-y,0px);
  width:var(--pikh-photo-w);
  height:var(--pikh-photo-h);
  transform:translateX(var(--pikh-photo-slide,0px));
  z-index:2;
  pointer-events:none;
  /* Stan bez JS-a musi być poprawny: widać tylko aktywne zdjęcie. Inaczej przy
     starym/niezaładowanym skrypcie wszystkie postacie leżą jedna na drugiej.
     Po starcie JS nadpisuje to inline'owym opacity (płynne przenikanie). */
  opacity:0;
}
.pikh-photo.is-active{ opacity:1; }
/* PNG bez tła: contain = nic nie przycinamy; pozycję koryguje się suwakami */
.pikh-root img.pikh-photo-img{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:var(--pikh-photo-fit,contain);
  object-position:var(--pikh-photo-pos,bottom center);
}
/* Cień tylko na aktywnym slajdzie: sąsiad stoi tuż za krawędzią pasa i jego
   rozmycie było widoczne jako pionowy pasek przy prawym brzegu karty. */
.pikh-root .pikh-photo.is-active img.pikh-photo-img{
  filter:var(--pikh-photo-shadow,drop-shadow(3px 4px 8px rgba(0,0,0,.23)));
}

/* --- karta z cytatem --- */
.pikh-card{
  flex:1 1 auto;
  min-width:0;
  position:relative;
  z-index:1;
  /* twardy kolor, NIE var() — pusty token motywu unieważniłby deklarację
     i karta zostałaby bez tła; odcień zmienia się kontrolką „Tło karty" */
  background-color:#F8F8F8;
  border-radius:25px;
  /* lewy margines w karcie = miejsce zajęte przez zdjęcie + odstęp do treści */
  padding:24px 40px 24px calc(
    max(0px, calc(var(--pikh-photo-w) + var(--pikh-photo-x,0px) - var(--pikh-photo-overlap)))
    + var(--pikh-card-pad,238px)
  );
  display:flex;
  align-items:flex-start;
  gap:21px;
  overflow:hidden;
}
.pikh-root svg.pikh-qmark{
  flex:0 0 auto;
  display:block;
  width:55.86px !important;
  height:43.94px !important;
  color:var(--pikh-primary);
}
.pikh-body{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; }
.pikh-root .pikh-text,
.pikh-root .pikh-text p{
  font-family:var(--pom-font-body,'Montserrat'),sans-serif !important;
  font-weight:400 !important;
  font-style:italic;
  font-size:16px;
  line-height:1.6;
  color:var(--pikh-ink-800);
}
.pikh-root .pikh-text{ padding-top:40px !important; }
.pikh-root .pikh-text p{ margin:0 0 1.6em !important; }
.pikh-root .pikh-text p:last-child{ margin-bottom:0 !important; }

.pikh-sign{
  align-self:flex-start;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  margin-top:auto;
  padding-top:24px !important;
}
.pikh-root .pikh-sign-name{
  font-family:'Caveat','Segoe Script',cursive !important;
  font-weight:500 !important;
  font-size:34px;
  line-height:1;
  color:var(--pikh-ink-800);
  white-space:nowrap;
  transform:rotate(-4.73deg);
}
/* podpis wgrany jako obrazek (na desktopie: osobny PNG per influencer) */
.pikh-root img.pikh-sign-img{
  display:block;
  width:auto !important;
  height:var(--pikh-sign-h,54px) !important;
  max-width:100%;
  object-fit:contain;
}

/* kadr mobilny z wtopionym podpisem — na desktopie nieużywany */
.pikh-mphoto{ display:none; }
.pikh-root .pikh-sign-role{
  font-family:var(--pom-font-body,'Montserrat'),sans-serif !important;
  font-weight:400 !important;
  font-size:14px;
  line-height:1.4;
  color:var(--pikh-ink);
  text-align:center;
  white-space:nowrap;
}

/* ===================== strzałki + kropki ===================== */
.pikh-nav{ display:flex; align-items:center; justify-content:center; gap:24px; height:44px; }
.pikh-root .pikh-arrow{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border:0;
  border-radius:12px;
  background:transparent !important;
  display:grid;
  place-items:center;
  cursor:pointer;
  color:var(--pikh-ink-700);
  transition:color .18s ease, background-color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.pikh-root .pikh-arrow:hover,
.pikh-root .pikh-arrow:focus-visible,
.pikh-root .pikh-arrow:active{
  background:rgba(0,0,0,.04) !important;
  color:var(--pikh-ink) !important;
  box-shadow:none !important;
  outline:none;
}
.pikh-root svg.pikh-chevron{
  display:block;
  width:24px !important;
  height:24px !important;
  color:currentColor;
}
.pikh-arrow--prev svg.pikh-chevron{ transform:rotate(180deg); }

.pikh-dots{ display:flex; align-items:center; gap:10px; padding:10px !important; }
.pikh-root .pikh-dot{
  width:12px;
  height:12px;
  flex:0 0 12px;
  border:0;
  border-radius:50%;
  background:var(--pikh-dot) !important;
  cursor:pointer;
  transition:background-color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.pikh-root .pikh-dot:hover{ background:#C4C4C4 !important; }
.pikh-root .pikh-dot.is-active{ background:var(--pikh-dot-on) !important; }

/* ============================ MOBILE ============================ */
@media (max-width:767px){
  .pikh-root{ --pikh-ava:86px; }
  .pikh-inner{ padding:0; gap:32px; }
  .pikh-head{ padding:0 16px; }
  .pikh-root .pikh-eyebrow{ font-size:12px; }
  .pikh-root .pikh-title{ font-size:28px; margin-top:0 !important; }

  /* kółka: poziomy scroll, bez dużego zdjęcia */
  .pikh-thumbs{
    justify-content:flex-start;
    gap:20px;
    margin-top:26px;
    padding:0 32px 4px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .pikh-thumbs::-webkit-scrollbar{ display:none; height:0; }
  .pikh-root .pikh-thumb{ gap:5px; scroll-snap-align:center; }
  .pikh-root .pikh-tname,
  .pikh-root .pikh-trole{ font-size:11.8px; }
  .pikh-tmeta{ gap:1.7px; }
  .pikh-tline{ width:83px; height:2.5px; }

  /* karty mają własną wysokość (jak w makiecie) */
  .pikh-slide{ padding:0 12px; align-items:flex-start; }
  .pikh-photos{ display:none; }
  .pikh-viewport{ margin-top:0 !important; }
  .pikh-card{
    padding:24px 16px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .pikh-root svg.pikh-qmark{ width:47.86px !important; height:37.65px !important; }
  .pikh-root .pikh-text,
  .pikh-root .pikh-text p{ font-size:14px !important; }
  .pikh-root .pikh-text{ padding-top:0 !important; }
  .pikh-sign{
    align-self:flex-end;
    padding-top:16px !important;
    padding-bottom:24px !important;
  }

  /* kadr mobilny z wtopionym podpisem */
  .pikh-mphoto{
    display:flex;
    justify-content:var(--pikh-mphoto-align,flex-end);
    order:var(--pikh-mphoto-order,0);
    margin-top:8px;
  }
  .pikh-root img.pikh-mphoto-img{
    display:block;
    width:var(--pikh-mphoto-w,60%) !important;
    height:auto !important;
    max-width:100%;
    object-fit:contain;
    transform:translate(var(--pikh-mphoto-x,0px),var(--pikh-mphoto-y,0px));
  }
  /* kadr mobilny może wystawać poza kartę (przesunięcie), więc jej nie przycinamy */
  .pikh-slide--mphoto .pikh-card{ overflow:visible; }
  /* podpis siedzi w grafice → nie dublujemy go tekstem/obrazkiem */
  .pikh-root--mhide .pikh-slide--mphoto .pikh-sign{ display:none; }
}

/* wąskie telefony */
@media (max-width:359px){
  .pikh-root .pikh-sign-name{ font-size:28px; }
  .pikh-root .pikh-sign-role{ white-space:normal; }
}

/* tablet: mniejsze zdjęcie i kółka */
@media (min-width:768px) and (max-width:1099px){
  .pikh-root{
    --pikh-photo-w:210px;
    --pikh-photo-h:280px;
    --pikh-photo-overlap:170px;
    --pikh-ava:88px;
  }
  .pikh-card{ padding:24px 24px 24px calc(var(--pikh-photo-w) - var(--pikh-photo-overlap) + min(160px, var(--pikh-card-pad,238px))); }
  .pikh-root .pikh-title{ font-size:32px; }
  .pikh-thumbs{ gap:20px; }
  .pikh-root .pikh-tname,.pikh-root .pikh-trole{ font-size:12px; }
  .pikh-tline{ width:86px; }
}