/* ============================================================
   Voxel layer — MS_site (phase 0)
   Воксельные примитивы: пиксельные углы, разделители, изо-фон
   ============================================================ */

/* ---------- Notched / «voxel» corners ---------- */
/* Применять только на featured-блоках и hero-элементах */
.voxel-corners {
  clip-path: polygon(
    var(--voxel-step) 0%,
    calc(100% - var(--voxel-step)) 0%,
    100% var(--voxel-step),
    100% calc(100% - var(--voxel-step)),
    calc(100% - var(--voxel-step)) 100%,
    var(--voxel-step) 100%,
    0% calc(100% - var(--voxel-step)),
    0% var(--voxel-step)
  );
}

/* ---------- Блочный разделитель секций ---------- */
.section-divider {
  border: none;
  height: 4px;
  background: repeating-linear-gradient(
    to right,
    var(--border-soft) 0px,
    var(--border-soft) 4px,
    transparent 4px,
    transparent 8px
  );
  margin-block: var(--space-6);
}

/* ---------- Изометрический фоновый паттерн (только для hero) ---------- */
/* Добавляется через класс .hero-iso на родительский элемент с position:relative */
.hero-iso {
  position: relative;
  overflow: hidden;
}

.hero-iso::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image:
    linear-gradient(60deg, var(--accent) 1px, transparent 0),
    linear-gradient(120deg, var(--accent) 1px, transparent 0);
  background-size: 32px 18px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-iso::after {
    display: none;
  }
}

/* ---------- Section intro ---------- */
/* Используется как единый заголовок-блок секции */
.section-intro {
  margin-bottom: var(--space-6);
}

.section-intro__eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-section);
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.section-intro__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-section);
  color: var(--text);
  line-height: var(--lh-tight);
}

.section-intro__meta {
  font-size: var(--fs-sm);
  color: var(--text-faint);
  margin-top: var(--space-2);
}

/* ---------- Featured card variant ---------- */
/* Занимает 2 колонки в grid-auto, крупное превью */
.card--featured {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .card--featured {
    grid-column: span 1;
  }
}