/* =================================================
   VelvetRoom — Masters Archive (FULL FILE)
   File: /assets/css/vr-masters.css
================================================= */

:root{
  --vr-bg:#0b0b0f;
  --vr-gold:#D4AF37;
  --vr-radius:18px;
  --vr-header-h: var(--header-h, 78px);
}

html, body{
  background: var(--vr-bg);
  color:#fff;
}

/* =================================================
   PAGE
================================================= */
.vr-masters-page{
  background: var(--vr-bg);
}

/* =================================================
   HERO
================================================= */
.vr-masters-hero{
  position:relative;
  min-height: clamp(320px, 52vh, 540px);
  overflow:hidden;
  background: var(--vr-bg);

  margin-top: calc(var(--vr-header-h) * -1);
  padding-top: var(--vr-header-h);
  border-bottom: 1px solid rgba(212,175,55,.18);
}

.vr-masters-hero__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform: scale(1.03);
}

.vr-masters-hero__overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 18% 12%, rgba(212,175,55,.14), transparent 60%),
    linear-gradient(to bottom,
      rgba(0,0,0,.86) 0%,
      rgba(0,0,0,.42) 50%,
      rgba(0,0,0,.92) 100%
    );
}

/* подмешиваем фон сверху/снизу (чтобы не было “пустоты”) */
.vr-masters-hero::before,
.vr-masters-hero::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:160px;
  z-index:2;
  pointer-events:none;
}
.vr-masters-hero::before{
  top:0;
  background: linear-gradient(to bottom, var(--vr-bg), transparent);
}
.vr-masters-hero::after{
  bottom:0;
  background: linear-gradient(to top, var(--vr-bg), transparent);
}

.vr-masters-hero__inner{
  position:relative;
  z-index:3;
  min-height: clamp(320px, 52vh, 540px);
  display:flex;
  align-items:center;
  padding: 0 22px;
}

/* ✅ БРЕДКРАМБЫ + H1 — СТИЛЬ КАК НА SINGLE (но только для архива) */
.vr-masters-hero__content{
  position:relative;
  z-index:2;
  width:min(1100px, calc(100% - 40px));
  padding-top: calc(var(--header-h, 78px) + 30px) !important;
}

.vr-masters-crumbs{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  border-radius:999px;
  font-weight:600;
  color: rgba(255,255,255,.75);
  margin-bottom: 14px;
}

.vr-masters-crumbs__link{
  color: rgba(255,255,255,.75);
  text-decoration:none;
}

.vr-masters-crumbs__sep,
.vr-masters-crumbs__current{
  color: rgba(255,255,255,.75);
}
.vr-masters-crumbs__current{
  opacity:.85;
}

.vr-masters-hero__title{
  margin: 0 0 12px;
  font-size: clamp(40px, 7vw, 84px);
  line-height: 1.02;
  letter-spacing:.02em;
  text-shadow: 0 12px 50px rgba(0,0,0,.65);
  color: #fff; /* чтобы совпало визуально с vr-girl.css */
}

/* =================================================
   GRID SECTION
================================================= */
.vr-masters-section{
  padding: 70px 22px 64px;
}

.vr-masters-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1200px){
  .vr-masters-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px){
  .vr-masters-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .vr-masters-grid{ grid-template-columns: 1fr; }
}

/* =================================================
   CARD
================================================= */
.vr-masters-card{
  display:block;
  text-decoration:none;
  color:inherit;

  border-radius: var(--vr-radius);
  overflow:hidden;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);

  transform: translateY(0);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.vr-masters-card:hover{
  transform: translateY(-2px);
  border-color: rgba(212,175,55,.35);
  background: rgba(255,255,255,.04);
}

/* =================================================
   MEDIA (image)
================================================= */
.vr-masters-card__media{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 5;
  overflow:hidden;
  border-radius: var(--vr-radius);
  background:#000;
}

.vr-masters-card__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.vr-masters-card__placeholder{
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 120% at 20% 20%, rgba(212,175,55,.18) 0%, rgba(0,0,0,0) 55%),
    rgba(0,0,0,.35);
}

/* единая завеса снизу (всегда) */
.vr-masters-card__veil{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 56%,
    rgba(0,0,0,.55) 76%,
    rgba(0,0,0,.92) 100%
  );
}

/* =================================================
   STATS (hover only, column + labels)
================================================= */
.vr-masters-card__stats{
  position:absolute;
  left:12px;
  bottom:12px;
  width: min(260px, calc(100% - 24px));
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:4;

  opacity:0;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events:none;
}

.vr-masters-card:hover .vr-masters-card__stats{
  opacity:1;
  transform: translateY(0);
}

.vr-stat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:8px 10px;
  border-radius:14px;

  background: rgba(0,0,0,.62);
  border: 1px solid rgba(212,175,55,.55);
  backdrop-filter: blur(6px);
}

.vr-stat__k{
  color: rgba(255,255,255,.78);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
}

.vr-stat__v{
  color: var(--vr-gold);
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
}

@media (max-width:600px){
  .vr-masters-card__stats{
    left:10px;
    bottom:10px;
    width: min(240px, calc(100% - 20px));
  }
  .vr-stat{ padding:7px 9px; border-radius:12px; }
  .vr-stat__k, .vr-stat__v{ font-size:11px; }
}

/* =================================================
   GOLD TRACE (PERFECT FIT) — archive masters
   - строго по периметру фото
   - радиус совпадает с карточкой
   - линия не “уходит внутрь”
================================================= */

.vr-masters-card__media{
  border-radius: var(--vr-radius);
  overflow: hidden;
}

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

  /* важно: svg тоже режем тем же радиусом */
  border-radius: var(--vr-radius);
}

/* показываем только на hover */
.vr-masters-card:hover .vr-gold-trace__svg{
  opacity:1;
}

/* Настройки линии */
.vr-masters-card__media{
  --vr-trace-w: 2px; /* толщина линии */
}

/* rect задаём в px относительно реального размера контейнера */
.vr-masters-card__media .vr-gold-trace__rect{
  fill:none;
  stroke: var(--vr-gold);
  stroke-width: var(--vr-trace-w);
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;

  /* 🔥 прижимаем к краю с учётом stroke */
  x: calc(var(--vr-trace-w) / 2);
  y: calc(var(--vr-trace-w) / 2);
  width: calc(100% - var(--vr-trace-w));
  height: calc(100% - var(--vr-trace-w));

  /* 🔥 радиус совпадает: radius - stroke/2 */
  rx: calc(var(--vr-radius) - (var(--vr-trace-w) / 2));
  ry: calc(var(--vr-radius) - (var(--vr-trace-w) / 2));

  /* “клубок”: старт фиксирован, растём по периметру */
  stroke-dashoffset: 0;
  stroke-dasharray: 0 1;
  pathLength: 1;

  /* ПРОТИВ часовой: переворачиваем по Y вокруг центра */
  transform-origin: 50% 50%;
  transform: scaleY(-1);
}

/* размотка ОДИН раз и держим */
.vr-masters-card:hover .vr-gold-trace__rect{
  animation: vrGoldDraw 1.15s ease forwards;
}

@keyframes vrGoldDraw{
  from { stroke-dasharray: 0 1; }
  to   { stroke-dasharray: 1 0; }
}


/* =================================================
   BODY (name + desc + button)
================================================= */
.vr-masters-card__body{
  padding: 14px 14px 16px;
}

.vr-masters-card__name{
  font-weight:900;
  letter-spacing:.02em;
  margin: 0 0 6px;
}

.vr-masters-card__desc{
  color: rgba(255,255,255,.80);
  line-height: 1.45;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.vr-masters-card__cta{
  margin-top: 12px;
}

.vr-masters-card__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 14px;
  border-radius:999px;

  background: rgba(212,175,55,.14);
  border: 1px solid rgba(212,175,55,.55);
  color: var(--vr-gold);

  font-weight:800;
  letter-spacing:.02em;
}

/* =================================================
   EMPTY
================================================= */
.vr-masters-empty{
  padding: 18px 16px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.18);
  opacity: .8;
}

/* =================================================
   PAGINATION
================================================= */
.vr-masters-pagination{
  margin-top: 20px;
  display:flex;
  justify-content:center;
  gap:10px;
}

.vr-masters-pagination .page-numbers{
  display:inline-flex;
  min-width: 38px;
  height: 38px;
  align-items:center;
  justify-content:center;

  border-radius: 999px;
  text-decoration:none;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.85);
  font-weight:800;
}

.vr-masters-pagination .page-numbers.current{
  background: rgba(212,175,55,.14);
  border-color: rgba(212,175,55,.55);
  color: var(--vr-gold);
}