/**
 * Обложка исследования (cover) — стили дочерней темы (redesign Zoobiznes).
 *
 * Файл подключается из functions.php (zoobiznes_cover_assets) ПОСЛЕ стилей
 * родительской темы, поэтому переопределяет их без !important.
 *
 * ВАЖНО: все правила ограничены областью блока (.zb-cover), чтобы не влиять
 * на остальной сайт. Токены, ресеты и keyframes тоже отскоплены/переименованы
 * с префиксом, чтобы ничего не протекало и не конфликтовало с другими блоками.
 *
 * Источник: макет Figma (node 2128:45192) + zoobiznes-cover.html.
 * Шрифты по макету: заголовок — Geologica Medium (500), описание — Inter
 * Regular (400), кнопка — JetBrains Mono Regular (400).
 */

.zb-cover {
  /* --- Brand core --- */
  --zb-black:       #0B0B0B;
  --zb-zydeco:      #053F33;
  --zb-zydeco-deep: #042822;
  --zb-emerald:     #06B781;
  --zb-grape:       #ABEF9A;
  --zb-white:       #F9F9F9;
  --zb-cream:       #F4F1E8;
  --zb-ink:         #101814;

  /* --- Cover surface --- */
  --cv-paper:       #FEFAEE;

  /* --- Fonts --- */
  --zb-font-display: "Geologica", "Inter", system-ui, sans-serif;
  --zb-font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --zb-font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* --- Tracking / motion --- */
  --zb-track-tight: -0.03em;
  --zb-track-cap:    0.12em;
  --zb-radius-lg:   22px;
  --zb-radius-pill: 999px;
  --zb-ease:        cubic-bezier(.2,.7,.2,1);
  --zb-dur:         240ms;

  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:96px 0 104px;
  background:var(--cv-paper);
  font-family:var(--zb-font-body);
  color:var(--zb-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;

  /* Full-bleed: секция во всю ширину экрана, даже если вставлена внутрь
     узкой колонки контента темы (.entry-content). Так живой фон идёт от
     края до края, как в макете. */
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

.zb-cover *,
.zb-cover *::before,
.zb-cover *::after{ box-sizing:border-box; }

/* Страховка: WordPress (wpautop) может вставить лишние <br> между тегами
   в блоке Custom HTML. Своих <br> в разметке нет — гасим любые. */
.zb-cover br{ display:none; }

/* ---------- Фон: плоский #FEFAEE + точки-данные ---------- */

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

/* Сетка точек = поле данных.
   Анимируем transform (композитится на GPU), а не background-position
   (перерисовка всего слоя каждый кадр — тормозило страницу). Слой
   расширен на шаг тайла, чтобы края не оголялись при смещении. */
.zb-cover__dots{
  position:absolute;
  inset:-48px;
  background-image:radial-gradient(rgba(6,183,129,.14) 1.1px, transparent 1.7px);
  background-size:24px 24px;
  opacity:.45;
  will-change:transform;
  animation:zb-cover-dots 40s linear infinite;
}

@keyframes zb-cover-dots{
  from{ transform:translate3d(0,0,0);       }
  to  { transform:translate3d(48px,24px,0); }
}

@media (prefers-reduced-motion:reduce){
  .zb-cover__dots{ animation:none !important; }
}

.zb-cover__inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  /* На десктопе padding:0 — иначе box-sizing:border-box съедает боковые
     32px из 1200 и контент получается 1136px (уже, чем у .zb-research). */
  padding:0 20px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:72px;
  align-items:center;
}

@media (min-width:1240px){
  .zb-cover__inner{ padding:0; }
}

/* ---------- Левая колонка ---------- */

.zb-cover__text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:28px;
  max-width:520px;
}

.zb-cover .zb-cover__title{
  margin:0;
  /* !important — тема форсит свой шрифт заголовков (h1:not(.site-title)
     → Unbounded). Перебиваем строго внутри своего контейнера. */
  font-family:var(--zb-font-display) !important;
  font-weight:500;
  font-size:clamp(40px, 4.4vw, 60px);
  line-height:1.03;
  letter-spacing:-0.04em;
  color:var(--zb-black);
  text-wrap:balance;
}
.zb-cover__dot{ color:var(--zb-emerald); }

.zb-cover .zb-cover__lead{
  margin:0;
  font-family:var(--zb-font-body) !important;
  font-weight:400;
  font-size:15px;
  line-height:1.55;
  color:rgba(16,24,20,.72);
  max-width:400px;
  text-wrap:pretty;
}

/* ---------- Кнопка ---------- */

/* Селектор с `a.` — чтобы перебить цвет/подчёркивание ссылок из темы
   (напр. .entry-content a) строго внутри своего контейнера. */
.zb-cover a.zb-cover__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 25px;
  border:0;
  border-radius:30px;
  background:var(--zb-emerald);
  /* !important — тема красит ссылки контента (.entry-content a → #26a69a)
     и подчёркивает их; перебиваем строго внутри своего контейнера. */
  color:var(--zb-white) !important;
  font-family:var(--zb-font-mono);
  font-weight:400;
  font-size:14px;
  letter-spacing:.02em;
  cursor:pointer;
  text-decoration:none !important;
  transition:background var(--zb-dur) var(--zb-ease),
             transform  var(--zb-dur) var(--zb-ease),
             box-shadow var(--zb-dur) var(--zb-ease);
}
.zb-cover a.zb-cover__cta:hover{
  background:#05A272;
  color:var(--zb-white) !important;
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(6,183,129,.28);
}
.zb-cover a.zb-cover__cta:active{ transform:translateY(0); }
.zb-cover a.zb-cover__cta:focus-visible{
  outline:2px solid var(--zb-zydeco);
  outline-offset:3px;
}

/* ---------- Правая колонка: FeaturedDataPanel (из бандла) ---------- */

.zb-cover__panel{
  position:relative;
  display:block;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  background:var(--zb-zydeco-deep);
  border-radius:18px;
  border:1px solid rgba(249,249,249,.1);
  overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.4);
  transform:perspective(1000px) rotateX(0deg) rotateY(0deg);
  transform-origin:center center;
  transition:transform 220ms var(--zb-ease);
  will-change:transform;
}

/* Ссылка-оверлей: делает всю карточку кликабельной, но сама карточка —
   блочный <div>, чтобы wpautop не оборачивал её в <p> и не рвал разметку. */
.zb-cover__panel-link{
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  font-size:0;
  text-decoration:none;
}
.zb-cover__panel-link:focus-visible{
  outline:2px solid var(--zb-emerald);
  outline-offset:4px;
}
.zb-cover__panel-head,
.zb-cover__panel-body{ position:relative; z-index:1; }

.zb-cover__panel-head{
  padding:16px 22px;
  border-bottom:1px solid rgba(249,249,249,.08);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.zb-cover__mono{
  font-family:var(--zb-font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(249,249,249,.6);
  white-space:nowrap;
}
.zb-cover__mono--accent{ color:var(--zb-emerald); }
.zb-cover__mono--faint { color:rgba(249,249,249,.5); }

.zb-cover__panel-body{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.zb-cover__panel-title{
  font-family:var(--zb-font-display);
  font-weight:700;
  font-size:30px;
  line-height:1.08;
  letter-spacing:-0.02em;
  color:var(--zb-white);
}
.zb-cover__panel-title em{ font-style:normal; color:var(--zb-grape); }

.zb-cover__panel-chart{ display:block; width:100%; }

.zb-cover__panel-stats{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
}
.zb-cover__stat{
  padding:10px 0;
  border-top:1px solid rgba(249,249,249,.1);
}
.zb-cover__stat-value{
  font-family:var(--zb-font-display);
  font-weight:300;
  font-size:30px;
  line-height:1;
  letter-spacing:-0.02em;
  font-feature-settings:"tnum" 1;
}
.zb-cover__stat-unit{
  font-size:14px;
  margin-left:2px;
  opacity:.7;
}
.zb-cover__stat-label{
  display:block;
  margin-top:6px;
  font-family:var(--zb-font-mono);
  font-weight:500;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(249,249,249,.55);
}
.zb-cover__stat--grape   .zb-cover__stat-value{ color:var(--zb-grape);   }
.zb-cover__stat--emerald .zb-cover__stat-value{ color:var(--zb-emerald); }
.zb-cover__stat--white   .zb-cover__stat-value{ color:rgba(249,249,249,.85); }

.zb-cover__panel-source{
  font-family:var(--zb-font-mono);
  font-weight:500;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(249,249,249,.4);
}

/* ---------- Адаптив ---------- */

@media (max-width:1024px){
  .zb-cover{ padding:72px 0 80px; }
  .zb-cover__inner{ grid-template-columns:1fr; gap:48px; }
  .zb-cover__text{ max-width:640px; }
}

@media (max-width:560px){
  .zb-cover{ padding:56px 0 64px; }
  .zb-cover__inner{ padding:0 20px; gap:36px; }
  .zb-cover__title{ font-size:clamp(32px, 9vw, 44px); }
  .zb-cover__lead{ font-size:15px; }
  .zb-cover__panel-head{ padding:14px 18px; flex-wrap:wrap; gap:6px; }
  .zb-cover__panel-body{ padding:18px; }
  .zb-cover__panel-title{ font-size:24px; }
  .zb-cover__panel-stats{ grid-template-columns:1fr; gap:0; }
  .zb-cover__stat-value{ font-size:26px; }
  .zb-cover__cta{ width:100%; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  .zb-cover *{ transition:none !important; }
}