/* ==========================================================================
   voting.css — topic voting callout

   A featured card: the one place on the page that uses the rotating conic
   border, so it reads as the most active invitation in the flow.
   ========================================================================== */

.voting {
  position: relative;
}

.voting__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-7);
  align-items: center;
  padding: var(--ds-space-7);
  border-radius: var(--ds-radius-card);
  /* Two backgrounds: a flat fill clipped to the padding box, and the conic
     sweep on the border box. Only the 1px rim of the gradient shows. */
  background:
    linear-gradient(var(--ds-color-bg-page), var(--ds-color-bg-page)) padding-box,
    conic-gradient(
        from var(--border-angle),
        transparent 0%,
        var(--ds-color-brand) 10%,
        var(--purple-50) 22%,
        var(--magenta-50) 32%,
        transparent 45%,
        transparent 100%
      )
      border-box;
  border: var(--ds-border-width) solid transparent;
  animation: rotating-border 8s linear infinite;
}

/* A soft inner glow so the card is not just an outlined box */
.voting__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 70% 100% at 15% 0%,
    rgba(103, 153, 254, 0.12) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.voting__inner > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 900px) {
  .voting__inner {
    grid-template-columns: 52fr 48fr;
    gap: var(--ds-space-9);
    padding: var(--ds-space-9);
  }
}

.voting__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-4);
}

.voting__heading {
  font-family: var(--ds-font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .voting__heading {
    font-size: 36px;
  }
}

.voting__text {
  max-width: 52ch;
  font-size: 16px;
  line-height: 170%;
  color: var(--ds-color-text-description);
}

.voting__window {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 6px var(--ds-space-3);
  border: var(--ds-border-width) solid
    color-mix(in srgb, var(--ds-color-brand) 40%, transparent);
  border-radius: var(--ds-radius-pill);
  font-family: var(--ds-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-color-brand);
}

/* Pulsing dot, signalling that voting is open right now */
.voting__window::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--ds-color-brand);
  animation: voting-pulse 2s var(--ds-ease-in-out) infinite;
}

@keyframes voting-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.75);
  }
}

.voting__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-2);
}

.voting__figure {
  margin: 0;
  overflow: hidden;
  border: var(--ds-border-width) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-panel);
  background-color: var(--ds-color-bg-surface-3);
}

.voting__figure img {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .voting__inner {
    animation: none;
    /* Without the sweep, give the card a plain visible border */
    background: var(--ds-color-bg-surface-3);
    border-color: var(--ds-color-border-hover);
  }

  .voting__window::before {
    animation: none;
  }
}