/* SCRUM-1086 — LO posts: actions row + skeleton loader + deep-link flash */

/* ---- Actions row ---- */
.lo-post-card__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  padding-top: 17px;
  border-top: 1px solid #c7cbd9;
}

.lo-post-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: #393e4d;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.lo-post-card__stat-ico {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid #d8dceb;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #393e4d;
}

.lo-post-card__stat svg { display: block; }
.lo-post-card__stat:hover { color: #002bc6; }
.lo-post-card__stat.is-active { color: #002bc6; }
.lo-post-card__stat.is-active .lo-post-card__stat-ico { border-color: #002bc6; color: #002bc6; }
.lo-post-card__stat.is-active svg path { fill: #002bc6; stroke: #002bc6; }

/* Smooth like: ease the color/fill both ways + a pop on the heart when toggled */
.lo-post-card__stat,
.lo-post-card__stat-ico,
.lo-post-card__stat svg path { transition: color 0.18s ease, border-color 0.18s ease, fill 0.18s ease, stroke 0.18s ease; }
.lo-post-card__stat--pop .lo-post-card__stat-ico { animation: lo-like-pop 0.34s ease; }
@keyframes lo-like-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.32); }
  60%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.lo-post-card__addcomment {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 37px;
  padding: 0 24px;
  background: #ffffff;
  border: 1px solid #002bc6;
  border-radius: 45px;
  color: #002bc6;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-transform: lowercase;
  cursor: pointer;
}

.lo-post-card__addcomment:hover { background: #002bc6; color: #ffffff; }


/* ---- Skeleton loader + deep-link flash ---- */
.lo-skeleton {
  background: linear-gradient(90deg, #eef1f6 25%, #e3e8f1 37%, #eef1f6 63%);
  background-size: 400% 100%;
  animation: lo-shimmer 1.4s ease infinite;
}

@keyframes lo-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.lo-post-skeleton { display: flex; flex-direction: column; gap: 16px; }
.lo-post-skeleton__row { display: flex; gap: 16px; align-items: flex-start; }
.lo-post-skeleton__avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; }
.lo-post-skeleton__lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.lo-post-skeleton__line { height: 12px; border-radius: 6px; }
.lo-post-skeleton__line--short { width: 35%; }
.lo-post-skeleton__line--long { width: 88%; }

.lo-post-card--flash { animation: lo-post-flash 2.4s ease; }
@keyframes lo-post-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 43, 198, 0); }
  15%      { box-shadow: 0 0 0 3px rgba(0, 43, 198, 0.35); }
}

/* Image placeholder shimmer until the photo paints over it */
.lo-post-card__image {
  background: linear-gradient(90deg, #eef1f6 25%, #e3e8f1 37%, #eef1f6 63%);
  background-size: 400% 100%;
  animation: lo-shimmer 1.4s ease infinite;
}