/**                 Глобальные стили              */
/**                 Глобальные стили              */
/**                 Глобальные стили              */


/* WP admin bar fix: не перекрывать шапку */
body.admin-bar .vr-header{
  top: 32px;
}

@media (max-width: 782px){
  body.admin-bar .vr-header{
    top: 46px;
  }
}


/* =========================
   1) FONT TOKENS (только шрифт)
========================= */
:root{
  --font-main: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-weight-main: 600;
}

html, body{
  font-family: var(--font-main);
  font-weight: var(--font-weight-main);
}



/* =========================
   2) COLOR TOKENS (только цвета)
   (позже добавишь остальные)
========================= */
:root{
  --gold: #D4AF37;
  --black: #0b0b0b;
}


/* =========================
   3) BASE
========================= */
*{ box-sizing: border-box; }
body{ margin: 0; }

/* =========================
   4) EXAMPLES (как использовать)
========================= */
a{ color: var(--gold); text-decoration: none; }
a:hover{ opacity: .85; }

.btn, button{
  font-family: var(--font-main);
  font-weight: var(--font-weight-main);
  background: var(--gold);
  color: #111;
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
}




.vr-gold-trace{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--vr-radius, 12px);
}

/* БАЗА: не ломаем чужие галереи (высоту НЕ трогаем) */
.vr-gold-trace > img{
  width: 100%;
  height: auto;        /* ключ: НЕ 100% */
  display: block;
  object-fit: cover;
}


.vr-gold-trace__svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index: 3;
  opacity: 0;
  transition: opacity .15s ease;
}

.vr-gold-trace:hover .vr-gold-trace__svg{
  opacity: 1;
}

/* fixed start at top-left, line grows along perimeter and closes */
.vr-gold-trace__rect{
  fill: none;
  stroke: var(--gold, #D4AF37);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;

  /* P = 392 for rect 98x98 */
  stroke-dashoffset: 0;           /* старт НЕ двигаем */
  stroke-dasharray: 0 392;        /* видим 0, остальное скрыто */
}

.vr-gold-trace:hover .vr-gold-trace__rect{
  animation: vrGoldDraw 0.9s ease forwards;
}

/* рисуем по периметру, стартовая точка фиксирована */
@keyframes vrGoldDraw{
  from { stroke-dasharray: 0 392; }
  to   { stroke-dasharray: 392 0; }
}


/* Только для квадратных аватаров (Other masters) */
.vr-girl-card__img.vr-gold-trace > img{
  height: 100% !important;
}

/* Если на архиве мастеров ты делаешь картинку через абсолют/cover — можно не нужно.
   Но если где-то есть медиа-блок с фиксированной высотой: */
.vr-masters-card__media.vr-gold-trace > img{
  height: 100%;
}




:root{
  --vr-section-gap: 70px;        /* hero -> content */
  --vr-section-pad-x: 20px;      /* общий боковой */
  --vr-section-bottom: 140px;    /* низ секции */

  --vr-section-gap-md: 56px;
  --vr-section-bottom-md: 120px;

  --vr-section-gap-sm: 42px;
  --vr-section-bottom-sm: 110px;
}


/* =========================================
   VR — UNIFIED HOVER BORDER (NO "WORM")
   Applies to: Programs / Masters / Interiors
========================================= */

/* 1) полностью отключаем SVG-трейс и его анимации */
.vr-gold-trace__svg{ display:none !important; }
.vr-gold-trace__rect{ animation:none !important; }

/* 2) единая золотая рамка по hover — по скруглению */

/* ✅ FIX: НЕ трогаем position у media-блоков (у Programs он должен быть absolute) */
.vr-program-card__media,
.vr-masters-card__media,
.vr-home-interior-card__media{
  overflow: hidden;
  border-radius: 18px; /* один радиус везде */
}

/* рамка */
.vr-program-card__media::after,
.vr-masters-card__media::after,
.vr-home-interior-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: inset 0 0 0 0 rgba(212,175,55,0);
  transition: box-shadow .18s ease;
}

/* включаем на hover */
.vr-program-card:hover .vr-program-card__media::after,
.vr-masters-card:hover .vr-masters-card__media::after,
.vr-home-interior-card:hover .vr-home-interior-card__media::after{
  box-shadow: inset 0 0 0 2px rgba(212,175,55,.85);
}

/* (если у тебя дальше в файле были ещё правила — они сохранены как были) */



:root{
  --vr-bg:#0b0b0f;
  --vr-gold:#D4AF37;
}

/* Страница статьи */
.vr-article-page{
  background: var(--vr-bg);
  color:#fff;
}

/* HERO — используем ту же систему, что programs (бархат+золото, без "шара") */
.vr-article-hero{
  border-bottom: 2px solid var(--vr-gold);
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
}

/* Перекрываем “шар” и делаем velvet-свет как премиум */
.vr-article-hero__bg{
  position:absolute;
  inset:0;
  background:
    /* мягкий золотой луч (не пятно) */
    linear-gradient(115deg,
      rgba(212,175,55,.22) 0%,
      rgba(212,175,55,.10) 28%,
      rgba(212,175,55,0) 62%
    ),
    /* глубокий бархат */
    linear-gradient(180deg,
      rgba(0,0,0,.50) 0%,
      rgba(0,0,0,.78) 70%,
      rgba(0,0,0,.92) 100%
    );
}

/* Крошки над заголовком, по центру */
.vr-article-crumbs{
  justify-content:center;
}

/* Заголовок строго по центру */
.vr-article-title{
  text-align:center;
  letter-spacing:.10em;
  text-transform: uppercase;
}

/* Подзаголовок/интро — центр */
.vr-article-subtitle{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

/* BODY */
.vr-article-body{
  padding: 86px 22px 140px;
  background: var(--vr-bg);
}

.vr-article-content{
  max-width: 860px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255,255,255,.88);
}

/* Типографика под luxury */
.vr-article-content h2{
  margin: 84px 0 18px;
  font-size: 22px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:#fff;
}
.vr-article-content > h2:first-child{ margin-top: 0; }

.vr-article-content h3{
  margin: 44px 0 12px;
  font-size: 16px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.95);
}

.vr-article-content p{
  margin: 0 0 18px;
}

/* Ссылки */
.vr-article-content a{
  color: var(--vr-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(212,175,55,.35);
}
.vr-article-content a:hover{
  border-bottom-color: rgba(212,175,55,.85);
}

/* Разделитель */
.vr-article-content hr{
  border:0;
  height:1px;
  margin:72px 0;
  background: linear-gradient(to right, transparent, rgba(212,175,55,.55), transparent);
}

/* На всякий случай: если плагин всё равно вставляет хлебные крошки ВНУТРЬ контента — скрываем */
.vr-article-content .breadcrumbs,
.vr-article-content .breadcrumb,
.vr-article-content .yoast-breadcrumb,
.vr-article-content .rank-math-breadcrumb,
.vr-article-content .bcn-breadcrumb-trail{
  display:none !important;
}

/* Mobile */
@media (max-width: 640px){
  .vr-article-body{ padding: 66px 16px 110px; }
}


.vr-article-cta--inline{
  border-top: 0;
  padding: 34px 0 10px;
  background: transparent;
}

.vr-article-cta--inline .vr-article-cta__inner{
  border: 1px solid rgba(212,175,55,.22);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 18px 18px;
}

/* ===== FORCE CTA BUTTON LOOK (override theme) ===== */
.vr-article-cta__link{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(212,175,55,.65) !important;
  background: rgba(212,175,55,.16) !important;
  color: var(--gold, #D4AF37) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.vr-article-cta__link:hover{
  background: rgba(212,175,55,.24) !important;
  border-color: rgba(212,175,55,.95) !important;
}

/* если тема делает ссылки “как текст” внутри контента */
.vr-article-cta__inner a{
  border-bottom: none !important;
}

/* Homepage programs: stacked price (old above, new in gold pill) */
.vr-price-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  line-height:1;
}

/* Homepage: OLD price with strong backing + diagonal strike */
.vr-price-stack__old{
  font-size:14px;
  font-weight:900;
  color:#fff;
  letter-spacing:.04em;

  padding:8px 12px;
  border-radius:12px;

  background: rgba(0,0,0,.92);             /* ✅ подложка */
  border: 1px solid rgba(212,175,55,.28);  /* ✅ обводка */
  box-shadow: 0 12px 30px rgba(0,0,0,.60); /* ✅ читаемость на фото */
  text-shadow: 0 2px 12px rgba(0,0,0,.95);

  text-decoration:none; /* убираем стандартное */
  position:relative;
  overflow:hidden;      /* чтобы диагональ не вылезала */
}

/* диагональная линия */
.vr-price-stack__old::after{
  content:"";
  position:absolute;
  left:-12%;
  top:50%;
  width:140%;
  height:1px;
  background: rgba(212,175,55,.92);
  transform: rotate(-14deg);
  transform-origin:center;
  pointer-events:none;
}