/* Дополнения к перенесённому globals.css для шаблонов WordPress */

/*
 * Шрифт как в Next: ядро WP (wp-block-library и др.) задаёт свой font-family для блоков.
 * Тянем globals после этих стилей (см. functions.php) и дублируем стек для html / контента.
 */
html {
  font-family: var(--font-body);
}

body.bem-tec-body .entry-content,
body.bem-tec-body .entry-content :where(.wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-html, .wp-block-heading, .wp-block-paragraph) {
  font-family: var(--font-body);
}

body.bem-tec-body .entry-content :where(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
  font-family: var(--font-heading);
}

.footer__legal {
  margin: 0;
}

.bem-tec-page-main {
  padding: clamp(1.5rem, 4vw, 0rem) 0 clamp(3rem, 6vw, 5rem);
}


/*
 * Секция услуг в контенте страницы (Palvelut и др.): как на главной — на всю ширину
 * main/container. Иначе 72ch сжимает сетку repeat(6) и ломает карточки.
 */
.bem-tec-page-main .entry-content:has(.cards--services),
.bem-tec-page-main .entry-content:has(.section--services),
.bem-tec-page-main .entry-content:has(.palvelut-landing) {
  max-width: none;
  width: 100%;
}

.bem-tec-page-main .entry-content > * + * {
  margin-top: 1rem;
}

.bem-tec-page-main .entry-content > .wp-block-html:first-child .section--services:first-child {
  margin-top: 0;
}

/*
 * Статичные <img> вместо next/image с fill: без абсолютного позиционирования
 * картинки не заполняют контейнер (.promo-banner__art, .team-card__photo).
 */
.promo-banner__art > img.promo-banner__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.promo-banner__art > .promo-banner__artGrid,
.promo-banner__art > .promo-banner__artGlow {
  z-index: 1;
}

.team-card__photo > img.team-card__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.team-card__photo > .team-card__photoGlow {
  z-index: 1;
}

/*
 * Топбар вынесен из .hero (см. front-page.php / page.php): у .hero снова действует
 * globals overflow: clip — фон не залезает на <main>. Выпадающее меню живёт в .site-head
 * и не обрезается низом короткого hero.
 */
.site-head {
  position: relative;
  z-index: 100;
  padding-top: 1rem;
}

.page > main {
  position: relative;
  z-index: 1;
}

.hero__bgClip {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__bgClip .hero__bg {
  inset: 0 0 auto 0;
}

.site-head + .hero {
  padding-top: 0;
}

.hero__grid > .hero__panel.hero__panel--comparison {
  display: flex;
  flex-direction: column;
  grid-column: auto;
}

.hero__grid > .hero__panel--comparison .comparison-card {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 22rem;
}

.hero__grid > .hero__panel--comparison .comparison-section {
  flex: 1 1 auto;
  height: auto;
  min-height: 21rem;
}

@media (max-width: 979px) {
  .hero__grid > .hero__panel--comparison {
    margin-top: 0.25rem;
    scroll-margin-top: 1rem;
  }
}

@media (min-width: 980px) {
  /* то, что в globals было у .hero__panel--desktop */
  .hero__grid > .hero__panel--comparison {
    display: flex;
    align-self: stretch;
    margin-top: -0.12rem;
    padding-top: clamp(1.15rem, 3.2vw, 2rem);
    background: transparent;
    backdrop-filter: none;
    height: auto;
    min-height: 24rem;
    min-width: 0;
  }

  .hero__grid > .hero__panel--comparison .comparison-section {
    background: transparent;
    backdrop-filter: none;
  }

  .hero__grid > .hero__panel--comparison .comparison-card {
    min-height: 24rem;
  }

  /* переопределение globals @980 .hero__panel { height:100% } */
  .hero__grid > .hero__panel.hero__panel--comparison {
    height: auto;
  }
}