/* ==========================================================================
   Компоненти: кнопки, логотип, типографіка, посилання «Читати далі»
   ========================================================================== */

/* ------------------------------------------------------------------ типо */
.h1 {
  font-weight: 500;
  font-size: 48rem;
  line-height: 1.2;
  letter-spacing: 2.88rem;
}

.h2 {
  font-weight: 500;
  font-size: 40rem;
  line-height: 1.2;
}

.h3 {
  font-weight: 500;
  font-size: 32rem;
  line-height: 1.2;
}

.text-red { color: var(--c-red); }
.text-grey { color: var(--c-grey); }

/* ---------------------------------------------------------------- кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100rem;
  color: var(--c-white);
  text-align: center;
  white-space: nowrap;
  background: var(--c-btn);
  box-shadow:
    inset 0 1rem 0 2rem rgba(255, 255, 255, 0.02),
    0 1rem 0 rgba(0, 0, 0, 0.05);
  transition: background-color 0.25s ease;
}

/* ховер узятий з варіантів компонента у Figma */
.btn:hover {
  background: var(--c-btn-hover);
}

/* велика — hero, CTA, мобільне меню */
.btn--lg {
  padding: 18rem 44rem;
  font-weight: 400;
  font-size: 20rem;
  line-height: 1;
}

/* мала — у шапці */
.btn--sm {
  padding: 12.04rem 16.05rem;
  font-weight: 500;
  font-size: 16.05rem;
  line-height: 1.4;
  letter-spacing: 0.8rem;
  background: var(--c-red);
  box-shadow:
    inset 0 1rem 0 0 rgba(255, 255, 255, 0.02),
    0 1rem 0 rgba(0, 0, 0, 0.05);
}

/* біла — CTA-банер */
.btn--white {
  color: var(--c-black);
  background: var(--c-white);
}

.btn--white:hover {
  background: var(--c-bg-grey);
}

/* -------------------------------------------------------------- логотип */
.logo {
  display: block;
  flex-shrink: 0;
  width: 111.17rem;
  height: 64.15rem;
}

.logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------- посилання «Читати далі» */
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 7rem;
  font-weight: 500;
  font-size: 16rem;
  line-height: 1.4;
  letter-spacing: 0.8rem;
  color: var(--c-black);
  transition: color 0.25s ease;
}

.more-link__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9rem;
  height: 9rem;
  flex-shrink: 0;
}

.more-link__arrow svg {
  width: 12.73rem;
  height: 10.43rem;
  transform: rotate(-45deg);
  transition: transform 0.25s ease;
}

.more-link:hover {
  color: var(--c-red);
}

.more-link:hover .more-link__arrow svg {
  transform: rotate(-45deg) translateX(2rem);
}

/* --------------------------------------------------- навігаційний ланцюжок */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 20rem;
  font-weight: 500;
  font-size: 16rem;
  line-height: 1.4;
  letter-spacing: 0.8rem;
  color: var(--c-grey);
}

.breadcrumbs a {
  transition: color 0.2s ease;
}

.breadcrumbs a:hover {
  color: var(--c-red);
}

.breadcrumbs__sep {
  display: flex;
  width: 7rem;
  height: 11rem;
}

.breadcrumbs__sep svg {
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------ заголовок сторінки (H1) */
.page-title {
  font-weight: 500;
  font-size: 48rem;
  line-height: 1.2;
  color: var(--c-red);
}

/* ------------------------------------------- картка послуги (каталог) */
.service-card {
  display: flex;
  flex-direction: column;
  gap: 10rem;
}

.service-card__image {
  display: block;
  height: 200rem;
  overflow: hidden;
  border-radius: 20rem;
}

.service-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.service-card:hover .service-card__image img {
  transform: scale(1.04);
}

.service-card__plate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40rem;
  height: 80rem;
  padding: 20rem;
  border-radius: 20rem;
  background: var(--c-bg-grey);
  transition: background-color 0.25s ease;
}

.service-card:hover .service-card__plate {
  background: #ededed;
}

.service-card__title {
  font-weight: 600;
  font-size: 20rem;
  line-height: 1.2;
}

.service-card__arrow {
  display: flex;
  width: 24rem;
  height: 24rem;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.service-card__arrow svg {
  width: 100%;
  height: 100%;
}

.service-card:hover .service-card__arrow {
  transform: translate(2rem, -2rem);
}

/* на мобілці замість круглої стрілки — «Перейти» */
.service-card__more {
  display: none;
  align-items: center;
  gap: 7rem;
  font-weight: 500;
  font-size: 18rem;
  line-height: 1.4;
}

/* Мобільний розмір заголовка сторінки живе тут, а не в stattya.css:
   той підключається лише на статтях, а заголовок є на всіх шаблонах. */
@media (max-width: 479px) {
  /* У мобільному макеті заголовок сторінки по центру, а хлібних крихт немає. */
  .page-title {
    font-size: 28rem;
    text-align: center;
  }

  .breadcrumbs {
    display: none;
  }
}

@media (max-width: 479px) {
  .service-card__image {
    height: 214rem;
  }

  /* Макет: плашка 97. Чорнило заголовка починається на 23 від верху плашки,
     «Перейти» — на 63, знизу лишається 19. Це дає 20 / 14 / 14. */
  .service-card__plate {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14rem;
    height: auto;
    padding: 20rem 10rem 14rem;
  }

  .service-card__arrow {
    display: none;
  }

  .service-card__more {
    display: inline-flex;
  }
}

/* ------------------------------------------------------- картка послуги */
.card {
  display: flex;
  flex-direction: column;
  gap: 10rem;
  width: 400rem;
}

.card__image {
  display: block;
  height: 214rem;
  overflow: hidden;
  border-radius: 20rem;
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* <picture> за замовчуванням рядковий і не має власної висоти, тож img
   усередині рахував height:100% від «авто» і не дотягувався до низу рамки
   (214 рамка проти 172 картинки). Робимо обгортку блоком на всю рамку. */
.card__image picture,
.service-card__image picture {
  display: block;
  width: 100%;
  height: 100%;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 20rem;
  height: 360rem;
  padding: 40rem 24rem;
  overflow: hidden;
  border-radius: 20rem;
  background: var(--c-bg-grey);
}

.card__title {
  font-weight: 600;
  font-size: 20rem;
  line-height: 1.2;
}

.card__text {
  font-weight: 500;
  font-size: 16rem;
  line-height: 1.4;
  letter-spacing: 0.8rem;
}

.card .more-link {
  align-self: flex-start;
}

@media (max-width: 479px) {
  .card {
    width: 343rem;
    max-width: 100%;
  }

  .card__body {
    height: auto;
    padding: 20rem 10rem;
  }

  .card__text {
    font-size: 14rem;
  }

  .more-link {
    font-size: 18rem;
  }
}

/* --------------------------------------------- список з галочками (hero) */
.check-list {
  display: flex;
  flex-direction: column;
}

.check-list__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 15rem;
  font-weight: 400;
  font-size: 20rem;
  line-height: 1;
  color: var(--c-grey);
}

.check-list__item::before {
  content: '';
  flex-shrink: 0;
  width: 24.68rem;
  height: 20.89rem;
  background: url('../icons/check.svg') no-repeat center / contain;
  transform: scaleY(-1);
}

/* ========================================================================
   Відео: заглушка й програвач. Спільні для головної та галереї.
   ======================================================================== */

/* ------------------------------------------------------------- ролик */
.video-item {
  display: flex;
  flex-direction: column;
  gap: 12rem;
}

.video-item__frame {
  position: relative;
  overflow: hidden;
  border-radius: 18.4rem;
  background: #a7a7a7;
}

/* у галереї висоту задає ряд сітки, тому пропорція тут не потрібна */
.video-grid .video-item__frame {
  height: 100%;
}

.video-grid .video-item--horizontal {
  grid-column: span 2;
}

/* поза галереєю (блок «Для лікарів») пропорція потрібна */
.video-item--vertical:not(.video-grid *) .video-item__frame {
  aspect-ratio: 9 / 16;
}

.video-item--horizontal:not(.video-grid *) .video-item__frame {
  aspect-ratio: 16 / 9;
}

.video-item__cover,
.video-item__frame img,
.video-item__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.video-item__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 62.57rem;
  height: 44.17rem;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease;
}

.video-item__play svg {
  width: 100%;
  height: 100%;
}

.video-item__frame:hover .video-item__play {
  transform: translate(-50%, -50%) scale(1.08);
}

.video-item.is-playing .video-item__play {
  display: none;
}

.video-item__title {
  font-weight: 500;
  font-size: 16rem;
  line-height: 1.4;
  letter-spacing: 0.8rem;
}

/* ------------------------------------------------------------------ CTA */
.cta {
  padding: 96rem 0;
}

.cta__banner {
  height: 347.76rem;
  padding: 32rem 64rem;
  overflow: hidden;
  border-radius: 20rem;
  background: var(--c-red);
}

.cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 281rem;
}

.cta__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 41rem;
  width: 440rem;
}

.cta__title {
  font-weight: 500;
  font-size: 32rem;
  line-height: 1.2;
  color: var(--c-white);
}

.cta__image {
  display: block;
  width: 444rem;
  height: 281rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 20rem;
}

.cta__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 479px) {
  .cta {
    padding: 60rem 0;
  }

  .cta .container {
    padding-inline: 16rem;
  }

  .cta__banner {
    height: auto;
    padding: 20rem;
  }

  .cta__inner {
    flex-direction: column;
    align-items: center;
    gap: 16rem;
    height: auto;
  }

  .cta__content {
    align-items: center;
    gap: 16rem;
    width: 100%;
  }

  .cta__title {
    width: 291rem;
    max-width: 100%;
    font-size: 20rem;
    text-align: center;
  }

  .cta__image {
    order: -1;
    width: 299rem;
    max-width: 100%;
    height: 189rem;
  }

  .cta .btn--lg {
    font-size: 16rem;
  }
}