/* assets/style.repos.css
   Repositioning 2026: новые компоненты бренд-системы.
   Подключается ПОСЛЕ assets/style.css — переопределяет где нужно. */

/* ============ MAP / GLOBE recoloring (см. спека §10.5) ============ */
.hero-globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  color: var(--text-faint);
  opacity: 0.05;
  pointer-events: none;
  object-fit: cover;
  object-position: center right;
}
.map-dotted {
  display: block;
  width: 100%;
  height: auto;
  max-width: 480px;
  color: var(--text-faint);
}
.map-dotted--full { max-width: 100%; }
.map-contour path {
  fill: var(--bg-elev-2);
  stroke: var(--text-faint);
  stroke-width: 0.5;
}
.map-marker {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.map-marker::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
}

/* ============ ON-CALL STRIP (replaces trust-strip; см. §4.2) ============ */
.oncall-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  padding: 1rem 1.5rem;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}
.oncall-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.oncall-strip__dot {
  width: 8px; height: 8px;
  background: var(--success, #7CE38B);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--success, #7CE38B);
  flex-shrink: 0;
}
.oncall-strip__handle { color: var(--accent); }
.oncall-strip__tz { color: var(--text-muted); }
.oncall-strip__tags { color: var(--text-faint); }
.oncall-strip__meta {
  margin-left: auto;
  color: var(--text-faint);
}

/* ============ PROCESS TIMELINE (см. §4.5) ============ */
.process-timeline {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .process-timeline { grid-template-columns: repeat(4, 1fr); }
}
.process-step {
  position: relative;
  padding: 1.5rem;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.process-step__num {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--accent);
}
.process-step__label {
  font-family: var(--font-mono);
  font-size: 1rem;
  margin: 0.5rem 0 0.75rem;
  color: var(--text-primary);
}
.process-step__label::before {
  content: '> ';
  color: var(--accent);
}
.process-step__desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ============ ICP CARDS (§4.4) ============ */
.icp-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .icp-grid { grid-template-columns: repeat(2, 1fr); }
}
.icp-card {
  padding: 1.5rem;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.icp-card__title {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  color: var(--accent);
  margin-bottom: 1rem;
}
.icp-card__body { color: var(--text-muted); line-height: 1.6; }

/* ============ CASE CARDS (§4.7) ============ */
.case-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .case-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .case-grid { grid-template-columns: repeat(3, 1fr); }
}
.case-card {
  padding: 1.25rem;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  transition: border-color 0.15s ease;
}
.case-card:hover { border-color: var(--accent); }
.case-card__header {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  color: var(--accent);
  border-bottom: 1px dashed var(--border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}
.case-card__outcome { color: var(--text-primary); }

/* "Add your case" CTA cell — sits as the last cell in .case-grid.
   Same dimensions as data cards, dashed accent border instead of solid,
   centered content (+, label, hint). Behaves as <button> opening
   popup-contact with data-popup-subject. */
.case-card--add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  text-align: center;
  background: transparent;
  border-style: dashed;
  border-color: rgba(219, 192, 0, 0.32);
  color: var(--accent);
  cursor: pointer;
  width: 100%;
  min-height: 100%;
  font-family: var(--font-mono);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.case-card--add:hover {
  border-style: solid;
  border-color: var(--accent);
  background: rgba(219, 192, 0, 0.05);
  transform: translateY(-1px);
}
.case-card--add:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.case-card--add__plus {
  font-size: 2rem;
  line-height: 1;
  font-weight: 400;
  color: var(--accent);
  transition: transform 0.18s ease;
}
.case-card--add:hover .case-card--add__plus { transform: scale(1.08); }
.case-card--add__label {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.case-card--add__hint {
  font-size: 0.72rem;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

/* ============ TEAM GRID (§4.9) ============ */
.team-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card {
  padding: 1.25rem;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.team-card__handle {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--accent);
}
.team-card__tz {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: 0.5rem;
}
.team-card__tags {
  margin-top: 0.5rem;
  display: flex; flex-wrap: wrap; gap: 0.25rem;
}

/* ============ FAQ ACCORDION (§4.10) ============ */
.faq {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .faq { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}
.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elev-1);
  align-self: start;
}
.faq__q {
  width: 100%;
  text-align: left;
  align-self: start;
  padding: 1rem 1.25rem;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq__q::before { content: '> '; color: var(--accent); margin-right: 0.5rem; }
.faq__q[aria-expanded="true"]::after { content: '−'; color: var(--accent); }
.faq__q[aria-expanded="false"]::after { content: '+'; color: var(--accent); }
.faq__a {
  padding: 0 1.25rem 1rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.faq__a[hidden] { display: none; }

/* ============ SCOPE-OF-WORK MATRIX (§10.3) ============ */
.scope-matrix { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.875rem; }
.scope-matrix th, .scope-matrix td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--border); }
.scope-matrix th { color: var(--accent); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }
.scope-matrix td.is-yes { color: var(--accent); }
.scope-matrix td.is-no  { color: var(--text-faint); }

/* ============ STACK PILLS (§4.8) ============ */
.stack-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; }
.stack-row__label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); min-width: 6rem; }

/* ============ SERVICES GRID — equal-height cards ============ */
.services-grid { align-items: stretch; }
.services-grid .service-card-link,
.services-grid .service-card-link > article,
.services-grid > .node-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ============ SECTION INTRO PARAGRAPH SPACING ============ */
/* Лид-параграф, который идёт сразу после H2 — отделяем от сетки карточек ниже */
.heading-2 + .text-muted,
.heading-2 + .feature-copy,
.heading-2 + p {
  margin-bottom: 1.75rem;
}
/* Кнопка после параграфа в proof-блоке и подобных местах */
.geo-layout p + p > .btn,
.geo-layout p > .btn {
  margin-top: 1rem;
}

/* ============ MAP CAPITAL MARKERS (proof-block & infra) ============ */
.geo-map { position: relative; }
.map-cap {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
  pointer-events: none;
}
.map-cap--gold { color: #DBC000; background: #DBC000; }
.map-cap--cyan { color: #5BC0EB; background: #5BC0EB; }
.map-cap--magenta { color: #E25EBB; background: #E25EBB; }
.map-cap--lime { color: #9BE564; background: #9BE564; }
.map-cap__label {
  position: absolute;
  left: 14px;
  top: -2px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  white-space: nowrap;
  color: var(--text-muted);
}

/* ============ HEADER on-call badge (§10.2) ============ */
.site-header__oncall {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: 0.75rem;
}
.site-header__oncall::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--success, #7CE38B);
  border-radius: 50%;
  box-shadow: 0 0 4px var(--success, #7CE38B);
}
@media (max-width: 640px) { .site-header__oncall { display: none; } }