/*
 * Сертифікати лікаря на сторінці team-member.
 * Усі класи з префіксом pv-certs-*, кольори — ті самі --pv-* що у vidguky.css
 * (з фолбеками, бо блок не залежить від того, чи підключено vidguky.css).
 * Swiper 11 (Thumbs + Navigation + Zoom) підключається окремо.
 */

.pv-certs {
  --pv-certs-h: 420px;
  margin: 34px 0 0;
  color: var(--pv-ink, #2c1c38);
  margin-bottom: 32px;

}

/* ---------- Заголовок (як .pv-reviews-title у відгуках) ---------- */
.pv-certs-head {
  display: flex;
  align-items: center;
  margin: 0 0 18px;
}

.pv-certs-title {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--pv-purple-dark, #4a0d66);
}

.pv-certs-spark {
  color: var(--pv-gold, #ffc850);
  font-size: 16px;
}

.pv-certs-count {
  color: var(--pv-muted, #9b90a8);
  font-weight: 700;
  font-size: 17px;
}

/* ---------- Великий слайд / одиночний сертифікат ---------- */
.pv-certs-main,
.pv-certs-single {
  position: relative;
  border: 1px solid var(--pv-purple-line, #e6dcf0);
  border-radius: 16px;
  background: var(--pv-purple-tint, #faf7fc);
  overflow: hidden;
}

.pv-certs-main .swiper-slide,
.pv-certs-single {
  height: var(--pv-certs-h);
  box-sizing: border-box;
  padding: 18px 56px;
}

.pv-certs-single {
  padding: 18px;
}

/* кнопка-обгортка картинки: тема Mikado стилізує button, тому скидаємо явно */
.pv-certs .pv-certs-open {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  cursor: zoom-in;
}

.pv-certs .pv-certs-open img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(74, 13, 102, 0.12);
}

/* ---------- Стрілки (лайтбокс лежить у body, поза .pv-certs — тому окремий селектор) ---------- */
.pv-certs .swiper-button-prev,
.pv-certs .swiper-button-next,
.pv-certs-lb .swiper-button-prev,
.pv-certs-lb .swiper-button-next {
  --swiper-navigation-size: 16px;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(74, 13, 102, 0.18);
  color: var(--pv-purple, #640f8b);
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.pv-certs .swiper-button-prev { left: 10px; }
.pv-certs .swiper-button-next { right: 10px; }

.pv-certs .swiper-button-prev:hover,
.pv-certs .swiper-button-next:hover {
  background: var(--pv-purple, #640f8b);
  color: #fff;
}

.pv-certs .swiper-button-disabled {
  opacity: 0.35;
}

/* ---------- Мініатюри ---------- */
.pv-certs-thumbs {
  margin-top: 12px;
}

.pv-certs-thumbs .swiper-slide {
  width: 96px;
  height: 72px;
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: var(--pv-purple-tint, #faf7fc);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.pv-certs-thumbs .swiper-slide:hover {
  opacity: 0.8;
}

.pv-certs-thumbs .swiper-slide-thumb-active {
  border-color: var(--pv-purple, #640f8b);
  opacity: 1;
}

.pv-certs-thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Лайтбокс ---------- */
.pv-certs-lock,
.pv-certs-lock body {
  overflow: hidden;
}

.pv-certs-lb {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  /* непрозорий: білі сертифікати на сторінці просвічують навіть крізь 96% */
  background: #180a22;
}

.pv-certs-lb[hidden] {
  display: none;
}

.pv-certs-lb-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: #fff;
}

.pv-certs-lb-counter {
  margin-right: auto;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.pv-certs-lb .pv-certs-lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.pv-certs-lb .pv-certs-lb-btn:hover,
.pv-certs-lb .pv-certs-lb-btn[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.26);
}

.pv-certs-lb-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.pv-certs-lb-swiper {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

.pv-certs-lb .swiper-slide {
  box-sizing: border-box;
  padding: 0 64px 20px;
}

/* розтягуємо на весь екран і дрібні файли (частина сертифікатів ~500px завширшки) */
.pv-certs-lb .swiper-zoom-container > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pv-certs-lb .swiper-button-prev,
.pv-certs-lb .swiper-button-next {
  --swiper-navigation-size: 18px;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: none;
  color: #fff;
}

.pv-certs-lb .swiper-button-prev { left: 12px; }
.pv-certs-lb .swiper-button-next { right: 12px; }

.pv-certs-lb .swiper-button-prev:hover,
.pv-certs-lb .swiper-button-next:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.pv-certs-lb .swiper-button-disabled {
  opacity: 0.2;
}

/* ---------- Мобільні ---------- */
@media (max-width: 640px) {
  .pv-certs {
    --pv-certs-h: 300px;
  }

  .pv-certs-title {
    font-size: 17px;
  }

  .pv-certs-main .swiper-slide {
    padding: 12px 44px;
  }

  .pv-certs-single {
    padding: 12px;
  }

  .pv-certs .swiper-button-prev,
  .pv-certs .swiper-button-next {
    --swiper-navigation-size: 13px;
    width: 32px;
    height: 32px;
    margin-top: -16px;
  }

  .pv-certs .swiper-button-prev { left: 6px; }
  .pv-certs .swiper-button-next { right: 6px; }

  .pv-certs-thumbs .swiper-slide {
    width: 72px;
    height: 54px;
  }

  /* на телефоні гортають свайпом, стрілки лайтбокса лише заважають */
  .pv-certs-lb .swiper-slide {
    padding: 0 8px 12px;
  }

  .pv-certs-lb .swiper-button-prev,
  .pv-certs-lb .swiper-button-next {
    display: none;
  }
}