/* ─── 7-R Portfolio centered header · sandbox 2026-05-18 ──────
   После отказа от globe/map декора — header centered на всю
   ширину контейнера, как у остальных секций (AISection,
   Methodology). Пилюли с цифрами и country chips ниже.
   Карточки кейсов (browser-mockup со скриншотами) НЕ трогаем.
   ────────────────────────────────────────────────────────────── */

#portfolio .portfolio-header {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
#portfolio .portfolio-header .kicker { margin-bottom: 18px; }
#portfolio .portfolio-header .section-title {
  margin: 0;
  text-align: center;
}
#portfolio .portfolio-header .section-sub {
  margin: 14px auto 0 !important;
  max-width: 620px;
  text-align: center;
}

/* ─── Pills (6+ кейсов · 5 стран · 4 языка) ──────────────── */
.portfolio-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.portfolio-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(0, 102, 255, 0.06);
  border: 1px solid rgba(0, 102, 255, 0.22);
}
.portfolio-pill__num {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand);
}
.portfolio-pill__label {
  font-size: 12px;
  color: var(--gray);
}

/* ─── Country chips ──────────────────────────────────────── */
.portfolio-countries {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}
.portfolio-country {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  background: #ffffff;
  border: 1px solid rgba(0, 102, 255, 0.22);
  font-size: 12px;
  font-weight: 500;
  color: var(--brand);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.portfolio-country::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  transition: background .15s ease;
}
.portfolio-country:hover {
  background: var(--brand);
  color: #ffffff;
  border-color: var(--brand);
}
.portfolio-country:hover::before { background: #ffffff; }


/* ─── Ripple "капля в воду" на mouseenter — added 2026-05-20 ─── */
.portfolio-card .ripple-wave {
  position: absolute;
  pointer-events: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,102,255,0.45) 0%, rgba(0,102,255,0.18) 40%, transparent 70%);
  transform: translate(-50%, -50%);
  animation: ripple-expand 1.2s ease-out forwards;
  z-index: 4;
  will-change: width, height, opacity;
}
@keyframes ripple-expand {
  0%   { width: 20px;   height: 20px;   opacity: 0;    }
  20%  { opacity: 0.55; }
  100% { width: 1100px; height: 1100px; opacity: 0;    }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-card .ripple-wave { display: none; }
}