/* sections/instagram.css — секция «Instagram» (G86). Зона тикета 01.
   Всё токенами; исключения: фирменный IG-синий чекмарка (#0095F6, в разметке)
   и золотое градиент-кольцо highlights (IG-паттерн, собран из токенов). */

section[data-section="instagram"][data-stack] {
  background: var(--color-surface-base);
}

.ig-desc {
  margin: 0 0 var(--rhythm-lead-tight);
  color: var(--color-text-secondary);
  max-width: 72ch;
}

/* --- Profile Card --- */
.ig-profile {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--color-surface-card);
  border: var(--border-card);
  padding: var(--card-pad);
  margin: var(--rhythm-lead) 0 var(--space-4);
}

.ig-profile__avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  padding: 4px;
  border: 2px solid var(--color-accent-primary);
  border-radius: 50%;
}
.ig-profile__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* Пульс LIVE-кольца: декоративный цикл (как ken-burns в reels) — только
   transform/opacity; при reduced-motion гасится глобальным правилом base.css */
.ig-profile__avatar-wrap.is-live::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid var(--color-accent-primary);
  border-radius: 50%;
  animation: ig-live-pulse 2.2s var(--motion-ease) infinite;
}
@keyframes ig-live-pulse {
  0%   { transform: scale(1);    opacity: 0.9; }
  70%  { transform: scale(1.14); opacity: 0;   }
  100% { transform: scale(1.14); opacity: 0;   }
}
.ig-profile__live {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  background: var(--color-accent-primary);
  color: var(--color-surface-base);
  font-size: var(--text-xs);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caps);
  padding: 4px var(--space-1);
}

.ig-profile__nick {
  display: flex;
  align-items: center;
  /* flex-wrap обязателен: без него ник и пометка «демо» не переносятся и на
     320/360px пометка вылезает за правый край секции. min-width:0 разрешает
     флекс-детям сжиматься ниже своей «естественной» ширины. */
  flex-wrap: wrap;
  min-width: 0;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: 500;
}
.ig-profile__nick a {
  color: var(--color-text-primary);
  min-width: 0;
  overflow-wrap: anywhere; /* длинный ник рвётся, а не распирает карточку */
}
.ig-profile__verified { flex-shrink: 0; }

/* микро-бейдж «демо» — тот же паттерн, что у отзывов */
.ig-demo {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: var(--text-xs);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border: 1px solid color-mix(in srgb, var(--color-text-secondary) 35%, transparent);
  padding: 4px var(--space-1);
}

.ig-profile__stats {
  display: flex;
  flex-wrap: wrap; /* узкий экран: колонки статистики переносятся, не распирая карточку */
  gap: var(--space-2) var(--gap-grid);
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
}
.ig-profile__stats li { display: flex; flex-direction: column; }
.ig-profile__stats strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-text-primary);
}
.ig-profile__stats span {
  font-size: var(--text-xs);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.ig-profile__bio {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  color: var(--color-text-primary);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

/* --- Highlights: горизонтальная мини-карусель --- */
.ig-highlights {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: var(--space-1) 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.ig-highlights__item {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}
.ig-highlights__ring {
  display: block;
  width: 72px;
  height: 72px;
  padding: 4px;
  border-radius: 50%;
  /* IG-паттерн кольца в наших токенах: градиент золота */
  background: linear-gradient(135deg,
    var(--color-accent-primary),
    color-mix(in srgb, var(--color-accent-primary) 45%, var(--color-text-primary)),
    var(--color-accent-primary));
}
.ig-highlights__ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--color-surface-base);
}
.ig-highlights__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
}

@media (max-width: 480px) {
  .ig-profile { flex-direction: column; }
  .ig-profile__stats { gap: var(--space-2) var(--space-3); }
  .ig-profile__info { min-width: 0; max-width: 100%; }
}