/* /de-zdaty/: короткий hero + той самий каталог лабораторій, що на головній. */

.ps-directory {
  background: var(--white);
}

.ps-directory-intro {
  position: relative;
  overflow: hidden;
  padding: 44px 0 38px;
  background:
    radial-gradient(circle at 82% 26%, rgba(31, 131, 120, 0.13), transparent 32%),
    linear-gradient(110deg, #fff 0%, #f4f8f7 54%, #e9f2f0 100%);
  border-bottom: 1px solid var(--ink-100);
}

.ps-directory-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 56px;
  align-items: center;
  min-height: 330px;
}

.ps-directory-intro-inner {
  position: relative;
  z-index: 2;
  max-width: 850px;
}

.ps-directory-title {
  max-width: 820px;
  margin: 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.ps-directory-title sup,
.ps-directory-labs .v1-section-title sup {
  position: relative;
  top: -0.7em;
  color: var(--diameb-teal);
  font-size: 0.45em;
}

.ps-directory-lead {
  max-width: 800px;
  margin: 18px 0 0;
  color: var(--ink-700);
  font-size: 16px;
  line-height: 1.62;
}

.ps-directory-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.ps-directory-tube {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
}

.ps-directory-wordmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  color: rgba(31, 131, 120, 0.1);
  font-family: var(--font-display);
  font-size: 74px;
  font-weight: 800;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.ps-directory-tube-frame {
  position: relative;
  z-index: 2;
  width: 145px;
  aspect-ratio: 317 / 700;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 600% 600%;
  filter: drop-shadow(0 22px 32px rgba(20, 60, 45, 0.23));
  transform: rotate(8deg);
}

.ps-directory-labs.v1b-labs {
  padding-top: 54px;
}

.ps-directory-labs .v1b-labs-head {
  max-width: 780px;
}

.ps-directory-learn {
  padding: 42px 0;
  background: var(--diameb-teal-tint);
  border-top: 1px solid var(--ink-100);
}

.ps-directory-learn-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  padding: 30px 34px;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(15, 26, 24, 0.06);
}

.ps-directory-learn h2 {
  margin: 0 0 8px;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.2;
}

.ps-directory-learn h2 sup {
  color: var(--diameb-teal);
  font-size: 0.48em;
}

.ps-directory-learn p {
  max-width: 720px;
  margin: 0;
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.55;
}

.ps-directory-learn .v1-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .ps-directory-intro {
    padding: 28px 0 24px;
  }

  .ps-directory-intro-grid {
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 16px;
    min-height: 280px;
  }

  .ps-directory-title {
    font-size: clamp(25px, 6.5vw, 34px);
    line-height: 1.12;
  }

  .ps-directory-lead {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.55;
  }

  .ps-directory-cta {
    margin-top: 18px;
  }

  .ps-directory-tube {
    min-height: 250px;
  }

  .ps-directory-wordmark {
    font-size: 48px;
  }

  .ps-directory-tube-frame {
    width: 104px;
  }

  .ps-directory-labs.v1b-labs {
    padding-top: 42px;
  }
}

@media (max-width: 560px) {
  .ps-directory-intro-grid {
    grid-template-columns: minmax(0, 1fr) 86px;
    gap: 8px;
    min-height: 0;
  }

  .ps-directory-title {
    font-size: clamp(23px, 7.5vw, 30px);
  }

  .ps-directory-cta .v1-btn {
    padding: 14px 18px;
    font-size: 14px;
    white-space: nowrap;
  }

  .ps-directory-tube {
    min-height: 210px;
  }

  .ps-directory-wordmark {
    display: none;
  }

  .ps-directory-tube-frame {
    width: 80px;
    transform: rotate(7deg);
  }

  .ps-directory-labs .v1-section-title {
    font-size: 25px;
  }

  .ps-directory-learn {
    padding: 30px 0;
  }

  .ps-directory-learn-inner {
    align-items: stretch;
    flex-direction: column;
    gap: 20px;
    padding: 24px 20px;
  }

  .ps-directory-learn .v1-btn {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .ps-directory-intro-grid {
    grid-template-columns: minmax(0, 1fr) 66px;
  }

  .ps-directory-tube-frame {
    width: 64px;
  }

  .ps-directory-cta .v1-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════
   БАНЕР ГОЛОВНОЇ — фото під зеленим шаром

   Той самий прийом, що був на попередній головній (і в apacor.com):
   фото лабораторії під напівпрозорим зеленим шаром, який темнішає
   зліва направо — текст ліворуч лягає на щільне тло, а пробірка
   праворуч лишається на світлішому й не губиться.

   Блок стоїть у кінці файлу й перекриває світлий банер вище: відкат
   зводиться до видалення цієї секції.
   ══════════════════════════════════════════════════════════════ */
.ps-directory-intro {
  background-image:
    linear-gradient(100deg,
      rgba(13, 48, 38, 0.92) 0%,
      rgba(23, 99, 89, 0.82) 46%,
      rgba(31, 131, 120, 0.55) 100%),
    url("../img/hero-lab.webp");
  background-size: cover, cover;
  background-position: center, center 38%;
  background-repeat: no-repeat, no-repeat;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.ps-directory-title { color: var(--white); }
.ps-directory-title sup { color: #7FD6C8; }
.ps-directory-lead { color: rgba(255, 255, 255, 0.90); }

/* Головна кнопка інвертується: біла на темному читається найкраще */
.ps-directory-cta .v1-btn-primary {
  background: var(--white);
  color: var(--diameb-teal-dark) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
.ps-directory-cta .v1-btn-primary:hover {
  background: #EAF6F4;
  color: var(--diameb-teal-dark) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
}

/* Друга дія — контур замість заливки: помітна, але не сперечається з першою */
.ps-directory-cta .v1-btn-ghost {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.55);
  background: transparent;
}
.ps-directory-cta .v1-btn-ghost:hover {
  color: #fff !important;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* Марка була зеленою на білому — на фото потрібен білий напівпрозорий */
.ps-directory-wordmark { color: rgba(255, 255, 255, 0.14); }

/* Пробірці на темному тлі потрібна глибша тінь, щоб не «плавати» */
.ps-directory-tube-frame {
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.42));
}

@media (max-width: 768px) {
  .ps-directory-intro {
    /* Вужчий кроп: десктопний кадр на вузькому екрані обрізається невдало */
    background-image:
      linear-gradient(180deg,
        rgba(13, 48, 38, 0.86) 0%,
        rgba(23, 99, 89, 0.80) 55%,
        rgba(13, 48, 38, 0.92) 100%),
      url("../img/hero-lab-mobile.webp");
    background-position: center, center;
  }

  .ps-directory-wordmark { color: rgba(255, 255, 255, 0.16); }
}