.festival-community {
  --festival-community-brand: var(--ghost-accent-color, #e74c3c);
  --festival-community-heading: var(--color-contrast, #111);
  --festival-community-muted: var(--color-secondary, #6b7280);
  --festival-community-avatar-ring: color-mix(
    in srgb,
    var(--festival-community-brand) 14%,
    var(--color-border, rgba(0, 0, 0, 0.12)) 86%
  );
  --festival-community-avatar-bg: color-mix(
    in srgb,
    var(--festival-community-brand) 14%,
    var(--color-background, #fff) 86%
  );
  margin-top: 18px;
}

.festival-like-block .festival-community {
  width: min(100%, 12.75rem);
  display: grid;
  gap: 10px;
}

.festival-community__summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin-top: 6px;
}

.festival-community__avatars {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  min-height: 28px;
  padding-left: 1px;
  flex: 0 0 auto;
}

.festival-community__avatar-link,
.festival-community__avatar-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -4px;
  text-decoration: none;
}

.festival-community__avatar-shell:first-child,
.festival-community__avatar-link:first-child {
  margin-left: 0;
}

.festival-community__avatar {
  --avatar--size: 28px;
  --avatar--font-size: 0.72rem;
  --avatar--background-color: var(--festival-community-avatar-bg);
  --avatar--color: var(--festival-community-heading);
  --avatar-hover--background-color: color-mix(
    in srgb,
    var(--festival-community-brand) 22%,
    var(--color-background, #fff) 78%
  );
  border: 2px solid var(--color-background, #fff);
  box-shadow: 0 0 0 1px var(--festival-community-avatar-ring);
}

.festival-community__count {
  margin: 0;
  color: var(--festival-community-muted);
  font-size: 0.87rem;
  font-weight: 500;
  line-height: 1.4;
  flex: 1 1 120px;
}

.festival-community__actions {
  display: grid;
  gap: 10px;
}

.festival-community__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.62rem;
  width: 100%;
  min-height: 44px;
  padding: 0.72rem 1rem;
  border-radius: 9999px;
  border: 1px solid var(--festival-action-border, rgba(0, 0, 0, 0.12));
  background: var(--festival-action-bg, #fff);
  color: var(--festival-action-color, var(--festival-community-heading));
  font-size: var(--font-small, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--festival-action-shadow, 0 8px 18px -16px rgba(15, 23, 42, 0.24));
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    opacity 0.18s ease;
}

.festival-community__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.festival-community__action-icon svg {
  width: 18px;
  height: 18px;
}

.festival-community__action-label {
  line-height: 1.1;
}

.festival-community__action:hover,
.festival-community__action:focus-visible {
  border-color: var(--festival-action-hover-border, var(--festival-community-brand));
  background: var(--festival-action-hover-bg, var(--festival-community-avatar-bg));
  color: var(--festival-action-hover-color, var(--festival-community-brand));
  box-shadow: var(--festival-action-hover-shadow, 0 10px 22px -18px rgba(15, 23, 42, 0.18));
  transform: translateY(-1px);
}

.festival-community__action:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--festival-community-brand) 35%, transparent);
  outline-offset: 3px;
}

.festival-community__action.is-active {
  background: var(--festival-action-brand, var(--festival-community-brand));
  color: var(--festival-action-foreground, var(--color-accent-foreground, #fff));
  border-color: var(--festival-action-brand, var(--festival-community-brand));
  box-shadow: var(--festival-action-filled-shadow, 0 8px 20px color-mix(in srgb, var(--festival-community-brand) 18%, transparent));
}

.festival-community__action.is-active:hover,
.festival-community__action.is-active:focus-visible {
  background: color-mix(
    in srgb,
    var(--festival-action-brand, var(--festival-community-brand)) 86%,
    #000 14%
  );
  border-color: color-mix(
    in srgb,
    var(--festival-action-brand, var(--festival-community-brand)) 86%,
    #000 14%
  );
  color: var(--festival-action-foreground, var(--color-accent-foreground, #fff));
}

.festival-community__action[disabled],
.festival-community__action[aria-disabled="true"] {
  opacity: 0.56;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.festival-community__action[hidden] {
  display: none !important;
}

.festival-community__feedback {
  margin: 2px 0 0;
  color: var(--festival-community-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.festival-community__feedback[data-state="error"] {
  color: #b42318;
}

.festival-community__feedback[data-state="success"] {
  color: #157347;
}

@media (max-width: 991px) {
  .festival-community {
    margin-top: 14px;
  }
}

:root[data-color-scheme="dark"] .festival-community,
[data-color-scheme="dark"] .festival-community {
  --festival-community-avatar-ring: color-mix(
    in srgb,
    var(--festival-community-brand) 18%,
    rgba(255, 255, 255, 0.12) 82%
  );
  --festival-community-avatar-bg: color-mix(
    in srgb,
    var(--festival-community-brand) 18%,
    var(--color-background, #0f1115) 82%
  );
}

:root[data-color-scheme="dark"] .festival-community__avatar,
[data-color-scheme="dark"] .festival-community__avatar {
  --avatar--color: #f5f7fb;
  --avatar-hover--background-color: color-mix(
    in srgb,
    var(--festival-community-brand) 24%,
    var(--color-background, #0f1115) 76%
  );
  border-color: color-mix(
    in srgb,
    var(--color-background, #0f1115) 88%,
    rgba(255, 255, 255, 0.08) 12%
  );
}

@media (prefers-color-scheme: dark) {
  :root[data-color-scheme="system"] .festival-community,
  [data-color-scheme="system"] .festival-community {
    --festival-community-avatar-ring: color-mix(
      in srgb,
      var(--festival-community-brand) 18%,
      rgba(255, 255, 255, 0.12) 82%
    );
    --festival-community-avatar-bg: color-mix(
      in srgb,
      var(--festival-community-brand) 18%,
      var(--color-background, #0f1115) 82%
    );
  }

  :root[data-color-scheme="system"] .festival-community__avatar,
  [data-color-scheme="system"] .festival-community__avatar {
    --avatar--color: #f5f7fb;
    --avatar-hover--background-color: color-mix(
      in srgb,
      var(--festival-community-brand) 24%,
      var(--color-background, #0f1115) 76%
    );
    border-color: color-mix(
      in srgb,
      var(--color-background, #0f1115) 88%,
      rgba(255, 255, 255, 0.08) 12%
    );
  }
}