/* Shared surface and content patterns */
.hoard-kicker {
  margin: 0 0 var(--space-2);
  color: var(--color-primary-700);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hoard-kicker--wide {
  letter-spacing: 0.06em;
}

.hoard-kicker--xs {
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
}

.hoard-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hoard-panel-gradient {
  background: linear-gradient(
    var(--hoard-gradient-angle, 120deg),
    var(--hoard-gradient-start, color-mix(in srgb, var(--color-primary-100) 34%, var(--color-surface) 66%))
      0%,
    var(--hoard-gradient-end, var(--color-surface)) var(--hoard-gradient-end-stop, 52%)
  );
}

@media (width <= 960px) {
  .hoard-action-row {
    gap: var(--space-2);
  }
}

@media (width <= 600px) {
  .hoard-kicker {
    margin-bottom: var(--space-1);
  }

  .hoard-action-row {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .hoard-action-row > * {
    width: 100%;
  }
}
