/* ═══ People cards + logo strip ═══ (no widget background – set it on the container) */

.wtk-pp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:stretch}

/* Cards in a row are equally tall (grid stretch); the shadow is set by the "Kártya" style controls */
.wtk-pp-card{display:flex;flex-direction:column;overflow:hidden;background-color:#ffffff}

/* Photo: duotone = grayscale image multiplied over the light colour, dark colour lifts the blacks */
.wtk-pp-photo{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:4/3;background-color:#0a1821}
.wtk-pp-photo img{display:block;width:100%;height:100%;object-fit:cover}
.wtk-pp-photo--duo{background-color:#2c6a69}
.wtk-pp-photo--duo img{filter:grayscale(1) contrast(1.05);mix-blend-mode:multiply}
.wtk-pp-photo--duo::after{content:'';position:absolute;inset:0;background-color:#0a1821;mix-blend-mode:lighten;pointer-events:none}

/* Placeholder when no photo is set */
.wtk-pp-photo--empty{
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,var(--wtk-pp-ph-a,#0c1c26) 0 14px,var(--wtk-pp-ph-b,#16323e) 14px 28px);
}
.wtk-pp-ph-label{color:#4c94a3;font-family:'Roboto Mono',monospace,system-ui;font-size:11px;letter-spacing:.25em;text-transform:uppercase}

.wtk-pp-body{flex:1;display:flex;flex-direction:column;box-sizing:border-box;padding:28px 25px 32px}

/* .wtk-pp prefix keeps these above theme / Elementor kit heading & paragraph rules */
.wtk-pp .wtk-pp-name{margin:0;color:#0a1821;font-size:18px;font-weight:900;letter-spacing:.06em;line-height:1.3;text-transform:uppercase}
.wtk-pp .wtk-pp-role{margin:2px 0 0;color:#5c666e;font-size:15px;line-height:1.4}
.wtk-pp .wtk-pp-quote{margin:16px 0 0;color:#3d4a52;font-size:16px;line-height:1.6}

/* Long text is cut after N lines (N = "Látható sorok száma" control); "Mutass többet" opens it */
.wtk-pp .wtk-pp-quote--clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.wtk-pp .wtk-pp-quote--clamp.is-open{display:block;-webkit-line-clamp:unset;overflow:visible}

/* Button sits at the bottom of the card, so it lines up across the row */
.wtk-pp .wtk-pp-more{
  display:inline-flex;align-items:center;gap:8px;
  align-self:flex-start;
  margin:auto 0 0;padding:16px 0 0;
  border:0;border-radius:0;box-shadow:none;background:none;
  color:#2c6a69;
  font-size:13px;font-weight:700;letter-spacing:.1em;line-height:1.2;text-transform:uppercase;
  cursor:pointer;transition:color .2s;
}
.wtk-pp .wtk-pp-more[hidden]{display:none}
.wtk-pp .wtk-pp-more:hover{background:none;color:#f7941d}
.wtk-pp .wtk-pp-more:focus-visible{outline:2px solid #f7941d;outline-offset:3px}
.wtk-pp .wtk-pp-more::after{
  content:'';flex:none;width:6px;height:6px;margin-top:-3px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .2s,margin .2s;
}
.wtk-pp .wtk-pp-more[aria-expanded="true"]::after{margin-top:3px;transform:rotate(-135deg)}

/* Logo strip – a scroll-snap slider. --wtk-pp-vis = logos visible at once, --wtk-pp-gap = space between them.
   If there are no more logos than visible ones, nothing scrolls and the logos stay centred. */
.wtk-pp-logos{--wtk-pp-vis:4;--wtk-pp-gap:16px;position:relative;box-sizing:border-box;margin-top:32px}
.wtk-pp-track{
  display:flex;
  gap:var(--wtk-pp-gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  position:relative;
}
.wtk-pp-track::-webkit-scrollbar{display:none}

.wtk-pp-logo{
  flex:0 0 calc((100% - (var(--wtk-pp-vis) - 1) * var(--wtk-pp-gap)) / var(--wtk-pp-vis));
  scroll-snap-align:start;
  display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;
  height:120px;
}
.wtk-pp-logo:first-child{margin-left:auto}
.wtk-pp-logo:last-child{margin-right:auto}
.wtk-pp-logo--empty{border:1px dashed #c3cccc}
.wtk-pp-logo-link{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.wtk-pp-logo img{display:block;width:auto;height:90px;max-width:80%;object-fit:contain}
.wtk-pp-logo-label{color:#8a9499;font-family:'Roboto Mono',monospace,system-ui;font-size:12px}

/* Arrows – only shown (and the side gutter only reserved) when the strip really scrolls; set by people.js */
.wtk-pp .wtk-pp-nav{
  display:none;
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  align-items:center;justify-content:center;
  width:40px;height:40px;min-height:0;margin:0;padding:0;
  border:0;border-radius:50%;box-shadow:none;
  background-color:#0a1821;color:#ffffff;
  line-height:1;cursor:pointer;
  transition:background-color .2s;
}
.wtk-pp .wtk-pp-nav:hover{background-color:#f7941d;color:#ffffff}
.wtk-pp .wtk-pp-nav:focus-visible{outline:2px solid #f7941d;outline-offset:2px}
.wtk-pp .wtk-pp-nav--prev{left:0}
.wtk-pp .wtk-pp-nav--next{right:0}
.wtk-pp-logos[data-scrollable]{padding:0 56px}
.wtk-pp-logos[data-scrollable] .wtk-pp-nav{display:flex}

@media(max-width:1024px){
  .wtk-pp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wtk-pp-logos{--wtk-pp-vis:3}
}
@media(max-width:767px){
  .wtk-pp-cards{grid-template-columns:minmax(0,1fr)}
  .wtk-pp-logos{--wtk-pp-vis:2}
  .wtk-pp-logos[data-scrollable]{padding:0 44px}
  .wtk-pp .wtk-pp-nav{width:34px;height:34px}
}