/* ==========================================================================
   Like button — The Sri COM
   Sits directly under the featured image, above the article text.
   Markup: partials/like-button.hbs
   ========================================================================== */

.like-bar {
  --like-line: rgba(180, 204, 237, .18);
  --like-text: #d8e3f4;
  --like-muted: #8ea2bd;
  --like-brand: #2475e8;
  --like-heart: #e2445c;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 760px;
  /* No top rule here: the featured image already supplies the break, and a
     divider directly under it would read as a second frame edge. */
  margin: 0 auto 30px;
}

html[data-theme="light"] .like-bar {
  --like-line: #dce4ef;
  --like-text: #243753;
  --like-muted: #60738b;
}

.like-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--like-line);
  border-radius: 99px;
  background: transparent;
  color: var(--like-text);
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}

.like-button:hover {
  border-color: var(--like-brand);
  color: var(--like-brand);
}

.like-button:focus-visible {
  outline: 3px solid var(--like-brand);
  outline-offset: 3px;
}

.like-heart {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
  transition: transform .25s ease, fill .25s ease, stroke .25s ease;
}

/* Liked state — the heart fills in and the pill picks up the accent. */
.like-button.is-liked {
  border-color: var(--like-heart);
  background: rgba(226, 68, 92, .1);
  color: var(--like-heart);
}

.like-button.is-liked .like-heart {
  fill: var(--like-heart);
  stroke: var(--like-heart);
}

.like-button.is-pulsing .like-heart { animation: like-pop .32s ease; }

@keyframes like-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.32); }
  100% { transform: scale(1); }
}

.like-count {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.like-count:empty { display: none; }

.like-hint {
  margin: 0;
  color: var(--like-muted);
  font-size: .82rem;
}

@media (max-width: 620px) {
  .like-bar {
    margin-bottom: 24px;
    gap: 12px;
  }

  .like-hint { font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .like-button.is-pulsing .like-heart { animation: none; }
  .like-heart { transition: none; }
}